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

fix: dark mode handling

Browse Source
This commit is contained in:
Nicolas Giard
2018-12-01 23:03:14 -05:00
parent a7fc560573
commit 74aa09f39c
17 changed files with 156 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client/components/admin.vue
View File

@@ -22,7 +22,7 @@
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='grey lighten-4')
v-chip(small, disabled, :color='darkMode ? `grey darken-3-d4` : `grey lighten-4`')
.caption.grey--text 123
v-list-tile(to='/theme')
v-list-tile-avatar: v-icon palette
@@ -36,7 +36,7 @@
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='grey lighten-4')
v-chip(small, disabled, :color='darkMode ? `grey darken-3-d4` : `grey lighten-4`')
.caption.grey--text 1
v-divider.my-2
v-subheader.pl-4 {{ $t('admin:nav.modules') }}

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

@@ -22,12 +22,12 @@
v-subheader {{ $t('admin:contribute.fundOurWork') }}
.body-1.pl-3 {{ $t('admin:contribute.openCollective') }}
v-card-actions.ml-2
v-btn(outline, color='primary', href='https://opencollective.com/wikijs')
v-btn(outline, :color='darkMode ? `blue lighten-1` : `primary`', href='https://opencollective.com/wikijs')
v-icon(left) local_atm
span {{ $t('admin:contribute.makeADonation') }}
.body-1.mt-3.pl-3 {{ $t('admin:contribute.tshirts') }}
v-card-actions.ml-2
v-btn(outline, color='primary', href='https://wikijs.threadless.com')
v-btn(outline, :color='darkMode ? `blue lighten-1` : `primary`', href='https://wikijs.threadless.com')
v-icon(left) shopping_cart
span {{ $t('admin:contribute.shop') }}
v-divider.mt-3
@@ -94,6 +94,7 @@
<script>
import _ from 'lodash'
import { get } from 'vuex-pathify'
import groupsQuery from 'gql/admin/contribute/contribute-query-contributors.gql'
@@ -109,6 +110,7 @@ export default {
}
},
computed: {
darkMode: get('site/dark'),
sponsors() {
return _.filter(this.contributors, ['tier', 'sponsors'])
},

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

@@ -19,7 +19,7 @@
v-menu(open-on-hover, offset-y, bottom, left, min-width='250')
v-toolbar-side-icon.btn-animate-app(slot='activator')
v-icon view_module
v-list(dense, :light='!$vuetify.dark').py-0
v-list(dense, :light='!$vuetify.dark', :dark='$vuetify.dark', :class='$vuetify.dark ? `grey darken-4` : ``').py-0
v-list-tile(avatar, href='/')
v-list-tile-avatar: v-icon(color='blue') home
v-list-tile-content Home

7
client/components/common/page-selector.vue
View File

@@ -13,7 +13,7 @@
v-show='searchLoading'
)
.d-flex(style='min-height:400px;')
v-flex(xs4).grey.lighten-3
v-flex(xs4).grey(:class='darkMode ? `darken-4` : `lighten-3`')
v-toolbar(color='grey darken-3', dark, dense, flat)
.body-2 Folders
v-spacer
@@ -50,7 +50,7 @@
v-list-tile
v-list-tile-avatar: v-icon insert_drive_file
v-list-tile-title File D
v-card-text.grey.lighten-1.pa-2
v-card-text.grey.pa-2(:class='darkMode ? `darken-3-d5` : `lighten-1`')
v-text-field(
solo
hide-details
@@ -68,6 +68,8 @@
</template>
<script>
import { get } from 'vuex-pathify'
export default {
props: {
value: {
@@ -88,6 +90,7 @@ export default {
}
},
computed: {
darkMode: get('site/dark'),
isShown: {
get() { return this.value },
set(val) { this.$emit('input', val) }

3
client/components/editor.vue
View File

@@ -1,5 +1,5 @@
<template lang="pug">
.editor
v-app.editor(:dark='darkMode')
nav-header(dense)
template(slot='actions')
v-btn(
@@ -159,6 +159,7 @@ export default {
}
},
computed: {
darkMode: get('site/dark'),
mode: get('editor/mode'),
notification: get('notification'),
notificationState: sync('notification@isActive')

4
client/components/editor/editor-markdown.vue
View File

@@ -305,6 +305,10 @@ export default {
height: calc(100vh - 112px);
overflow: hidden;
@at-root .theme--dark & {
background-color: mc('grey', '900');
}
@include until($tablet) {
display: none;
}

5
client/components/editor/editor-modal-properties.vue
View File

@@ -44,7 +44,7 @@
v-model='description'
)
v-divider
v-card-text.grey.lighten-5
v-card-text.grey(:class='darkMode ? `darken-3-d3` : `lighten-5`')
v-subheader.pl-0 Path &amp; Categorization
v-container.pa-0(fluid, grid-list-lg)
v-layout(row, wrap)
@@ -84,7 +84,7 @@
persistent-hint
)
v-divider
v-card-text.pb-5.grey.lighten-4
v-card-text.pb-5.grey(:class='darkMode ? `darken-3-d5` : `lighten-4`')
v-subheader.pl-0 Publishing State
v-container.pa-0(fluid, grid-list-lg)
v-layout(row, wrap)
@@ -206,6 +206,7 @@ export default {
}
},
computed: {
darkMode: get('site/dark'),
mode: get('editor/mode'),
title: sync('page/title'),
description: sync('page/description'),

5
client/components/history.vue
View File

@@ -108,12 +108,11 @@
<script>
import { Diff2Html } from 'diff2html'
import { createPatch } from 'diff'
import { get } from 'vuex-pathify'
import _ from 'lodash'
import historyTrailQuery from 'gql/history/history-trail-query.gql'
/* global siteConfig */
export default {
props: {
pageId: {
@@ -145,7 +144,7 @@ export default {
}
},
computed: {
darkMode() { return siteConfig.darkMode },
darkMode: get('site/dark'),
diffs() {
return createPatch(`/${this.path}`, this.sourceText, this.targetText)
},

11
client/components/source.vue
View File

@@ -9,7 +9,7 @@
v-btn.ml-4(depressed, color='blue darken-1', @click='goLive') Return to Normal View
v-card(tile)
v-card-text
v-card.grey.lighten-4.radius-7(flat)
v-card.grey.radius-7(flat, :class='darkMode ? `darken-4` : `lighten-4`')
v-card-text
pre
code
@@ -19,7 +19,7 @@
</template>
<script>
/* global siteConfig */
import { get } from 'vuex-pathify'
export default {
props: {
@@ -40,7 +40,7 @@ export default {
return {}
},
computed: {
darkMode() { return siteConfig.darkMode }
darkMode: get('site/dark')
},
created () {
this.$store.commit('page/SET_ID', this.id)
@@ -67,6 +67,11 @@ export default {
font-weight: 400;
font-size: 1rem;
@at-root .theme--dark.source pre > code {
background-color: mc('grey', '900');
color: mc('grey', '400');
}
&::before {
display: none;
}