natty
/
misskey-awawa
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip

This commit is contained in:
syuilo 2018-06-14 16:48:49 +09:00
parent a1ae832129
commit 120c11b181
6 changed files with 51 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/client/app/common/views/components/index.ts
View File

@ -31,7 +31,7 @@ import Othello from './othello.vue';
import welcomeTimeline from './welcome-timeline.vue'; import welcomeTimeline from './welcome-timeline.vue';
import uiInput from './ui/input.vue'; import uiInput from './ui/input.vue';
import uiButton from './ui/button.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 uiForm from './ui/form.vue';
import uiTextarea from './ui/textarea.vue'; import uiTextarea from './ui/textarea.vue';
import uiSwitch from './ui/switch.vue'; import uiSwitch from './ui/switch.vue';
@ -67,7 +67,7 @@ Vue.component('mk-othello', Othello);
Vue.component('mk-welcome-timeline', welcomeTimeline); Vue.component('mk-welcome-timeline', welcomeTimeline);
Vue.component('ui-input', uiInput); Vue.component('ui-input', uiInput);
Vue.component('ui-button', uiButton); Vue.component('ui-button', uiButton);
Vue.component('ui-group', uiGroup); Vue.component('ui-card', uiCard);
Vue.component('ui-form', uiForm); Vue.component('ui-form', uiForm);
Vue.component('ui-textarea', uiTextarea); Vue.component('ui-textarea', uiTextarea);
Vue.component('ui-switch', uiSwitch); Vue.component('ui-switch', uiSwitch);

11
src/client/app/common/views/components/ui/group.vue → src/client/app/common/views/components/ui/card.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="ui-group"> <div class="ui-card">
<header> <header>
<slot name="title"></slot> <slot name="title"></slot>
</header> </header>
@ -16,8 +16,15 @@ export default Vue.extend({});
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' @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 > header
font-weight bold font-weight bold
font-size 28px
color #444
</style> </style>

2
src/client/app/common/views/components/ui/form.vue
View File

@ -23,6 +23,8 @@ export default Vue.extend({
.ui-form .ui-form
> fieldset > fieldset
margin 0
padding 0
border none border none
</style> </style>

80
src/client/app/common/views/components/ui/switch.vue
View File

@ -16,7 +16,7 @@
@keydown.enter="switchValue" @keydown.enter="switchValue"
> >
<span class="button"> <span class="button">
<span :style="{ transform }"></span> <span></span>
</span> </span>
<span class="label"> <span class="label">
<span :aria-hidden="!checked"><slot></slot></span> <span :aria-hidden="!checked"><slot></slot></span>
@ -48,9 +48,6 @@ export default Vue.extend({
computed: { computed: {
checked(): boolean { checked(): boolean {
return this.value; return this.value;
},
transform(): string {
return this.checked ? 'translate3d(14px, 0, 0)' : '';
} }
}, },
watch: { watch: {
@ -88,7 +85,7 @@ export default Vue.extend({
root(isDark) root(isDark)
display flex display flex
margin 16px 0 margin 32px 0
cursor pointer cursor pointer
transition all 0.3s transition all 0.3s
@ -101,31 +98,12 @@ root(isDark)
&.checked &.checked
> .button > .button
background-color rgba($theme-color, 0.4)
border-color rgba($theme-color, 0.4)
> *
background-color $theme-color background-color $theme-color
border-color $theme-color transform translateX(14px)
> .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
> input > input
position absolute position absolute
@ -134,42 +112,26 @@ root(isDark)
opacity 0 opacity 0
margin 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 > .button
$color = isDark ? #1c1f25 : #dcdfe6
display inline-block display inline-block
margin 0 margin 3px 0 0 0
width 46px width 34px
min-width 46px height 14px
height 32px background isDark ? rgba(#fff, 0.1) : rgba(#000, 0.05)
min-height 32px
background $color
border 1px solid $color
outline none outline none
border-radius 6px border-radius 14px
transition inherit transition inherit
> * > *
position absolute position absolute
top 1px top -3px
left 1px left 0
border-radius 6px border-radius 100%
transition transform 0.3s transition background-color 0.3s, transform 0.3s
width 28px width 20px
height 28px height 20px
background-color #fff 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 > .label
margin-left 8px margin-left 8px
@ -180,9 +142,9 @@ root(isDark)
> span > span
display block display block
line-height 32px line-height 20px
font-weight bold font-weight bold
color isDark ? #c4ccd2 : #4a535a color isDark ? #c4ccd2 : rgba(#000, 0.75)
transition inherit transition inherit
> p > p

31
src/client/app/mobile/views/pages/settings.vue
View File

@ -6,7 +6,7 @@
<div> <div>
<x-profile/> <x-profile/>
<ui-group> <ui-card>
<div slot="title">%fa:palette% %i18n:@design%</div> <div slot="title">%fa:palette% %i18n:@design%</div>
<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="standard">%i18n:@post-style-standard%</md-radio>
<md-radio v-model="postStyle" value="smart">%i18n:@post-style-smart%</md-radio> <md-radio v-model="postStyle" value="smart">%i18n:@post-style-smart%</md-radio>
</div> </div>
</ui-group> </ui-card>
<ui-group> <ui-card>
<div slot="title">%fa:cog% %i18n:@behavior%</div> <div slot="title">%fa:cog% %i18n:@behavior%</div>
<div> <div>
@ -63,9 +63,9 @@
<div> <div>
<ui-switch v-model="lightmode">%i18n:@i-am-under-limited-internet%</ui-switch> <ui-switch v-model="lightmode">%i18n:@i-am-under-limited-internet%</ui-switch>
</div> </div>
</ui-group> </ui-card>
<ui-group> <ui-card>
<div slot="title">%fa:language% %i18n:@lang%</div> <div slot="title">%fa:language% %i18n:@lang%</div>
<md-field> <md-field>
@ -80,9 +80,9 @@
</md-select> </md-select>
</md-field> </md-field>
<span class="md-helper-text">%fa:info-circle% %i18n:@lang-tip%</span> <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> <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> <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> <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> <a :href="`${apiUrl}/disconnect/twitter`" target="_blank" v-if="$store.state.i.twitter">%i18n:@twitter-disconnect%</a>
</p> </p>
</ui-group> </ui-card>
<ui-group> <ui-card>
<div slot="title">%fa:sync-alt% %i18n:@update%</div> <div slot="title">%fa:sync-alt% %i18n:@update%</div>
<div>%i18n:@version% <i>{{ version }}</i></div> <div>%i18n:@version% <i>{{ version }}</i></div>
@ -104,7 +104,7 @@
<template v-if="checkingForUpdate">%i18n:@update-checking%<mk-ellipsis/></template> <template v-if="checkingForUpdate">%i18n:@update-checking%<mk-ellipsis/></template>
<template v-else>%i18n:@check-for-updates%</template> <template v-else>%i18n:@check-for-updates%</template>
</md-button> </md-button>
</ui-group> </ui-card>
</div> </div>
<p><small>ver {{ version }} ({{ codename }})</small></p> <p><small>ver {{ version }} ({{ codename }})</small></p>
</main> </main>
@ -247,20 +247,17 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
root(isDark) root(isDark)
padding 0 16px
margin 0 auto margin 0 auto
max-width 500px max-width 500px
width 100% width 100%
> div
> *
margin-bottom 16px
> p > p
display block display block
margin 24px margin 16px 0
padding 16px
text-align center text-align center
color isDark ? #cad2da : #a2a9b1 color isDark ? #cad2da : #2c662d
background #fcfff5
main[data-darkmode] main[data-darkmode]
root(true) root(true)

6
src/client/app/mobile/views/pages/settings/settings.profile.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<ui-group> <ui-card>
<div slot="title">%fa:pencil-alt% %i18n:@title%</div> <div slot="title">%fa:user% %i18n:@title%</div>
<ui-form :disabled="saving"> <ui-form :disabled="saving">
<ui-input v-model="name" :max="30"> <ui-input v-model="name" :max="30">
@ -41,7 +41,7 @@
<ui-button @click="save">%i18n:@save%</ui-button> <ui-button @click="save">%i18n:@save%</ui-button>
</ui-form> </ui-form>
</ui-group> </ui-card>
</template> </template>
<script lang="ts"> <script lang="ts">