liz/wikijs-fork
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: rtl display + dark theme improvements

Browse Source
This commit is contained in:
Nick
2019-06-07 20:04:35 -04:00
parent 1d4d379e03
commit 17f9f0baa9
13 changed files with 138 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client/client-app.js
View File

@@ -139,7 +139,9 @@ Vue.use(VueClipboards)
Vue.use(localization.VueI18Next)
Vue.use(helpers)
Vue.use(VeeValidate, { events: '' })
Vue.use(Vuetify)
Vue.use(Vuetify, {
rtl: siteConfig.rtl
})
Vue.use(VueMoment, { moment })
Vue.use(Vuescroll)
Vue.use(VueTour)

2
client/components/admin.vue
View File

@@ -5,7 +5,7 @@
v-spacer
.subheading.grey--text Administration Area
v-spacer
v-navigation-drawer.pb-0.admin-sidebar(v-model='adminDrawerShown', app, fixed, clipped, left, permanent)
v-navigation-drawer.pb-0.admin-sidebar(v-model='adminDrawerShown', app, fixed, clipped, :right='$vuetify.rtl', permanent)
vue-scroll(:ops='scrollStyle')
v-list(dense)
v-list-tile.pt-2(to='/dashboard')

6
client/components/admin/admin-locale.vue
View File

@@ -199,8 +199,14 @@ export default {
})
const resp = _.get(respRaw, 'data.localization.updateLocale.responseResult', {})
if (resp.succeeded) {
// Change UI language
WIKI.$i18n.i18next.changeLanguage(this.selectedLocale)
WIKI.$moment.locale(this.selectedLocale)
// Check for RTL
const curLocale = _.find(this.locales, ['code', this.selectedLocale])
this.$vuetify.rtl = curLocale && curLocale.isRTL
this.$store.commit('showNotification', {
message: 'Locale settings updated successfully.',
style: 'success',

5
client/components/common/nav-header.vue
View File

@@ -373,6 +373,11 @@ export default {
right: 12px;
border-radius: 4px !important;
@at-root .application--is-rtl & {
right: initial;
left: 12px;
}
&::before {
border-radius: 4px !important;
}

13
client/scss/base/base.scss
View File

@@ -63,3 +63,16 @@ html {
border-color: lighten(mc('grey', '900'), percentage($i/100)) !important;
}
}
.grey.darken-5 {
background-color: #0C0C0C !important;
border-color: #0C0C0C !important;
}
.blue.darken-5 {
background-color: darken(mc('blue', '900'), 20%) !important;
border-color: darken(mc('blue', '900'), 20%) !important;
}
.indigo.darken-5 {
background-color: darken(mc('indigo', '900'), 10%) !important;
border-color: darken(mc('indigo', '900'), 10%) !important;
}

2
client/store/site.js
View File

@@ -3,7 +3,7 @@ import { make } from 'vuex-pathify'
/* global siteConfig */
const state = {
company: '',
company: siteConfig.company,
dark: siteConfig.darkMode,
mascot: true,
title: siteConfig.title,

2
client/themes/default/components/nav-footer.vue
View File

@@ -6,7 +6,7 @@
</template>
<script>
import { get, sync } from 'vuex-pathify'
import { get } from 'vuex-pathify'
export default {
props: {

28
client/themes/default/components/page.vue
View File

@@ -2,16 +2,17 @@
v-app(v-scroll='upBtnScroll', :dark='darkMode')
nav-header
v-navigation-drawer(
:class='darkMode ? `grey darken-3` : `primary`'
:class='darkMode ? `grey darken-5` : `primary`'
dark
app
clipped
mobile-break-point='600'
:temporary='$vuetify.breakpoint.mdAndDown'
v-model='navShown'
:right='$vuetify.rtl'
)
vue-scroll(:ops='scrollStyle')
nav-sidebar(:color='darkMode ? `grey darken-3` : `primary`')
nav-sidebar(:color='darkMode ? `grey darken-5` : `primary`')
slot(name='sidebar')
v-fab-transition
@@ -20,7 +21,8 @@
color='primary'
fixed
bottom
left
:right='$vuetify.rtl'
:left='!$vuetify.rtl'
small
@click='navShown = !navShown'
v-if='$vuetify.breakpoint.mdAndDown'
@@ -48,16 +50,16 @@
v-divider
v-layout(row)
v-flex(xs12, lg9, xl10)
v-toolbar(:color='darkMode ? `grey darken-4` : `grey lighten-4`', flat, :height='90')
v-toolbar(:color='darkMode ? `grey darken-4-l3` : `grey lighten-4`', flat, :height='90')
div
.headline.grey--text(:class='darkMode ? `text-lighten-2` : `text--darken-3`') {{title}}
.headline.grey--text(:class='darkMode ? `text--lighten-2` : `text--darken-3`') {{title}}
.caption.grey--text.text--darken-1 {{description}}
v-divider
.contents(ref='container')
slot(name='contents')
v-flex(lg3, xl2, fill-height, v-if='$vuetify.breakpoint.lgAndUp')
v-toolbar(:color='darkMode ? `grey darken-4` : `grey lighten-4`', flat, :height='90')
v-toolbar(:color='darkMode ? `grey darken-4-l3` : `grey lighten-4`', flat, :height='90')
div
.caption.grey--text.text--lighten-1 Last edited by
.body-2.grey--text(:class='darkMode ? `` : `text--darken-3`') {{ authorName }}
@@ -70,7 +72,7 @@
v-divider
template(v-if='toc.length')
v-list.grey.pb-3(dense, :class='darkMode ? `darken-3-d3` : `lighten-3`')
v-subheader.pl-4(:class='darkMode ? `blue--text text--lighten-1` : `primary--text`') Table of contents
v-subheader.pl-4(:class='darkMode ? `indigo--text text--lighten-3` : `primary--text`') Table of Contents
template(v-for='(tocItem, tocIdx) in toc')
v-list-tile(@click='$vuetify.goTo(tocItem.anchor, scrollOpts)')
v-icon(color='grey') arrow_right
@@ -119,7 +121,17 @@
notify
search-results
v-fab-transition
v-btn(v-if='upBtnShown', fab, fixed, bottom, right, small, @click='$vuetify.goTo(0, scrollOpts)', color='primary')
v-btn(
v-if='upBtnShown'
fab
fixed
bottom
:right='!$vuetify.rtl'
:left='$vuetify.rtl'
small
@click='$vuetify.goTo(0, scrollOpts)'
color='primary'
)
v-icon arrow_upward
</template>

109
client/themes/default/scss/app.scss
View File

@@ -2,14 +2,19 @@
.contents {
color: mc('grey', '800');
padding-bottom: 50px;
padding: 24px 0 50px;
position: relative;
> div > *:first-child {
margin-top: 0;
}
@at-root .theme--dark & {
background-color: darken(mc('grey', '900'), 4%);
color: mc('grey', '300');
a {
color: mc('blue', '300');
color: mc('indigo', '200');
}
}
@@ -20,6 +25,10 @@
h1, h2, h3, h4, h5, h6 {
position: relative;
&:first-child {
padding-top: 0;
}
&:hover {
.toc-anchor {
display: block;
@@ -35,16 +44,20 @@
text-decoration: none;
color: mc('grey', '500');
}
& + h2, & + h3, & + h4, & + h5, & + h6 {
margin-top: 8px;
}
}
h1 {
padding-left: 24px;
padding: 0 24px;
color: mc('blue', '800');
margin-top: 2rem;
position: relative;
@at-root .theme--dark & {
color: mc('grey', '400');
color: mc('teal', '100');
}
&::after {
@@ -57,23 +70,25 @@
background: linear-gradient(to right, mc('theme', 'primary'), rgba(mc('theme', 'primary'), 0));
@at-root .theme--dark & {
background: linear-gradient(to right, mc('grey', '600'), rgba(mc('grey', '600'), 0));
}
background: linear-gradient(to right, mc('teal', '300') 0%, mc('teal', '500') 10%, rgba(mc('teal', '900'), 0) 100%);
}
& + h2, & + h3 {
margin-top: 8px;
@at-root .application--is-rtl & {
background: linear-gradient(to left, mc('theme', 'primary'), rgba(mc('theme', 'primary'), 0));
}
@at-root .theme--dark.application--is-rtl & {
background: linear-gradient(to left, mc('grey', '600'), rgba(mc('grey', '600'), 0));
}
}
}
h2 {
margin-left: 24px;
margin: 1rem 24px 0 24px;
padding: 8px 0 0 0;
color: mc('grey', '800');
position: relative;
margin-top: 1rem;
@at-root .theme--dark & {
color: mc('grey', '500');
color: mc('grey', '400');
}
&::after {
@@ -88,14 +103,17 @@
@at-root .theme--dark & {
background: linear-gradient(to right, mc('grey', '300'), rgba(mc('grey', '700'), 0));
}
}
& + h3 {
margin-top: 8px;
@at-root .application--is-rtl & {
background: linear-gradient(to left, mc('grey', '700'), rgba(mc('grey', '700'), 0));
}
@at-root .theme--dark.application--is-rtl & {
background: linear-gradient(to left, mc('grey', '300'), rgba(mc('grey', '700'), 0));
}
}
}
h3 {
margin-left: 24px;
margin: 0 24px;
padding: 8px 0 0 0;
color: mc('grey', '700');
position: relative;
@@ -111,7 +129,38 @@
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(to right, mc('grey', '500'), rgba(mc('grey', '500'), 0));
background: linear-gradient(to right, mc('grey', '500'), rgba(mc('grey', '500'), 0) 90%);
}
}
h4, h5, h6 {
font-size: 1rem;
margin: 0 24px;
padding: 8px 0 0 0;
color: mc('grey', '700');
position: relative;
@at-root .theme--dark & {
color: mc('grey', '600');
}
&::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(to right, mc('grey', '500'), rgba(mc('grey', '500'), 0) 70%);
}
}
h5 {
&::after {
background: linear-gradient(to right, mc('grey', '500'), rgba(mc('grey', '500'), 0) 50%);
}
}
h6 {
&::after {
background: linear-gradient(to right, mc('grey', '500'), rgba(mc('grey', '500'), 0) 30%);
}
}
@@ -123,6 +172,10 @@
padding: 1rem 24px 0 24px;
margin: 0;
text-align: justify;
@at-root .contents > div > p:first-child {
padding-top: 0;
}
}
hr {
@@ -143,9 +196,9 @@
blockquote {
padding: 0 0 1rem 0;
border: 1px solid mc('blue', '500');
border-left: 5px solid mc('blue', '500');
border-radius: .5rem;
margin: 1rem;
margin: 1rem 2rem;
> p:first-child .emoji {
margin-right: .5rem;
@@ -168,8 +221,8 @@
}
@at-root .theme--dark & {
background-color: mc('blue', '900');
background-image: radial-gradient(ellipse at top, mc('blue', '900'), darken(mc('blue', '900'), 5%));
background-color: mc('grey', '900');
background-image: radial-gradient(ellipse at top, mc('blue', '900'), rgba(darken(mc('blue', '900'), 5%), .2));
border-color: mc('blue', '500');
box-shadow: 0 0 2px 0 mc('grey', '900');
}
@@ -186,8 +239,8 @@
}
@at-root .theme--dark & {
background-color: mc('orange', '900');
background-image: radial-gradient(ellipse at top, mc('orange', '900'), darken(mc('orange', '900'), 5%));
background-color: mc('grey', '900');
background-image: radial-gradient(ellipse at top, mc('orange', '900'), rgba(darken(mc('orange', '900'), 5%), .2));
border-color: mc('orange', '500');
box-shadow: 0 0 2px 0 mc('grey', '900');
}
@@ -204,8 +257,8 @@
}
@at-root .theme--dark & {
background-color: mc('red', '900');
background-image: radial-gradient(ellipse at top, mc('red', '900'), darken(mc('red', '900'), 5%));
background-color: mc('grey', '900');
background-image: radial-gradient(ellipse at top, mc('red', '900'), rgba(darken(mc('red', '900'), 5%), .2));
border-color: mc('red', '500');
box-shadow: 0 0 2px 0 mc('grey', '900');
}
@@ -222,8 +275,8 @@
}
@at-root .theme--dark & {
background-color: mc('green', '900');
background-image: radial-gradient(ellipse at top, mc('green', '900'), darken(mc('green', '900'), 5%));
background-color: mc('grey', '900');
background-image: radial-gradient(ellipse at top, mc('green', '900'), rgba(darken(mc('green', '900'), 5%), .2));
border-color: mc('green', '500');
box-shadow: 0 0 2px 0 mc('grey', '900');
}
@@ -304,7 +357,7 @@
&:hover {
background-image: linear-gradient(to bottom, lighten(mc('grey', '900'), 2%), darken(mc('grey', '900'), 3%));
border-left-color: mc('blue', '500');
border-left-color: mc('indigo', '300');
cursor: pointer;
}
}
@@ -508,7 +561,7 @@
}
&.align-abstopright {
position: absolute;
top: -90px;
top: calc(-90px + 1rem);
right: 1rem;
height: calc(90px - 2rem);
width: auto;

2
dev/templates/master.pug
View File

@@ -29,7 +29,7 @@ html
//- Site Properties
script.
var siteConfig = !{JSON.stringify({ title: config.title, theme: config.theming.theme, darkMode: config.theming.darkMode, lang: config.lang.code, company: config.company })}
var siteConfig = !{JSON.stringify({ title: config.title, theme: config.theming.theme, darkMode: config.theming.darkMode, lang: config.lang.code, rtl: config.lang.rtl, company: config.company })}
//- CSS
<% for (var index in htmlWebpackPlugin.files.css) { %>

1
server/app/data.yml
View File

@@ -31,6 +31,7 @@ defaults:
autoUpdate: true
namespaces: []
namespacing: false
rtl: false
telemetry:
clientId: ''
isEnabled: false

4
server/graph/resolvers/localization.js
View File

@@ -57,6 +57,10 @@ module.exports = {
WIKI.config.lang.autoUpdate = args.autoUpdate
WIKI.config.lang.namespacing = args.namespacing
WIKI.config.lang.namespaces = args.namespaces
const newLocale = await WIKI.models.locales.query().select('isRTL').where('code', args.locale).first()
WIKI.config.lang.rtl = newLocale.isRTL
await WIKI.configSvc.saveToDb(['lang'])
await WIKI.lang.setCurrentLocale(args.locale)

2
server/views/master.pug
View File

@@ -29,7 +29,7 @@ html
//- Site Properties
script.
var siteConfig = !{JSON.stringify({ title: config.title, theme: config.theming.theme, darkMode: config.theming.darkMode, lang: config.lang.code, company: config.company })}
var siteConfig = !{JSON.stringify({ title: config.title, theme: config.theming.theme, darkMode: config.theming.darkMode, lang: config.lang.code, rtl: config.lang.rtl, company: config.company })}
//- CSS