From df6c9b1a1cf7b4ff8cdbf562e004bbf3635d841b Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Thu, 27 Sep 2018 12:55:10 +0900 Subject: [PATCH] wip --- .../components/games/reversi/reversi.room.vue | 6 +- .../app/common/views/components/index.ts | 2 - .../app/common/views/components/switch.vue | 199 ------------------ .../app/common/views/components/ui/button.vue | 2 - .../app/common/views/components/ui/switch.vue | 17 +- .../views/components/settings.profile.vue | 8 +- .../app/desktop/views/components/settings.vue | 44 ++-- .../views/pages/deck/deck.tl-column.vue | 4 +- src/client/theme/dark.json | 5 +- src/client/theme/halloween.json | 1 + src/client/theme/light.json | 5 +- 11 files changed, 42 insertions(+), 251 deletions(-) delete mode 100644 src/client/app/common/views/components/switch.vue diff --git a/src/client/app/common/views/components/games/reversi/reversi.room.vue b/src/client/app/common/views/components/games/reversi/reversi.room.vue index 072f3eda12..b407046ba9 100644 --- a/src/client/app/common/views/components/games/reversi/reversi.room.vue +++ b/src/client/app/common/views/components/games/reversi/reversi.room.vue @@ -47,9 +47,9 @@ </header> <div> - <mk-switch v-model="game.settings.isLlotheo" @change="updateSettings" text="%i18n:@is-llotheo%"/> - <mk-switch v-model="game.settings.loopedBoard" @change="updateSettings" text="%i18n:@looped-map%"/> - <mk-switch v-model="game.settings.canPutEverywhere" @change="updateSettings" text="%i18n:@can-put-everywhere%"/> + <ui-switch v-model="game.settings.isLlotheo" @change="updateSettings">%i18n:@is-llotheo%</ui-switch> + <ui-switch v-model="game.settings.loopedBoard" @change="updateSettings">%i18n:@looped-map%</ui-switch> + <ui-switch v-model="game.settings.canPutEverywhere" @change="updateSettings">%i18n:@can-put-everywhere%</ui-switch> </div> </div> diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts index 0a3d0d0ae6..4c1c0afa80 100644 --- a/src/client/app/common/views/components/index.ts +++ b/src/client/app/common/views/components/index.ts @@ -30,7 +30,6 @@ import messagingRoom from './messaging-room.vue'; import urlPreview from './url-preview.vue'; import twitterSetting from './twitter-setting.vue'; import fileTypeIcon from './file-type-icon.vue'; -import Switch from './switch.vue'; import Reversi from './games/reversi/reversi.vue'; import welcomeTimeline from './welcome-timeline.vue'; import uiInput from './ui/input.vue'; @@ -74,7 +73,6 @@ Vue.component('mk-messaging-room', messagingRoom); Vue.component('mk-url-preview', urlPreview); Vue.component('mk-twitter-setting', twitterSetting); Vue.component('mk-file-type-icon', fileTypeIcon); -Vue.component('mk-switch', Switch); Vue.component('mk-reversi', Reversi); Vue.component('mk-welcome-timeline', welcomeTimeline); Vue.component('ui-input', uiInput); diff --git a/src/client/app/common/views/components/switch.vue b/src/client/app/common/views/components/switch.vue deleted file mode 100644 index aa60331cbc..0000000000 --- a/src/client/app/common/views/components/switch.vue +++ /dev/null @@ -1,199 +0,0 @@ -<template> -<div - class="mk-switch" - :class="{ disabled, checked }" - role="switch" - :aria-checked="checked" - :aria-disabled="disabled" - @click="switchValue" - @mouseover="mouseenter" -> - <input - type="checkbox" - @change="handleChange" - ref="input" - :disabled="disabled" - @keydown.enter="switchValue" - > - <span class="button"> - <span :style="{ transform }"></span> - </span> - <span class="label"> - <span :aria-hidden="!checked">{{ text }}</span> - <p :aria-hidden="!checked"> - <slot></slot> - </p> - </span> -</div> -</template> - -<script lang="ts"> -import Vue from 'vue'; -export default Vue.extend({ - props: { - value: { - type: Boolean, - default: false - }, - disabled: { - type: Boolean, - default: false - }, - text: String - },/* - created() { - if (!~[true, false].indexOf(this.value)) { - this.$emit('input', false); - } - },*/ - computed: { - checked(): boolean { - return this.value; - }, - transform(): string { - return this.checked ? 'translate3d(20px, 0, 0)' : ''; - } - }, - watch: { - value() { - (this.$el).style.transition = 'all 0.3s'; - (this.$refs.input as any).checked = this.checked; - } - }, - mounted() { - (this.$refs.input as any).checked = this.checked; - }, - methods: { - mouseenter() { - (this.$el).style.transition = 'all 0s'; - }, - handleChange() { - (this.$el).style.transition = 'all 0.3s'; - this.$emit('input', !this.checked); - this.$emit('change', !this.checked); - this.$nextTick(() => { - // set input's checked property - // in case parent refuses to change component's value - (this.$refs.input as any).checked = this.checked; - }); - }, - switchValue() { - !this.disabled && this.handleChange(); - } - } -}); -</script> - -<style lang="stylus" scoped> - - -root(isDark) - display flex - margin 12px 0 - cursor pointer - transition all 0.3s - - > * - user-select none - - &.disabled - opacity 0.6 - cursor not-allowed - - &.checked - > .button - background-color var(--primary) - border-color var(--primary) - - > .label - > span - color var(--primary) - - &:hover - > .label - > span - color var(--primaryDarken10) - - > .button - background var(--primaryDarken10) - border-color var(--primaryDarken10) - - &:hover - > .label - > span - color isDark ? #fff : #2e3338 - - > .button - $color = isDark ? #15181d : #ced2da - background $color - border-color $color - - > input - position absolute - width 0 - height 0 - opacity 0 - margin 0 - - &:focus + .button - &:after - content "" - pointer-events none - position absolute - top -5px - right -5px - bottom -5px - left -5px - border 2px solid var(--primaryAlpha03) - border-radius 14px - - > .button - $color = isDark ? #1c1f25 : #dcdfe6 - - display inline-block - margin 0 - width 40px - min-width 40px - height 20px - min-height 20px - background $color - border 1px solid $color - outline none - border-radius 10px - transition inherit - - > * - position absolute - top 1px - left 1px - border-radius 100% - transition transform 0.3s - width 16px - height 16px - background-color #fff - - > .label - margin-left 8px - display block - font-size 15px - cursor pointer - transition inherit - - > span - display block - line-height 20px - color isDark ? #c4ccd2 : #4a535a - transition inherit - - > p - margin 0 - //font-size 90% - color isDark ? #78858e : #9daab3 - -.mk-switch[data-darkmode] - root(true) - -.mk-switch:not([data-darkmode]) - root(false) - -</style> diff --git a/src/client/app/common/views/components/ui/button.vue b/src/client/app/common/views/components/ui/button.vue index ae59214038..c411f0f5c9 100644 --- a/src/client/app/common/views/components/ui/button.vue +++ b/src/client/app/common/views/components/ui/button.vue @@ -32,8 +32,6 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> - - root(isDark, fill) > button display block diff --git a/src/client/app/common/views/components/ui/switch.vue b/src/client/app/common/views/components/ui/switch.vue index e358713d8f..2ee787cb76 100644 --- a/src/client/app/common/views/components/ui/switch.vue +++ b/src/client/app/common/views/components/ui/switch.vue @@ -56,9 +56,7 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> - - -root(isDark) +.ui-switch display flex margin 32px 0 cursor pointer @@ -99,7 +97,7 @@ root(isDark) margin 3px 0 0 0 width 34px height 14px - background isDark ? rgba(#fff, 0.15) : rgba(#000, 0.25) + background var(--switchTrack) outline none border-radius 14px transition inherit @@ -125,18 +123,11 @@ root(isDark) > span display block line-height 20px - color isDark ? #c4ccd2 : rgba(#000, 0.75) + color currentColor transition inherit > p margin 0 - //font-size 90% - color isDark ? #78858e : #9daab3 - -.ui-switch[data-darkmode] - root(true) - -.ui-switch:not([data-darkmode]) - root(false) + opacity 0.7 </style> diff --git a/src/client/app/desktop/views/components/settings.profile.vue b/src/client/app/desktop/views/components/settings.profile.vue index d47b5b224b..9dd2798557 100644 --- a/src/client/app/desktop/views/components/settings.profile.vue +++ b/src/client/app/desktop/views/components/settings.profile.vue @@ -24,13 +24,13 @@ <button class="ui primary" @click="save">%i18n:@save%</button> <section> <h2>%i18n:@locked-account%</h2> - <mk-switch v-model="$store.state.i.isLocked" @change="onChangeIsLocked" text="%i18n:@is-locked%"/> + <ui-switch v-model="$store.state.i.isLocked" @change="onChangeIsLocked">%i18n:@is-locked%</ui-switch> </section> <section> <h2>%i18n:@other%</h2> - <mk-switch v-model="$store.state.i.isBot" @change="onChangeIsBot" text="%i18n:@is-bot%"/> - <mk-switch v-model="$store.state.i.isCat" @change="onChangeIsCat" text="%i18n:@is-cat%"/> - <mk-switch v-model="alwaysMarkNsfw" text="%i18n:common.always-mark-nsfw%"/> + <ui-switch v-model="$store.state.i.isBot" @change="onChangeIsBot">%i18n:@is-bot%</ui-switch> + <ui-switch v-model="$store.state.i.isCat" @change="onChangeIsCat">%i18n:@is-cat%</ui-switch> + <ui-switch v-model="alwaysMarkNsfw">%i18n:common.always-mark-nsfw%</ui-switch> </section> </div> </template> diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue index 4b8ee3c9cd..4efaa75c4b 100644 --- a/src/client/app/desktop/views/components/settings.vue +++ b/src/client/app/desktop/views/components/settings.vue @@ -30,7 +30,7 @@ <section> <header>%i18n:@note-visibility%</header> - <mk-switch v-model="rememberNoteVisibility" text="%i18n:@remember-note-visibility%"/> + <ui-switch v-model="rememberNoteVisibility">%i18n:@remember-note-visibility%</ui-switch> <section> <header>%i18n:@default-note-visibility%</header> <ui-select v-model="defaultNoteVisibility"> @@ -59,30 +59,30 @@ <div class="div"> <button class="ui" @click="updateWallpaper">%i18n:@choose-wallpaper%</button> <button class="ui" @click="deleteWallpaper">%i18n:@delete-wallpaper%</button> - <mk-switch v-model="darkmode" text="%i18n:@dark-mode%"/> - <mk-switch v-model="useShadow" text="%i18n:@use-shadow%"/> - <mk-switch v-model="roundedCorners" text="%i18n:@rounded-corners%"/> - <mk-switch v-model="circleIcons" text="%i18n:@circle-icons%"/> - <mk-switch v-model="reduceMotion" text="%i18n:common.reduce-motion%"/> - <mk-switch v-model="contrastedAcct" text="%i18n:@contrasted-acct%"/> - <mk-switch v-model="showFullAcct" text="%i18n:common.show-full-acct%"/> - <mk-switch v-model="gradientWindowHeader" text="%i18n:@gradient-window-header%"/> - <mk-switch v-model="iLikeSushi" text="%i18n:common.i-like-sushi%"/> + <ui-switch v-model="darkmode">%i18n:@dark-mode%</ui-switch> + <ui-switch v-model="useShadow">%i18n:@use-shadow%</ui-switch> + <ui-switch v-model="roundedCorners">%i18n:@rounded-corners%</ui-switch> + <ui-switch v-model="circleIcons">%i18n:@circle-icons%</ui-switch> + <ui-switch v-model="reduceMotion">%i18n:common.reduce-motion%</ui-switch> + <ui-switch v-model="contrastedAcct">%i18n:@contrasted-acct%</ui-switch> + <ui-switch v-model="showFullAcct">%i18n:common.show-full-acct%</ui-switch> + <ui-switch v-model="gradientWindowHeader">%i18n:@gradient-window-header%</ui-switch> + <ui-switch v-model="iLikeSushi">%i18n:common.i-like-sushi%</ui-switch> </div> - <mk-switch v-model="showPostFormOnTopOfTl" text="%i18n:@post-form-on-timeline%"/> - <mk-switch v-model="suggestRecentHashtags" text="%i18n:@suggest-recent-hashtags%"/> - <mk-switch v-model="showClockOnHeader" text="%i18n:@show-clock-on-header%"/> - <mk-switch v-model="alwaysShowNsfw" text="%i18n:common.always-show-nsfw%"/> - <mk-switch v-model="showReplyTarget" text="%i18n:@show-reply-target%"/> - <mk-switch v-model="showMyRenotes" text="%i18n:@show-my-renotes%"/> - <mk-switch v-model="showRenotedMyNotes" text="%i18n:@show-renoted-my-notes%"/> - <mk-switch v-model="showLocalRenotes" text="%i18n:@show-local-renotes%"/> + <ui-switch v-model="showPostFormOnTopOfTl">%i18n:@post-form-on-timeline%</ui-switch> + <ui-switch v-model="suggestRecentHashtags">%i18n:@suggest-recent-hashtags%</ui-switch> + <ui-switch v-model="showClockOnHeader">%i18n:@show-clock-on-header%</ui-switch> + <ui-switch v-model="alwaysShowNsfw">%i18n:common.always-show-nsfw%</ui-switch> + <ui-switch v-model="showReplyTarget">%i18n:@show-reply-target%</ui-switch> + <ui-switch v-model="showMyRenotes">%i18n:@show-my-renotes%</ui-switch> + <ui-switch v-model="showRenotedMyNotes">%i18n:@show-renoted-my-notes%</ui-switch> + <ui-switch v-model="showLocalRenotes">%i18n:@show-local-renotes%</ui-switch> <mk-switch v-model="showMaps" text="%i18n:@show-maps%"> <span>%i18n:@show-maps-desc%</span> </mk-switch> - <mk-switch v-model="disableAnimatedMfm" text="%i18n:common.disable-animated-mfm%"/> - <mk-switch v-model="games_reversi_showBoardLabels" text="%i18n:common.show-reversi-board-labels%"/> - <mk-switch v-model="games_reversi_useContrastStones" text="%i18n:common.use-contrast-reversi-stones%"/> + <ui-switch v-model="disableAnimatedMfm">%i18n:common.disable-animated-mfm%</ui-switch> + <ui-switch v-model="games_reversi_showBoardLabels">%i18n:common.show-reversi-board-labels%</ui-switch> + <ui-switch v-model="games_reversi_useContrastStones">%i18n:common.use-contrast-reversi-stones%</ui-switch> </section> <section class="web" v-show="page == 'web'"> @@ -102,7 +102,7 @@ <section class="web" v-show="page == 'web'"> <h1>%i18n:@mobile%</h1> - <mk-switch v-model="disableViaMobile" text="%i18n:@disable-via-mobile%"/> + <ui-switch v-model="disableViaMobile">%i18n:@disable-via-mobile%</ui-switch> </section> <section class="web" v-show="page == 'web'"> diff --git a/src/client/app/desktop/views/pages/deck/deck.tl-column.vue b/src/client/app/desktop/views/pages/deck/deck.tl-column.vue index 550b1be628..d245e3ecf5 100644 --- a/src/client/app/desktop/views/pages/deck/deck.tl-column.vue +++ b/src/client/app/desktop/views/pages/deck/deck.tl-column.vue @@ -11,8 +11,8 @@ </span> <div class="editor" style="padding:0 12px" v-if="edit"> - <mk-switch v-model="column.isMediaOnly" @change="onChangeSettings" text="%i18n:@is-media-only%"/> - <mk-switch v-model="column.isMediaView" @change="onChangeSettings" text="%i18n:@is-media-view%"/> + <ui-switch v-model="column.isMediaOnly" @change="onChangeSettings">%i18n:@is-media-only%</ui-switch> + <ui-switch v-model="column.isMediaView" @change="onChangeSettings">%i18n:@is-media-view%</ui-switch> </div> <x-list-tl v-if="column.type == 'list'" :list="column.list" :media-only="column.isMediaOnly" :media-view="column.isMediaView"/> <x-hashtag-tl v-if="column.type == 'hashtag'" :tag-tl="$store.state.settings.tagTimelines.find(x => x.id == column.tagTlId)" :media-only="column.isMediaOnly" :media-view="column.isMediaView"/> diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json index 77a41228d0..a3877093f5 100644 --- a/src/client/theme/dark.json +++ b/src/client/theme/dark.json @@ -1,7 +1,8 @@ { "meta": { "id": "9978f7f9-5616-44fd-a704-cc5985efdd63", - "name": "Dark" + "name": "Dark", + "author": "syuilo" }, "primary": "#fb4e4e", "primaryForeground": "#fff", @@ -28,7 +29,7 @@ "dateDividerFg": "#666b79", "footerButtonHover": "#2e3440", "footerButtonActive": "#21242b", - + "switchTrack": "rgba(255, 255, 255, 0.15)", "noteHeaderName": "#fff", "noteHeaderBadgeFg": "#758188", "noteHeaderBadgeBg": "rgba(0, 0, 0, 0.25)", diff --git a/src/client/theme/halloween.json b/src/client/theme/halloween.json index 7c26fbf6e6..b156eb1aa8 100644 --- a/src/client/theme/halloween.json +++ b/src/client/theme/halloween.json @@ -2,6 +2,7 @@ "meta": { "id": "42e4f09b-67d5-498c-af7d-29faa54745b0", "name": "Halloween", + "author": "syuilo", "inherit": "9978f7f9-5616-44fd-a704-cc5985efdd63" }, "primary": "#fb8d4e", diff --git a/src/client/theme/light.json b/src/client/theme/light.json index 28cc71bdb7..7dcf2d3f44 100644 --- a/src/client/theme/light.json +++ b/src/client/theme/light.json @@ -1,7 +1,8 @@ { "meta": { "id": "406cfea3-a4e7-486c-9057-30ede1353c3f", - "name": "Light" + "name": "Light", + "author": "syuilo" }, "primary": "#fb4e4e", "primaryForeground": "#fff", @@ -28,7 +29,7 @@ "dateDividerFg": "#aaa", "footerButtonHover": "#f5f5f5", "footerButtonActive": "#eee", - + "switchTrack": "rgba(0, 0, 0, 0.25)", "noteHeaderName": "#627079", "noteHeaderBadgeFg": "#aaa", "noteHeaderBadgeBg": "rgba(0, 0, 0, 0.05)",