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 ca85924c2..cd1b12ab2 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 @@ -34,9 +34,9 @@ </header> <div> - <el-radio v-model="game.settings.bw" label="random" @change="updateSettings">%i18n:@random%</el-radio> - <el-radio v-model="game.settings.bw" :label="1" @change="updateSettings">{{ '%i18n:@black-is%'.split('{}')[0] }}{{ game.user1 | userName }}{{ '%i18n:@black-is%'.split('{}')[1] }}</el-radio> - <el-radio v-model="game.settings.bw" :label="2" @change="updateSettings">{{ '%i18n:@black-is%'.split('{}')[0] }}{{ game.user2 | userName }}{{ '%i18n:@black-is%'.split('{}')[1] }}</el-radio> + <form-radio v-model="game.settings.bw" value="random" @change="updateSettings">%i18n:@random%</form-radio> + <form-radio v-model="game.settings.bw" :value="1" @change="updateSettings">{{ '%i18n:@black-is%'.split('{}')[0] }}{{ game.user1 | userName }}{{ '%i18n:@black-is%'.split('{}')[1] }}</form-radio> + <form-radio v-model="game.settings.bw" :value="2" @change="updateSettings">{{ '%i18n:@black-is%'.split('{}')[0] }}{{ game.user2 | userName }}{{ '%i18n:@black-is%'.split('{}')[1] }}</form-radio> </div> </div> @@ -99,9 +99,9 @@ </p> <div class="actions"> - <el-button @click="exit">%i18n:@cancel%</el-button> - <el-button type="primary" @click="accept" v-if="!isAccepted">%i18n:@ready%</el-button> - <el-button type="primary" @click="cancel" v-if="isAccepted">%i18n:@cancel-ready%</el-button> + <form-button @click="exit">%i18n:@cancel%</form-button> + <form-button primary @click="accept" v-if="!isAccepted">%i18n:@ready%</form-button> + <form-button primary @click="cancel" v-if="isAccepted">%i18n:@cancel-ready%</form-button> </div> </footer> </div> @@ -248,7 +248,7 @@ export default Vue.extend({ <style lang="stylus" scoped> @import '~const.styl' -.urbixznjwwuukfsckrwzwsqzsxornqij +root(isDark) text-align center background #f9f9f9 @@ -283,7 +283,7 @@ export default Vue.extend({ max-width 400px border-radius 4px border 1px solid #ebeef5 - background #fff + background isDark ? #282C37 : #fff color #303133 box-shadow 0 2px 12px 0 rgba(#000, 0.1) @@ -303,6 +303,13 @@ export default Vue.extend({ > .status margin 0 0 16px 0 + +.urbixznjwwuukfsckrwzwsqzsxornqij[data-darkmode] + root(true) + +.urbixznjwwuukfsckrwzwsqzsxornqij:not([data-darkmode]) + root(false) + </style> <style lang="stylus" module> diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts index 7075a8fc0..422a3da05 100644 --- a/src/client/app/common/views/components/index.ts +++ b/src/client/app/common/views/components/index.ts @@ -38,6 +38,7 @@ import uiSwitch from './ui/switch.vue'; import uiRadio from './ui/radio.vue'; import uiSelect from './ui/select.vue'; import formButton from './ui/form/button.vue'; +import formRadio from './ui/form/radio.vue'; Vue.component('mk-analog-clock', analogClock); Vue.component('mk-menu', menu); @@ -77,3 +78,4 @@ Vue.component('ui-switch', uiSwitch); Vue.component('ui-radio', uiRadio); Vue.component('ui-select', uiSelect); Vue.component('form-button', formButton); +Vue.component('form-radio', formRadio); diff --git a/src/client/app/common/views/components/ui/form/button.vue b/src/client/app/common/views/components/ui/form/button.vue index 2c3aa0783..3d81a8349 100644 --- a/src/client/app/common/views/components/ui/form/button.vue +++ b/src/client/app/common/views/components/ui/form/button.vue @@ -28,6 +28,11 @@ export default Vue.extend({ @import '~const.styl' root(isDark) + display inline-block + + & + .nvemkhtwcnnpkdrwfcbzuwhfulejhmzg + margin-left 12px + > button display inline-block margin 0 @@ -54,16 +59,18 @@ root(isDark) &.primary > button - border none + border 1px solid $theme-color background $theme-color color $theme-color-foreground &:hover &:focus background lighten($theme-color, 20%) + border-color lighten($theme-color, 20%) &:active background darken($theme-color, 20%) + border-color darken($theme-color, 20%) transition all 0s &.round diff --git a/src/client/app/common/views/components/ui/form/radio.vue b/src/client/app/common/views/components/ui/form/radio.vue new file mode 100644 index 000000000..1b337c3be --- /dev/null +++ b/src/client/app/common/views/components/ui/form/radio.vue @@ -0,0 +1,122 @@ +<template> +<div + class="uywduthvrdnlpsvsjkqigicixgyfctto" + :class="{ disabled, checked }" + :aria-checked="checked" + :aria-disabled="disabled" + @click="toggle" +> + <input type="radio" + :disabled="disabled" + > + <span class="button"> + <span></span> + </span> + <span class="label"><slot></slot></span> +</div> +</template> + +<script lang="ts"> +import Vue from 'vue'; +export default Vue.extend({ + model: { + prop: 'model', + event: 'change' + }, + props: { + model: { + required: false + }, + value: { + required: false + }, + disabled: { + type: Boolean, + default: false + } + }, + computed: { + checked(): boolean { + return this.model === this.value; + } + }, + methods: { + toggle() { + this.$emit('change', this.value); + } + } +}); +</script> + +<style lang="stylus" scoped> +@import '~const.styl' + +root(isDark) + display inline-flex + margin 0 16px 0 0 + cursor pointer + transition all 0.3s + + > * + user-select none + + &.disabled + opacity 0.6 + cursor not-allowed + + &.checked + > .button + border-color $theme-color + + &:after + background-color $theme-color + transform scale(1) + opacity 1 + + > .label + color $theme-color + + > input + position absolute + width 0 + height 0 + opacity 0 + margin 0 + + > .button + display inline-block + flex-shrink 0 + width 20px + height 20px + background none + border solid 2px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54) + border-radius 100% + transition inherit + + &:after + content '' + display block + position absolute + top 3px + right 3px + bottom 3px + left 3px + border-radius 100% + opacity 0 + transform scale(0) + transition 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) + + > .label + margin-left 8px + display block + font-size 14px + line-height 20px + cursor pointer + +.uywduthvrdnlpsvsjkqigicixgyfctto[data-darkmode] + root(true) + +.uywduthvrdnlpsvsjkqigicixgyfctto:not([data-darkmode]) + root(false) + +</style>