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

fix: dark theme improvements

Browse Source
This commit is contained in:
Nicolas Giard 2018-12-29 22:12:52 -05:00
parent edb97b832d
commit 771935ee68
5 changed files with 49 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
client/components/admin/admin-api.vue
View File

@ -58,7 +58,7 @@
td {{ props.item.updatedOn }}
td: v-btn(icon): v-icon.grey--text.text--darken-1 more_horiz
template(slot='no-data')
v-alert(icon='warning', :value='true') No users to display!
v-alert.mt-3(icon='warning', :value='true', outline) No API have been generated yet.
.text-xs-center.py-2
v-pagination(v-model='pagination.page', :length='pages')
</template>
@ -69,11 +69,7 @@ export default {
return {
selected: [],
pagination: {},
items: [
{ id: 1, key: 'xxxxxxxxxxxxx' },
{ id: 2, key: 'xxxxxxxxxxxxy' },
{ id: 3, key: 'xxxxxxxxxxxxz' }
],
items: [],
headers: [
{ text: 'Name', value: 'name' },
{ text: 'Key', value: 'key' },

40
client/components/admin/admin-dashboard.vue
View File

@ -69,8 +69,8 @@
.body-2(v-if='isLatestVersion') You are running the latest version.
.body-2(v-else) A new version is available: {{info.latestVersion}}
v-flex(xs12)
v-card
v-card-title.subheading Recent Pages
v-card.radius-7
v-card-title.subheading(:class='$vuetify.dark ? `grey darken-2` : `grey lighten-5`') Recent Pages
v-data-table.pb-2(
:items='recentPages'
hide-actions
@ -86,8 +86,8 @@
.caption: strong Updated {{ props.item.updatedAt | moment('from') }}
.caption Created {{ props.item.createdAt | moment('calendar') }}
v-flex(xs12)
v-card
v-card-title.subheading Most Popular Pages
v-card.radius-7
v-card-title.subheading(:class='$vuetify.dark ? `grey darken-2` : `grey lighten-5`') Most Popular Pages
v-data-table.pb-2(
:items='popularPages'
hide-actions
@ -103,6 +103,16 @@
.caption: strong Updated {{ props.item.updatedAt | moment('from') }}
.caption Created {{ props.item.createdAt | moment('calendar') }}
v-flex(xs12)
v-card.dashboard-contribute
v-card-text
img(src='/svg/icon-heart-health.svg', alt='Contribute', style='height: 80px;')
.pl-3
.subheading Contribute
.body-2.pt-2 Wiki.js is a free and open source project. There are several ways you can contribute to the project.
.body-1 We need your help!
v-btn.mx-0.mt-2(:color='$vuetify.dark ? `indigo lighten-3` : `indigo`', outline, small, to='/contribute') Learn More
</template>
<script>
@ -135,6 +145,7 @@ export default {
.dashboard-card {
display: flex;
border-radius: 7px;
.v-card__text {
overflow: hidden;
@ -142,6 +153,27 @@ export default {
}
}
.dashboard-contribute {
background-color: #FFF;
background-image: linear-gradient(to bottom, #FFF 0%, lighten(mc('indigo', '50'), 3%) 100%);
border-radius: 7px;
@at-root .theme--dark & {
background-color: mc('grey', '800');
background-image: linear-gradient(to bottom, mc('grey', '800') 0%, darken(mc('grey', '800'), 6%) 100%);
}
.v-card__text {
display: flex;
align-items: center;
color: mc('indigo', '500');
@at-root .theme--dark & {
color: mc('grey', '300');
}
}
}
.dashboard-icon {
position: absolute;
right: 0;

2
client/components/admin/admin-general.vue
View File

@ -80,7 +80,7 @@
v-subheader Logo
v-card-text
v-layout.px-3(row, align-center)
v-avatar(size='120', color='grey lighten-3', :tile='config.logoIsSquare')
v-avatar(size='120', :color='$vuetify.dark ? `grey darken-2` : `grey lighten-3`', :tile='config.logoIsSquare')
.ml-4
v-layout(row, align-center)
v-btn(color='teal', depressed, dark)

3
client/components/admin/admin-groups-edit-rules.vue
View File

@ -196,8 +196,7 @@ export default {
{ text: 'Path Matches Regex...', value: 'REGEX', icon: '$.*' }
],
locales: [
{ text: 'English', value: 'en' },
{ text: 'Français', value: 'fr' },
{ text: 'English', value: 'en' }
]
}
},

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

@ -6,6 +6,10 @@
@at-root .theme--dark & {
color: mc('grey', '300');
a {
color: mc('blue', '300');
}
}
// ---------------------------------
@ -39,7 +43,7 @@
position: relative;
@at-root .theme--dark & {
color: mc('blue', '500');
color: mc('grey', '400');
}
&::after {
@ -50,6 +54,10 @@
width: 100%;
height: 2px;
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));
}
}
& + h2, & + h3 {