richard
/
wiki
mirror of https://github.com/Requarks/wiki.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

feat: alternate navigation icon set

pull/919/head
Nick 5 years ago
parent
b6f1e1805e
commit
4eda8d6635
9 changed files with 81 additions and 7 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 18
      client/components/admin/admin-navigation.vue
  2. 19
      client/components/admin/admin-theme.vue
  3. 4
      client/graph/admin/theme/theme-mutation-save.gql
  4. 1
      client/graph/admin/theme/theme-query-config.gql
  5. 20
      dev/templates/legacy.pug
  6. 20
      dev/templates/master.pug
  7. 1
      server/app/data.yml
  8. 3
      server/graph/resolvers/theming.js
  9. 2
      server/graph/schemas/theming.graphql

18
client/components/admin/admin-navigation.vue
View File

@ -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' }
]
}

19
client/components/admin/admin-theme.vue
View File

@ -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,

4
client/graph/admin/theme/theme-mutation-save.gql
View File

@ -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

1
client/graph/admin/theme/theme-query-config.gql
View File

@ -2,6 +2,7 @@ query {
theming {
config {
theme
iconset
darkMode
injectCSS
injectHead

20
dev/templates/legacy.pug
View File

@ -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) { %>

20
dev/templates/master.pug
View File

@ -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) { %>

1
server/app/data.yml
View File

@ -40,6 +40,7 @@ defaults:
title: Wiki.js
theming:
theme: 'default'
iconset: 'md'
darkMode: false
flags:
ldapdebug: false

3
server/graph/resolvers/theming.js
View File

@ -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 || '',

2
server/graph/schemas/theming.graphql
View File

@ -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

Write Preview
Loading…
Cancel
Save