optimized ux of area designer

pull/49/head
A1Gard 2 months ago
parent 9809517250
commit 319a64a748

@ -6,11 +6,37 @@
<span v-if="p !== 0" class="btn btn-secondary btn-sm float-end mx-1" @click="shiftArray(p,-1)"> <span v-if="p !== 0" class="btn btn-secondary btn-sm float-end mx-1" @click="shiftArray(p,-1)">
<i class="ri-arrow-up-line"></i> <i class="ri-arrow-up-line"></i>
</span> </span>
<span v-if="p != partsData.length - 1" class="btn btn-secondary btn-sm float-end mx-1" @click="shiftArray(p,1)"> <span v-if="p != partsData.length - 1" class="btn btn-secondary btn-sm float-end mx-1"
@click="shiftArray(p,1)">
<i class="ri-arrow-down-line"></i> <i class="ri-arrow-down-line"></i>
</span> </span>
</div> </div>
<div class="part-body"> <div class="part-body">
<div class="row text-center">
<div class="col">
<button type="button" class="btn btn-secondary mt-4" @click="activeIndex = p">
<i class="ri-edit-2-line"></i>
</button>
</div>
<div class="col-6">
<div class="text-center">
<template v-for="(valid,i) in valids">
<div v-if="valid.data.name == part.part">
<img class="img-fluid" :src="imageLink+'/'+valid.segment+'/'+valid.part"
alt="screeshot">
</div>
</template>
</div>
</div>
<div class="col">
<button type="button" class="btn btn-danger mt-4" @click="rem(p)">
<i class="ri-close-line"></i>
</button>
</div>
</div>
<div v-if="p == activeIndex">
<hr>
<div class="rw"> <div class="rw">
<template v-for="(valid,i) in valids"> <template v-for="(valid,i) in valids">
<div @click="changePart(p,valid.segment,valid.part)" <div @click="changePart(p,valid.segment,valid.part)"
@ -22,10 +48,6 @@
</template> </template>
</div> </div>
</div> </div>
<div class="card-footer">
<button type="button" class="btn btn-danger" @click="rem(p)">
<i class="ri-close-line"></i>
</button>
</div> </div>
<input type="hidden" name="parts[]" :value="JSON.stringify(part)" class="form-control"> <input type="hidden" name="parts[]" :value="JSON.stringify(part)" class="form-control">
</div> </div>
@ -46,6 +68,7 @@ export default {
return { return {
partsData: [], partsData: [],
removed: [], removed: [],
activeIndex: null,
} }
}, },
props: { props: {
@ -127,6 +150,7 @@ export default {
.rw { .rw {
column-count: 3; column-count: 3;
div { div {
margin-bottom: 1rem; margin-bottom: 1rem;
} }

Loading…
Cancel
Save