From 4eda8d6635aa10a055fe8dbe1c2e451f41ee2c84 Mon Sep 17 00:00:00 2001 From: Nick Date: Sat, 13 Jul 2019 01:45:03 -0400 Subject: [PATCH] feat: alternate navigation icon set --- client/components/admin/admin-navigation.vue | 18 +++++++++++++---- client/components/admin/admin-theme.vue | 19 ++++++++++++++++++ .../graph/admin/theme/theme-mutation-save.gql | 4 ++-- .../graph/admin/theme/theme-query-config.gql | 1 + dev/templates/legacy.pug | 20 +++++++++++++++++++ dev/templates/master.pug | 20 +++++++++++++++++++ server/app/data.yml | 1 + server/graph/resolvers/theming.js | 3 ++- server/graph/schemas/theming.graphql | 2 ++ 9 files changed, 81 insertions(+), 7 deletions(-) diff --git a/client/components/admin/admin-navigation.vue b/client/components/admin/admin-navigation.vue index 36637f5b..33af3c4b 100644 --- a/client/components/admin/admin-navigation.vue +++ b/client/components/admin/admin-navigation.vue @@ -78,7 +78,15 @@ v-model='current.icon' hide-details ) - .caption.pt-2.pl-5 Refer to the #[a(href='https://material.io/tools/icons/?style=baseline', target='_blank') Material Design Icons Reference] for the list of all possible values. + .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: 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.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 :label='$t("navigation.targetType")' @@ -96,7 +104,8 @@ v-btn( v-else-if='current.targetType === "page"' color='indigo' - dark + :dark='false' + disabled @click='selectPage' ) v-icon(left) search @@ -161,9 +170,10 @@ export default { computed: { navTypes() { return [ - { text: this.$t('navigation.navType.external'), value: 'external' }, + // { text: this.$t('navigation.navType.external'), value: 'external' }, { text: this.$t('navigation.navType.home'), value: 'home' }, - { text: this.$t('navigation.navType.page'), value: 'page' } + { text: 'Internal Path / External Link', value: 'external' }, + // { text: this.$t('navigation.navType.page'), value: 'page' } // { text: this.$t('navigation.navType.searchQuery'), value: 'search' } ] } diff --git a/client/components/admin/admin-theme.vue b/client/components/admin/admin-theme.vue index ee3eadca..85b2163d 100644 --- a/client/components/admin/admin-theme.vue +++ b/client/components/admin/admin-theme.vue @@ -35,6 +35,16 @@ v-list-tile-content v-list-tile-title(v-html='data.item.text') v-list-tile-sub-title(v-html='data.item.author') + v-select.mt-3( + :items='iconsets' + outline + background-color='grey lighten-2' + prepend-icon='pets' + v-model='config.iconset' + :label='$t(`admin:theme.iconset`)' + persistent-hint + :hint='$t(`admin:theme.iconsetHint`)' + ) v-divider.mt-3 v-switch( v-model='darkMode' @@ -43,6 +53,7 @@ persistent-hint :hint='$t(`admin:theme.darkModeHint`)' ) + v-card.wiki-form.mt-3.animated.fadeInUp.wait-p2s v-toolbar(color='primary', dark, dense, flat) v-toolbar-title @@ -102,9 +113,16 @@ export default { themes: [ { text: 'Default', author: 'requarks.io', value: 'default' } ], + iconsets: [ + { text: 'Material Icons (default)', value: 'md' }, + { text: 'Material Design Icons', value: 'mdi' }, + { text: 'Font Awesome 5', value: 'fa' }, + { text: 'Font Awesome 4', value: 'fa4' }, + ], config: { theme: 'default', darkMode: false, + iconset: '', injectCSS: '', injectHead: '', injectBody: '' @@ -130,6 +148,7 @@ export default { mutation: themeSaveMutation, variables: { theme: this.config.theme, + iconset: this.config.iconset, darkMode: this.darkMode, injectCSS: this.config.injectCSS, injectHead: this.config.injectHead, diff --git a/client/graph/admin/theme/theme-mutation-save.gql b/client/graph/admin/theme/theme-mutation-save.gql index 377f7d32..856442ce 100644 --- a/client/graph/admin/theme/theme-mutation-save.gql +++ b/client/graph/admin/theme/theme-mutation-save.gql @@ -1,6 +1,6 @@ -mutation($theme: String!, $darkMode: Boolean!, $injectCSS: String, $injectHead: String, $injectBody: String) { +mutation($theme: String!, $iconset: String!, $darkMode: Boolean!, $injectCSS: String, $injectHead: String, $injectBody: String) { theming { - setConfig(theme: $theme, darkMode: $darkMode, injectCSS: $injectCSS, injectHead: $injectHead, injectBody: $injectBody) { + setConfig(theme: $theme, iconset: $iconset, darkMode: $darkMode, injectCSS: $injectCSS, injectHead: $injectHead, injectBody: $injectBody) { responseResult { succeeded errorCode diff --git a/client/graph/admin/theme/theme-query-config.gql b/client/graph/admin/theme/theme-query-config.gql index 6e327b18..360cb2fa 100644 --- a/client/graph/admin/theme/theme-query-config.gql +++ b/client/graph/admin/theme/theme-query-config.gql @@ -2,6 +2,7 @@ query { theming { config { theme + iconset darkMode injectCSS injectHead diff --git a/dev/templates/legacy.pug b/dev/templates/legacy.pug index eb233c60..4248c7b6 100644 --- a/dev/templates/legacy.pug +++ b/dev/templates/legacy.pug @@ -27,6 +27,26 @@ html link(rel='icon', type='image/png', sizes=favsize + 'x' + favsize, href='/favicons/favicon-' + favsize + 'x' + favsize + '.png') link(rel='manifest', href='/manifest.json') + //- Icon Set + if config.theming.iconset === 'mdi' + link( + type='text/css' + rel='stylesheet' + href='https://cdn.materialdesignicons.com/3.7.95/css/materialdesignicons.min.css' + ) + else if config.theming.iconset === 'fa' + link( + type='text/css' + rel='stylesheet' + href='https://use.fontawesome.com/releases/v5.0.13/css/all.css' + ) + else if config.theming.iconset === 'fa4' + link( + type='text/css' + rel='stylesheet' + href='https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css' + ) + //- CSS <% for (var index in htmlWebpackPlugin.files.css) { %> <% if (htmlWebpackPlugin.files.cssIntegrity) { %> diff --git a/dev/templates/master.pug b/dev/templates/master.pug index c6b6a246..f5bca8fe 100644 --- a/dev/templates/master.pug +++ b/dev/templates/master.pug @@ -31,6 +31,26 @@ html script. var siteConfig = !{JSON.stringify(siteConfig)}; var siteLangs = !{JSON.stringify(langs)} + //- Icon Set + if config.theming.iconset === 'mdi' + link( + type='text/css' + rel='stylesheet' + href='https://cdn.materialdesignicons.com/3.7.95/css/materialdesignicons.min.css' + ) + else if config.theming.iconset === 'fa' + link( + type='text/css' + rel='stylesheet' + href='https://use.fontawesome.com/releases/v5.0.13/css/all.css' + ) + else if config.theming.iconset === 'fa4' + link( + type='text/css' + rel='stylesheet' + href='https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css' + ) + //- CSS <% for (var index in htmlWebpackPlugin.files.css) { %> <% if (htmlWebpackPlugin.files.cssIntegrity) { %> diff --git a/server/app/data.yml b/server/app/data.yml index 305a15c7..0d6dfd26 100644 --- a/server/app/data.yml +++ b/server/app/data.yml @@ -40,6 +40,7 @@ defaults: title: Wiki.js theming: theme: 'default' + iconset: 'md' darkMode: false flags: ldapdebug: false diff --git a/server/graph/resolvers/theming.js b/server/graph/resolvers/theming.js index 9962e676..89625c55 100644 --- a/server/graph/resolvers/theming.js +++ b/server/graph/resolvers/theming.js @@ -20,7 +20,7 @@ module.exports = { }] }, async config(obj, args, context, info) { - return _.pick(WIKI.config.theming, ['theme', 'darkMode', 'injectCSS', 'injectHead', 'injectBody']) + return _.pick(WIKI.config.theming, ['theme', 'iconset', 'darkMode', 'injectCSS', 'injectHead', 'injectBody']) } }, ThemingMutation: { @@ -35,6 +35,7 @@ module.exports = { WIKI.config.theming = { ...WIKI.config.theming, theme: args.theme, + iconset: args.iconset, darkMode: args.darkMode, injectCSS: args.injectCSS || '', injectHead: args.injectHead || '', diff --git a/server/graph/schemas/theming.graphql b/server/graph/schemas/theming.graphql index cb1f8481..eddebad4 100644 --- a/server/graph/schemas/theming.graphql +++ b/server/graph/schemas/theming.graphql @@ -26,6 +26,7 @@ type ThemingQuery { type ThemingMutation { setConfig( theme: String! + iconset: String! darkMode: Boolean! injectCSS: String injectHead: String @@ -39,6 +40,7 @@ type ThemingMutation { type ThemingConfig { theme: String! + iconset: String! darkMode: Boolean! injectCSS: String injectHead: String