From 120c11b1817429c762d54df865b8cf1a35bf4e08 Mon Sep 17 00:00:00 2001 From: syuilo Date: Thu, 14 Jun 2018 16:48:49 +0900 Subject: wip --- src/client/app/common/views/components/index.ts | 4 +- src/client/app/common/views/components/ui/card.vue | 30 ++++++++ src/client/app/common/views/components/ui/form.vue | 2 + .../app/common/views/components/ui/group.vue | 23 ------- .../app/common/views/components/ui/switch.vue | 80 ++++++---------------- src/client/app/mobile/views/pages/settings.vue | 31 ++++----- .../views/pages/settings/settings.profile.vue | 6 +- 7 files changed, 72 insertions(+), 104 deletions(-) create mode 100644 src/client/app/common/views/components/ui/card.vue delete mode 100644 src/client/app/common/views/components/ui/group.vue (limited to 'src') 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/card.vue b/src/client/app/common/views/components/ui/card.vue new file mode 100644 index 0000000000..5ba15dad7d --- /dev/null +++ b/src/client/app/common/views/components/ui/card.vue @@ -0,0 +1,30 @@ + + + + + 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 diff --git a/src/client/app/common/views/components/ui/group.vue b/src/client/app/common/views/components/ui/group.vue deleted file mode 100644 index fb29458ce8..0000000000 --- a/src/client/app/common/views/components/ui/group.vue +++ /dev/null @@ -1,23 +0,0 @@ - - - - - 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" > - + @@ -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 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 @@
- +
%fa:palette% %i18n:@design%
@@ -39,9 +39,9 @@ %i18n:@post-style-standard% %i18n:@post-style-smart%
- + - +
%fa:cog% %i18n:@behavior%
@@ -63,9 +63,9 @@
%i18n:@i-am-under-limited-internet%
- + - +
%fa:language% %i18n:@lang%
@@ -80,9 +80,9 @@ %fa:info-circle% %i18n:@lang-tip% - + - +
%fa:B twitter% %i18n:@twitter%
@@ -91,9 +91,9 @@ or %i18n:@twitter-disconnect%

- + - +
%fa:sync-alt% %i18n:@update%
%i18n:@version% {{ version }}
@@ -104,7 +104,7 @@ - +

ver {{ version }} ({{ codename }})

@@ -247,20 +247,17 @@ export default Vue.extend({