Skip to content

Commit 9ae5f15

Browse files
author
reco_luan
committed
feat: change theme picker to mode picker
part.1 init mode
1 parent 245b6de commit 9ae5f15

File tree

6 files changed

+87
-112
lines changed

6 files changed

+87
-112
lines changed

ā€Žcomponents/Mode/ModeOptions.vueā€Ž

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<template>
2+
<div class="mode-options">
3+
<h4 class="title">Choose mode</h4>
4+
<ul class="color-mode-options">
5+
<li
6+
v-for="(mode, index) in modeOptions"
7+
:key="index"
8+
:class="getClass(mode.mode)"
9+
@click="selectMode(mode)"
10+
>{{ mode.title }}</li>
11+
</ul>
12+
</div>
13+
</template>
14+
15+
<script>
16+
17+
export default {
18+
name: 'ModeOptions',
19+
20+
data () {
21+
return {
22+
modeOptions: [
23+
{ mode: 'dark', title: 'dark' },
24+
{ mode: 'auto', title: 'auto' },
25+
{ mode: 'light', title: 'light' }
26+
],
27+
currentMode: 'auto'
28+
}
29+
},
30+
31+
methods: {
32+
selectMode (mode) {
33+
if (mode.mode === this.currentMode) return
34+
this.currentMode = mode.mode
35+
},
36+
getClass (mode) {
37+
return mode !== this.currentMode ? mode : `${mode} active`
38+
}
39+
}
40+
}
41+
</script>
42+
43+
<style lang="stylus">
44+
@require '../../styles/recoConfig.styl'
45+
46+
.mode-options
47+
.title
48+
margin-top 0
49+
margin-bottom .6rem
50+
font-weight bold
51+
.color-mode-options
52+
display: flex;
53+
flex-wrap wrap
54+
li
55+
text-align: center;
56+
font-size 12px
57+
color #666
58+
line-height 18px
59+
padding 3px 6px
60+
border-top 1px solid #666
61+
border-bottom 1px solid #666
62+
background-color: #fff;
63+
cursor pointer
64+
&.dark
65+
border-radius: $borderRadius 0 0 $borderRadius
66+
border-left 1px solid #666
67+
&.light
68+
border-radius: 0 $borderRadius $borderRadius 0
69+
border-right 1px solid #666
70+
&.active
71+
background-color: $accentColor;
72+
color #fff
73+
&:not(.active)
74+
border-right 1px solid #666
75+
</style>

components/Theme/index.vue renamed to components/Mode/index.vue

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,15 @@
55
</a>
66
<transition name="menu-transition" mode="out-in">
77
<div v-show="showMenu" class="color-picker-menu">
8-
<ThemeOptions />
8+
<ModeOptions />
99
</div>
1010
</transition>
1111
</div>
1212
</template>
1313

1414
<script>
1515
import ClickOutside from 'vue-click-outside'
16-
import ThemeOptions from './ThemeOptions.vue'
16+
import ModeOptions from './ModeOptions.vue'
1717
1818
export default {
1919
name: 'UserSettings',
@@ -23,7 +23,7 @@ export default {
2323
},
2424
2525
components: {
26-
ThemeOptions
26+
ModeOptions
2727
},
2828
2929
data () {
@@ -46,7 +46,7 @@ export default {
4646
.color-picker {
4747
position: relative;
4848
margin-right: 1em;
49-
49+
cursor pointer;
5050
.color-button {
5151
align-items: center;
5252
height: 100%;
@@ -61,14 +61,13 @@ export default {
6161
position: absolute;
6262
top: 40px;
6363
left: 50%;
64-
min-width: 100px;
64+
min-width: 125px;
6565
margin: 0;
6666
padding: 1em;
67-
border: 1px solid $borderColor;
68-
border-radius: $borderRadius
67+
box-shadow $boxShadow;
68+
border-radius: $borderRadius;
6969
transform: translateX(-50%);
7070
z-index: 150;
71-
7271
&::before {
7372
content: '';
7473
position: absolute;
@@ -99,7 +98,7 @@ export default {
9998
}
10099
}
101100
102-
.reco-theme-dark {
101+
.reco-mode-dark {
103102
.color-picker-menu {
104103
background-color: $darkPrimaryBg;
105104
border-color: $darkBorderColor;

ā€Žcomponents/Navbar.vueā€Ž

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
'max-width': linksWrapMaxWidth + 'px'
2323
} : {}">
2424

25-
<Theme v-if="hasThemes" />
25+
<Mode />
2626
<Screenfull class="screenfull" />
2727
<AlgoliaSearchBox
2828
v-if="isAlgoliaSearch"
@@ -38,22 +38,20 @@ import AlgoliaSearchBox from '@AlgoliaSearchBox'
3838
import SearchBox from '@SearchBox'
3939
import SidebarButton from '@theme/components/SidebarButton.vue'
4040
import NavLinks from '@theme/components/NavLinks.vue'
41-
import Theme from '@theme/components/Theme'
41+
import Mode from '@theme/components/Mode'
4242
4343
export default {
44-
components: { SidebarButton, NavLinks, SearchBox, AlgoliaSearchBox, Theme },
44+
components: { SidebarButton, NavLinks, SearchBox, AlgoliaSearchBox, Mode },
4545
4646
data () {
4747
return {
48-
linksWrapMaxWidth: null,
49-
hasThemes: false
48+
linksWrapMaxWidth: null
5049
}
5150
},
5251
5352
mounted () {
5453
const MOBILE_DESKTOP_BREAKPOINT = 719 // refer to config.styl
5554
const NAVBAR_VERTICAL_PADDING = parseInt(css(this.$el, 'paddingLeft')) + parseInt(css(this.$el, 'paddingRight'))
56-
const { themePicker } = this.$themeConfig
5755
const handleLinksWrapWidth = () => {
5856
if (document.documentElement.clientWidth < MOBILE_DESKTOP_BREAKPOINT) {
5957
this.linksWrapMaxWidth = null
@@ -64,7 +62,6 @@ export default {
6462
}
6563
handleLinksWrapWidth()
6664
window.addEventListener('resize', handleLinksWrapWidth, false)
67-
this.hasThemes = themePicker === undefined ? true : themePicker
6865
},
6966
7067
computed: {

ā€Žcomponents/Theme/ThemeOptions.vueā€Ž

Lines changed: 0 additions & 86 deletions
This file was deleted.

ā€Žstyles/colorMixin.stylā€Ž

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,3 @@ color-mode(accountColor , colorName)
9999
@media (max-width: 959px)
100100
.search-box input
101101
border-color: transparent!important;
102-
103-
for key, value in $themePicker
104-
color-mode(value, key)

ā€Žstyles/recoConfig.stylā€Ž

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,3 @@ $boxShadowHover = 0 2px 16px 0 rgba(0, 0, 0, 0.2)
33
$textShadow = 0 2px 4px rgba(0, 0, 0, 0.1);
44
$borderRadius = .25rem
55
$backgroundColor = #fff
6-
7-
$themePicker = {
8-
red: #f26d6d,
9-
blue: #2196f3,
10-
green: #3eaf7c,
11-
orange: #fb9b5f
12-
}

0 commit comments

Comments
Ā (0)
āš”