From fe3609451ea6d257a9143b0ac7c60257cdb8541a Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 26 Dec 2021 01:42:50 +0900
Subject: [PATCH] enhance(client): :art:
---
packages/client/src/components/form/input.vue | 9 +--
.../client/src/components/form/select.vue | 9 ++-
.../client/src/components/form/switch.vue | 72 ++++++++-----------
.../client/src/components/form/textarea.vue | 9 +--
packages/client/src/components/signup.vue | 11 +--
.../client/src/directives/adaptive-border.ts | 24 +++++++
packages/client/src/directives/index.ts | 2 +
packages/client/src/directives/panel.ts | 2 +-
packages/client/src/pages/settings/theme.vue | 2 +-
9 files changed, 74 insertions(+), 66 deletions(-)
create mode 100644 packages/client/src/directives/adaptive-border.ts
diff --git a/packages/client/src/components/form/input.vue b/packages/client/src/components/form/input.vue
index c990b693f1..3533f4f27b 100644
--- a/packages/client/src/components/form/input.vue
+++ b/packages/client/src/components/form/input.vue
@@ -5,7 +5,7 @@
<div ref="prefixEl" class="prefix"><slot name="prefix"></slot></div>
<input ref="inputEl"
v-model="v"
- v-panel
+ v-adaptive-border
:type="type"
:disabled="disabled"
:required="required"
@@ -243,7 +243,8 @@ export default defineComponent({
font-weight: normal;
font-size: 1em;
color: var(--fg);
- border: solid 0.5px var(--panel);
+ background: var(--panel);
+ border: solid 1px var(--panel);
border-radius: 6px;
outline: none;
box-shadow: none;
@@ -251,7 +252,7 @@ export default defineComponent({
transition: border-color 0.1s ease-out;
&:hover {
- border-color: var(--inputBorderHover);
+ border-color: var(--inputBorderHover) !important;
}
}
@@ -298,7 +299,7 @@ export default defineComponent({
&.focused {
> input {
- border-color: var(--accent);
+ border-color: var(--accent) !important;
//box-shadow: 0 0 0 4px var(--focus);
}
}
diff --git a/packages/client/src/components/form/select.vue b/packages/client/src/components/form/select.vue
index 9ecff1aa6f..afc53ca9c8 100644
--- a/packages/client/src/components/form/select.vue
+++ b/packages/client/src/components/form/select.vue
@@ -3,7 +3,9 @@
<div class="label" @click="focus"><slot name="label"></slot></div>
<div ref="container" class="input" :class="{ inline, disabled, focused }" @click.prevent="onClick">
<div ref="prefixEl" class="prefix"><slot name="prefix"></slot></div>
- <select ref="inputEl" v-model="v" v-panel
+ <select ref="inputEl"
+ v-model="v"
+ v-adaptive-border
class="select"
:disabled="disabled"
:required="required"
@@ -226,7 +228,7 @@ export default defineComponent({
&:hover {
> .select {
- border-color: var(--inputBorderHover);
+ border-color: var(--inputBorderHover) !important;
}
}
@@ -242,6 +244,7 @@ export default defineComponent({
font-weight: normal;
font-size: 1em;
color: var(--fg);
+ background: var(--panel);
border: solid 1px var(--panel);
border-radius: 6px;
outline: none;
@@ -295,7 +298,7 @@ export default defineComponent({
&.focused {
> select {
- border-color: var(--accent);
+ border-color: var(--accent) !important;
}
}
diff --git a/packages/client/src/components/form/switch.vue b/packages/client/src/components/form/switch.vue
index 239303a55a..aa28292b97 100644
--- a/packages/client/src/components/form/switch.vue
+++ b/packages/client/src/components/form/switch.vue
@@ -2,10 +2,6 @@
<div
class="ziffeoms"
:class="{ disabled, checked }"
- role="switch"
- :aria-checked="checked"
- :aria-disabled="disabled"
- @click.prevent="toggle"
>
<input
ref="input"
@@ -13,11 +9,11 @@
:disabled="disabled"
@keydown.enter="toggle"
>
- <span v-tooltip="checked ? $ts.itsOn : $ts.itsOff" class="button">
- <span class="handle"></span>
+ <span v-adaptive-border v-tooltip="checked ? $ts.itsOn : $ts.itsOff" class="button" @click.prevent="toggle">
+ <i class="check fas fa-check"></i>
</span>
<span class="label">
- <span><slot></slot></span>
+ <span @click="toggle"><slot></slot></span>
<p class="caption"><slot name="caption"></slot></p>
</span>
</div>
@@ -55,16 +51,7 @@ export default defineComponent({
.ziffeoms {
position: relative;
display: flex;
- cursor: pointer;
- transition: all 0.3s;
-
- &:first-child {
- margin-top: 0;
- }
-
- &:last-child {
- margin-bottom: 0;
- }
+ transition: all 0.2s;
> * {
user-select: none;
@@ -80,27 +67,30 @@ export default defineComponent({
> .button {
position: relative;
- display: inline-block;
+ display: inline-flex;
flex-shrink: 0;
margin: 0;
- width: 36px;
- height: 26px;
- background: var(--switchBg);
+ box-sizing: border-box;
+ width: 23px;
+ height: 23px;
outline: none;
- border-radius: 999px;
+ background: var(--panel);
+ border: solid 1px var(--panel);
+ border-radius: 4px;
+ cursor: pointer;
transition: inherit;
- > .handle {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 5px;
- margin: auto 0;
- border-radius: 100%;
- transition: background-color 0.3s, transform 0.3s;
- width: 16px;
- height: 16px;
- background-color: #fff;
+ > .check {
+ margin: auto;
+ opacity: 0;
+ color: var(--fgOnAccent);
+ font-size: 13px;
+ }
+ }
+
+ &:hover {
+ > .button {
+ border-color: var(--inputBorderHover) !important;
}
}
@@ -108,13 +98,13 @@ export default defineComponent({
margin-left: 16px;
margin-top: 2px;
display: block;
- cursor: pointer;
transition: inherit;
color: var(--fg);
> span {
display: block;
line-height: 20px;
+ cursor: pointer;
transition: inherit;
}
@@ -129,12 +119,6 @@ export default defineComponent({
}
}
- &:hover {
- > .button {
- background-color: var(--accentedBg);
- }
- }
-
&.disabled {
opacity: 0.6;
cursor: not-allowed;
@@ -142,11 +126,11 @@ export default defineComponent({
&.checked {
> .button {
- background-color: var(--accent);
- border-color: var(--accent);
+ background-color: var(--accent) !important;
+ border-color: var(--accent) !important;
- > .handle {
- transform: translateX(10px);
+ > .check {
+ opacity: 1;
}
}
}
diff --git a/packages/client/src/components/form/textarea.vue b/packages/client/src/components/form/textarea.vue
index 98fd0da94b..c9ba9b97a2 100644
--- a/packages/client/src/components/form/textarea.vue
+++ b/packages/client/src/components/form/textarea.vue
@@ -4,7 +4,7 @@
<div class="input" :class="{ disabled, focused, tall, pre }">
<textarea ref="inputEl"
v-model="v"
- v-panel
+ v-adaptive-border
:class="{ code, _monospace: code }"
:disabled="disabled"
:required="required"
@@ -210,7 +210,8 @@ export default defineComponent({
font-weight: normal;
font-size: 1em;
color: var(--fg);
- border: solid 0.5px var(--panel);
+ background: var(--panel);
+ border: solid 1px var(--panel);
border-radius: 6px;
outline: none;
box-shadow: none;
@@ -218,13 +219,13 @@ export default defineComponent({
transition: border-color 0.1s ease-out;
&:hover {
- border-color: var(--inputBorderHover);
+ border-color: var(--inputBorderHover) !important;
}
}
&.focused {
> textarea {
- border-color: var(--accent);
+ border-color: var(--accent) !important;
}
}
diff --git a/packages/client/src/components/signup.vue b/packages/client/src/components/signup.vue
index 8668d1d076..38a9fd55f1 100644
--- a/packages/client/src/components/signup.vue
+++ b/packages/client/src/components/signup.vue
@@ -51,14 +51,13 @@
<span v-if="passwordRetypeState == 'not-match'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.passwordNotMatched }}</span>
</template>
</MkInput>
- <label v-if="meta.tosUrl" class="_formBlock tou">
- <input v-model="ToSAgreement" type="checkbox">
+ <MkSwitch v-if="meta.tosUrl" v-model="ToSAgreement" class="_formBlock tou">
<I18n :src="$ts.agreeTo">
<template #0>
<a :href="meta.tosUrl" class="_link" target="_blank">{{ $ts.tos }}</a>
</template>
</I18n>
- </label>
+ </MkSwitch>
<captcha v-if="meta.enableHcaptcha" ref="hcaptcha" v-model="hCaptchaResponse" class="_formBlock captcha" provider="hcaptcha" :sitekey="meta.hcaptchaSiteKey"/>
<captcha v-if="meta.enableRecaptcha" ref="recaptcha" v-model="reCaptchaResponse" class="_formBlock captcha" provider="recaptcha" :sitekey="meta.recaptchaSiteKey"/>
<MkButton class="_formBlock" type="submit" :disabled="shouldDisableSubmitting" gradate data-cy-signup-submit>{{ $ts.start }}</MkButton>
@@ -258,11 +257,5 @@ export default defineComponent({
.captcha {
margin: 16px 0;
}
-
- > .tou {
- display: block;
- margin: 16px 0;
- cursor: pointer;
- }
}
</style>
diff --git a/packages/client/src/directives/adaptive-border.ts b/packages/client/src/directives/adaptive-border.ts
new file mode 100644
index 0000000000..fc426ca2cc
--- /dev/null
+++ b/packages/client/src/directives/adaptive-border.ts
@@ -0,0 +1,24 @@
+import { Directive } from 'vue';
+
+export default {
+ mounted(src, binding, vn) {
+ const getBgColor = (el: HTMLElement) => {
+ const style = window.getComputedStyle(el);
+ if (style.backgroundColor && !['rgba(0, 0, 0, 0)', 'rgba(0,0,0,0)', 'transparent'].includes(style.backgroundColor)) {
+ return style.backgroundColor;
+ } else {
+ return el.parentElement ? getBgColor(el.parentElement) : 'transparent';
+ }
+ }
+
+ const parentBg = getBgColor(src.parentElement);
+
+ const myBg = window.getComputedStyle(src).backgroundColor;
+
+ if (parentBg === myBg) {
+ src.style.borderColor = 'var(--divider)';
+ } else {
+ src.style.borderColor = myBg;
+ }
+ },
+} as Directive;
diff --git a/packages/client/src/directives/index.ts b/packages/client/src/directives/index.ts
index 4b11bb6213..8f13e792f3 100644
--- a/packages/client/src/directives/index.ts
+++ b/packages/client/src/directives/index.ts
@@ -11,6 +11,7 @@ import anim from './anim';
import stickyContainer from './sticky-container';
import clickAnime from './click-anime';
import panel from './panel';
+import adaptiveBorder from './adaptive-border';
export default function(app: App) {
app.directive('userPreview', userPreview);
@@ -25,4 +26,5 @@ export default function(app: App) {
app.directive('click-anime', clickAnime);
app.directive('sticky-container', stickyContainer);
app.directive('panel', panel);
+ app.directive('adaptive-border', adaptiveBorder);
}
diff --git a/packages/client/src/directives/panel.ts b/packages/client/src/directives/panel.ts
index 86ec2a9116..5f9158db2e 100644
--- a/packages/client/src/directives/panel.ts
+++ b/packages/client/src/directives/panel.ts
@@ -7,7 +7,7 @@ export default {
if (style.backgroundColor && !['rgba(0, 0, 0, 0)', 'rgba(0,0,0,0)', 'transparent'].includes(style.backgroundColor)) {
return style.backgroundColor;
} else {
- return getBgColor(el.parentElement);
+ return el.parentElement ? getBgColor(el.parentElement) : 'transparent';
}
}
diff --git a/packages/client/src/pages/settings/theme.vue b/packages/client/src/pages/settings/theme.vue
index 357b2ab830..6c88b65699 100644
--- a/packages/client/src/pages/settings/theme.vue
+++ b/packages/client/src/pages/settings/theme.vue
@@ -1,6 +1,6 @@
<template>
<div class="_formRoot">
- <div v-panel class="rfqxtzch _formBlock">
+ <div v-adaptive-border class="rfqxtzch _panel _formBlock">
<div class="toggle">
<div class="toggleWrapper">
<input id="dn" v-model="darkMode" type="checkbox" class="dn"/>