From 577a06103309d3df800095b125ed20ed7a61a862 Mon Sep 17 00:00:00 2001 From: Nick Date: Sat, 10 Aug 2019 12:18:14 -0400 Subject: [PATCH] misc: admin vuetify 2.0 UI + arabic display improvements --- client/components/admin/admin-auth.vue | 2 +- client/components/admin/admin-contribute.vue | 1 + client/components/admin/admin-dashboard.vue | 4 +- client/components/admin/admin-general.vue | 2 +- .../admin/admin-groups-edit-permissions.vue | 4 +- .../admin/admin-groups-edit-rules.vue | 20 ++-- .../admin/admin-groups-edit-users.vue | 2 +- client/components/admin/admin-groups-edit.vue | 2 +- client/components/admin/admin-locale.vue | 6 +- client/components/admin/admin-pages-edit.vue | 107 +++++++++--------- client/components/admin/admin-pages.vue | 24 ++-- client/components/admin/admin-storage.vue | 6 +- client/components/admin/admin-system.vue | 2 +- client/components/admin/admin-theme.vue | 2 +- client/components/admin/admin-users.vue | 2 +- client/components/common/duration-picker.vue | 2 +- client/components/common/nav-header.vue | 18 +-- client/components/common/user-search.vue | 2 +- .../components/editor/editor-modal-media.vue | 48 ++++---- client/index-app.js | 10 ++ client/scss/app.scss | 3 - client/scss/base/fonts.scss | 55 --------- client/scss/fonts/arabic.scss | 43 +++++++ client/scss/fonts/default.scss | 55 +++++++++ client/scss/legacy.scss | 1 - .../static/fonts/MaterialIcons-Regular.woff | Bin 79612 -> 0 bytes .../static/fonts/MaterialIcons-Regular.woff2 | Bin 60832 -> 0 bytes .../fonts/arabic/BalooBhaijaan-Regular.woff | Bin 0 -> 105072 bytes .../fonts/arabic/BalooBhaijaan-Regular.woff2 | Bin 0 -> 71140 bytes client/static/fonts/arabic/Tajawal-Bold.woff | Bin 0 -> 46488 bytes client/static/fonts/arabic/Tajawal-Bold.woff2 | Bin 0 -> 35252 bytes .../static/fonts/arabic/Tajawal-Medium.woff | Bin 0 -> 45512 bytes .../static/fonts/arabic/Tajawal-Medium.woff2 | Bin 0 -> 34360 bytes .../static/fonts/arabic/Tajawal-Regular.woff | Bin 0 -> 43736 bytes .../static/fonts/arabic/Tajawal-Regular.woff2 | Bin 0 -> 33120 bytes .../fonts/{ => default}/Roboto-Bold.woff | Bin .../fonts/{ => default}/Roboto-Bold.woff2 | Bin .../{ => default}/Roboto-BoldItalic.woff | Bin .../{ => default}/Roboto-BoldItalic.woff2 | Bin .../fonts/{ => default}/Roboto-Italic.woff | Bin .../fonts/{ => default}/Roboto-Italic.woff2 | Bin .../fonts/{ => default}/Roboto-Medium.woff | Bin .../fonts/{ => default}/Roboto-Medium.woff2 | Bin .../{ => default}/Roboto-MediumItalic.woff | Bin .../{ => default}/Roboto-MediumItalic.woff2 | Bin .../fonts/{ => default}/Roboto-Regular.woff | Bin .../fonts/{ => default}/Roboto-Regular.woff2 | Bin .../{ => default}/RobotoMono-Regular.woff | Bin .../{ => default}/RobotoMono-Regular.woff2 | Bin dev/templates/master.pug | 2 +- server/views/legacy/master.pug | 7 -- server/views/master.pug | 9 +- 52 files changed, 239 insertions(+), 202 deletions(-) delete mode 100644 client/scss/base/fonts.scss create mode 100644 client/scss/fonts/arabic.scss create mode 100644 client/scss/fonts/default.scss delete mode 100644 client/static/fonts/MaterialIcons-Regular.woff delete mode 100644 client/static/fonts/MaterialIcons-Regular.woff2 create mode 100644 client/static/fonts/arabic/BalooBhaijaan-Regular.woff create mode 100644 client/static/fonts/arabic/BalooBhaijaan-Regular.woff2 create mode 100644 client/static/fonts/arabic/Tajawal-Bold.woff create mode 100644 client/static/fonts/arabic/Tajawal-Bold.woff2 create mode 100644 client/static/fonts/arabic/Tajawal-Medium.woff create mode 100644 client/static/fonts/arabic/Tajawal-Medium.woff2 create mode 100644 client/static/fonts/arabic/Tajawal-Regular.woff create mode 100644 client/static/fonts/arabic/Tajawal-Regular.woff2 rename client/static/fonts/{ => default}/Roboto-Bold.woff (100%) rename client/static/fonts/{ => default}/Roboto-Bold.woff2 (100%) rename client/static/fonts/{ => default}/Roboto-BoldItalic.woff (100%) rename client/static/fonts/{ => default}/Roboto-BoldItalic.woff2 (100%) rename client/static/fonts/{ => default}/Roboto-Italic.woff (100%) rename client/static/fonts/{ => default}/Roboto-Italic.woff2 (100%) rename client/static/fonts/{ => default}/Roboto-Medium.woff (100%) rename client/static/fonts/{ => default}/Roboto-Medium.woff2 (100%) rename client/static/fonts/{ => default}/Roboto-MediumItalic.woff (100%) rename client/static/fonts/{ => default}/Roboto-MediumItalic.woff2 (100%) rename client/static/fonts/{ => default}/Roboto-Regular.woff (100%) rename client/static/fonts/{ => default}/Roboto-Regular.woff2 (100%) rename client/static/fonts/{ => default}/RobotoMono-Regular.woff (100%) rename client/static/fonts/{ => default}/RobotoMono-Regular.woff2 (100%) diff --git a/client/components/admin/admin-auth.vue b/client/components/admin/admin-auth.vue index fd401576..5b6bdbb6 100644 --- a/client/components/admin/admin-auth.vue +++ b/client/components/admin/admin-auth.vue @@ -198,7 +198,7 @@ i18next(path='admin:auth.siteUrlNotSetup', tag='span') strong(place='siteUrl') {{$t('admin:general.siteUrl')}} strong(place='general') {{$t('admin:general.title')}} - .pa-3.mt-3.radius-7.grey(v-else, :class='$vuetify.dark ? `darken-3-d5` : `lighten-3`') + .pa-3.mt-3.radius-7.grey(v-else, :class='$vuetify.theme.dark ? `darken-3-d5` : `lighten-3`') .body-2: strong {{$t('admin:auth.allowedWebOrigins')}} .body-2 {{host}} v-divider.my-3 diff --git a/client/components/admin/admin-contribute.vue b/client/components/admin/admin-contribute.vue index 15eaf037..619d8054 100644 --- a/client/components/admin/admin-contribute.vue +++ b/client/components/admin/admin-contribute.vue @@ -252,6 +252,7 @@ export default { margin-bottom: 12px; border-radius: 7px; background-color: mc('grey', '100'); + color: mc('grey', '700'); padding: 12px; strong { diff --git a/client/components/admin/admin-dashboard.vue b/client/components/admin/admin-dashboard.vue index c854b31f..903cfcdb 100644 --- a/client/components/admin/admin-dashboard.vue +++ b/client/components/admin/admin-dashboard.vue @@ -45,7 +45,7 @@ :class='isLatestVersion ? "teal lighten-2" : "red lighten-2"' dark ) - v-btn.btn-animate-wrench(fab, absolute, right, top, small, light, to='system', v-if='hasPermission(`manage:system`)') + v-btn.btn-animate-wrench(fab, absolute, :right='!$vuetify.rtl', :left='$vuetify.rtl', top, small, light, to='system', v-if='hasPermission(`manage:system`)') v-icon(:color='isLatestVersion ? `teal` : `red darken-4`', small) mdi-wrench v-card-text v-icon.dashboard-icon mdi-blur @@ -95,7 +95,7 @@ .subtitle-1 {{$t('admin:contribute.title')}} .body-2.mt-3: strong {{$t('admin:dashboard.contributeSubtitle')}} .body-2 {{$t('admin:dashboard.contributeHelp')}} - v-btn.mx-0.mt-4(:color='$vuetify.dark ? `indigo lighten-3` : `indigo`', outlined, small, to='/contribute') + v-btn.mx-0.mt-4(:color='$vuetify.theme.dark ? `indigo lighten-3` : `indigo`', outlined, small, to='/contribute') .caption: strong {{$t('admin:dashboard.contributeLearnMore')}} diff --git a/client/components/admin/admin-general.vue b/client/components/admin/admin-general.vue index 9f9ed0b6..944380d0 100644 --- a/client/components/admin/admin-general.vue +++ b/client/components/admin/admin-general.vue @@ -44,7 +44,7 @@ .overline.grey--text.pa-4 {{$t('admin:general.logo')}} #[v-chip.ml-2(label, color='grey', small, outlined) coming soon] v-card-text.pb-4.pl-5 v-layout.px-3(row, align-center) - v-avatar(size='100', :color='$vuetify.dark ? `grey darken-2` : `grey lighten-3`', :tile='config.logoIsSquare') + v-avatar(size='100', :color='$vuetify.theme.dark ? `grey darken-2` : `grey lighten-3`', :tile='config.logoIsSquare') .ml-4 v-btn.mr-3(color='teal', depressed, disabled) v-icon(left) mdi-cloud-upload diff --git a/client/components/admin/admin-groups-edit-permissions.vue b/client/components/admin/admin-groups-edit-permissions.vue index 52ca4ae1..37bf00d8 100644 --- a/client/components/admin/admin-groups-edit-permissions.vue +++ b/client/components/admin/admin-groups-edit-permissions.vue @@ -12,7 +12,7 @@ v-alert.radius-7( v-if='group.isSystem' color='orange darken-2' - :class='$vuetify.dark ? "grey darken-4" : "orange lighten-5"' + :class='$vuetify.theme.dark ? "grey darken-4" : "orange lighten-5"' outline :value='true' icon='lock_outline' @@ -20,7 +20,7 @@ v-container.px-3.pb-3.pt-0(fluid, grid-list-md) v-layout(row, wrap) v-flex(xs12, md6, lg4, v-for='pmGroup in permissions', :key='pmGroup.category') - v-card.md2(flat, :class='$vuetify.dark ? "grey darken-3-d5" : "white"') + v-card.md2(flat, :class='$vuetify.theme.dark ? "grey darken-3-d5" : "white"') v-subheader {{pmGroup.category}} v-card-text.pt-0 template(v-for='(pm, idx) in pmGroup.items') diff --git a/client/components/admin/admin-groups-edit-rules.vue b/client/components/admin/admin-groups-edit-rules.vue index b15b8c57..d396e7d5 100644 --- a/client/components/admin/admin-groups-edit-rules.vue +++ b/client/components/admin/admin-groups-edit-rules.vue @@ -2,16 +2,16 @@ v-card.wiki-form v-card-text(v-if='group.id === 1') v-alert.radius-7( - :class='$vuetify.dark ? "grey darken-4" : "orange lighten-5"' + :class='$vuetify.theme.dark ? "grey darken-4" : "orange lighten-5"' color='orange darken-2' outline :value='true' icon='lock_outline' ) This group has access to everything. template(v-else) - v-card-title(:class='$vuetify.dark ? `grey darken-3-d5` : `grey lighten-5`') + v-card-title(:class='$vuetify.theme.dark ? `grey darken-3-d5` : `grey lighten-5`') v-alert.radius-7( - :class='$vuetify.dark ? `grey darken-3-d3` : `white`' + :class='$vuetify.theme.dark ? `grey darken-3-d3` : `white`' :value='true' color='grey' outline @@ -48,10 +48,10 @@ v-list-item-avatar v-icon cloud_download v-list-item-title Export Rules - v-card-text(:class='$vuetify.dark ? `grey darken-4-l5` : `white`') + v-card-text(:class='$vuetify.theme.dark ? `grey darken-4-l5` : `white`') .rules .caption(v-if='group.pageRules.length === 0') - em(:class='$vuetify.dark ? `grey--text` : `blue-grey--text`') This group has no page rules yet. + em(:class='$vuetify.theme.dark ? `grey--text` : `blue-grey--text`') This group has no page rules yet. .rule(v-for='rule of group.pageRules', :key='rule.id') v-btn.ma-0.rule-deny-btn( solo @@ -90,7 +90,7 @@ v-icon.mr-2(:color='rule.deny ? `red` : `green`') {{props.item.icon}} v-list-item-content v-list-item-title.body-2 {{props.item.text}} - v-chip.mr-2.grey--text(label, small, :color='$vuetify.dark ? `grey darken-4` : `grey lighten-4`').caption {{props.item.value}} + v-chip.mr-2.grey--text(label, small, :color='$vuetify.theme.dark ? `grey darken-4` : `grey lighten-4`').caption {{props.item.value}} //- Match v-select.ml-1.mr-1( @@ -111,7 +111,7 @@ v-list-item-title(v-html='data.item.text') //- Locales v-select.mr-1( - :background-color='$vuetify.dark ? `grey darken-3-d5` : `blue-grey lighten-5`' + :background-color='$vuetify.theme.dark ? `grey darken-3-d5` : `blue-grey lighten-5`' solo :items='locales' v-model='rule.locales' @@ -147,7 +147,7 @@ v-icon.mr-2(:color='rule.deny ? `red` : `green`') language v-list-item-content v-list-item-title.body-2 {{props.item.text}} - v-chip.mr-2.grey--text(label, small, :color='$vuetify.dark ? `grey darken-4` : `grey lighten-4`').caption {{props.item.value.toUpperCase()}} + v-chip.mr-2.grey--text(label, small, :color='$vuetify.theme.dark ? `grey darken-4` : `grey lighten-4`').caption {{props.item.value.toUpperCase()}} //- Path v-text-field( @@ -158,11 +158,11 @@ :placeholder='rule.match === `REGEX` ? `Regular Expression` : `Path`' :suffix='rule.match === `REGEX` ? `/` : null' hide-details - :color='$vuetify.dark ? `grey` : `blue-grey`' + :color='$vuetify.theme.dark ? `grey` : `blue-grey`' ) v-btn(icon, @click='removeRule(rule.id)') - v-icon(:color='$vuetify.dark ? `grey` : `blue-grey`') clear + v-icon(:color='$vuetify.theme.dark ? `grey` : `blue-grey`') clear v-divider.mt-3 v-subheader.pl-0 Rules Order diff --git a/client/components/admin/admin-groups-edit-users.vue b/client/components/admin/admin-groups-edit-users.vue index d3faff32..d8d1f55b 100644 --- a/client/components/admin/admin-groups-edit-users.vue +++ b/client/components/admin/admin-groups-edit-users.vue @@ -1,6 +1,6 @@