diff --git a/src/client/app/common/views/components/ui/card.vue b/src/client/app/common/views/components/ui/card.vue index 97f06ca655..e2b15240e4 100644 --- a/src/client/app/common/views/components/ui/card.vue +++ b/src/client/app/common/views/components/ui/card.vue @@ -22,15 +22,21 @@ export default Vue.extend({ <style lang="stylus" scoped> @import '~const.styl' -.ui-card +root(isDark) margin 16px padding 16px - background #fff + background isDark ? #282C37 : #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 + font-weight normal + font-size 24px + color isDark ? #fff : #444 + +.ui-card[data-darkmode] + root(true) + +.ui-card:not([data-darkmode]) + root(false) </style> diff --git a/src/client/app/common/views/components/ui/input.vue b/src/client/app/common/views/components/ui/input.vue index 3a474f0243..167dd4e2a9 100644 --- a/src/client/app/common/views/components/ui/input.vue +++ b/src/client/app/common/views/components/ui/input.vue @@ -153,7 +153,7 @@ root(isDark, fill) width 24px text-align center line-height 32px - color rgba(#000, 0.54) + color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54) &:not(:empty) + .input margin-left 28px @@ -174,7 +174,7 @@ root(isDark, fill) left 0 right 0 height 1px - background rgba(#000, 0.42) + background isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42) &:after content '' @@ -232,7 +232,7 @@ root(isDark, fill) transition-duration 0.3s font-size 16px line-height 32px - color rgba(#000, 0.54) + color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54) pointer-events none //will-change transform transform-origin top left @@ -247,6 +247,7 @@ root(isDark, fill) font-weight fill ? bold : normal font-size 16px line-height 32px + color isDark ? #fff : #000 background transparent border none border-radius 0 @@ -263,7 +264,7 @@ root(isDark, fill) justify-self center font-size 16px line-height 32px - color rgba(#000, 0.54) + color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54) pointer-events none > * @@ -299,9 +300,9 @@ root(isDark, fill) &.filled > .input > .label - top fill ? -24px : -16px + top fill ? -24px : -17px left 0 !important - transform scale(0.8) + transform scale(0.75) .ui-input[data-darkmode] &.fill diff --git a/src/client/app/common/views/components/ui/select.vue b/src/client/app/common/views/components/ui/select.vue index c56ae86159..4577a15f68 100644 --- a/src/client/app/common/views/components/ui/select.vue +++ b/src/client/app/common/views/components/ui/select.vue @@ -193,9 +193,9 @@ root(isDark, fill) &.filled > .input > .label - top fill ? -24px : -16px + top fill ? -24px : -17px left 0 !important - transform scale(0.8) + transform scale(0.75) .ui-select[data-darkmode] &.fill diff --git a/src/client/app/common/views/components/ui/switch.vue b/src/client/app/common/views/components/ui/switch.vue index 2431a76528..24611b9aa0 100644 --- a/src/client/app/common/views/components/ui/switch.vue +++ b/src/client/app/common/views/components/ui/switch.vue @@ -5,15 +5,13 @@ role="switch" :aria-checked="checked" :aria-disabled="disabled" - @click="switchValue" - @mouseover="mouseenter" + @click="toggle" > <input type="checkbox" - @change="handleChange" ref="input" :disabled="disabled" - @keydown.enter="switchValue" + @keydown.enter="toggle" > <span class="button"> <span></span> @@ -30,6 +28,10 @@ <script lang="ts"> import Vue from 'vue'; export default Vue.extend({ + model: { + prop: 'value', + event: 'change' + }, props: { value: { type: Boolean, @@ -39,42 +41,15 @@ export default Vue.extend({ type: Boolean, default: false } - },/* - created() { - if (!~[true, false].indexOf(this.value)) { - this.$emit('input', false); - } - },*/ + }, computed: { checked(): boolean { return this.value; } }, - 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); + toggle() { 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(); } } }); @@ -117,7 +92,7 @@ root(isDark) margin 3px 0 0 0 width 34px height 14px - background isDark ? rgba(#fff, 0.1) : rgba(#000, 0.07) + background isDark ? rgba(#fff, 0.1) : rgba(#000, 0.25) outline none border-radius 14px transition inherit diff --git a/src/client/app/common/views/components/ui/textarea.vue b/src/client/app/common/views/components/ui/textarea.vue index d5e2b15628..cc6b376ead 100644 --- a/src/client/app/common/views/components/ui/textarea.vue +++ b/src/client/app/common/views/components/ui/textarea.vue @@ -84,7 +84,7 @@ root(isDark, fill) left 0 right 0 background none - border solid 1px rgba(#000, 0.42) + border solid 1px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42) border-radius 3px pointer-events none @@ -112,7 +112,7 @@ root(isDark, fill) transition-duration 0.3s font-size 16px line-height 32px - color rgba(#000, 0.54) + color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54) pointer-events none //will-change transform transform-origin top left @@ -126,6 +126,7 @@ root(isDark, fill) font inherit font-weight fill ? bold : normal font-size 16px + color isDark ? #fff : #000 background transparent border none border-radius 0 @@ -156,7 +157,7 @@ root(isDark, fill) > .label top -24px left 0 !important - transform scale(0.8) + transform scale(0.75) .ui-textarea[data-darkmode] &.fill