Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

wip

Browse source
This commit is contained in:
syuilo 2018-09-27 12:55:10 +09:00
parent 0ef64a6d0b
commit df6c9b1a1c
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
11 changed files with 42 additions and 251 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/client/app/common/views/components/games/reversi/reversi.room.vue
View file

@ -47,9 +47,9 @@
</header> </header>
<div> <div>
<mk-switch v-model="game.settings.isLlotheo" @change="updateSettings" text="%i18n:@is-llotheo%"/> <ui-switch v-model="game.settings.isLlotheo" @change="updateSettings">%i18n:@is-llotheo%</ui-switch>
<mk-switch v-model="game.settings.loopedBoard" @change="updateSettings" text="%i18n:@looped-map%"/> <ui-switch v-model="game.settings.loopedBoard" @change="updateSettings">%i18n:@looped-map%</ui-switch>
<mk-switch v-model="game.settings.canPutEverywhere" @change="updateSettings" text="%i18n:@can-put-everywhere%"/> <ui-switch v-model="game.settings.canPutEverywhere" @change="updateSettings">%i18n:@can-put-everywhere%</ui-switch>
</div> </div>
</div> </div>

2
src/client/app/common/views/components/index.ts
View file

@ -30,7 +30,6 @@ import messagingRoom from './messaging-room.vue';
import urlPreview from './url-preview.vue'; import urlPreview from './url-preview.vue';
import twitterSetting from './twitter-setting.vue'; import twitterSetting from './twitter-setting.vue';
import fileTypeIcon from './file-type-icon.vue'; import fileTypeIcon from './file-type-icon.vue';
import Switch from './switch.vue';
import Reversi from './games/reversi/reversi.vue'; import Reversi from './games/reversi/reversi.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';
@ -74,7 +73,6 @@ Vue.component('mk-messaging-room', messagingRoom);
Vue.component('mk-url-preview', urlPreview); Vue.component('mk-url-preview', urlPreview);
Vue.component('mk-twitter-setting', twitterSetting); Vue.component('mk-twitter-setting', twitterSetting);
Vue.component('mk-file-type-icon', fileTypeIcon); Vue.component('mk-file-type-icon', fileTypeIcon);
Vue.component('mk-switch', Switch);
Vue.component('mk-reversi', Reversi); Vue.component('mk-reversi', Reversi);
Vue.component('mk-welcome-timeline', welcomeTimeline); Vue.component('mk-welcome-timeline', welcomeTimeline);
Vue.component('ui-input', uiInput); Vue.component('ui-input', uiInput);

199
src/client/app/common/views/components/switch.vue
View file

@ -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>

2
src/client/app/common/views/components/ui/button.vue
View file

@ -32,8 +32,6 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
root(isDark, fill) root(isDark, fill)
> button > button
display block display block

17
src/client/app/common/views/components/ui/switch.vue
View file

@ -56,9 +56,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.ui-switch
root(isDark)
display flex display flex
margin 32px 0 margin 32px 0
cursor pointer cursor pointer
@ -99,7 +97,7 @@ root(isDark)
margin 3px 0 0 0 margin 3px 0 0 0
width 34px width 34px
height 14px height 14px
background isDark ? rgba(#fff, 0.15) : rgba(#000, 0.25) background var(--switchTrack)
outline none outline none
border-radius 14px border-radius 14px
transition inherit transition inherit
@ -125,18 +123,11 @@ root(isDark)
> span > span
display block display block
line-height 20px line-height 20px
color isDark ? #c4ccd2 : rgba(#000, 0.75) color currentColor
transition inherit transition inherit
> p > p
margin 0 margin 0
//font-size 90% opacity 0.7
color isDark ? #78858e : #9daab3
.ui-switch[data-darkmode]
root(true)
.ui-switch:not([data-darkmode])
root(false)
</style> </style>

8
src/client/app/desktop/views/components/settings.profile.vue
View file

@ -24,13 +24,13 @@
<button class="ui primary" @click="save">%i18n:@save%</button> <button class="ui primary" @click="save">%i18n:@save%</button>
<section> <section>
<h2>%i18n:@locked-account%</h2> <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>
<section> <section>
<h2>%i18n:@other%</h2> <h2>%i18n:@other%</h2>
<mk-switch v-model="$store.state.i.isBot" @change="onChangeIsBot" text="%i18n:@is-bot%"/> <ui-switch v-model="$store.state.i.isBot" @change="onChangeIsBot">%i18n:@is-bot%</ui-switch>
<mk-switch v-model="$store.state.i.isCat" @change="onChangeIsCat" text="%i18n:@is-cat%"/> <ui-switch v-model="$store.state.i.isCat" @change="onChangeIsCat">%i18n:@is-cat%</ui-switch>
<mk-switch v-model="alwaysMarkNsfw" text="%i18n:common.always-mark-nsfw%"/> <ui-switch v-model="alwaysMarkNsfw">%i18n:common.always-mark-nsfw%</ui-switch>
</section> </section>
</div> </div>
</template> </template>

44
src/client/app/desktop/views/components/settings.vue
View file

@ -30,7 +30,7 @@
<section> <section>
<header>%i18n:@note-visibility%</header> <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> <section>
<header>%i18n:@default-note-visibility%</header> <header>%i18n:@default-note-visibility%</header>
<ui-select v-model="defaultNoteVisibility"> <ui-select v-model="defaultNoteVisibility">
@ -59,30 +59,30 @@
<div class="div"> <div class="div">
<button class="ui" @click="updateWallpaper">%i18n:@choose-wallpaper%</button> <button class="ui" @click="updateWallpaper">%i18n:@choose-wallpaper%</button>
<button class="ui" @click="deleteWallpaper">%i18n:@delete-wallpaper%</button> <button class="ui" @click="deleteWallpaper">%i18n:@delete-wallpaper%</button>
<mk-switch v-model="darkmode" text="%i18n:@dark-mode%"/> <ui-switch v-model="darkmode">%i18n:@dark-mode%</ui-switch>
<mk-switch v-model="useShadow" text="%i18n:@use-shadow%"/> <ui-switch v-model="useShadow">%i18n:@use-shadow%</ui-switch>
<mk-switch v-model="roundedCorners" text="%i18n:@rounded-corners%"/> <ui-switch v-model="roundedCorners">%i18n:@rounded-corners%</ui-switch>
<mk-switch v-model="circleIcons" text="%i18n:@circle-icons%"/> <ui-switch v-model="circleIcons">%i18n:@circle-icons%</ui-switch>
<mk-switch v-model="reduceMotion" text="%i18n:common.reduce-motion%"/> <ui-switch v-model="reduceMotion">%i18n:common.reduce-motion%</ui-switch>
<mk-switch v-model="contrastedAcct" text="%i18n:@contrasted-acct%"/> <ui-switch v-model="contrastedAcct">%i18n:@contrasted-acct%</ui-switch>
<mk-switch v-model="showFullAcct" text="%i18n:common.show-full-acct%"/> <ui-switch v-model="showFullAcct">%i18n:common.show-full-acct%</ui-switch>
<mk-switch v-model="gradientWindowHeader" text="%i18n:@gradient-window-header%"/> <ui-switch v-model="gradientWindowHeader">%i18n:@gradient-window-header%</ui-switch>
<mk-switch v-model="iLikeSushi" text="%i18n:common.i-like-sushi%"/> <ui-switch v-model="iLikeSushi">%i18n:common.i-like-sushi%</ui-switch>
</div> </div>
<mk-switch v-model="showPostFormOnTopOfTl" text="%i18n:@post-form-on-timeline%"/> <ui-switch v-model="showPostFormOnTopOfTl">%i18n:@post-form-on-timeline%</ui-switch>
<mk-switch v-model="suggestRecentHashtags" text="%i18n:@suggest-recent-hashtags%"/> <ui-switch v-model="suggestRecentHashtags">%i18n:@suggest-recent-hashtags%</ui-switch>
<mk-switch v-model="showClockOnHeader" text="%i18n:@show-clock-on-header%"/> <ui-switch v-model="showClockOnHeader">%i18n:@show-clock-on-header%</ui-switch>
<mk-switch v-model="alwaysShowNsfw" text="%i18n:common.always-show-nsfw%"/> <ui-switch v-model="alwaysShowNsfw">%i18n:common.always-show-nsfw%</ui-switch>
<mk-switch v-model="showReplyTarget" text="%i18n:@show-reply-target%"/> <ui-switch v-model="showReplyTarget">%i18n:@show-reply-target%</ui-switch>
<mk-switch v-model="showMyRenotes" text="%i18n:@show-my-renotes%"/> <ui-switch v-model="showMyRenotes">%i18n:@show-my-renotes%</ui-switch>
<mk-switch v-model="showRenotedMyNotes" text="%i18n:@show-renoted-my-notes%"/> <ui-switch v-model="showRenotedMyNotes">%i18n:@show-renoted-my-notes%</ui-switch>
<mk-switch v-model="showLocalRenotes" text="%i18n:@show-local-renotes%"/> <ui-switch v-model="showLocalRenotes">%i18n:@show-local-renotes%</ui-switch>
<mk-switch v-model="showMaps" text="%i18n:@show-maps%"> <mk-switch v-model="showMaps" text="%i18n:@show-maps%">
<span>%i18n:@show-maps-desc%</span> <span>%i18n:@show-maps-desc%</span>
</mk-switch> </mk-switch>
<mk-switch v-model="disableAnimatedMfm" text="%i18n:common.disable-animated-mfm%"/> <ui-switch v-model="disableAnimatedMfm">%i18n:common.disable-animated-mfm%</ui-switch>
<mk-switch v-model="games_reversi_showBoardLabels" text="%i18n:common.show-reversi-board-labels%"/> <ui-switch v-model="games_reversi_showBoardLabels">%i18n:common.show-reversi-board-labels%</ui-switch>
<mk-switch v-model="games_reversi_useContrastStones" text="%i18n:common.use-contrast-reversi-stones%"/> <ui-switch v-model="games_reversi_useContrastStones">%i18n:common.use-contrast-reversi-stones%</ui-switch>
</section> </section>
<section class="web" v-show="page == 'web'"> <section class="web" v-show="page == 'web'">
@ -102,7 +102,7 @@
<section class="web" v-show="page == 'web'"> <section class="web" v-show="page == 'web'">
<h1>%i18n:@mobile%</h1> <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>
<section class="web" v-show="page == 'web'"> <section class="web" v-show="page == 'web'">

4
src/client/app/desktop/views/pages/deck/deck.tl-column.vue
View file

@ -11,8 +11,8 @@
</span> </span>
<div class="editor" style="padding:0 12px" v-if="edit"> <div class="editor" style="padding:0 12px" v-if="edit">
<mk-switch v-model="column.isMediaOnly" @change="onChangeSettings" text="%i18n:@is-media-only%"/> <ui-switch v-model="column.isMediaOnly" @change="onChangeSettings">%i18n:@is-media-only%</ui-switch>
<mk-switch v-model="column.isMediaView" @change="onChangeSettings" text="%i18n:@is-media-view%"/> <ui-switch v-model="column.isMediaView" @change="onChangeSettings">%i18n:@is-media-view%</ui-switch>
</div> </div>
<x-list-tl v-if="column.type == 'list'" :list="column.list" :media-only="column.isMediaOnly" :media-view="column.isMediaView"/> <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"/> <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"/>

5
src/client/theme/dark.json
View file

@ -1,7 +1,8 @@
{ {
"meta": { "meta": {
"id": "9978f7f9-5616-44fd-a704-cc5985efdd63", "id": "9978f7f9-5616-44fd-a704-cc5985efdd63",
"name": "Dark" "name": "Dark",
"author": "syuilo"
}, },
"primary": "#fb4e4e", "primary": "#fb4e4e",
"primaryForeground": "#fff", "primaryForeground": "#fff",
@ -28,7 +29,7 @@
"dateDividerFg": "#666b79", "dateDividerFg": "#666b79",
"footerButtonHover": "#2e3440", "footerButtonHover": "#2e3440",
"footerButtonActive": "#21242b", "footerButtonActive": "#21242b",
"switchTrack": "rgba(255, 255, 255, 0.15)",
"noteHeaderName": "#fff", "noteHeaderName": "#fff",
"noteHeaderBadgeFg": "#758188", "noteHeaderBadgeFg": "#758188",
"noteHeaderBadgeBg": "rgba(0, 0, 0, 0.25)", "noteHeaderBadgeBg": "rgba(0, 0, 0, 0.25)",

1
src/client/theme/halloween.json
View file

@ -2,6 +2,7 @@
"meta": { "meta": {
"id": "42e4f09b-67d5-498c-af7d-29faa54745b0", "id": "42e4f09b-67d5-498c-af7d-29faa54745b0",
"name": "Halloween", "name": "Halloween",
"author": "syuilo",
"inherit": "9978f7f9-5616-44fd-a704-cc5985efdd63" "inherit": "9978f7f9-5616-44fd-a704-cc5985efdd63"
}, },
"primary": "#fb8d4e", "primary": "#fb8d4e",

5
src/client/theme/light.json
View file

@ -1,7 +1,8 @@
{ {
"meta": { "meta": {
"id": "406cfea3-a4e7-486c-9057-30ede1353c3f", "id": "406cfea3-a4e7-486c-9057-30ede1353c3f",
"name": "Light" "name": "Light",
"author": "syuilo"
}, },
"primary": "#fb4e4e", "primary": "#fb4e4e",
"primaryForeground": "#fff", "primaryForeground": "#fff",
@ -28,7 +29,7 @@
"dateDividerFg": "#aaa", "dateDividerFg": "#aaa",
"footerButtonHover": "#f5f5f5", "footerButtonHover": "#f5f5f5",
"footerButtonActive": "#eee", "footerButtonActive": "#eee",
"switchTrack": "rgba(0, 0, 0, 0.25)",
"noteHeaderName": "#627079", "noteHeaderName": "#627079",
"noteHeaderBadgeFg": "#aaa", "noteHeaderBadgeFg": "#aaa",
"noteHeaderBadgeBg": "rgba(0, 0, 0, 0.05)", "noteHeaderBadgeBg": "rgba(0, 0, 0, 0.05)",