Reformatted sortable toolbox components
This commit is contained in:
Dan Brown
parent
9bd5d6a422
commit
1c9ecc3edd
|
|
@ -200,6 +200,51 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card.drag-card {
|
||||||
|
border: 1px solid #DDD;
|
||||||
|
border-radius: 4px;
|
||||||
|
display: flex;
|
||||||
|
padding: 0;
|
||||||
|
padding-left: $-s + 28px;
|
||||||
|
margin: $-s 0;
|
||||||
|
position: relative;
|
||||||
|
.drag-card-action {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.handle, .drag-card-action {
|
||||||
|
display: flex;
|
||||||
|
padding: 0;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
width: 28px;
|
||||||
|
padding-left: $-xs;
|
||||||
|
padding-right: $-xs;
|
||||||
|
&:hover {
|
||||||
|
background-color: #EEE;
|
||||||
|
}
|
||||||
|
i {
|
||||||
|
flex: 1;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> div .outline input {
|
||||||
|
margin: $-s 0;
|
||||||
|
}
|
||||||
|
> div.padded {
|
||||||
|
padding: $-s 0 !important;
|
||||||
|
}
|
||||||
|
.handle {
|
||||||
|
background-color: #EEE;
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
> div {
|
||||||
|
padding: 0 $-s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.well {
|
.well {
|
||||||
background-color: #F8F8F8;
|
background-color: #F8F8F8;
|
||||||
padding: $-m;
|
padding: $-m;
|
||||||
|
|
|
||||||
|
|
@ -57,18 +57,4 @@ table.list-table {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
padding: $-xs;
|
padding: $-xs;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.fake-table {
|
|
||||||
display: table;
|
|
||||||
width: 100%;
|
|
||||||
> div {
|
|
||||||
display: table-row-group;
|
|
||||||
}
|
|
||||||
> div > div {
|
|
||||||
display: table-row;
|
|
||||||
}
|
|
||||||
> div > div > div {
|
|
||||||
display: table-cell;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
@ -14,34 +14,23 @@
|
||||||
<div class="padded tags">
|
<div class="padded tags">
|
||||||
<p class="muted small">{!! nl2br(e(trans('entities.tags_explain'))) !!}</p>
|
<p class="muted small">{!! nl2br(e(trans('entities.tags_explain'))) !!}</p>
|
||||||
|
|
||||||
<draggable class="fake-table no-style tag-table" :options="{handle: '.handle'}" :list="tags" element="div">
|
|
||||||
<transition-group tag="div">
|
<draggable :options="{handle: '.handle'}" :list="tags" element="div">
|
||||||
<div v-for="(tag, i) in tags" :key="tag.key">
|
<div v-for="(tag, i) in tags" :key="tag.key" class="card drag-card">
|
||||||
<div width="20" class="handle" ><i class="zmdi zmdi-menu"></i></div>
|
<div class="handle" ><i class="zmdi zmdi-menu"></i></div>
|
||||||
<div>
|
<div>
|
||||||
<autosuggest url="/ajax/tags/suggest/names" type="name" class="outline" :name="getTagFieldName(i, 'name')"
|
<autosuggest url="/ajax/tags/suggest/names" type="name" class="outline" :name="getTagFieldName(i, 'name')"
|
||||||
v-model="tag.name" @input="tagChange(tag)" @blur="tagBlur(tag)" placeholder="{{ trans('entities.tag') }}"/>
|
v-model="tag.name" @input="tagChange(tag)" @blur="tagBlur(tag)" placeholder="{{ trans('entities.tag') }}"/>
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<autosuggest url="/ajax/tags/suggest/values" type="value" class="outline" :name="getTagFieldName(i, 'value')"
|
|
||||||
v-model="tag.value" @change="tagChange(tag)" @blur="tagBlur(tag)" placeholder="{{ trans('entities.tag') }}"/>
|
|
||||||
</div>
|
|
||||||
<div width="10" v-show="tags.length !== 1" class="text-center text-neg" style="padding: 0;" @click="removeTag(tag)"><i class="zmdi zmdi-close"></i></div>
|
|
||||||
</div>
|
</div>
|
||||||
</transition-group>
|
<div>
|
||||||
|
<autosuggest url="/ajax/tags/suggest/values" type="value" class="outline" :name="getTagFieldName(i, 'value')"
|
||||||
|
v-model="tag.value" @change="tagChange(tag)" @blur="tagBlur(tag)" placeholder="{{ trans('entities.tag_value') }}"/>
|
||||||
|
</div>
|
||||||
|
<div v-show="tags.length !== 1" class="text-center drag-card-action text-neg" @click="removeTag(tag)"><i class="zmdi zmdi-close"></i></div>
|
||||||
|
</div>
|
||||||
</draggable>
|
</draggable>
|
||||||
|
|
||||||
<table class="no-style" style="width: 100%;">
|
<button @click="addEmptyTag" type="button" class="text-button">{{ trans('entities.tags_add') }}</button>
|
||||||
<tbody>
|
|
||||||
<tr class="unsortable">
|
|
||||||
<td width="34"></td>
|
|
||||||
<td @click="addEmptyTag">
|
|
||||||
<button type="button" class="text-button">{{ trans('entities.tags_add') }}</button>
|
|
||||||
</td>
|
|
||||||
<td></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -61,11 +50,10 @@
|
||||||
<div @click="tab = 'link'" :class="{selected: tab === 'link'}" class="tab-item">{{ trans('entities.attachments_link') }}</div>
|
<div @click="tab = 'link'" :class="{selected: tab === 'link'}" class="tab-item">{{ trans('entities.attachments_link') }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-show="tab === 'list'">
|
<div v-show="tab === 'list'">
|
||||||
<draggable class="fake-table no-style " style="width: 100%;" :options="{handle: '.handle'}" @change="fileSortUpdate" :list="files" element="div">
|
<draggable style="width: 100%;" :options="{handle: '.handle'}" @change="fileSortUpdate" :list="files" element="div">
|
||||||
<transition-group tag="div">
|
<div v-for="(file, index) in files" :key="file.id" class="card drag-card">
|
||||||
<div v-for="(file, index) in files" :key="file.id">
|
<div class="handle"><i class="zmdi zmdi-menu"></i></div>
|
||||||
<div width="20" ><i class="handle zmdi zmdi-menu"></i></div>
|
<div class="padded">
|
||||||
<div>
|
|
||||||
<a :href="getFileUrl(file)" target="_blank" v-text="file.name"></a>
|
<a :href="getFileUrl(file)" target="_blank" v-text="file.name"></a>
|
||||||
<div v-if="file.deleting">
|
<div v-if="file.deleting">
|
||||||
<span class="neg small">{{ trans('entities.attachments_delete_confirm') }}</span>
|
<span class="neg small">{{ trans('entities.attachments_delete_confirm') }}</span>
|
||||||
|
|
@ -73,11 +61,9 @@
|
||||||
<span class="text-primary small" @click="file.deleting = false;">{{ trans('common.cancel') }}</span>
|
<span class="text-primary small" @click="file.deleting = false;">{{ trans('common.cancel') }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div width="10" @click="startEdit(file)" class="text-center text-primary" style="padding: 0;"><i class="zmdi zmdi-edit"></i></div>
|
<div @click="startEdit(file)" class="drag-card-action text-center text-primary" style="padding: 0;"><i class="zmdi zmdi-edit"></i></div>
|
||||||
<div width="5"></div>
|
<div @click="deleteFile(file)" class="drag-card-action text-center text-neg" style="padding: 0;"><i class="zmdi zmdi-close"></i></div>
|
||||||
<div width="10" @click="deleteFile(file)" class="text-center text-neg" style="padding: 0;"><i class="zmdi zmdi-close"></i></div>
|
|
||||||
</div>
|
</div>
|
||||||
</transition-group>
|
|
||||||
</draggable>
|
</draggable>
|
||||||
<p class="small muted" v-if="files.length === 0">
|
<p class="small muted" v-if="files.length === 0">
|
||||||
{{ trans('entities.attachments_no_files') }}
|
{{ trans('entities.attachments_no_files') }}
|
||||||
|
|
@ -132,7 +118,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button type="button" class="button" @click="cancelEdit">{{ trans('common.back') }}</button>
|
<button type="button" class="button outline" @click="cancelEdit">{{ trans('common.back') }}</button>
|
||||||
<button @click.enter.prevent="updateFile(fileToEdit)" class="button pos">{{ trans('common.save') }}</button>
|
<button @click.enter.prevent="updateFile(fileToEdit)" class="button pos">{{ trans('common.save') }}</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue