Skip to content
Snippets Groups Projects
Commit 120c11b1 authored by syuilo's avatar syuilo
Browse files

wip

parent a1ae8321
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 51 additions and 83 deletions
src/client/app/common/views/components/index.ts
+ 2
− 2
View file @ 120c11b1
......@@ -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);
src/client/app/common/views/components/ui/group.vue → src/client/app/common/views/components/ui/card.vue
+ 9
− 2
View file @ 120c11b1
<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>
src/client/app/common/views/components/ui/form.vue
+ 2
− 0
View file @ 120c11b1
......@@ -23,6 +23,8 @@ export default Vue.extend({
.ui-form
> fieldset
margin 0
padding 0
border none
</style>
src/client/app/common/views/components/ui/switch.vue
+ 21
− 59
View file @ 120c11b1
......@@ -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 $theme-color
border-color $theme-color
> .label
> span
color $theme-color
&:hover
> .label
> span
color darken($theme-color, 10%)
background-color rgba($theme-color, 0.4)
border-color rgba($theme-color, 0.4)
> .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
> *
background-color $theme-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
......
src/client/app/mobile/views/pages/settings.vue
+ 14
− 17
View file @ 120c11b1
......@@ -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)
......
src/client/app/mobile/views/pages/settings/settings.profile.vue
+ 3
− 3
View file @ 120c11b1
<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">
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment