Infra-Mirrors/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-08-25 11:45:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Reformatted sortable toolbox components

Browse Source
This commit is contained in:
Dan Brown 2017-09-02 15:06:52 +01:00
parent 9bd5d6a422
commit 1c9ecc3edd
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
3 changed files with 66 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
resources/assets/sass/_blocks.scss
View File

@ -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 {
background-color: #F8F8F8;
padding: $-m;

14
resources/assets/sass/_tables.scss
View File

@ -57,18 +57,4 @@ table.list-table {
vertical-align: middle;
padding: $-xs;
}
}
.fake-table {
display: table;
width: 100%;
> div {
display: table-row-group;
}
> div > div {
display: table-row;
}
> div > div > div {
display: table-cell;
}
}

56
resources/views/pages/form-toolbox.blade.php
View File

@ -14,34 +14,23 @@
<div class="padded tags">
<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">
<div v-for="(tag, i) in tags" :key="tag.key">
<div width="20" class="handle" ><i class="zmdi zmdi-menu"></i></div>
<div>
<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') }}"/>
</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>
<draggable :options="{handle: '.handle'}" :list="tags" element="div">
<div v-for="(tag, i) in tags" :key="tag.key" class="card drag-card">
<div class="handle" ><i class="zmdi zmdi-menu"></i></div>
<div>
<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') }}"/>
</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>
<table class="no-style" style="width: 100%;">
<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>
<button @click="addEmptyTag" type="button" class="text-button">{{ trans('entities.tags_add') }}</button>
</div>
</div>
@ -61,11 +50,10 @@
<div @click="tab = 'link'" :class="{selected: tab === 'link'}" class="tab-item">{{ trans('entities.attachments_link') }}</div>
</div>
<div v-show="tab === 'list'">
<draggable class="fake-table no-style " 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">
<div width="20" ><i class="handle zmdi zmdi-menu"></i></div>
<div>
<draggable style="width: 100%;" :options="{handle: '.handle'}" @change="fileSortUpdate" :list="files" element="div">
<div v-for="(file, index) in files" :key="file.id" class="card drag-card">
<div class="handle"><i class="zmdi zmdi-menu"></i></div>
<div class="padded">
<a :href="getFileUrl(file)" target="_blank" v-text="file.name"></a>
<div v-if="file.deleting">
<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>
</div>
</div>
<div width="10" @click="startEdit(file)" class="text-center text-primary" style="padding: 0;"><i class="zmdi zmdi-edit"></i></div>
<div width="5"></div>
<div width="10" @click="deleteFile(file)" class="text-center text-neg" style="padding: 0;"><i class="zmdi zmdi-close"></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 @click="deleteFile(file)" class="drag-card-action text-center text-neg" style="padding: 0;"><i class="zmdi zmdi-close"></i></div>
</div>
</transition-group>
</draggable>
<p class="small muted" v-if="files.length === 0">
{{ trans('entities.attachments_no_files') }}
@ -132,7 +118,7 @@
</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>
</div>