wip
This commit is contained in:
syuilo
parent
a1ae832129
commit
120c11b181
6 changed files with 51 additions and 83 deletions
|
|
@ -31,7 +31,7 @@ import Othello from './othello.vue';
|
|||
import welcomeTimeline from './welcome-timeline.vue';
|
||||
import uiInput from './ui/input.vue';
|
||||
import uiButton from './ui/button.vue';
|
||||
import uiGroup from './ui/group.vue';
|
||||
import uiCard from './ui/card.vue';
|
||||
import uiForm from './ui/form.vue';
|
||||
import uiTextarea from './ui/textarea.vue';
|
||||
import uiSwitch from './ui/switch.vue';
|
||||
|
|
@ -67,7 +67,7 @@ Vue.component('mk-othello', Othello);
|
|||
Vue.component('mk-welcome-timeline', welcomeTimeline);
|
||||
Vue.component('ui-input', uiInput);
|
||||
Vue.component('ui-button', uiButton);
|
||||
Vue.component('ui-group', uiGroup);
|
||||
Vue.component('ui-card', uiCard);
|
||||
Vue.component('ui-form', uiForm);
|
||||
Vue.component('ui-textarea', uiTextarea);
|
||||
Vue.component('ui-switch', uiSwitch);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="ui-group">
|
||||
<div class="ui-card">
|
||||
<header>
|
||||
<slot name="title"></slot>
|
||||
</header>
|
||||
|
|
@ -16,8 +16,15 @@ export default Vue.extend({});
|
|||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
.ui-group
|
||||
.ui-card
|
||||
margin 16px 0
|
||||
padding 32px
|
||||
background #fff
|
||||
//box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)
|
||||
|
||||
> header
|
||||
font-weight bold
|
||||
font-size 28px
|
||||
color #444
|
||||
|
||||
</style>
|
||||
|
|
@ -23,6 +23,8 @@ export default Vue.extend({
|
|||
|
||||
.ui-form
|
||||
> fieldset
|
||||
margin 0
|
||||
padding 0
|
||||
border none
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
@keydown.enter="switchValue"
|
||||
>
|
||||
<span class="button">
|
||||
<span :style="{ transform }"></span>
|
||||
<span></span>
|
||||
</span>
|
||||
<span class="label">
|
||||
<span :aria-hidden="!checked"><slot></slot></span>
|
||||
|
|
@ -48,9 +48,6 @@ export default Vue.extend({
|
|||
computed: {
|
||||
checked(): boolean {
|
||||
return this.value;
|
||||
},
|
||||
transform(): string {
|
||||
return this.checked ? 'translate3d(14px, 0, 0)' : '';
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -88,7 +85,7 @@ export default Vue.extend({
|
|||
|
||||
root(isDark)
|
||||
display flex
|
||||
margin 16px 0
|
||||
margin 32px 0
|
||||
cursor pointer
|
||||
transition all 0.3s
|
||||
|
||||
|
|
@ -101,31 +98,12 @@ root(isDark)
|
|||
|
||||
&.checked
|
||||
> .button
|
||||
background-color rgba($theme-color, 0.4)
|
||||
border-color rgba($theme-color, 0.4)
|
||||
|
||||
> *
|
||||
background-color $theme-color
|
||||
border-color $theme-color
|
||||
|
||||
> .label
|
||||
> span
|
||||
color $theme-color
|
||||
|
||||
&:hover
|
||||
> .label
|
||||
> span
|
||||
color darken($theme-color, 10%)
|
||||
|
||||
> .button
|
||||
background darken($theme-color, 10%)
|
||||
border-color darken($theme-color, 10%)
|
||||
|
||||
&:hover
|
||||
> .label
|
||||
> span
|
||||
color isDark ? #fff : #2e3338
|
||||
|
||||
> .button
|
||||
$color = isDark ? #15181d : #ced2da
|
||||
background $color
|
||||
border-color $color
|
||||
transform translateX(14px)
|
||||
|
||||
> input
|
||||
position absolute
|
||||
|
|
@ -134,42 +112,26 @@ root(isDark)
|
|||
opacity 0
|
||||
margin 0
|
||||
|
||||
&:focus + .button
|
||||
&:after
|
||||
content ""
|
||||
pointer-events none
|
||||
position absolute
|
||||
top -5px
|
||||
right -5px
|
||||
bottom -5px
|
||||
left -5px
|
||||
border 2px solid rgba($theme-color, 0.3)
|
||||
border-radius 14px
|
||||
|
||||
> .button
|
||||
$color = isDark ? #1c1f25 : #dcdfe6
|
||||
|
||||
display inline-block
|
||||
margin 0
|
||||
width 46px
|
||||
min-width 46px
|
||||
height 32px
|
||||
min-height 32px
|
||||
background $color
|
||||
border 1px solid $color
|
||||
margin 3px 0 0 0
|
||||
width 34px
|
||||
height 14px
|
||||
background isDark ? rgba(#fff, 0.1) : rgba(#000, 0.05)
|
||||
outline none
|
||||
border-radius 6px
|
||||
border-radius 14px
|
||||
transition inherit
|
||||
|
||||
> *
|
||||
position absolute
|
||||
top 1px
|
||||
left 1px
|
||||
border-radius 6px
|
||||
transition transform 0.3s
|
||||
width 28px
|
||||
height 28px
|
||||
top -3px
|
||||
left 0
|
||||
border-radius 100%
|
||||
transition background-color 0.3s, transform 0.3s
|
||||
width 20px
|
||||
height 20px
|
||||
background-color #fff
|
||||
box-shadow 0 2px 1px -1px rgba(#000, 0.2), 0 1px 1px 0 rgba(#000, 0.14), 0 1px 3px 0 rgba(#000, 0.12)
|
||||
|
||||
> .label
|
||||
margin-left 8px
|
||||
|
|
@ -180,9 +142,9 @@ root(isDark)
|
|||
|
||||
> span
|
||||
display block
|
||||
line-height 32px
|
||||
line-height 20px
|
||||
font-weight bold
|
||||
color isDark ? #c4ccd2 : #4a535a
|
||||
color isDark ? #c4ccd2 : rgba(#000, 0.75)
|
||||
transition inherit
|
||||
|
||||
> p
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<div>
|
||||
<x-profile/>
|
||||
|
||||
<ui-group>
|
||||
<ui-card>
|
||||
<div slot="title">%fa:palette% %i18n:@design%</div>
|
||||
|
||||
<div>
|
||||
|
|
@ -39,9 +39,9 @@
|
|||
<md-radio v-model="postStyle" value="standard">%i18n:@post-style-standard%</md-radio>
|
||||
<md-radio v-model="postStyle" value="smart">%i18n:@post-style-smart%</md-radio>
|
||||
</div>
|
||||
</ui-group>
|
||||
</ui-card>
|
||||
|
||||
<ui-group>
|
||||
<ui-card>
|
||||
<div slot="title">%fa:cog% %i18n:@behavior%</div>
|
||||
|
||||
<div>
|
||||
|
|
@ -63,9 +63,9 @@
|
|||
<div>
|
||||
<ui-switch v-model="lightmode">%i18n:@i-am-under-limited-internet%</ui-switch>
|
||||
</div>
|
||||
</ui-group>
|
||||
</ui-card>
|
||||
|
||||
<ui-group>
|
||||
<ui-card>
|
||||
<div slot="title">%fa:language% %i18n:@lang%</div>
|
||||
|
||||
<md-field>
|
||||
|
|
@ -80,9 +80,9 @@
|
|||
</md-select>
|
||||
</md-field>
|
||||
<span class="md-helper-text">%fa:info-circle% %i18n:@lang-tip%</span>
|
||||
</ui-group>
|
||||
</ui-card>
|
||||
|
||||
<ui-group>
|
||||
<ui-card>
|
||||
<div slot="title">%fa:B twitter% %i18n:@twitter%</div>
|
||||
|
||||
<p class="account" v-if="$store.state.i.twitter"><a :href="`https://twitter.com/${$store.state.i.twitter.screenName}`" target="_blank">@{{ $store.state.i.twitter.screenName }}</a></p>
|
||||
|
|
@ -91,9 +91,9 @@
|
|||
<span v-if="$store.state.i.twitter"> or </span>
|
||||
<a :href="`${apiUrl}/disconnect/twitter`" target="_blank" v-if="$store.state.i.twitter">%i18n:@twitter-disconnect%</a>
|
||||
</p>
|
||||
</ui-group>
|
||||
</ui-card>
|
||||
|
||||
<ui-group>
|
||||
<ui-card>
|
||||
<div slot="title">%fa:sync-alt% %i18n:@update%</div>
|
||||
|
||||
<div>%i18n:@version% <i>{{ version }}</i></div>
|
||||
|
|
@ -104,7 +104,7 @@
|
|||
<template v-if="checkingForUpdate">%i18n:@update-checking%<mk-ellipsis/></template>
|
||||
<template v-else>%i18n:@check-for-updates%</template>
|
||||
</md-button>
|
||||
</ui-group>
|
||||
</ui-card>
|
||||
</div>
|
||||
<p><small>ver {{ version }} ({{ codename }})</small></p>
|
||||
</main>
|
||||
|
|
@ -247,20 +247,17 @@ export default Vue.extend({
|
|||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
padding 0 16px
|
||||
margin 0 auto
|
||||
max-width 500px
|
||||
width 100%
|
||||
|
||||
> div
|
||||
> *
|
||||
margin-bottom 16px
|
||||
|
||||
> p
|
||||
display block
|
||||
margin 24px
|
||||
margin 16px 0
|
||||
padding 16px
|
||||
text-align center
|
||||
color isDark ? #cad2da : #a2a9b1
|
||||
color isDark ? #cad2da : #2c662d
|
||||
background #fcfff5
|
||||
|
||||
main[data-darkmode]
|
||||
root(true)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<ui-group>
|
||||
<div slot="title">%fa:pencil-alt% %i18n:@title%</div>
|
||||
<ui-card>
|
||||
<div slot="title">%fa:user% %i18n:@title%</div>
|
||||
|
||||
<ui-form :disabled="saving">
|
||||
<ui-input v-model="name" :max="30">
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
|
||||
<ui-button @click="save">%i18n:@save%</ui-button>
|
||||
</ui-form>
|
||||
</ui-group>
|
||||
</ui-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
|
|||
Loading…
Reference in a new issue