misc: admin vuetify 2.0 UI + arabic display improvements
This commit is contained in:
@@ -3,19 +3,19 @@
|
||||
v-container.pa-3(grid-list-lg, fluid)
|
||||
v-layout(row, wrap)
|
||||
v-flex(xs12, lg9)
|
||||
v-card.radius-7.animated.fadeInLeft.wait-p1s(:light='!$vuetify.dark', :dark='$vuetify.dark')
|
||||
v-card.radius-7.animated.fadeInLeft.wait-p1s(:light='!$vuetify.theme.dark', :dark='$vuetify.theme.dark')
|
||||
v-card-text
|
||||
.d-flex
|
||||
v-toolbar.radius-7(:color='$vuetify.dark ? `teal` : `teal lighten-5`', dense, flat, height='44')
|
||||
.body-2(:class='$vuetify.dark ? `white--text` : `teal--text`') {{$t('editor:assets.title')}}
|
||||
v-toolbar.radius-7(:color='$vuetify.theme.dark ? `teal` : `teal lighten-5`', dense, flat, height='44')
|
||||
.body-2(:class='$vuetify.theme.dark ? `white--text` : `teal--text`') {{$t('editor:assets.title')}}
|
||||
v-spacer
|
||||
v-btn(flat, icon, @click='refresh', tile, small)
|
||||
v-icon(:color='$vuetify.dark ? `white` : `teal`') mdi-refresh
|
||||
v-icon(:color='$vuetify.theme.dark ? `white` : `teal`') mdi-refresh
|
||||
v-dialog(v-model='newFolderDialog', max-width='550')
|
||||
template(v-slot:activator='{ on }')
|
||||
v-btn.ml-3.my-0.mr-0.radius-7(outlined, large, color='teal', :icon='$vuetify.breakpoint.xsOnly', v-on='on')
|
||||
v-icon(:left='$vuetify.breakpoint.mdAndUp') mdi-plus
|
||||
span.hidden-sm-and-down(:class='$vuetify.dark ? `teal--text text--lighten-3` : ``') {{$t('editor:assets.newFolder')}}
|
||||
span.hidden-sm-and-down(:class='$vuetify.theme.dark ? `teal--text text--lighten-3` : ``') {{$t('editor:assets.newFolder')}}
|
||||
v-card
|
||||
.dialog-header.is-short.subtitle-1 {{$t('editor:assets.newFolder')}}
|
||||
v-card-text
|
||||
@@ -35,7 +35,7 @@
|
||||
v-spacer
|
||||
v-btn(text, @click='newFolderDialog = false') {{$t('common:actions.cancel')}}
|
||||
v-btn.px-3(color='primary', @click='createFolder', :disabled='!isFolderNameValid', :loading='newFolderLoading') {{$t('common:actions.create')}}
|
||||
v-toolbar(flat, dense, :color='$vuetify.dark ? `grey darken-3` : `white`')
|
||||
v-toolbar(flat, dense, :color='$vuetify.theme.dark ? `grey darken-3` : `white`')
|
||||
template(v-if='folderTree.length > 0')
|
||||
.body-2
|
||||
span.mr-1 /
|
||||
@@ -44,7 +44,7 @@
|
||||
span.mx-1 /
|
||||
.body-2(v-else) / #[em root]
|
||||
template(v-if='folders.length > 0 || currentFolderId > 0')
|
||||
v-btn.is-icon.mx-1(:color='$vuetify.dark ? `grey lighten-1` : `grey darken-2`', outlined, :dark='currentFolderId > 0', @click='upFolder()', :disabled='currentFolderId === 0')
|
||||
v-btn.is-icon.mx-1(:color='$vuetify.theme.dark ? `grey lighten-1` : `grey darken-2`', outlined, :dark='currentFolderId > 0', @click='upFolder()', :disabled='currentFolderId === 0')
|
||||
v-icon mdi-folder-upload
|
||||
v-btn.btn-normalcase.mx-1(v-for='folder of folders', :key='folder.id', depressed, color='grey darken-2', dark, @click='downFolder(folder)')
|
||||
v-icon(left) mdi-folder
|
||||
@@ -64,14 +64,14 @@
|
||||
tr.is-clickable(
|
||||
@click.left='currentFileId = props.item.id'
|
||||
@click.right.prevent=''
|
||||
:class='currentFileId === props.item.id ? ($vuetify.dark ? `grey darken-3-d5` : `teal lighten-5`) : ``'
|
||||
:class='currentFileId === props.item.id ? ($vuetify.theme.dark ? `grey darken-3-d5` : `teal lighten-5`) : ``'
|
||||
)
|
||||
td.text-xs-right(v-if='$vuetify.breakpoint.smAndUp') {{ props.item.id }}
|
||||
td
|
||||
.body-2(:class='currentFileId === props.item.id ? `teal--text` : ``') {{ props.item.filename }}
|
||||
.caption.grey--text {{ props.item.description }}
|
||||
td.text-xs-center(v-if='$vuetify.breakpoint.lgAndUp')
|
||||
v-chip.ma-0(small, :color='$vuetify.dark ? `grey darken-4` : `grey lighten-4`')
|
||||
v-chip.ma-0(small, :color='$vuetify.theme.dark ? `grey darken-4` : `grey lighten-4`')
|
||||
.caption {{props.item.ext.toUpperCase().substring(1)}}
|
||||
td(v-if='$vuetify.breakpoint.mdAndUp') {{ props.item.fileSize | prettyBytes }}
|
||||
td(v-if='$vuetify.breakpoint.mdAndUp') {{ props.item.createdAt | moment('from') }}
|
||||
@@ -115,22 +115,22 @@
|
||||
.text-xs-center.py-2(v-if='this.pageTotal > 1')
|
||||
v-pagination(v-model='pagination', :length='pageTotal', color='teal')
|
||||
.d-flex.mt-3
|
||||
v-toolbar.radius-7(flat, :color='$vuetify.dark ? `grey darken-2` : `grey lighten-4`', dense, height='44')
|
||||
.body-2(:class='$vuetify.dark ? `grey--text text--lighten-1` : `grey--text text--darken-1`') {{$t('editor:assets.fileCount', { count: assets.length })}}
|
||||
v-toolbar.radius-7(flat, :color='$vuetify.theme.dark ? `grey darken-2` : `grey lighten-4`', dense, height='44')
|
||||
.body-2(:class='$vuetify.theme.dark ? `grey--text text--lighten-1` : `grey--text text--darken-1`') {{$t('editor:assets.fileCount', { count: assets.length })}}
|
||||
v-btn.ml-3.mr-0.my-0.radius-7(color='teal', large, @click='insert', :disabled='!currentFileId', :dark='currentFileId !== null')
|
||||
v-icon(left) mdi-playlist-plus
|
||||
span {{$t('common:actions.insert')}}
|
||||
|
||||
v-flex(xs12, lg3)
|
||||
v-card.radius-7.animated.fadeInRight.wait-p3s(:light='!$vuetify.dark', :dark='$vuetify.dark')
|
||||
v-card.radius-7.animated.fadeInRight.wait-p3s(:light='!$vuetify.theme.dark', :dark='$vuetify.theme.dark')
|
||||
v-card-text
|
||||
.d-flex
|
||||
v-toolbar.radius-7(:color='$vuetify.dark ? `teal` : `teal lighten-5`', dense, flat, height='44')
|
||||
v-icon.mr-3(:color='$vuetify.dark ? `white` : `teal`') mdi-cloud-upload
|
||||
.body-2(:class='$vuetify.dark ? `white--text` : `teal--text`') {{$t('editor:assets.uploadAssets')}}
|
||||
v-toolbar.radius-7(:color='$vuetify.theme.dark ? `teal` : `teal lighten-5`', dense, flat, height='44')
|
||||
v-icon.mr-3(:color='$vuetify.theme.dark ? `white` : `teal`') mdi-cloud-upload
|
||||
.body-2(:class='$vuetify.theme.dark ? `white--text` : `teal--text`') {{$t('editor:assets.uploadAssets')}}
|
||||
v-btn.my-0.ml-3.mr-0.radius-7(outlined, large, color='teal', @click='browse', v-if='$vuetify.breakpoint.mdAndUp')
|
||||
v-icon(left) mdi-library-plus
|
||||
span(:class='$vuetify.dark ? `teal--text text--lighten-3` : ``') {{$t('common:actions.browse')}}
|
||||
span(:class='$vuetify.theme.dark ? `teal--text text--lighten-3` : ``') {{$t('common:actions.browse')}}
|
||||
file-pond.mt-3(
|
||||
name='mediaUpload'
|
||||
ref='pond'
|
||||
@@ -149,11 +149,11 @@
|
||||
v-spacer
|
||||
v-btn.px-4(color='teal', dark, @click='upload') {{$t('common:actions.upload')}}
|
||||
|
||||
v-card.mt-3.radius-7.animated.fadeInRight.wait-p4s(:light='!$vuetify.dark', :dark='$vuetify.dark')
|
||||
v-card.mt-3.radius-7.animated.fadeInRight.wait-p4s(:light='!$vuetify.theme.dark', :dark='$vuetify.theme.dark')
|
||||
v-card-text.pb-0
|
||||
v-toolbar.radius-7(:color='$vuetify.dark ? `teal` : `teal lighten-5`', dense, flat)
|
||||
v-icon.mr-3(:color='$vuetify.dark ? `white` : `teal`') mdi-cloud-download
|
||||
.body-2(:class='$vuetify.dark ? `white--text` : `teal--text`') {{$t('editor:assets.fetchImage')}}
|
||||
v-toolbar.radius-7(:color='$vuetify.theme.dark ? `teal` : `teal lighten-5`', dense, flat)
|
||||
v-icon.mr-3(:color='$vuetify.theme.dark ? `white` : `teal`') mdi-cloud-download
|
||||
.body-2(:class='$vuetify.theme.dark ? `white--text` : `teal--text`') {{$t('editor:assets.fetchImage')}}
|
||||
v-spacer
|
||||
v-chip(label, color='white', small).teal--text coming soon
|
||||
v-text-field.mt-3(
|
||||
@@ -169,11 +169,11 @@
|
||||
v-spacer
|
||||
v-btn.px-4(color='teal', disabled) {{$t('common:actions.fetch')}}
|
||||
|
||||
v-card.mt-3.radius-7.animated.fadeInRight.wait-p4s(:light='!$vuetify.dark', :dark='$vuetify.dark')
|
||||
v-card.mt-3.radius-7.animated.fadeInRight.wait-p4s(:light='!$vuetify.theme.dark', :dark='$vuetify.theme.dark')
|
||||
v-card-text.pb-0
|
||||
v-toolbar.radius-7(:color='$vuetify.dark ? `teal` : `teal lighten-5`', dense, flat)
|
||||
v-icon.mr-3(:color='$vuetify.dark ? `white` : `teal`') mdi-format-align-top
|
||||
.body-2(:class='$vuetify.dark ? `white--text` : `teal--text`') {{$t('editor:assets.imageAlign')}}
|
||||
v-toolbar.radius-7(:color='$vuetify.theme.dark ? `teal` : `teal lighten-5`', dense, flat)
|
||||
v-icon.mr-3(:color='$vuetify.theme.dark ? `white` : `teal`') mdi-format-align-top
|
||||
.body-2(:class='$vuetify.theme.dark ? `white--text` : `teal--text`') {{$t('editor:assets.imageAlign')}}
|
||||
v-select.mt-3(
|
||||
v-model='imageAlignment'
|
||||
:items='imageAlignments'
|
||||
|
Reference in New Issue
Block a user