From 120c11b1817429c762d54df865b8cf1a35bf4e08 Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Thu, 14 Jun 2018 16:48:49 +0900 Subject: [PATCH] wip --- .../app/common/views/components/index.ts | 4 +- .../components/ui/{group.vue => card.vue} | 11 ++- .../app/common/views/components/ui/form.vue | 2 + .../app/common/views/components/ui/switch.vue | 80 +++++-------------- .../app/mobile/views/pages/settings.vue | 31 ++++--- .../views/pages/settings/settings.profile.vue | 6 +- 6 files changed, 51 insertions(+), 83 deletions(-) rename src/client/app/common/views/components/ui/{group.vue => card.vue} (56%) diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts index 060af388b3..0e20e66f5a 100644 --- a/src/client/app/common/views/components/index.ts +++ b/src/client/app/common/views/components/index.ts @@ -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); diff --git a/src/client/app/common/views/components/ui/group.vue b/src/client/app/common/views/components/ui/card.vue similarity index 56% rename from src/client/app/common/views/components/ui/group.vue rename to src/client/app/common/views/components/ui/card.vue index fb29458ce8..5ba15dad7d 100644 --- a/src/client/app/common/views/components/ui/group.vue +++ b/src/client/app/common/views/components/ui/card.vue @@ -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> diff --git a/src/client/app/common/views/components/ui/form.vue b/src/client/app/common/views/components/ui/form.vue index 0893af1bce..b6b4a76d2a 100644 --- a/src/client/app/common/views/components/ui/form.vue +++ b/src/client/app/common/views/components/ui/form.vue @@ -23,6 +23,8 @@ export default Vue.extend({ .ui-form > fieldset + margin 0 + padding 0 border none </style> diff --git a/src/client/app/common/views/components/ui/switch.vue b/src/client/app/common/views/components/ui/switch.vue index 2cac6262f1..e78951a352 100644 --- a/src/client/app/common/views/components/ui/switch.vue +++ b/src/client/app/common/views/components/ui/switch.vue @@ -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 + background-color rgba($theme-color, 0.4) + border-color rgba($theme-color, 0.4) - > .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 + > * + 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 diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue index 716f7afc0c..25cfbf732b 100644 --- a/src/client/app/mobile/views/pages/settings.vue +++ b/src/client/app/mobile/views/pages/settings.vue @@ -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) diff --git a/src/client/app/mobile/views/pages/settings/settings.profile.vue b/src/client/app/mobile/views/pages/settings/settings.profile.vue index 73d876d14e..de891b5736 100644 --- a/src/client/app/mobile/views/pages/settings/settings.profile.vue +++ b/src/client/app/mobile/views/pages/settings/settings.profile.vue @@ -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">