From eccf1a1b19a8765ac0e892990613904c5fd7efb2 Mon Sep 17 00:00:00 2001 From: NGPixel Date: Mon, 29 Jul 2019 04:50:03 +0000 Subject: [PATCH] misc: migrate to vuetify 2.0 (wip) --- .babelrc | 50 +- .gitattributes | 4 +- client/client-app.js | 21 +- client/client-setup.js | 13 +- client/components/admin.vue | 168 +-- client/components/admin/admin-analytics.vue | 47 +- client/components/admin/admin-auth.vue | 33 +- client/components/admin/admin-contribute.vue | 112 +- client/components/admin/admin-dashboard.vue | 46 +- client/components/admin/admin-general.vue | 50 +- .../admin/admin-groups-edit-rules.vue | 50 +- .../admin/admin-groups-edit-users.vue | 16 +- client/components/admin/admin-groups.vue | 20 +- client/components/admin/admin-locale.vue | 98 +- client/components/admin/admin-mail.vue | 20 +- client/components/admin/admin-navigation.vue | 95 +- client/components/admin/admin-pages-edit.vue | 80 +- client/components/admin/admin-pages.vue | 21 +- client/components/admin/admin-rendering.vue | 12 +- client/components/admin/admin-search.vue | 12 +- client/components/admin/admin-storage.vue | 44 +- client/components/admin/admin-system.vue | 102 +- client/components/admin/admin-theme.vue | 53 +- .../components/admin/admin-users-create.vue | 114 +- client/components/admin/admin-users-edit.vue | 118 +- client/components/admin/admin-users.vue | 16 +- .../admin/admin-utilities-content.vue | 4 +- .../admin/admin-utilities-telemetry.vue | 58 +- client/components/admin/admin-utilities.vue | 12 +- client/components/admin/admin-webhooks.vue | 12 +- client/components/common/nav-header.vue | 172 +-- client/components/common/notify.vue | 5 +- client/components/common/page-selector.vue | 26 +- client/components/common/search-results.vue | 38 +- client/components/common/user-search.vue | 12 +- client/components/editor/editor-markdown.vue | 36 +- .../components/editor/editor-modal-blocks.vue | 12 +- .../components/editor/editor-modal-media.vue | 42 +- client/components/editor/markdown/help.vue | 70 +- client/components/history.vue | 36 +- client/components/profile.vue | 24 +- client/components/setup.vue | 4 +- .../admin/users/users-mutation-create.gql | 12 + client/index-app.js | 3 +- client/index-setup.js | 1 - client/scss/app.scss | 3 - client/scss/base/icons.scss | 60 +- client/scss/layout/_md2.scss | 17 - .../static/favicons/android-icon-144x144.png | Bin 9027 -> 9026 bytes .../static/favicons/android-icon-192x192.png | Bin 12502 -> 12501 bytes client/static/favicons/android-icon-36x36.png | Bin 2079 -> 2078 bytes client/static/favicons/android-icon-48x48.png | Bin 2706 -> 2705 bytes client/static/favicons/android-icon-72x72.png | Bin 3972 -> 3970 bytes client/static/favicons/android-icon-96x96.png | Bin 5526 -> 5525 bytes client/static/favicons/apple-icon-114x114.png | Bin 6573 -> 6572 bytes client/static/favicons/apple-icon-120x120.png | Bin 7088 -> 7087 bytes client/static/favicons/apple-icon-144x144.png | Bin 9027 -> 9026 bytes client/static/favicons/apple-icon-152x152.png | Bin 9790 -> 9789 bytes client/static/favicons/apple-icon-180x180.png | Bin 12508 -> 12507 bytes client/static/favicons/apple-icon-57x57.png | Bin 3118 -> 3117 bytes client/static/favicons/apple-icon-60x60.png | Bin 3296 -> 3295 bytes client/static/favicons/apple-icon-72x72.png | Bin 3972 -> 3970 bytes client/static/favicons/apple-icon-76x76.png | Bin 4160 -> 4159 bytes .../favicons/apple-icon-precomposed.png | Bin 13076 -> 13075 bytes client/static/favicons/apple-icon.png | Bin 13076 -> 13075 bytes client/static/favicons/favicon-16x16.png | Bin 1461 -> 1460 bytes client/static/favicons/favicon-32x32.png | Bin 1886 -> 1885 bytes client/static/favicons/favicon-96x96.png | Bin 5526 -> 5525 bytes client/static/favicons/ms-icon-144x144.png | Bin 9027 -> 9026 bytes client/static/favicons/ms-icon-150x150.png | Bin 9526 -> 9525 bytes client/static/favicons/ms-icon-310x310.png | Bin 27432 -> 27431 bytes client/static/favicons/ms-icon-70x70.png | Bin 3873 -> 3872 bytes .../static/fonts/MaterialIcons-Regular.woff | Bin 79612 -> 79610 bytes .../static/fonts/MaterialIcons-Regular.woff2 | Bin 60832 -> 60830 bytes client/static/fonts/Roboto-Bold.woff | Bin 93500 -> 93498 bytes client/static/fonts/Roboto-BoldItalic.woff2 | Bin 71224 -> 71223 bytes client/static/fonts/Roboto-Italic.woff2 | Bin 71176 -> 71175 bytes client/static/fonts/Roboto-MediumItalic.woff | Bin 100416 -> 100414 bytes client/static/fonts/Roboto-MediumItalic.woff2 | Bin 72200 -> 72199 bytes client/static/fonts/Roboto-Regular.woff | Bin 93180 -> 93179 bytes client/static/fonts/Roboto-Regular.woff2 | Bin 65704 -> 65702 bytes client/static/fonts/RobotoMono-Regular.woff2 | Bin 44588 -> 44586 bytes client/static/img/donate_eth_qr.png | Bin 5727 -> 5726 bytes client/static/img/donate_opencollective.png | Bin 11943 -> 11942 bytes client/static/img/donate_patreon.png | Bin 6580 -> 6579 bytes client/static/img/donate_paypal.png | Bin 12829 -> 12828 bytes client/themes/default/components/page.vue | 165 ++- client/themes/default/scss/app.scss | 19 +- client/themes/default/thumbnail.png | Bin 22355 -> 22354 bytes dev/templates/legacy.pug | 8 +- dev/templates/master.pug | 8 +- dev/webpack/webpack.dev.js | 37 +- package.json | 69 +- server/db/migrations-sqlite/2.0.0-beta.242.js | 13 + server/db/migrations/2.0.0-beta.242.js | 13 + server/graph/resolvers/user.js | 6 +- server/graph/schemas/user.graphql | 6 +- server/models/users.js | 82 ++ server/views/legacy/master.pug | 8 +- server/views/master.pug | 8 +- server/views/page.pug | 6 +- yarn.lock | 1258 ++++++++--------- 102 files changed, 1898 insertions(+), 1882 deletions(-) create mode 100644 client/graph/admin/users/users-mutation-create.gql delete mode 100644 client/scss/layout/_md2.scss create mode 100644 server/db/migrations-sqlite/2.0.0-beta.242.js create mode 100644 server/db/migrations/2.0.0-beta.242.js diff --git a/.babelrc b/.babelrc index e511eb2f..8aeb2118 100644 --- a/.babelrc +++ b/.babelrc @@ -19,53 +19,9 @@ "@babel/plugin-proposal-throw-expressions", [ "prismjs", { - "languages": [ - "markup", - "css", - "clike", - "javascript", - "c", - "bash", - "basic", - "cpp", - "csharp", - "arduino", - "ruby", - "elixir", - "fsharp", - "go", - "graphql", - "handlebars", - "haskell", - "ini", - "java", - "json", - "kotlin", - "latex", - "less", - "makefile", - "markdown", - "matlab", - "nginx", - "objectivec", - "perl", - "php", - "powershell", - "pug", - "python", - "typescript", - "rust", - "scss", - "scala", - "smalltalk", - "sql", - "stylus", - "swift", - "vbnet", - "yaml" - ], - "plugins": ["line-numbers"], - "theme": "dark", + "languages": ["clike", "markup"], + "plugins": ["line-numbers", "autoloader", "normalize-whitespace"], + "theme": "twilight", "css": true } ] diff --git a/.gitattributes b/.gitattributes index 198a7c45..52aff591 100644 --- a/.gitattributes +++ b/.gitattributes @@ -1,5 +1,5 @@ # Auto detect text files and perform LF normalization -* text=auto +* text eol=lf # Custom for Visual Studio *.cs diff=csharp @@ -14,4 +14,4 @@ *.pdf diff=astextplain *.PDF diff=astextplain *.rtf diff=astextplain -*.RTF diff=astextplain \ No newline at end of file +*.RTF diff=astextplain diff --git a/client/client-app.js b/client/client-app.js index f1ad55ed..357b24d7 100644 --- a/client/client-app.js +++ b/client/client-app.js @@ -12,7 +12,7 @@ import { ErrorLink } from 'apollo-link-error' import { InMemoryCache } from 'apollo-cache-inmemory' import { getMainDefinition } from 'apollo-utilities' import VueApollo from 'vue-apollo' -import Vuetify from 'vuetify' +import Vuetify from 'vuetify/lib' import Velocity from 'velocity-animate' import Vuescroll from 'vuescroll/dist/vuescroll-native' import Hammer from 'hammerjs' @@ -138,10 +138,8 @@ Vue.use(VueApollo) Vue.use(VueClipboards) Vue.use(localization.VueI18Next) Vue.use(helpers) -Vue.use(VeeValidate, { events: '' }) -Vue.use(Vuetify, { - rtl: siteConfig.rtl -}) +Vue.use(VeeValidate, { mode: 'eager' }) +Vue.use(Vuetify) Vue.use(VueMoment, { moment }) Vue.use(Vuescroll) Vue.use(VueTour) @@ -194,7 +192,10 @@ let bootstrap = () => { mixins: [helpers], apolloProvider, store, - i18n + i18n, + vuetify: new Vuetify({ + rtl: siteConfig.rtl + }) }) // ---------------------------------- @@ -208,14 +209,6 @@ let bootstrap = () => { // ==================================== import(/* webpackChunkName: "theme-page" */ './themes/' + process.env.CURRENT_THEME + '/js/app.js') - - // ==================================== - // Load Icons - // ==================================== - - // import(/* webpackChunkName: "icons" */ './svg/icons.svg').then(icons => { - // document.body.insertAdjacentHTML('beforeend', icons.default) - // }) } window.boot.onDOMReady(bootstrap) diff --git a/client/client-setup.js b/client/client-setup.js index 1ee9e765..f0624c9d 100644 --- a/client/client-setup.js +++ b/client/client-setup.js @@ -1,6 +1,6 @@ /* eslint-disable import/first */ import Vue from 'vue' -import Vuetify from 'vuetify' +import Vuetify from 'vuetify/lib' import VeeValidate from 'vee-validate' import boot from './modules/boot' /* eslint-enable import/first */ @@ -15,15 +15,8 @@ Vue.component('setup', () => import(/* webpackMode: "eager" */ './components/set let bootstrap = () => { window.WIKI = new Vue({ - el: '#root' - }) - - // ==================================== - // Load Icons - // ==================================== - - import(/* webpackChunkName: "icons" */ './svg/icons.svg').then(icons => { - document.body.insertAdjacentHTML('beforeend', icons.default) + el: '#root', + vuetify: new Vuetify() }) } diff --git a/client/components/admin.vue b/client/components/admin.vue index 1376a5fb..1657924c 100644 --- a/client/components/admin.vue +++ b/client/components/admin.vue @@ -3,114 +3,114 @@ nav-header(hide-search) template(slot='mid') v-spacer - .subheading.grey--text {{$t('admin:adminArea')}} + .overline.grey--text {{$t('admin:adminArea')}} v-spacer - v-navigation-drawer.pb-0.admin-sidebar(v-model='adminDrawerShown', app, fixed, clipped, :right='$vuetify.rtl', permanent) + v-navigation-drawer.pb-0.admin-sidebar(v-model='adminDrawerShown', app, fixed, clipped, :right='$vuetify.rtl', permanent, width='300') vue-scroll(:ops='scrollStyle') - v-list(dense) - v-list-tile.pt-2(to='/dashboard') - v-list-tile-avatar: v-icon dashboard - v-list-tile-title {{ $t('admin:dashboard.title') }} + v-list(dense, nav) + v-list-item(to='/dashboard') + v-list-item-avatar(size='24'): v-icon mdi-view-dashboard-variant + v-list-item-title {{ $t('admin:dashboard.title') }} template(v-if='hasPermission([`manage:system`, `manage:navigation`, `write:pages`, `manage:pages`, `delete:pages`])') v-divider.my-2 v-subheader.pl-4 {{ $t('admin:nav.site') }} - v-list-tile(to='/general', v-if='hasPermission(`manage:system`)') - v-list-tile-avatar: v-icon widgets - v-list-tile-title {{ $t('admin:general.title') }} - v-list-tile(to='/locale', v-if='hasPermission(`manage:system`)') - v-list-tile-avatar: v-icon language - v-list-tile-title {{ $t('admin:locale.title') }} - v-list-tile(to='/navigation', v-if='hasPermission([`manage:system`, `manage:navigation`])') - v-list-tile-avatar: v-icon near_me - v-list-tile-title {{ $t('admin:navigation.title') }} - v-list-tile(to='/pages', v-if='hasPermission([`manage:system`, `write:pages`, `manage:pages`, `delete:pages`])') - v-list-tile-avatar: v-icon insert_drive_file - v-list-tile-title {{ $t('admin:pages.title') }} - v-list-tile-action - v-chip(small, disabled, :color='darkMode ? `grey darken-3-d4` : `grey lighten-4`') + v-list-item(to='/general', v-if='hasPermission(`manage:system`)') + v-list-item-avatar(size='24'): v-icon mdi-widgets + v-list-item-title {{ $t('admin:general.title') }} + v-list-item(to='/locale', v-if='hasPermission(`manage:system`)') + v-list-item-avatar(size='24'): v-icon mdi-web + v-list-item-title {{ $t('admin:locale.title') }} + v-list-item(to='/navigation', v-if='hasPermission([`manage:system`, `manage:navigation`])') + v-list-item-avatar(size='24'): v-icon mdi-near-me + v-list-item-title {{ $t('admin:navigation.title') }} + v-list-item(to='/pages', v-if='hasPermission([`manage:system`, `write:pages`, `manage:pages`, `delete:pages`])') + v-list-item-avatar(size='24'): v-icon mdi-file-document-outline + v-list-item-title {{ $t('admin:pages.title') }} + v-list-item-action + v-chip(x-small, disabled, :color='darkMode ? `grey darken-3-d4` : `grey lighten-4`') .caption.grey--text {{ info.pagesTotal }} - v-list-tile(to='/theme', v-if='hasPermission([`manage:system`, `manage:theme`])') - v-list-tile-avatar: v-icon palette - v-list-tile-title {{ $t('admin:theme.title') }} + v-list-item(to='/theme', v-if='hasPermission([`manage:system`, `manage:theme`])') + v-list-item-avatar(size='24'): v-icon mdi-palette-outline + v-list-item-title {{ $t('admin:theme.title') }} template(v-if='hasPermission([`manage:system`, `manage:groups`, `write:groups`, `manage:users`, `write:users`])') v-divider.my-2 v-subheader.pl-4 {{ $t('admin:nav.users') }} - v-list-tile(to='/groups', v-if='hasPermission([`manage:system`, `manage:groups`, `write:groups`])') - v-list-tile-avatar: v-icon people - v-list-tile-title {{ $t('admin:groups.title') }} - v-list-tile-action - v-chip(small, disabled, :color='darkMode ? `grey darken-3-d4` : `grey lighten-4`') + v-list-item(to='/groups', v-if='hasPermission([`manage:system`, `manage:groups`, `write:groups`])') + v-list-item-avatar(size='24'): v-icon mdi-account-group + v-list-item-title {{ $t('admin:groups.title') }} + v-list-item-action + v-chip(x-small, disabled, :color='darkMode ? `grey darken-3-d4` : `grey lighten-4`') .caption.grey--text {{ info.groupsTotal }} - v-list-tile(to='/users', v-if='hasPermission([`manage:system`, `manage:groups`, `write:groups`, `manage:users`, `write:users`])') - v-list-tile-avatar: v-icon perm_identity - v-list-tile-title {{ $t('admin:users.title') }} - v-list-tile-action - v-chip(small, disabled, :color='darkMode ? `grey darken-3-d4` : `grey lighten-4`') + v-list-item(to='/users', v-if='hasPermission([`manage:system`, `manage:groups`, `write:groups`, `manage:users`, `write:users`])') + v-list-item-avatar(size='24'): v-icon mdi-account-box + v-list-item-title {{ $t('admin:users.title') }} + v-list-item-action + v-chip(x-small, disabled, :color='darkMode ? `grey darken-3-d4` : `grey lighten-4`') .caption.grey--text {{ info.usersTotal }} template(v-if='hasPermission(`manage:system`)') v-divider.my-2 v-subheader.pl-4 {{ $t('admin:nav.modules') }} - v-list-tile(to='/analytics') - v-list-tile-avatar: v-icon timeline - v-list-tile-title {{ $t('admin:analytics.title') }} - v-list-tile(to='/auth') - v-list-tile-avatar: v-icon lock_outline - v-list-tile-title {{ $t('admin:auth.title') }} - v-list-tile(to='/comments', disabled) - v-list-tile-avatar: v-icon(color='grey lighten-2') comment - v-list-tile-title {{ $t('admin:comments.title') }} - v-list-tile(to='/editor', disabled) - v-list-tile-avatar: v-icon(color='grey lighten-2') transform - v-list-tile-title {{ $t('admin:editor.title') }} - v-list-tile(to='/logging', disabled) - v-list-tile-avatar: v-icon(color='grey lighten-2') graphic_eq - v-list-tile-title {{ $t('admin:logging.title') }} - v-list-tile(to='/rendering') - v-list-tile-avatar: v-icon system_update_alt - v-list-tile-title {{ $t('admin:rendering.title') }} - v-list-tile(to='/search') - v-list-tile-avatar: v-icon search - v-list-tile-title {{ $t('admin:search.title') }} - v-list-tile(to='/storage') - v-list-tile-avatar: v-icon storage - v-list-tile-title {{ $t('admin:storage.title') }} + v-list-item(to='/analytics') + v-list-item-avatar(size='24'): v-icon mdi-chart-timeline-variant + v-list-item-title {{ $t('admin:analytics.title') }} + v-list-item(to='/auth') + v-list-item-avatar(size='24'): v-icon mdi-lock-outline + v-list-item-title {{ $t('admin:auth.title') }} + v-list-item(to='/comments', disabled) + v-list-item-avatar(size='24'): v-icon(color='grey lighten-2') mdi-comment-text-outline + v-list-item-title {{ $t('admin:comments.title') }} + v-list-item(to='/editor', disabled) + v-list-item-avatar(size='24'): v-icon(color='grey lighten-2') mdi-playlist-edit + v-list-item-title {{ $t('admin:editor.title') }} + v-list-item(to='/logging', disabled) + v-list-item-avatar(size='24'): v-icon(color='grey lighten-2') mdi-script-text-outline + v-list-item-title {{ $t('admin:logging.title') }} + v-list-item(to='/rendering') + v-list-item-avatar(size='24'): v-icon mdi-cogs + v-list-item-title {{ $t('admin:rendering.title') }} + v-list-item(to='/search') + v-list-item-avatar(size='24'): v-icon mdi-cloud-search-outline + v-list-item-title {{ $t('admin:search.title') }} + v-list-item(to='/storage') + v-list-item-avatar(size='24'): v-icon mdi-harddisk + v-list-item-title {{ $t('admin:storage.title') }} template(v-if='hasPermission([`manage:system`, `manage:api`])') v-divider.my-2 v-subheader.pl-4 {{ $t('admin:nav.system') }} - v-list-tile(to='/api', v-if='hasPermission([`manage:system`, `manage:api`])', disabled) - v-list-tile-avatar: v-icon(color='grey lighten-2') call_split - v-list-tile-title {{ $t('admin:api.title') }} - v-list-tile(to='/mail', v-if='hasPermission(`manage:system`)') - v-list-tile-avatar: v-icon email - v-list-tile-title {{ $t('admin:mail.title') }} - v-list-tile(to='/system', v-if='hasPermission(`manage:system`)') - v-list-tile-avatar: v-icon tune - v-list-tile-title {{ $t('admin:system.title') }} - v-list-tile(to='/utilities', v-if='hasPermission(`manage:system`)') - v-list-tile-avatar: v-icon build - v-list-tile-title {{ $t('admin:utilities.title') }} - v-list-tile(to='/webhooks', v-if='hasPermission(`manage:system`)', disabled) - v-list-tile-avatar: v-icon(color='grey lighten-2') ac_unit - v-list-tile-title {{ $t('admin:webhooks.title') }} + v-list-item(to='/api', v-if='hasPermission([`manage:system`, `manage:api`])', disabled) + v-list-item-avatar(size='24'): v-icon(color='grey lighten-2') mdi-call-split + v-list-item-title {{ $t('admin:api.title') }} + v-list-item(to='/mail', v-if='hasPermission(`manage:system`)') + v-list-item-avatar(size='24'): v-icon mdi-email-multiple-outline + v-list-item-title {{ $t('admin:mail.title') }} + v-list-item(to='/system', v-if='hasPermission(`manage:system`)') + v-list-item-avatar(size='24'): v-icon mdi-tune + v-list-item-title {{ $t('admin:system.title') }} + v-list-item(to='/utilities', v-if='hasPermission(`manage:system`)') + v-list-item-avatar(size='24'): v-icon mdi-wrench-outline + v-list-item-title {{ $t('admin:utilities.title') }} + v-list-item(to='/webhooks', v-if='hasPermission(`manage:system`)', disabled) + v-list-item-avatar(size='24'): v-icon(color='grey lighten-2') mdi-webhook + v-list-item-title {{ $t('admin:webhooks.title') }} v-list-group( to='/dev' no-action v-if='hasPermission([`manage:system`, `manage:api`])' ) - v-list-tile(slot='activator') - v-list-tile-avatar: v-icon weekend - v-list-tile-title {{ $t('admin:dev.title') }} + v-list-item(slot='activator') + v-list-item-avatar(size='24'): v-icon mdi-dev-to + v-list-item-title {{ $t('admin:dev.title') }} - v-list-tile(to='/dev-flags') - v-list-tile-title {{ $t('admin:dev.flags.title') }} - v-list-tile(to='/dev-graphiql') - v-list-tile-title {{ $t('admin:dev.graphiql.title') }} - v-list-tile(to='/dev-voyager') - v-list-tile-title {{ $t('admin:dev.voyager.title') }} + v-list-item(to='/dev-flags') + v-list-item-title {{ $t('admin:dev.flags.title') }} + v-list-item(to='/dev-graphiql') + v-list-item-title {{ $t('admin:dev.graphiql.title') }} + v-list-item(to='/dev-voyager') + v-list-item-title {{ $t('admin:dev.voyager.title') }} v-divider.my-2 - v-list-tile(to='/contribute') - v-list-tile-avatar: v-icon favorite - v-list-tile-title {{ $t('admin:contribute.title') }} + v-list-item(to='/contribute') + v-list-item-avatar(size='24'): v-icon mdi-heart-outline + v-list-item-title {{ $t('admin:contribute.title') }} v-content(:class='darkMode ? "grey darken-4" : ""') transition(name='admin-router') diff --git a/client/components/admin/admin-analytics.vue b/client/components/admin/admin-analytics.vue index 09281c11..1cf9e784 100644 --- a/client/components/admin/admin-analytics.vue +++ b/client/components/admin/admin-analytics.vue @@ -8,10 +8,10 @@ .headline.primary--text.animated.fadeInLeft {{ $t('admin:analytics.title') }} .subheading.grey--text.animated.fadeInLeft.wait-p4s {{ $t('admin:analytics.subtitle') }} v-spacer - v-btn.animated.fadeInDown.wait-p2s(outline, color='grey', @click='refresh', large) - v-icon refresh + v-btn.animated.fadeInDown.wait-p2s.mr-3(outlined, color='grey', @click='refresh', large) + v-icon mdi-refresh v-btn.animated.fadeInDown(color='success', @click='save', depressed, large) - v-icon(left) check + v-icon(left) mdi-check span {{$t('common:actions.apply')}} v-flex(lg3, xs12) @@ -20,21 +20,21 @@ .subheading {{$t('admin:analytics.providers')}} v-list(two-line, dense).py-0 template(v-for='(str, idx) in providers') - v-list-tile(:key='str.key', @click='selectedProvider = str.key', :disabled='!str.isAvailable') - v-list-tile-avatar - v-icon(color='grey', v-if='!str.isAvailable') indeterminate_check_box - v-icon(color='primary', v-else-if='str.isEnabled', v-ripple, @click='str.isEnabled = false') check_box - v-icon(color='grey', v-else, v-ripple, @click='str.isEnabled = true') check_box_outline_blank - v-list-tile-content - v-list-tile-title.body-2(:class='!str.isAvailable ? `grey--text` : (selectedProvider === str.key ? `primary--text` : ``)') {{ str.title }} - v-list-tile-sub-title.caption(:class='!str.isAvailable ? `grey--text text--lighten-1` : (selectedProvider === str.key ? `blue--text ` : ``)') {{ str.description }} - v-list-tile-avatar(v-if='selectedProvider === str.key') - v-icon.animated.fadeInLeft(color='primary') arrow_forward_ios + v-list-item(:key='str.key', @click='selectedProvider = str.key', :disabled='!str.isAvailable') + v-list-item-avatar(size='24') + v-icon(color='grey', v-if='!str.isAvailable') mdi-minus-box-outline + v-icon(color='primary', v-else-if='str.isEnabled', v-ripple, @click='str.isEnabled = false') mdi-checkbox-marked-outline + v-icon(color='grey', v-else, v-ripple, @click='str.isEnabled = true') mdi-checkbox-blank-outline + v-list-item-content + v-list-item-title.body-2(:class='!str.isAvailable ? `grey--text` : (selectedProvider === str.key ? `primary--text` : ``)') {{ str.title }} + v-list-item-subtitle: .caption(:class='!str.isAvailable ? `grey--text text--lighten-1` : (selectedProvider === str.key ? `blue--text ` : ``)') {{ str.description }} + v-list-item-avatar(v-if='selectedProvider === str.key', size='24') + v-icon.animated.fadeInLeft(color='primary', large) mdi-chevron-right v-divider(v-if='idx < providers.length - 1') v-flex(xs12, lg9) - v-card.wiki-form.animated.fadeInUp.wait-p2s + v-card.animated.fadeInUp.wait-p2s v-toolbar(color='primary', dense, flat, dark) .subheading {{provider.title}} v-card-text @@ -44,18 +44,17 @@ .caption.pt-3 {{provider.description}} .caption.pb-3: a(:href='provider.website') {{provider.website}} v-divider.mt-3 - v-subheader.pl-0 {{$t('admin:analytics.providerConfiguration')}} + .overline.py-4 {{$t('admin:analytics.providerConfiguration')}} .body-1.ml-3(v-if='!provider.config || provider.config.length < 1'): em {{$t('admin:analytics.providerNoConfiguration')}} template(v-else, v-for='cfg in provider.config') v-select( v-if='cfg.value.type === "string" && cfg.value.enum' - outline - background-color='grey lighten-2' + outlined :items='cfg.value.enum' :key='cfg.key' :label='cfg.value.title' v-model='cfg.value.value' - prepend-icon='settings_applications' + prepend-icon='mdi-settings-box' :hint='cfg.value.hint ? cfg.value.hint : ""' persistent-hint :class='cfg.value.hint ? "mb-2" : ""' @@ -66,30 +65,28 @@ :label='cfg.value.title' v-model='cfg.value.value' color='primary' - prepend-icon='settings_applications' + prepend-icon='mdi-settings-box' :hint='cfg.value.hint ? cfg.value.hint : ""' persistent-hint ) v-textarea( v-else-if='cfg.value.type === "string" && cfg.value.multiline' - outline - background-color='grey lighten-2' + outlined :key='cfg.key' :label='cfg.value.title' v-model='cfg.value.value' - prepend-icon='settings_applications' + prepend-icon='mdi-settings-box' :hint='cfg.value.hint ? cfg.value.hint : ""' persistent-hint :class='cfg.value.hint ? "mb-2" : ""' ) v-text-field( v-else - outline - background-color='grey lighten-2' + outlined :key='cfg.key' :label='cfg.value.title' v-model='cfg.value.value' - prepend-icon='settings_applications' + prepend-icon='mdi-settings-box' :hint='cfg.value.hint ? cfg.value.hint : ""' persistent-hint :class='cfg.value.hint ? "mb-2" : ""' diff --git a/client/components/admin/admin-auth.vue b/client/components/admin/admin-auth.vue index e5cd22c1..4048a9ac 100644 --- a/client/components/admin/admin-auth.vue +++ b/client/components/admin/admin-auth.vue @@ -8,7 +8,7 @@ .headline.primary--text.animated.fadeInLeft {{ $t('admin:auth.title') }} .subheading.grey--text.animated.fadeInLeft.wait-p4s {{ $t('admin:auth.subtitle') }} v-spacer - v-btn.animated.fadeInDown.wait-p2s(outline, color='grey', @click='refresh', large) + v-btn.animated.fadeInDown.wait-p2s.mr-3(outlined, color='grey', @click='refresh', large) v-icon refresh v-btn.animated.fadeInDown(color='success', @click='save', depressed, large) v-icon(left) check @@ -20,16 +20,16 @@ .subheading {{$t('admin:auth.strategies')}} v-list(two-line, dense).py-0 template(v-for='(str, idx) in strategies') - v-list-tile(:key='str.key', @click='selectedStrategy = str.key', :disabled='!str.isAvailable') - v-list-tile-avatar + v-list-item(:key='str.key', @click='selectedStrategy = str.key', :disabled='!str.isAvailable') + v-list-item-avatar v-icon(color='grey', v-if='!str.isAvailable') indeterminate_check_box v-icon(color='primary', v-else-if='str.isEnabled && str.key !== `local`', v-ripple, @click='str.isEnabled = false') check_box v-icon(color='primary', v-else-if='str.isEnabled && str.key === `local`') check_box v-icon(color='grey', v-else, v-ripple, @click='str.isEnabled = true') check_box_outline_blank - v-list-tile-content - v-list-tile-title.body-2(:class='!str.isAvailable ? `grey--text` : (selectedStrategy === str.key ? `primary--text` : ``)') {{ str.title }} - v-list-tile-sub-title.caption(:class='!str.isAvailable ? `grey--text text--lighten-1` : (selectedStrategy === str.key ? `blue--text ` : ``)') {{ str.description }} - v-list-tile-avatar(v-if='selectedStrategy === str.key') + v-list-item-content + v-list-item-title.body-2(:class='!str.isAvailable ? `grey--text` : (selectedStrategy === str.key ? `primary--text` : ``)') {{ str.title }} + v-list-item-sub-title.caption(:class='!str.isAvailable ? `grey--text text--lighten-1` : (selectedStrategy === str.key ? `blue--text ` : ``)') {{ str.description }} + v-list-item-avatar(v-if='selectedStrategy === str.key') v-icon.animated.fadeInLeft(color='primary') arrow_forward_ios v-divider(v-if='idx < strategies.length - 1') @@ -39,7 +39,7 @@ v-card-text v-text-field.md2( v-model='jwtAudience' - outline + outlined prepend-icon='account_balance' :label='$t(`admin:auth.jwtAudience`)' :hint='$t(`admin:auth.jwtAudienceHint`)' @@ -47,7 +47,7 @@ ) v-text-field.mt-3.md2( v-model='jwtExpiration' - outline + outlined prepend-icon='schedule' :label='$t(`admin:auth.tokenExpiration`)' :hint='$t(`admin:auth.tokenExpirationHint`)' @@ -55,7 +55,7 @@ ) v-text-field.mt-3.md2( v-model='jwtRenewablePeriod' - outline + outlined prepend-icon='update' :label='$t(`admin:auth.tokenRenewalPeriod`)' :hint='$t(`admin:auth.tokenRenewalPeriodHint`)' @@ -85,8 +85,7 @@ template(v-else, v-for='cfg in strategy.config') v-select( v-if='cfg.value.type === "string" && cfg.value.enum' - outline - background-color='grey lighten-2' + outlined :items='cfg.value.enum' :key='cfg.key' :label='cfg.value.title' @@ -108,8 +107,7 @@ ) v-textarea( v-else-if='cfg.value.type === "string" && cfg.value.multiline' - outline - background-color='grey lighten-2' + outlined :key='cfg.key' :label='cfg.value.title' v-model='cfg.value.value' @@ -120,8 +118,7 @@ ) v-text-field( v-else - outline - background-color='grey lighten-2' + outlined :key='cfg.key' :label='cfg.value.title' v-model='cfg.value.value' @@ -153,7 +150,7 @@ :label='$t(`admin:auth.domainsWhitelist`)' v-model='strategy.domainWhitelist' prepend-icon='mail_outline' - outline + outlined :disabled='!strategy.selfRegistration' :hint='$t(`admin:auth.domainsWhitelistHint`)' persistent-hint @@ -164,7 +161,7 @@ chips ) v-autocomplete.mt-3.ml-3( - outline + outlined :disabled='!strategy.selfRegistration' :items='groups' item-text='name' diff --git a/client/components/admin/admin-contribute.vue b/client/components/admin/admin-contribute.vue index 3b57e773..69246098 100644 --- a/client/components/admin/admin-contribute.vue +++ b/client/components/admin/admin-contribute.vue @@ -91,18 +91,18 @@ v-btn(outline, small, href='https://opencollective.com/wikijs/order/1273') Become a Sponsor v-list(two-line) template(v-for='(sponsor, idx) in sponsors') - v-list-tile(:key='sponsor.id') - v-list-tile-avatar + v-list-item(:key='sponsor.id') + v-list-item-avatar img(v-if='sponsor.image', :src='sponsor.image') v-avatar(v-else, color='teal', size='40') span.white--text.subheading {{sponsor.name[0].toUpperCase()}} - v-list-tile-content - v-list-tile-title {{sponsor.name}} - v-list-tile-sub-title {{sponsor.description}} - v-list-tile-action(v-if='sponsor.twitter') + v-list-item-content + v-list-item-title {{sponsor.name}} + v-list-item-sub-title {{sponsor.description}} + v-list-item-action(v-if='sponsor.twitter') v-btn(icon, :href='sponsor.twitter', target='_blank') icon-twitter(fillColor='#9e9e9e') - v-list-tile-action(v-if='sponsor.website') + v-list-item-action(v-if='sponsor.website') v-btn(icon, :href='sponsor.website', target='_blank') v-icon(color='grey') public v-divider(v-if='idx < sponsors.length - 1') @@ -112,91 +112,91 @@ v-btn(outline, small, href='https://opencollective.com/wikijs/order/1272') Become a Backer v-list(two-line, dense) template(v-for='(backer, idx) in backers') - v-list-tile(:key='backer.id') - v-list-tile-avatar + v-list-item(:key='backer.id') + v-list-item-avatar img(v-if='backer.image', :src='backer.image') v-avatar(v-else, color='blue-grey', size='40') span.white--text.subheading {{backer.name[0].toUpperCase()}} - v-list-tile-content - v-list-tile-title {{backer.name}} - v-list-tile-sub-title {{backer.description}} - v-list-tile-action(v-if='backer.twitter') + v-list-item-content + v-list-item-title {{backer.name}} + v-list-item-sub-title {{backer.description}} + v-list-item-action(v-if='backer.twitter') v-btn(icon, :href='backer.twitter', target='_blank') icon-twitter(fillColor='#9e9e9e') - v-list-tile-action(v-if='backer.website') + v-list-item-action(v-if='backer.website') v-btn(icon, :href='backer.website', target='_blank') v-icon(color='grey') public v-divider(v-if='idx < backers.length - 1') v-toolbar(color='primary', dense, dark) .subheading Special Thanks v-list(two-line) - v-list-tile - v-list-tile-avatar + v-list-item + v-list-item-avatar img(src='https://static.requarks.io/logo/algolia.svg', alt='Algolia') - v-list-tile-content - v-list-tile-title Algolia - v-list-tile-sub-title Algolia is a powerful search-as-a-service solution, made easy to use with API clients, UI libraries, and pre-built integrations. - v-list-tile-action + v-list-item-content + v-list-item-title Algolia + v-list-item-sub-title Algolia is a powerful search-as-a-service solution, made easy to use with API clients, UI libraries, and pre-built integrations. + v-list-item-action v-btn(icon, href='https://www.algolia.com/', target='_blank') v-icon(color='grey') public v-divider - v-list-tile - v-list-tile-avatar + v-list-item + v-list-item-avatar img(src='https://static.requarks.io/logo/browserstack.svg', alt='Browserstack') - v-list-tile-content - v-list-tile-title BrowserStack - v-list-tile-sub-title BrowserStack is a cloud web and mobile testing platform that enables developers to test their websites and mobile applications. - v-list-tile-action + v-list-item-content + v-list-item-title BrowserStack + v-list-item-sub-title BrowserStack is a cloud web and mobile testing platform that enables developers to test their websites and mobile applications. + v-list-item-action v-btn(icon, href='https://www.browserstack.com/', target='_blank') v-icon(color='grey') public v-divider - v-list-tile - v-list-tile-avatar + v-list-item + v-list-item-avatar img(src='https://static.requarks.io/logo/cloudflare.svg', alt='Cloudflare') - v-list-tile-content - v-list-tile-title Cloudflare - v-list-tile-sub-title Providing content delivery network services, DDoS mitigation, Internet security and distributed domain name server services. - v-list-tile-action + v-list-item-content + v-list-item-title Cloudflare + v-list-item-sub-title Providing content delivery network services, DDoS mitigation, Internet security and distributed domain name server services. + v-list-item-action v-btn(icon, href='https://www.cloudflare.com/', target='_blank') v-icon(color='grey') public v-divider - v-list-tile - v-list-tile-avatar + v-list-item + v-list-item-avatar img(src='https://static.requarks.io/logo/digitalocean.svg', alt='DigitalOcean') - v-list-tile-content - v-list-tile-title DigitalOcean - v-list-tile-sub-title Providing developers and businesses a reliable, easy-to-use cloud computing platform of virtual servers (Droplets), object storage (Spaces), and more. - v-list-tile-action + v-list-item-content + v-list-item-title DigitalOcean + v-list-item-sub-title Providing developers and businesses a reliable, easy-to-use cloud computing platform of virtual servers (Droplets), object storage (Spaces), and more. + v-list-item-action v-btn(icon, href='https://m.do.co/c/5f7445bfa4d0', target='_blank') v-icon(color='grey') public v-divider - v-list-tile - v-list-tile-avatar(tile) + v-list-item + v-list-item-avatar(tile) img(src='/svg/logo-icons8.svg', alt='Icons8') - v-list-tile-content - v-list-tile-title Icons8 - v-list-tile-sub-title All the Icons You Need. Guaranteed. - v-list-tile-action + v-list-item-content + v-list-item-title Icons8 + v-list-item-sub-title All the Icons You Need. Guaranteed. + v-list-item-action v-btn(icon, href='https://icons8.com', target='_blank') v-icon(color='grey') public v-divider - v-list-tile - v-list-tile-avatar(tile) + v-list-item + v-list-item-avatar(tile) img(src='https://static.requarks.io/logo/lokalise.png', alt='Lokalise') - v-list-tile-content - v-list-tile-title Lokalise - v-list-tile-sub-title Lokalise is a translation management system built for agile teams who want to automate their localization process. - v-list-tile-action + v-list-item-content + v-list-item-title Lokalise + v-list-item-sub-title Lokalise is a translation management system built for agile teams who want to automate their localization process. + v-list-item-action v-btn(icon, href='https://lokalise.co', target='_blank') v-icon(color='grey') public v-divider - v-list-tile - v-list-tile-avatar(tile) + v-list-item + v-list-item-avatar(tile) img(src='https://static.requarks.io/logo/netlify.svg', alt='Netlify') - v-list-tile-content - v-list-tile-title Netlify - v-list-tile-sub-title Deploy modern static websites with Netlify. Get CDN, Continuous deployment, 1-click HTTPS, and all the services you need. - v-list-tile-action + v-list-item-content + v-list-item-title Netlify + v-list-item-sub-title Deploy modern static websites with Netlify. Get CDN, Continuous deployment, 1-click HTTPS, and all the services you need. + v-list-item-action v-btn(icon, href='https://wwwnetlify.com', target='_blank') v-icon(color='grey') public diff --git a/client/components/admin/admin-dashboard.vue b/client/components/admin/admin-dashboard.vue index 52f37a51..9e8dc019 100644 --- a/client/components/admin/admin-dashboard.vue +++ b/client/components/admin/admin-dashboard.vue @@ -10,8 +10,8 @@ v-flex(xs12 md6 lg4 xl3 d-flex) v-card.primary.dashboard-card.animated.fadeInUp(dark) v-card-text - v-icon.dashboard-icon insert_drive_file - .subheading {{$t('admin:dashboard.pages')}} + v-icon.dashboard-icon mdi-file-document-outline + .overline {{$t('admin:dashboard.pages')}} animated-number.display-1( :value='info.pagesTotal' :duration='2000' @@ -21,8 +21,8 @@ v-flex(xs12 md6 lg4 xl3 d-flex) v-card.indigo.lighten-1.dashboard-card.animated.fadeInUp.wait-p2s(dark) v-card-text - v-icon.dashboard-icon person - .subheading {{$t('admin:dashboard.users')}} + v-icon.dashboard-icon mdi-account + .overline {{$t('admin:dashboard.users')}} animated-number.display-1( :value='info.usersTotal' :duration='2000' @@ -32,8 +32,8 @@ v-flex(xs12 md6 lg4 xl3 d-flex) v-card.indigo.lighten-2.dashboard-card.animated.fadeInUp.wait-p4s(dark) v-card-text - v-icon.dashboard-icon people - .subheading {{$t('admin:dashboard.groups')}} + v-icon.dashboard-icon mdi-account-group + .overline {{$t('admin:dashboard.groups')}} animated-number.display-1( :value='info.groupsTotal' :duration='2000' @@ -46,19 +46,19 @@ dark ) v-btn.btn-animate-wrench(fab, absolute, right, top, small, light, to='system', v-if='hasPermission(`manage:system`)') - v-icon(:color='isLatestVersion ? `teal` : `red darken-4`') build + v-icon(:color='isLatestVersion ? `teal` : `red darken-4`', small) mdi-wrench v-card-text - v-icon.dashboard-icon blur_on + v-icon.dashboard-icon mdi-blur .subheading Wiki.js {{info.currentVersion}} .body-2(v-if='isLatestVersion') {{$t('admin:dashboard.versionLatest')}} .body-2(v-else) {{$t('admin:dashboard.versionNew', { version: info.latestVersion })}} v-flex(xs12, xl6) v-card.radius-7.animated.fadeInUp.wait-p2s - v-card-title.subheading(:class='$vuetify.dark ? `grey darken-2` : `grey lighten-5`') Recent Pages + v-card-title.subtitle-1(:class='$vuetify.dark ? `grey darken-2` : `grey lighten-5`') Recent Pages v-data-table.pb-2( :items='recentPages' - hide-actions - hide-headers + hide-default-footer + hide-default-header ) template(slot='items' slot-scope='props') td(width='20', style='padding-right: 0;'): v-icon insert_drive_file @@ -71,11 +71,11 @@ .caption Created {{ props.item.createdAt | moment('calendar') }} v-flex(xs12, xl6) v-card.radius-7.animated.fadeInUp.wait-p4s - v-card-title.subheading(:class='$vuetify.dark ? `grey darken-2` : `grey lighten-5`') Most Popular Pages + v-card-title.subtitle-1(:class='$vuetify.dark ? `grey darken-2` : `grey lighten-5`') Most Popular Pages v-data-table.pb-2( :items='popularPages' - hide-actions - hide-headers + hide-default-footer + hide-default-header ) template(slot='items' slot-scope='props') td(width='20', style='padding-right: 0;'): v-icon insert_drive_file @@ -91,11 +91,12 @@ v-card.dashboard-contribute.animated.fadeInUp.wait-p4s v-card-text img(src='/svg/icon-heart-health.svg', alt='Contribute', style='height: 80px;') - .pl-3 - .subheading {{$t('admin:contribute.title')}} - .body-2.pt-2 {{$t('admin:dashboard.contributeSubtitle')}} - .body-1 {{$t('admin:dashboard.contributeHelp')}} - v-btn.mx-0.mt-2(:color='$vuetify.dark ? `indigo lighten-3` : `indigo`', outline, small, to='/contribute') {{$t('admin:dashboard.contributeLearnMore')}} + .pl-5 + .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') + .caption: strong {{$t('admin:dashboard.contributeLearnMore')}} @@ -140,6 +141,7 @@ export default { .dashboard-card { display: flex; + width: 100%; border-radius: 7px; .v-card__text { @@ -161,10 +163,10 @@ export default { .v-card__text { display: flex; align-items: center; - color: mc('indigo', '500'); + color: mc('indigo', '500') !important; @at-root .theme--dark & { - color: mc('grey', '300'); + color: mc('grey', '300') !important; } } } @@ -173,7 +175,7 @@ export default { position: absolute; right: 0; top: 12px; - font-size: 120px; + font-size: 120px !important; opacity: .25; } diff --git a/client/components/admin/admin-general.vue b/client/components/admin/admin-general.vue index ab1249ce..3681ed13 100644 --- a/client/components/admin/admin-general.vue +++ b/client/components/admin/admin-general.vue @@ -9,61 +9,60 @@ .subheading.grey--text.animated.fadeInLeft {{ $t('admin:general.subtitle') }} v-spacer v-btn.animated.fadeInDown(color='success', depressed, @click='save', large) - v-icon(left) check + v-icon(left) mdi-check span {{$t('common:actions.apply')}} v-form.pt-3 v-layout(row wrap) v-flex(lg6 xs12) v-form - v-card.wiki-form.animated.fadeInUp + v-card.animated.fadeInUp v-toolbar(color='primary', dark, dense, flat) - v-toolbar-title - .subheading {{ $t('admin:general.siteInfo') }} + v-toolbar-title.subtitle-1 {{ $t('admin:general.siteInfo') }} v-subheader {{$t('admin:general.general')}} .px-3.pb-3 v-text-field( - outline + outlined :label='$t(`admin:general.siteUrl`)' required :counter='255' v-model='config.host' - prepend-icon='label_important' + prepend-icon='mdi-label-variant-outline' :hint='$t(`admin:general.siteUrlHint`)' persistent-hint ) - v-text-field.mt-2( - outline + v-text-field.mt-3( + outlined :label='$t(`admin:general.siteTitle`)' required :counter='50' v-model='config.title' - prepend-icon='public' + prepend-icon='mdi-earth' :hint='$t(`admin:general.siteTitleHint`)' persistent-hint ) v-divider - v-subheader {{$t('admin:general.logo')}} #[v-chip.ml-2(label, color='grey', small, outline) coming soon] + v-subheader {{$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') .ml-4 - v-btn.mx-0(color='teal', depressed, disabled) - v-icon(left) cloud_upload + v-btn.mr-3(color='teal', depressed, disabled) + v-icon(left) mdi-cloud-upload span {{$t('admin:general.uploadLogo')}} v-btn(color='teal', depressed, disabled) - v-icon(left) clear + v-icon(left) mdi-close span {{$t('admin:general.uploadClear')}} - .caption.grey--text {{$t('admin:general.uploadSizeHint', { size: '120x120' })}} + .caption.mt-3.grey--text {{$t('admin:general.uploadSizeHint', { size: '120x120' })}} .caption.grey--text {{$t('admin:general.uploadTypesHint', { typeList: 'SVG, PNG', lastType: 'JPG' })}}. v-divider v-subheader {{$t('admin:general.footerCopyright')}} .px-3.pb-3 v-text-field( - outline + outlined :label='$t(`admin:general.companyName`)' v-model='config.company' :counter='255' - prepend-icon='business' + prepend-icon='mdi-domain' persistent-hint :hint='$t(`admin:general.companyNameHint`)' ) @@ -71,31 +70,30 @@ v-subheader SEO .px-3.pb-3 v-text-field( - outline + outlined :label='$t(`admin:general.siteDescription`)' :counter='255' v-model='config.description' - prepend-icon='explore' + prepend-icon='mdi-compass' :hint='$t(`admin:general.siteDescriptionHint`)' persistent-hint ) - v-select.mt-2( - outline + v-select.mt-3( + outlined :label='$t(`admin:general.metaRobots`)' multiple :items='metaRobots' v-model='config.robots' - prepend-icon='explore' + prepend-icon='mdi-compass' :return-object='false' :hint='$t(`admin:general.metaRobotsHint`)' persistent-hint ) v-flex(lg6 xs12) - v-card.wiki-form.animated.fadeInUp.wait-p4s + v-card.animated.fadeInUp.wait-p4s v-toolbar(color='primary', dark, dense, flat) - v-toolbar-title - .subheading Features + v-toolbar-title.subtitle-1 Features v-spacer v-chip(label, color='white', small).primary--text coming soon v-card-text @@ -108,11 +106,11 @@ disabled ) v-text-field.mt-3( - outline + outlined label='TinyPNG API Key' :counter='255' v-model='config.description' - prepend-icon='subdirectory_arrow_right' + prepend-icon='mdi-subdirectory-arrow-right' hint='Get your API key at https://tinypng.com/developers' persistent-hint disabled diff --git a/client/components/admin/admin-groups-edit-rules.vue b/client/components/admin/admin-groups-edit-rules.vue index fa7678a6..67baafc9 100644 --- a/client/components/admin/admin-groups-edit-rules.vue +++ b/client/components/admin/admin-groups-edit-rules.vue @@ -29,25 +29,25 @@ v-btn.is-icon(slot='activator', flat, outline, color='primary') v-icon more_horiz v-list(dense) - v-list-tile(@click='comingSoon') - v-list-tile-avatar + v-list-item(@click='comingSoon') + v-list-item-avatar v-icon keyboard_capslock - v-list-tile-title Load Preset + v-list-item-title Load Preset v-divider - v-list-tile(@click='comingSoon') - v-list-tile-avatar + v-list-item(@click='comingSoon') + v-list-item-avatar v-icon publish - v-list-tile-title Save As Preset + v-list-item-title Save As Preset v-divider - v-list-tile(@click='comingSoon') - v-list-tile-avatar + v-list-item(@click='comingSoon') + v-list-item-avatar v-icon cloud_upload - v-list-tile-title Import Rules + v-list-item-title Import Rules v-divider - v-list-tile(@click='comingSoon') - v-list-tile-avatar + v-list-item(@click='comingSoon') + v-list-item-avatar v-icon cloud_download - v-list-tile-title Export Rules + v-list-item-title Export Rules v-card-text(:class='$vuetify.dark ? `grey darken-4-l5` : `white`') .rules .caption(v-if='group.pageRules.length === 0') @@ -81,15 +81,15 @@ v-chip.white--text.ml-0(v-if='index <= 1', small, label, :color='rule.deny ? `red` : `green`').caption {{ item.value }} v-chip.white--text.ml-0(v-if='index === 2', small, label, :color='rule.deny ? `red lighten-2` : `green lighten-2`').caption + {{ rule.roles.length - 2 }} more template(slot='item', slot-scope='props') - v-list-tile-action(style='min-width: 30px;') + v-list-item-action(style='min-width: 30px;') v-checkbox( v-model='props.tile.props.value' hide-details color='primary' ) v-icon.mr-2(:color='rule.deny ? `red` : `green`') {{props.item.icon}} - v-list-tile-content - v-list-tile-title.body-2 {{props.item.text}} + 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}} //- Match @@ -105,10 +105,10 @@ template(slot='selection', slot-scope='{ item, index }') .body-1 {{item.text}} template(slot='item', slot-scope='data') - v-list-tile-avatar + v-list-item-avatar v-avatar.white--text.radius-4(color='blue', size='30', tile) {{ data.item.icon }} - v-list-tile-content - v-list-tile-title(v-html='data.item.text') + v-list-item-content + 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`' @@ -125,8 +125,8 @@ template(slot='selection', slot-scope='{ item, index }') v-chip.white--text.ml-0(v-if='rule.locales.length === 1', small, label, :color='rule.deny ? `red` : `green`').caption {{ item.value.toUpperCase() }} v-chip.white--text.ml-0(v-else-if='index === 0', small, label, :color='rule.deny ? `red` : `green`').caption {{ rule.locales.length }} locales - v-list-tile(slot='prepend-item', @click='rule.locales = []') - v-list-tile-action(style='min-width: 30px;') + v-list-item(slot='prepend-item', @click='rule.locales = []') + v-list-item-action(style='min-width: 30px;') v-checkbox( :input-value='rule.locales.length === 0' hide-details @@ -134,19 +134,19 @@ readonly ) v-icon.mr-2(:color='rule.deny ? `red` : `green`') public - v-list-tile-content - v-list-tile-title.body-2 Any Locale + v-list-item-content + v-list-item-title.body-2 Any Locale v-divider(slot='prepend-item') template(slot='item', slot-scope='props') - v-list-tile-action(style='min-width: 30px;') + v-list-item-action(style='min-width: 30px;') v-checkbox( v-model='props.tile.props.value' hide-details color='primary' ) v-icon.mr-2(:color='rule.deny ? `red` : `green`') language - v-list-tile-content - v-list-tile-title.body-2 {{props.item.text}} + 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()}} //- Path diff --git a/client/components/admin/admin-groups-edit-users.vue b/client/components/admin/admin-groups-edit-users.vue index 059f1d99..e7966703 100644 --- a/client/components/admin/admin-groups-edit-users.vue +++ b/client/components/admin/admin-groups-edit-users.vue @@ -30,16 +30,16 @@ v-menu(bottom, right, min-width='200') v-btn(icon, slot='activator'): v-icon.grey--text.text--darken-1 more_horiz v-list - v-list-tile(:to='`/users/` + props.item.id') - v-list-tile-action: v-icon(color='primary') person - v-list-tile-content - v-list-tile-title View User Profile + v-list-item(:to='`/users/` + props.item.id') + v-list-item-action: v-icon(color='primary') person + v-list-item-content + v-list-item-title View User Profile template(v-if='props.item.id !== 2') v-divider - v-list-tile(@click='unassignUser(props.item.id)') - v-list-tile-action: v-icon(color='orange') highlight_off - v-list-tile-content - v-list-tile-title Unassign + v-list-item(@click='unassignUser(props.item.id)') + v-list-item-action: v-icon(color='orange') highlight_off + v-list-item-content + v-list-item-title Unassign template(slot='no-data') v-alert.ma-3(icon='warning', :value='true', outline) No users to display. .text-xs-center.py-2(v-if='group.users.length > 15') diff --git a/client/components/admin/admin-groups.vue b/client/components/admin/admin-groups.vue index 4623773f..798a85c4 100644 --- a/client/components/admin/admin-groups.vue +++ b/client/components/admin/admin-groups.vue @@ -8,19 +8,19 @@ .headline.blue--text.text--darken-2.animated.fadeInLeft Groups .subheading.grey--text.animated.fadeInLeft.wait-p4s Manage groups and their permissions v-spacer - v-btn.animated.fadeInDown.wait-p2s(color='grey', outline, @click='refresh', large) - v-icon refresh + v-btn.animated.fadeInDown.wait-p2s.mr-3(color='grey', outlined, @click='refresh', large) + v-icon mdi-refresh v-dialog(v-model='newGroupDialog', max-width='500') - v-btn.animated.fadeInDown(color='primary', depressed, slot='activator', large) - v-icon(left) add - span New Group - v-card.wiki-form + template(v-slot:activator='{ on }') + v-btn.animated.fadeInDown(color='primary', depressed, v-on='on', large) + v-icon(left) mdi-plus + span New Group + v-card .dialog-header.is-short New Group v-card-text v-text-field.md2( - outline - background-color='grey lighten-3' - prepend-icon='people' + outlined + prepend-icon='mdi-account-group' v-model='newGroupName' label='Group Name' counter='255' @@ -30,7 +30,7 @@ ) v-card-chin v-spacer - v-btn(flat, @click='newGroupDialog = false') Cancel + v-btn(text, @click='newGroupDialog = false') Cancel v-btn(color='primary', @click='createGroup') Create v-card.mt-3.animated.fadeInUp v-data-table( diff --git a/client/components/admin/admin-locale.vue b/client/components/admin/admin-locale.vue index ec9cd9cc..08c969b6 100644 --- a/client/components/admin/admin-locale.vue +++ b/client/components/admin/admin-locale.vue @@ -9,20 +9,19 @@ .subheading.grey--text.animated.fadeInLeft.wait-p4s {{ $t('admin:locale.subtitle') }} v-spacer v-btn.animated.fadeInDown(color='success', depressed, @click='save', large, :loading='loading') - v-icon(left) check + v-icon(left) mdi-check span {{$t('common:actions.apply')}} v-form.pt-3 v-layout(row wrap) v-flex(lg6 xs12) v-card.wiki-form.animated.fadeInUp v-toolbar(color='primary', dark, dense, flat) - v-toolbar-title - .subheading {{ $t('admin:locale.settings') }} + v-toolbar-title.subtitle-1 {{ $t('admin:locale.settings') }} v-card-text v-select( - outline + outlined :items='installedLocales' - prepend-icon='language' + prepend-icon='mdi-web' v-model='selectedLocale' item-value='code' item-text='nativeName' @@ -32,13 +31,13 @@ ) template(slot='item', slot-scope='data') template(v-if='typeof data.item !== "object"') - v-list-tile-content(v-text='data.item') + v-list-item-content(v-text='data.item') template(v-else) - v-list-tile-avatar + v-list-item-avatar v-avatar.blue.white--text(tile, size='40', v-html='data.item.code.toUpperCase()') - v-list-tile-content - v-list-tile-title(v-html='data.item.name') - v-list-tile-sub-title(v-html='data.item.nativeName') + v-list-item-content + v-list-item-title(v-html='data.item.name') + v-list-item-sub-title(v-html='data.item.nativeName') v-divider.mt-3 v-switch( v-model='autoUpdate' @@ -50,8 +49,7 @@ v-card.wiki-form.mt-3.animated.fadeInUp.wait-p2s v-toolbar(color='primary', dark, dense, flat) - v-toolbar-title - .subheading {{ $t('admin:locale.namespacing') }} + v-toolbar-title.subtitle-1 {{ $t('admin:locale.namespacing') }} v-card-text v-switch( v-model='namespacing' @@ -61,19 +59,19 @@ :hint='$t("admin:locale.namespaces.hint")' ) v-alert.mt-3( - outline + outlined color='orange' :value='true' - icon='warning' + icon='mdi-alert' ) span {{ $t('admin:locale.namespacingPrefixWarning.title', { langCode: selectedLocale }) }} .caption.grey--text {{ $t('admin:locale.namespacingPrefixWarning.subtitle') }} v-divider.mt-3.mb-4 v-select( - outline + outlined :disabled='!namespacing' :items='installedLocales' - prepend-icon='language' + prepend-icon='mdi-web' multiple chips deletable-chips @@ -87,52 +85,47 @@ ) template(slot='item', slot-scope='data') template(v-if='typeof data.item !== "object"') - v-list-tile-content(v-text='data.item') + v-list-item-content(v-text='data.item') template(v-else) - v-list-tile-avatar + v-list-item-avatar v-avatar.blue.white--text(tile, size='40', v-html='data.item.code.toUpperCase()') - v-list-tile-content - v-list-tile-title(v-html='data.item.name') - v-list-tile-sub-title(v-html='data.item.nativeName') - v-list-tile-action + v-list-item-content + v-list-item-title(v-html='data.item.name') + v-list-item-sub-title(v-html='data.item.nativeName') + v-list-item-action v-checkbox(:input-value='data.tile.props.value', color='primary', value) v-flex(lg6 xs12) v-card.animated.fadeInUp.wait-p4s v-toolbar(color='teal', dark, dense, flat) - v-toolbar-title - .subheading {{ $t('admin:locale.downloadTitle') }} + v-toolbar-title.subtitle-1 {{ $t('admin:locale.downloadTitle') }} v-data-table( :headers='headers', :items='locales', - hide-actions, + hide-default-footer, item-key='code', - :rows-per-page-items='[-1]' - ) - template(v-slot:items='lc') - td - v-chip.white--text(label, color='teal', small) {{lc.item.code}} - td - strong {{lc.item.name}} - td - span {{ lc.item.nativeName }} - td.text-xs-center - v-icon(v-if='lc.item.isRTL') check - td - .d-flex.align-center.pl-4 - .caption.mr-2(:class='lc.item.availability <= 33 ? `red--text` : (lc.item.availability <= 66) ? `orange--text` : `green--text`') {{lc.item.availability}}% - v-progress-circular(:value='lc.item.availability', width='2', size='20', :color='lc.item.availability <= 33 ? `red` : (lc.item.availability <= 66) ? `orange` : `green`') - td.text-xs-center - v-progress-circular(v-if='lc.item.isDownloading', indeterminate, color='blue', size='20', :width='2') - v-btn(v-else-if='lc.item.isInstalled && lc.item.installDate < lc.item.updatedAt', icon, @click='download(lc.item)') - v-icon.blue--text cached - v-btn(v-else-if='lc.item.isInstalled', icon, @click='download(lc.item)') - v-icon.green--text check - v-btn(v-else, icon, @click='download(lc.item)') - v-icon.grey--text cloud_download + :items-per-page='1000' + ) + template(v-slot:item.code='{ item }') + v-chip.white--text(label, color='teal', small) {{item.code}} + template(v-slot:item.name='{ item }') + strong {{item.name}} + template(v-slot:item.isRTL='{ item }') + v-icon(v-if='item.isRTL') mdi-check + template(v-slot:item.availability='{ item }') + .d-flex.align-center.pl-4 + v-progress-circular(:value='item.availability', width='2', size='20', :color='item.availability <= 33 ? `red` : (item.availability <= 66) ? `orange` : `green`') + .caption.ml-2(:class='item.availability <= 33 ? `red--text` : (item.availability <= 66) ? `orange--text` : `green--text`') {{item.availability}}% + template(v-slot:item.isInstalled='{ item }') + v-progress-circular(v-if='item.isDownloading', indeterminate, color='blue', size='20', :width='2') + v-btn(v-else-if='item.isInstalled && item.installDate < item.updatedAt', icon, @click='download(item)') + v-icon.blue--text mdi-cached + v-btn(v-else-if='item.isInstalled', icon, @click='download(item)') + v-icon.green--text mdi-check + v-btn(v-else, icon, small, @click='download(item)') + v-icon.grey--text mdi-cloud-download v-card.wiki-form.mt-3.animated.fadeInUp.wait-p5s v-toolbar(color='teal', dark, dense, flat) - v-toolbar-title - .subheading {{ $t('admin:locale.sideload') }} + v-toolbar-title.subtitle-1 {{ $t('admin:locale.sideload') }} v-spacer v-chip(label, color='white', small).teal--text coming soon v-card-text @@ -170,7 +163,7 @@ export default { text: this.$t('admin:locale.code'), align: 'left', value: 'code', - width: 10 + width: 90 }, { text: this.$t('admin:locale.name'), @@ -193,12 +186,13 @@ export default { text: this.$t('admin:locale.availability'), align: 'center', value: 'availability', + sortable: false, width: 100 }, { text: this.$t('admin:locale.download'), align: 'center', - value: 'code', + value: 'isInstalled', sortable: false, width: 100 } diff --git a/client/components/admin/admin-mail.vue b/client/components/admin/admin-mail.vue index 6fda10c1..28f95385 100644 --- a/client/components/admin/admin-mail.vue +++ b/client/components/admin/admin-mail.vue @@ -22,7 +22,7 @@ v-subheader {{ $t('admin:mail.sender') }} .px-3.pb-3 v-text-field( - outline + outlined v-model='config.senderName' :label='$t(`admin:mail.senderName`)' required @@ -30,7 +30,7 @@ prepend-icon='person' ) v-text-field( - outline + outlined v-model='config.senderEmail' :label='$t(`admin:mail.senderEmail`)' required @@ -41,7 +41,7 @@ v-subheader {{ $t('admin:mail.smtp') }} .px-3.pb-3 v-text-field( - outline + outlined v-model='config.host' :label='$t(`admin:mail.smtpHost`)' required @@ -49,7 +49,7 @@ prepend-icon='memory' ) v-text-field( - outline + outlined v-model='config.port' :label='$t(`admin:mail.smtpPort`)' required @@ -67,7 +67,7 @@ prepend-icon='vpn_lock' ) v-text-field.mt-3( - outline + outlined v-model='config.user' :label='$t(`admin:mail.smtpUser`)' required @@ -75,7 +75,7 @@ prepend-icon='lock_outline' ) v-text-field( - outline + outlined v-model='config.pass' :label='$t(`admin:mail.smtpPwd`)' required @@ -98,7 +98,7 @@ prepend-icon='vpn_key' ) v-text-field( - outline + outlined v-model='config.dkimDomainName' :label='$t(`admin:mail.dkimDomainName`)' :counter='255' @@ -106,7 +106,7 @@ :disabled='!config.useDKIM' ) v-text-field( - outline + outlined v-model='config.dkimKeySelector' :label='$t(`admin:mail.dkimKeySelector`)' :counter='255' @@ -114,7 +114,7 @@ :disabled='!config.useDKIM' ) v-text-field( - outline + outlined v-model='config.dkimPrivateKey' :label='$t(`admin:mail.dkimPrivateKey`)' prepend-icon='vpn_key' @@ -131,7 +131,7 @@ .pa-3 .body-2.grey--text.text--darken-2 {{ $t('admin:mail.testHint') }} v-text-field.mt-3( - outline + outlined v-model='testEmail' :label='$t(`admin:mail.testRecipient`)' :counter='255' diff --git a/client/components/admin/admin-navigation.vue b/client/components/admin/admin-navigation.vue index 33af3c4b..8cb7a03b 100644 --- a/client/components/admin/admin-navigation.vue +++ b/client/components/admin/admin-navigation.vue @@ -8,30 +8,30 @@ .headline.primary--text.animated.fadeInLeft {{$t('navigation.title')}} .subheading.grey--text.animated.fadeInLeft.wait-p4s {{$t('navigation.subtitle')}} v-spacer - v-btn.animated.fadeInDown.wait-p2s(outline, color='grey', @click='refresh', large) - v-icon refresh + v-btn.animated.fadeInDown.wait-p2s.mr-3(outlined, color='grey', @click='refresh', large) + v-icon mdi-refresh v-btn.animated.fadeInDown(color='success', depressed, @click='save', large) - v-icon(left) check + v-icon(left) mdi-check span {{$t('common:actions.apply')}} v-container.pa-0.mt-3(fluid, grid-list-lg) v-layout(row) v-flex(style='flex: 0 0 350px;') v-card.animated.fadeInUp - v-list.py-2(dense, dark, :class='navTree.length < 1 ? "grey lighten-4" : "primary"') - v-list-tile(v-if='navTree.length < 1') - v-list-tile-avatar: v-icon(color='grey') explore_off - v-list-tile-content + v-list.py-2(dense, nav, dark, :class='navTree.length < 1 ? "grey lighten-4" : "primary"') + v-list-item(v-if='navTree.length < 1') + v-list-item-avatar(size='24'): v-icon(color='grey') explore_off + v-list-item-content .caption.grey--text {{$t('navigation.emptyList')}} draggable(v-model='navTree') template(v-for='navItem in navTree') - v-list-tile( + v-list-item( v-if='navItem.kind === "link"' :key='navItem.id' :class='(navItem === current) ? "blue" : ""' @click='selectItem(navItem)' ) - v-list-tile-avatar: v-icon {{navItem.icon}} - v-list-tile-title {{navItem.label}} + v-list-item-avatar(size='24'): v-icon {{navItem.icon}} + v-list-item-title {{navItem.label}} .py-2.clickable( v-else-if='navItem.kind === "divider"' :key='navItem.id' @@ -47,58 +47,56 @@ ) {{navItem.label}} v-card-chin v-menu(offset-y, bottom, min-width='200px', style='flex: 1 1;') - v-btn(slot='activator', color='primary', depressed, block) - v-icon(left) add - span {{$t('common:actions.add')}} + template(v-slot:activator='{ on }') + v-btn(v-on='on', color='primary', depressed, block) + v-icon(left) mdi-plus + span {{$t('common:actions.add')}} v-list - v-list-tile(@click='addItem("link")') - v-list-tile-avatar: v-icon link - v-list-tile-title {{$t('navigation.link')}} - v-list-tile(@click='addItem("header")') - v-list-tile-avatar: v-icon title - v-list-tile-title {{$t('navigation.header')}} - v-list-tile(@click='addItem("divider")') - v-list-tile-avatar: v-icon power_input - v-list-tile-title {{$t('navigation.divider')}} + v-list-item(@click='addItem("link")') + v-list-item-avatar(size='24'): v-icon mdi-link + v-list-item-title {{$t('navigation.link')}} + v-list-item(@click='addItem("header")') + v-list-item-avatar(size='24'): v-icon mdi-format-title + v-list-item-title {{$t('navigation.header')}} + v-list-item(@click='addItem("divider")') + v-list-item-avatar(size='24'): v-icon mdi-minus + v-list-item-title {{$t('navigation.divider')}} v-flex.animated.fadeInUp.wait-p2s v-card.wiki-form(v-if='current.kind === "link"') - v-toolbar(dense, color='blue', flat, dark) - .subheading {{$t('navigation.edit', { kind: $t('navigation.link') })}} + v-toolbar(dense, color='blue', flat, dark).subtitle-1 {{$t('navigation.edit', { kind: $t('navigation.link') })}} v-card-text v-text-field( - outline + outlined :label='$t("navigation.label")' - prepend-icon='title' + prepend-icon='mdi-format-title' v-model='current.label' ) v-text-field( - outline + outlined :label='$t("navigation.icon")' - prepend-icon='casino' + prepend-icon='mdi-dice-5' v-model='current.icon' hide-details ) - .caption.pt-3.pl-5 The default icon set is #[strong Material Icons]. In order to use another icon set, you must first select it in the Theme administration section. - .caption.pt-3.pl-5 #[strong Material Icons] #[em (default)] - .caption.pl-5 Refer to the #[a(href='https://material.io/tools/icons/?style=baseline', target='_blank') Material Icons Reference] for the list of all possible values. + .caption.pt-3.pl-5 The default icon set is #[strong Material Design Icons]. In order to use another icon set, you must first select it in the Theme administration section. .caption.pt-3.pl-5: strong Material Design Icons - .caption.pl-5 Refer to the #[a(href='https://cdn.materialdesignicons.com/3.7.95/', target='_blank') Material Design Icons Reference] for the list of all possible values. You must prefix all values with #[code mdi-], e.g. #[code mdi-home] + .caption.pl-5 Refer to the #[a(href='https://materialdesignicons.com/', target='_blank') Material Design Icons Reference] for the list of all possible values. You must prefix all values with #[code mdi-], e.g. #[code mdi-home] .caption.pt-3.pl-5: strong Font Awesome 5 .caption.pl-5 Refer to the #[a(href='https://fontawesome.com/icons?d=gallery&m=free', target='_blank') Font Awesome 5 Reference] for the list of all possible values. You must prefix all values with #[code fas fa-], e.g. #[code fas fa-home] .caption.pt-3.pl-5: strong Font Awesome 4 .caption.pl-5 Refer to the #[a(href='https://fontawesome.com/v4.7.0/icons/', target='_blank') Font Awesome 4 Reference] for the list of all possible values. You must prefix all values with #[code fa fa-], e.g. #[code fa fa-home] v-select.mt-4( - outline + outlined :label='$t("navigation.targetType")' - prepend-icon='near_me' + prepend-icon='mdi-near-me' :items='navTypes' v-model='current.targetType' ) v-text-field( v-if='current.targetType === `external`' - outline + outlined :label='$t("navigation.target")' - prepend-icon='near_me' + prepend-icon='mdi-near-me' v-model='current.target' ) v-btn( @@ -108,11 +106,11 @@ disabled @click='selectPage' ) - v-icon(left) search + v-icon(left) mdi-search span Select Page... v-text-field( v-else-if='current.targetType === `search`' - outline + outlined :label='$t("navigation.navType.searchQuery")' prepend-icon='search' v-model='current.target' @@ -120,28 +118,27 @@ v-card-chin v-spacer - v-btn(color='red', outline, @click='deleteItem(current)') - v-icon(left) delete + v-btn.px-5(color='red', outlined, @click='deleteItem(current)') + v-icon(left) mdi-delete span {{$t('navigation.delete', { kind: $t('navigation.link') })}} v-card(v-else-if='current.kind === "header"') v-toolbar(dense, color='blue', flat, dark) .subheading {{$t('navigation.edit', { kind: $t('navigation.header') })}} v-card-text v-text-field( - outline - background-color='grey lighten-2' + outlined :label='$t("navigation.label")' - prepend-icon='title' + prepend-icon='mdi-format-title' v-model='current.label' ) v-card-chin v-spacer - v-btn(color='red', outline, @click='deleteItem(current)') - v-icon(left) delete + v-btn.px-5(color='red', outlined, @click='deleteItem(current)') + v-icon(left) mdi-delete span {{$t('navigation.delete', { kind: $t('navigation.header') })}} div(v-else-if='current.kind === "divider"') - v-btn.mt-0(color='red', outline, @click='deleteItem(current)') - v-icon(left) delete + v-btn.mt-0.px-5(color='red', outlined, @click='deleteItem(current)') + v-icon(left) mdi-delete span {{$t('navigation.delete', { kind: $t('navigation.divider') })}} v-card(v-else) v-card-text.grey--text(v-if='navTree.length > 0') {{$t('navigation.noSelectionText')}} @@ -172,7 +169,7 @@ export default { return [ // { text: this.$t('navigation.navType.external'), value: 'external' }, { text: this.$t('navigation.navType.home'), value: 'home' }, - { text: 'Internal Path / External Link', value: 'external' }, + { text: 'Internal Path / External Link', value: 'external' } // { text: this.$t('navigation.navType.page'), value: 'page' } // { text: this.$t('navigation.navType.searchQuery'), value: 'search' } ] @@ -189,7 +186,7 @@ export default { newItem = { ...newItem, label: this.$t('navigation.untitled', { kind: this.$t(`navigation.link`) }), - icon: 'chevron_right', + icon: 'mdi-chevron-right', targetType: 'home', target: '/' } diff --git a/client/components/admin/admin-pages-edit.vue b/client/components/admin/admin-pages-edit.vue index 5e1d5a57..90a66f30 100644 --- a/client/components/admin/admin-pages-edit.vue +++ b/client/components/admin/admin-pages-edit.vue @@ -54,41 +54,41 @@ v-icon.mr-2 subject span Properties v-list.py-0(two-line, dense) - v-list-tile - v-list-tile-content - v-list-tile-title.caption.grey--text Title - v-list-tile-sub-title.body-2.grey--text.text--darken-3 {{ page.title }} + v-list-item + v-list-item-content + v-list-item-title.caption.grey--text Title + v-list-item-sub-title.body-2.grey--text.text--darken-3 {{ page.title }} v-divider - v-list-tile - v-list-tile-content - v-list-tile-title.caption.grey--text Description - v-list-tile-sub-title.body-2.grey--text.text--darken-3 {{ page.description || '-' }} + v-list-item + v-list-item-content + v-list-item-title.caption.grey--text Description + v-list-item-sub-title.body-2.grey--text.text--darken-3 {{ page.description || '-' }} v-divider - v-list-tile - v-list-tile-content - v-list-tile-title.caption.grey--text Locale - v-list-tile-sub-title.body-2.grey--text.text--darken-3 {{ page.locale }} - v-list-tile-action + v-list-item + v-list-item-content + v-list-item-title.caption.grey--text Locale + v-list-item-sub-title.body-2.grey--text.text--darken-3 {{ page.locale }} + v-list-item-action v-btn(icon) v-icon(color='grey') edit v-divider - v-list-tile - v-list-tile-content - v-list-tile-title.caption.grey--text Path - v-list-tile-sub-title.body-2.grey--text.text--darken-3 {{ page.path }} - v-list-tile-action + v-list-item + v-list-item-content + v-list-item-title.caption.grey--text Path + v-list-item-sub-title.body-2.grey--text.text--darken-3 {{ page.path }} + v-list-item-action v-btn(icon) v-icon(color='grey') edit v-divider - v-list-tile - v-list-tile-content - v-list-tile-title.caption.grey--text Editor - v-list-tile-sub-title.body-2.grey--text.text--darken-3 {{ page.editor || '?' }} + v-list-item + v-list-item-content + v-list-item-title.caption.grey--text Editor + v-list-item-sub-title.body-2.grey--text.text--darken-3 {{ page.editor || '?' }} v-divider - v-list-tile - v-list-tile-content - v-list-tile-title.caption.grey--text Content Type - v-list-tile-sub-title.body-2.grey--text.text--darken-3 {{ page.contentType || '?' }} + v-list-item + v-list-item-content + v-list-item-title.caption.grey--text Content Type + v-list-item-sub-title.body-2.grey--text.text--darken-3 {{ page.contentType || '?' }} v-toolbar.elevation-2.mt-3.animated.fadeInUp.wait-p4s(color='white', dense) v-spacer @@ -117,25 +117,25 @@ v-icon.mr-2 people span Users v-list.py-0(two-line, dense) - v-list-tile - v-list-tile-avatar + v-list-item + v-list-item-avatar v-btn(icon, :to='`/users/` + page.creatorId') v-icon(color='grey') person - v-list-tile-content - v-list-tile-title.caption.grey--text Creator - v-list-tile-sub-title.body-2.grey--text.text--darken-3 {{ page.creatorName }} #[em.caption ({{ page.creatorEmail }})] - v-list-tile-action - v-list-tile-action-text {{ page.createdAt | moment('calendar') }} + v-list-item-content + v-list-item-title.caption.grey--text Creator + v-list-item-sub-title.body-2.grey--text.text--darken-3 {{ page.creatorName }} #[em.caption ({{ page.creatorEmail }})] + v-list-item-action + v-list-item-action-text {{ page.createdAt | moment('calendar') }} v-divider - v-list-tile - v-list-tile-avatar + v-list-item + v-list-item-avatar v-btn(icon, :to='`/users/` + page.authorId') v-icon(color='grey') person - v-list-tile-content - v-list-tile-title.caption.grey--text Last Editor - v-list-tile-sub-title.body-2.grey--text.text--darken-3 {{ page.authorName }} #[em.caption ({{ page.authorEmail }})] - v-list-tile-action - v-list-tile-action-text {{ page.updatedAt | moment('calendar') }} + v-list-item-content + v-list-item-title.caption.grey--text Last Editor + v-list-item-sub-title.body-2.grey--text.text--darken-3 {{ page.authorName }} #[em.caption ({{ page.authorEmail }})] + v-list-item-action + v-list-item-action-text {{ page.updatedAt | moment('calendar') }} v-card.mt-3.animated.fadeInUp.wait-p4s v-toolbar(color='primary', dense, dark, flat) v-icon.mr-2 history diff --git a/client/components/admin/admin-pages.vue b/client/components/admin/admin-pages.vue index 7eff1161..00e48af0 100644 --- a/client/components/admin/admin-pages.vue +++ b/client/components/admin/admin-pages.vue @@ -8,37 +8,34 @@ .headline.blue--text.text--darken-2.animated.fadeInLeft Pages .subheading.grey--text.animated.fadeInLeft.wait-p2s Manage pages v-spacer - v-btn.animated.fadeInDown.wait-p1s(color='grey', outline, @click='refresh', large) - v-icon.grey--text refresh - v-btn.animated.fadeInDown(color='primary', outline, large, @click='recyclebin', disabled) - v-icon(left) delete_outline + v-btn.animated.fadeInDown.wait-p1s(color='grey', outlined, @click='refresh', large) + v-icon.grey--text mdi-refresh + v-btn.animated.fadeInDown.mx-3(color='primary', outlined, large, @click='recyclebin', disabled) + v-icon(left) mdi-delete-outline span Recycle Bin v-btn.animated.fadeInDown(color='primary', depressed, large, @click='newpage', disabled) - v-icon(left) add + v-icon(left) mdi-plus span New Page v-card.wiki-form.mt-3.animated.fadeInUp v-toolbar(flat, :color='$vuetify.dark ? `grey darken-3-d5` : `grey lighten-5`', height='80') v-spacer v-text-field( - outline + outlined v-model='search' - append-icon='search' + prepend-inner-icon='mdi-file-search-outline' label='Search Pages...' - single-line hide-details ) v-select.ml-2( - outline + outlined hide-details - single-line label='Locale' :items='langs' v-model='selectedLang' ) v-select.ml-2( - outline + outlined hide-details - single-line label='Publish State' :items='states' v-model='selectedState' diff --git a/client/components/admin/admin-rendering.vue b/client/components/admin/admin-rendering.vue index 1a06ca73..c63e6cd0 100644 --- a/client/components/admin/admin-rendering.vue +++ b/client/components/admin/admin-rendering.vue @@ -43,18 +43,18 @@ v-spacer v-list.py-0(two-line, dense) template(v-for='(rdr, n) in core.children') - v-list-tile( + v-list-item( avatar :key='rdr.key' @click='selectRenderer(rdr.key)' :class='currentRenderer.key === rdr.key ? (darkMode ? `grey darken-4-l4` : `blue lighten-5`) : ``' ) - v-list-tile-avatar + v-list-item-avatar v-icon(:color='currentRenderer.key === rdr.key ? "primary" : "grey"') {{rdr.icon}} - v-list-tile-content - v-list-tile-title {{rdr.title}} - v-list-tile-sub-title {{rdr.description}} - v-list-tile-avatar + v-list-item-content + v-list-item-title {{rdr.title}} + v-list-item-sub-title {{rdr.description}} + v-list-item-avatar status-indicator(v-if='rdr.isEnabled', positive, pulse) status-indicator(v-else, negative, pulse) v-divider.my-0(v-if='n < core.children.length - 1') diff --git a/client/components/admin/admin-search.vue b/client/components/admin/admin-search.vue index 7d9864f5..0455108a 100644 --- a/client/components/admin/admin-search.vue +++ b/client/components/admin/admin-search.vue @@ -23,15 +23,15 @@ .subheading {{$t('admin:search.searchEngine')}} v-list.py-0(two-line, dense) template(v-for='(eng, idx) in engines') - v-list-tile(:key='eng.key', @click='selectedEngine = eng.key', :disabled='!eng.isAvailable') - v-list-tile-avatar + v-list-item(:key='eng.key', @click='selectedEngine = eng.key', :disabled='!eng.isAvailable') + v-list-item-avatar v-icon(color='grey', v-if='!eng.isAvailable') cancel v-icon(color='primary', v-else-if='eng.key === selectedEngine') radio_button_checked v-icon(color='grey', v-else) radio_button_unchecked - v-list-tile-content - v-list-tile-title.body-2(:class='!eng.isAvailable ? `grey--text` : (selectedEngine === eng.key ? `primary--text` : ``)') {{ eng.title }} - v-list-tile-sub-title.caption(:class='!eng.isAvailable ? `grey--text text--lighten-1` : (selectedEngine === eng.key ? `blue--text ` : ``)') {{ eng.description }} - v-list-tile-avatar(v-if='selectedEngine === eng.key') + v-list-item-content + v-list-item-title.body-2(:class='!eng.isAvailable ? `grey--text` : (selectedEngine === eng.key ? `primary--text` : ``)') {{ eng.title }} + v-list-item-sub-title.caption(:class='!eng.isAvailable ? `grey--text text--lighten-1` : (selectedEngine === eng.key ? `blue--text ` : ``)') {{ eng.description }} + v-list-item-avatar(v-if='selectedEngine === eng.key') v-icon.animated.fadeInLeft(color='primary') arrow_forward_ios v-divider(v-if='idx < engines.length - 1') diff --git a/client/components/admin/admin-storage.vue b/client/components/admin/admin-storage.vue index 7709bbfc..20f45dab 100644 --- a/client/components/admin/admin-storage.vue +++ b/client/components/admin/admin-storage.vue @@ -20,15 +20,15 @@ .subheading {{$t('admin:storage.targets')}} v-list(two-line, dense).py-0 template(v-for='(tgt, idx) in targets') - v-list-tile(:key='tgt.key', @click='selectedTarget = tgt.key', :disabled='!tgt.isAvailable') - v-list-tile-avatar + v-list-item(:key='tgt.key', @click='selectedTarget = tgt.key', :disabled='!tgt.isAvailable') + v-list-item-avatar v-icon(color='grey', v-if='!tgt.isAvailable') indeterminate_check_box v-icon(color='primary', v-else-if='tgt.isEnabled', v-ripple, @click='tgt.key !== `local` && (tgt.isEnabled = false)') check_box v-icon(color='grey', v-else, v-ripple, @click='tgt.isEnabled = true') check_box_outline_blank - v-list-tile-content - v-list-tile-title.body-2(:class='!tgt.isAvailable ? `grey--text` : (selectedTarget === tgt.key ? `primary--text` : ``)') {{ tgt.title }} - v-list-tile-sub-title.caption(:class='!tgt.isAvailable ? `grey--text text--lighten-1` : (selectedTarget === tgt.key ? `blue--text ` : ``)') {{ tgt.description }} - v-list-tile-avatar(v-if='selectedTarget === tgt.key') + v-list-item-content + v-list-item-title.body-2(:class='!tgt.isAvailable ? `grey--text` : (selectedTarget === tgt.key ? `primary--text` : ``)') {{ tgt.title }} + v-list-item-sub-title.caption(:class='!tgt.isAvailable ? `grey--text text--lighten-1` : (selectedTarget === tgt.key ? `blue--text ` : ``)') {{ tgt.description }} + v-list-item-avatar(v-if='selectedTarget === tgt.key') v-icon.animated.fadeInLeft(color='primary') arrow_forward_ios v-divider(v-if='idx < targets.length - 1') @@ -43,28 +43,28 @@ ) v-list.py-0(two-line, dense) template(v-for='(tgt, n) in status') - v-list-tile(:key='tgt.key') + v-list-item(:key='tgt.key') template(v-if='tgt.status === `pending`') - v-list-tile-avatar(color='purple') + v-list-item-avatar(color='purple') v-icon(color='white') schedule - v-list-tile-content - v-list-tile-title.body-2 {{tgt.title}} - v-list-tile-sub-title.purple--text.caption {{tgt.status}} - v-list-tile-action + v-list-item-content + v-list-item-title.body-2 {{tgt.title}} + v-list-item-sub-title.purple--text.caption {{tgt.status}} + v-list-item-action v-progress-circular(indeterminate, :size='20', :width='2', color='purple') template(v-else-if='tgt.status === `operational`') - v-list-tile-avatar(color='green') + v-list-item-avatar(color='green') v-icon(color='white') check_circle - v-list-tile-content - v-list-tile-title.body-2 {{tgt.title}} - v-list-tile-sub-title.green--text.caption {{$t('admin:storage.lastSync', { time: $options.filters.moment(tgt.lastAttempt, 'from') })}} + v-list-item-content + v-list-item-title.body-2 {{tgt.title}} + v-list-item-sub-title.green--text.caption {{$t('admin:storage.lastSync', { time: $options.filters.moment(tgt.lastAttempt, 'from') })}} template(v-else) - v-list-tile-avatar(color='red') + v-list-item-avatar(color='red') v-icon(color='white') highlight_off - v-list-tile-content - v-list-tile-title.body-2 {{tgt.title}} - v-list-tile-sub-title.red--text.caption {{$t('admin:storage.lastSyncAttempt', { time: $options.filters.moment(tgt.lastAttempt, 'from') })}} - v-list-tile-action + v-list-item-content + v-list-item-title.body-2 {{tgt.title}} + v-list-item-sub-title.red--text.caption {{$t('admin:storage.lastSyncAttempt', { time: $options.filters.moment(tgt.lastAttempt, 'from') })}} + v-list-item-action v-menu v-btn(slot='activator', icon) v-icon(color='red') info @@ -73,7 +73,7 @@ v-card-text {{tgt.message}} v-divider(v-if='n < status.length - 1') - v-list-tile(v-if='status.length < 1') + v-list-item(v-if='status.length < 1') em {{$t('admin:storage.noTarget')}} v-flex(xs12, lg9) diff --git a/client/components/admin/admin-system.vue b/client/components/admin/admin-system.vue index d8d6c7f5..67b070d4 100644 --- a/client/components/admin/admin-system.vue +++ b/client/components/admin/admin-system.vue @@ -13,83 +13,83 @@ v-btn.animated.fadeInLeft.wait-p2s.btn-animate-rotate(fab, absolute, right, top, small, light, @click='refresh'): v-icon refresh v-list(two-line, dense) v-subheader Wiki.js - v-list-tile(avatar) - v-list-tile-avatar + v-list-item(avatar) + v-list-item-avatar v-icon.blue.white--text system_update_alt - v-list-tile-content - v-list-tile-title {{ $t('admin:system.currentVersion') }} - v-list-tile-sub-title {{ info.currentVersion }} - v-list-tile(avatar) - v-list-tile-avatar + v-list-item-content + v-list-item-title {{ $t('admin:system.currentVersion') }} + v-list-item-sub-title {{ info.currentVersion }} + v-list-item(avatar) + v-list-item-avatar v-icon.blue.white--text open_in_browser - v-list-tile-content - v-list-tile-title {{ $t('admin:system.latestVersion') }} - v-list-tile-sub-title {{ info.latestVersion }} - v-list-tile-action - v-list-tile-action-text {{ $t('admin:system.published') }} {{ info.latestVersionReleaseDate | moment('from') }} + v-list-item-content + v-list-item-title {{ $t('admin:system.latestVersion') }} + v-list-item-sub-title {{ info.latestVersion }} + v-list-item-action + v-list-item-action-text {{ $t('admin:system.published') }} {{ info.latestVersionReleaseDate | moment('from') }} v-divider.mt-3 v-subheader {{ $t('admin:system.hostInfo') }} - v-list-tile(avatar) - v-list-tile-avatar + v-list-item(avatar) + v-list-item-avatar v-avatar.blue-grey(size='40') img(:src='`/svg/icon-` + platformLogo + `-logo.svg`', alt='Platform', style='width: 24px;') - v-list-tile-content - v-list-tile-title {{ $t('admin:system.os') }} - v-list-tile-sub-title {{ (info.platform === 'docker') ? 'Docker Container (Linux)' : info.operatingSystem }} - v-list-tile(avatar) - v-list-tile-avatar + v-list-item-content + v-list-item-title {{ $t('admin:system.os') }} + v-list-item-sub-title {{ (info.platform === 'docker') ? 'Docker Container (Linux)' : info.operatingSystem }} + v-list-item(avatar) + v-list-item-avatar v-icon.blue-grey.white--text computer - v-list-tile-content - v-list-tile-title {{ $t('admin:system.hostname') }} - v-list-tile-sub-title {{ info.hostname }} - v-list-tile(avatar) - v-list-tile-avatar + v-list-item-content + v-list-item-title {{ $t('admin:system.hostname') }} + v-list-item-sub-title {{ info.hostname }} + v-list-item(avatar) + v-list-item-avatar v-icon.blue-grey.white--text nfc - v-list-tile-content - v-list-tile-title {{ $t('admin:system.cpuCores') }} - v-list-tile-sub-title {{ info.cpuCores }} - v-list-tile(avatar) - v-list-tile-avatar + v-list-item-content + v-list-item-title {{ $t('admin:system.cpuCores') }} + v-list-item-sub-title {{ info.cpuCores }} + v-list-item(avatar) + v-list-item-avatar v-icon.blue-grey.white--text memory - v-list-tile-content - v-list-tile-title {{ $t('admin:system.totalRAM') }} - v-list-tile-sub-title {{ info.ramTotal }} - v-list-tile(avatar) - v-list-tile-avatar + v-list-item-content + v-list-item-title {{ $t('admin:system.totalRAM') }} + v-list-item-sub-title {{ info.ramTotal }} + v-list-item(avatar) + v-list-item-avatar v-icon.blue-grey.white--text last_page - v-list-tile-content - v-list-tile-title {{ $t('admin:system.workingDirectory') }} - v-list-tile-sub-title {{ info.workingDirectory }} - v-list-tile(avatar) - v-list-tile-avatar + v-list-item-content + v-list-item-title {{ $t('admin:system.workingDirectory') }} + v-list-item-sub-title {{ info.workingDirectory }} + v-list-item(avatar) + v-list-item-avatar v-icon.blue-grey.white--text settings - v-list-tile-content - v-list-tile-title {{ $t('admin:system.configFile') }} - v-list-tile-sub-title {{ info.configFile }} + v-list-item-content + v-list-item-title {{ $t('admin:system.configFile') }} + v-list-item-sub-title {{ info.configFile }} v-flex(lg6 xs12) v-card.pb-3.animated.fadeInUp.wait-p4s v-list(dense) v-subheader Node.js - v-list-tile(avatar) - v-list-tile-avatar + v-list-item(avatar) + v-list-item-avatar v-avatar.light-green(size='40') icon-node-js(fillColor='#FFFFFF') - v-list-tile-content - v-list-tile-title {{ info.nodeVersion }} + v-list-item-content + v-list-item-title {{ info.nodeVersion }} v-divider.mt-3 v-subheader {{ info.dbType }} - v-list-tile(avatar) - v-list-tile-avatar + v-list-item(avatar) + v-list-item-avatar v-avatar.indigo.darken-1(size='40') icon-database(fillColor='#FFFFFF') - v-list-tile-content - v-list-tile-title(v-html='dbVersion') - v-list-tile-sub-title {{ info.dbHost }} + v-list-item-content + v-list-item-title(v-html='dbVersion') + v-list-item-sub-title {{ info.dbHost }} v-alert.mt-3(:value='isDbLimited', color='deep-orange', icon='warning') {{ $t('admin:system.dbPartialSupport') }} diff --git a/client/components/admin/admin-theme.vue b/client/components/admin/admin-theme.vue index 0d183ecd..f677bd7a 100644 --- a/client/components/admin/admin-theme.vue +++ b/client/components/admin/admin-theme.vue @@ -9,37 +9,34 @@ .subheading.grey--text.animated.fadeInLeft.wait-p2s {{$t('admin:theme.subtitle')}} v-spacer v-btn.animated.fadeInRight(color='success', depressed, @click='save', large, :loading='loading') - v-icon(left) check + v-icon(left) mdi-check span {{$t('common:actions.apply')}} v-form.pt-3 v-layout(row wrap) v-flex(lg6 xs12) v-card.wiki-form.animated.fadeInUp v-toolbar(color='primary', dark, dense, flat) - v-toolbar-title - .subheading {{$t('admin:theme.title')}} + v-toolbar-title.subtitle-1 {{$t('admin:theme.title')}} v-card-text v-select( :items='themes' - outline - background-color='grey lighten-2' - prepend-icon='palette' + outlined + prepend-icon='mdi-palette' v-model='config.theme' :label='$t(`admin:theme.siteTheme`)' persistent-hint :hint='$t(`admin:theme.siteThemeHint`)' ) template(slot='item', slot-scope='data') - v-list-tile-avatar + v-list-item-avatar v-icon.blue--text(dark) filter_frames - v-list-tile-content - v-list-tile-title(v-html='data.item.text') - v-list-tile-sub-title(v-html='data.item.author') + v-list-item-content + v-list-item-title(v-html='data.item.text') + v-list-item-sub-title(v-html='data.item.author') v-select.mt-3( :items='iconsets' - outline - background-color='grey lighten-2' - prepend-icon='pets' + outlined + prepend-icon='mdi-paw' v-model='config.iconset' :label='$t(`admin:theme.iconset`)' persistent-hint @@ -56,14 +53,12 @@ v-card.wiki-form.mt-3.animated.fadeInUp.wait-p2s v-toolbar(color='primary', dark, dense, flat) - v-toolbar-title - .subheading {{$t(`admin:theme.codeInjection`)}} + v-toolbar-title.subtitle-1 {{$t(`admin:theme.codeInjection`)}} v-card-text v-textarea( v-model='config.injectCSS' :label='$t(`admin:theme.cssOverride`)' - outline - background-color='grey lighten-1' + outlined color='primary' persistent-hint :hint='$t(`admin:theme.cssOverrideHint`)' @@ -75,8 +70,7 @@ v-textarea.mt-3( v-model='config.injectHead' :label='$t(`admin:theme.headHtmlInjection`)' - outline - background-color='grey lighten-1' + outlined color='primary' persistent-hint :hint='$t(`admin:theme.headHtmlInjectionHint`)' @@ -85,8 +79,7 @@ v-textarea.mt-2( v-model='config.injectBody' :label='$t(`admin:theme.bodyHtmlInjection`)' - outline - background-color='grey lighten-1' + outlined color='primary' persistent-hint :hint='$t(`admin:theme.bodyHtmlInjectionHint`)' @@ -95,16 +88,15 @@ v-flex(lg6 xs12) v-card.animated.fadeInUp.wait-p2s v-toolbar(color='teal', dark, dense, flat) - v-toolbar-title - .subheading {{$t('admin:theme.downloadThemes')}} + v-toolbar-title.subtitle-1 {{$t('admin:theme.downloadThemes')}} v-spacer v-chip(label, color='white', small).teal--text coming soon v-data-table( :headers='headers', :items='themes', - hide-actions, + hide-default-footer, item-key='value', - :rows-per-page-items='[-1]' + :items-per-page='1000' ) template(v-slot:items='thm') td @@ -114,11 +106,11 @@ td.text-xs-center v-progress-circular(v-if='thm.item.isDownloading', indeterminate, color='blue', size='20', :width='2') v-btn(v-else-if='thm.item.isInstalled && thm.item.installDate < thm.item.updatedAt', icon) - v-icon.blue--text cached + v-icon.blue--text mdi-cached v-btn(v-else-if='thm.item.isInstalled', icon) - v-icon.green--text check + v-icon.green--text mdi-check v-btn(v-else, icon) - v-icon.grey--text cloud_download + v-icon.grey--text mdi-cloud-download