mirror of
https://git.joinsharkey.org/Sharkey/Sharkey.git
synced 2024-11-30 07:03:08 +02:00
enhance(client): 🎨
This commit is contained in:
parent
3692c9eb64
commit
fe3609451e
9 changed files with 74 additions and 66 deletions
|
@ -5,7 +5,7 @@
|
||||||
<div ref="prefixEl" class="prefix"><slot name="prefix"></slot></div>
|
<div ref="prefixEl" class="prefix"><slot name="prefix"></slot></div>
|
||||||
<input ref="inputEl"
|
<input ref="inputEl"
|
||||||
v-model="v"
|
v-model="v"
|
||||||
v-panel
|
v-adaptive-border
|
||||||
:type="type"
|
:type="type"
|
||||||
:disabled="disabled"
|
:disabled="disabled"
|
||||||
:required="required"
|
:required="required"
|
||||||
|
@ -243,7 +243,8 @@ export default defineComponent({
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
color: var(--fg);
|
color: var(--fg);
|
||||||
border: solid 0.5px var(--panel);
|
background: var(--panel);
|
||||||
|
border: solid 1px var(--panel);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
outline: none;
|
outline: none;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
@ -251,7 +252,7 @@ export default defineComponent({
|
||||||
transition: border-color 0.1s ease-out;
|
transition: border-color 0.1s ease-out;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: var(--inputBorderHover);
|
border-color: var(--inputBorderHover) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -298,7 +299,7 @@ export default defineComponent({
|
||||||
|
|
||||||
&.focused {
|
&.focused {
|
||||||
> input {
|
> input {
|
||||||
border-color: var(--accent);
|
border-color: var(--accent) !important;
|
||||||
//box-shadow: 0 0 0 4px var(--focus);
|
//box-shadow: 0 0 0 4px var(--focus);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,7 +3,9 @@
|
||||||
<div class="label" @click="focus"><slot name="label"></slot></div>
|
<div class="label" @click="focus"><slot name="label"></slot></div>
|
||||||
<div ref="container" class="input" :class="{ inline, disabled, focused }" @click.prevent="onClick">
|
<div ref="container" class="input" :class="{ inline, disabled, focused }" @click.prevent="onClick">
|
||||||
<div ref="prefixEl" class="prefix"><slot name="prefix"></slot></div>
|
<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"
|
class="select"
|
||||||
:disabled="disabled"
|
:disabled="disabled"
|
||||||
:required="required"
|
:required="required"
|
||||||
|
@ -226,7 +228,7 @@ export default defineComponent({
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
> .select {
|
> .select {
|
||||||
border-color: var(--inputBorderHover);
|
border-color: var(--inputBorderHover) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -242,6 +244,7 @@ export default defineComponent({
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
color: var(--fg);
|
color: var(--fg);
|
||||||
|
background: var(--panel);
|
||||||
border: solid 1px var(--panel);
|
border: solid 1px var(--panel);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
outline: none;
|
outline: none;
|
||||||
|
@ -295,7 +298,7 @@ export default defineComponent({
|
||||||
|
|
||||||
&.focused {
|
&.focused {
|
||||||
> select {
|
> select {
|
||||||
border-color: var(--accent);
|
border-color: var(--accent) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -2,10 +2,6 @@
|
||||||
<div
|
<div
|
||||||
class="ziffeoms"
|
class="ziffeoms"
|
||||||
:class="{ disabled, checked }"
|
:class="{ disabled, checked }"
|
||||||
role="switch"
|
|
||||||
:aria-checked="checked"
|
|
||||||
:aria-disabled="disabled"
|
|
||||||
@click.prevent="toggle"
|
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
ref="input"
|
ref="input"
|
||||||
|
@ -13,11 +9,11 @@
|
||||||
:disabled="disabled"
|
:disabled="disabled"
|
||||||
@keydown.enter="toggle"
|
@keydown.enter="toggle"
|
||||||
>
|
>
|
||||||
<span v-tooltip="checked ? $ts.itsOn : $ts.itsOff" class="button">
|
<span v-adaptive-border v-tooltip="checked ? $ts.itsOn : $ts.itsOff" class="button" @click.prevent="toggle">
|
||||||
<span class="handle"></span>
|
<i class="check fas fa-check"></i>
|
||||||
</span>
|
</span>
|
||||||
<span class="label">
|
<span class="label">
|
||||||
<span><slot></slot></span>
|
<span @click="toggle"><slot></slot></span>
|
||||||
<p class="caption"><slot name="caption"></slot></p>
|
<p class="caption"><slot name="caption"></slot></p>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
@ -55,16 +51,7 @@ export default defineComponent({
|
||||||
.ziffeoms {
|
.ziffeoms {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
cursor: pointer;
|
transition: all 0.2s;
|
||||||
transition: all 0.3s;
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
> * {
|
> * {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
@ -80,27 +67,30 @@ export default defineComponent({
|
||||||
|
|
||||||
> .button {
|
> .button {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-flex;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
width: 36px;
|
box-sizing: border-box;
|
||||||
height: 26px;
|
width: 23px;
|
||||||
background: var(--switchBg);
|
height: 23px;
|
||||||
outline: none;
|
outline: none;
|
||||||
border-radius: 999px;
|
background: var(--panel);
|
||||||
|
border: solid 1px var(--panel);
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
transition: inherit;
|
transition: inherit;
|
||||||
|
|
||||||
> .handle {
|
> .check {
|
||||||
position: absolute;
|
margin: auto;
|
||||||
top: 0;
|
opacity: 0;
|
||||||
bottom: 0;
|
color: var(--fgOnAccent);
|
||||||
left: 5px;
|
font-size: 13px;
|
||||||
margin: auto 0;
|
}
|
||||||
border-radius: 100%;
|
}
|
||||||
transition: background-color 0.3s, transform 0.3s;
|
|
||||||
width: 16px;
|
&:hover {
|
||||||
height: 16px;
|
> .button {
|
||||||
background-color: #fff;
|
border-color: var(--inputBorderHover) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -108,13 +98,13 @@ export default defineComponent({
|
||||||
margin-left: 16px;
|
margin-left: 16px;
|
||||||
margin-top: 2px;
|
margin-top: 2px;
|
||||||
display: block;
|
display: block;
|
||||||
cursor: pointer;
|
|
||||||
transition: inherit;
|
transition: inherit;
|
||||||
color: var(--fg);
|
color: var(--fg);
|
||||||
|
|
||||||
> span {
|
> span {
|
||||||
display: block;
|
display: block;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
|
cursor: pointer;
|
||||||
transition: inherit;
|
transition: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -129,12 +119,6 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
|
||||||
> .button {
|
|
||||||
background-color: var(--accentedBg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.disabled {
|
&.disabled {
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
|
@ -142,11 +126,11 @@ export default defineComponent({
|
||||||
|
|
||||||
&.checked {
|
&.checked {
|
||||||
> .button {
|
> .button {
|
||||||
background-color: var(--accent);
|
background-color: var(--accent) !important;
|
||||||
border-color: var(--accent);
|
border-color: var(--accent) !important;
|
||||||
|
|
||||||
> .handle {
|
> .check {
|
||||||
transform: translateX(10px);
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<div class="input" :class="{ disabled, focused, tall, pre }">
|
<div class="input" :class="{ disabled, focused, tall, pre }">
|
||||||
<textarea ref="inputEl"
|
<textarea ref="inputEl"
|
||||||
v-model="v"
|
v-model="v"
|
||||||
v-panel
|
v-adaptive-border
|
||||||
:class="{ code, _monospace: code }"
|
:class="{ code, _monospace: code }"
|
||||||
:disabled="disabled"
|
:disabled="disabled"
|
||||||
:required="required"
|
:required="required"
|
||||||
|
@ -210,7 +210,8 @@ export default defineComponent({
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
color: var(--fg);
|
color: var(--fg);
|
||||||
border: solid 0.5px var(--panel);
|
background: var(--panel);
|
||||||
|
border: solid 1px var(--panel);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
outline: none;
|
outline: none;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
@ -218,13 +219,13 @@ export default defineComponent({
|
||||||
transition: border-color 0.1s ease-out;
|
transition: border-color 0.1s ease-out;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: var(--inputBorderHover);
|
border-color: var(--inputBorderHover) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.focused {
|
&.focused {
|
||||||
> textarea {
|
> textarea {
|
||||||
border-color: var(--accent);
|
border-color: var(--accent) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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>
|
<span v-if="passwordRetypeState == 'not-match'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.passwordNotMatched }}</span>
|
||||||
</template>
|
</template>
|
||||||
</MkInput>
|
</MkInput>
|
||||||
<label v-if="meta.tosUrl" class="_formBlock tou">
|
<MkSwitch v-if="meta.tosUrl" v-model="ToSAgreement" class="_formBlock tou">
|
||||||
<input v-model="ToSAgreement" type="checkbox">
|
|
||||||
<I18n :src="$ts.agreeTo">
|
<I18n :src="$ts.agreeTo">
|
||||||
<template #0>
|
<template #0>
|
||||||
<a :href="meta.tosUrl" class="_link" target="_blank">{{ $ts.tos }}</a>
|
<a :href="meta.tosUrl" class="_link" target="_blank">{{ $ts.tos }}</a>
|
||||||
</template>
|
</template>
|
||||||
</I18n>
|
</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.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"/>
|
<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>
|
<MkButton class="_formBlock" type="submit" :disabled="shouldDisableSubmitting" gradate data-cy-signup-submit>{{ $ts.start }}</MkButton>
|
||||||
|
@ -258,11 +257,5 @@ export default defineComponent({
|
||||||
.captcha {
|
.captcha {
|
||||||
margin: 16px 0;
|
margin: 16px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
> .tou {
|
|
||||||
display: block;
|
|
||||||
margin: 16px 0;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
24
packages/client/src/directives/adaptive-border.ts
Normal file
24
packages/client/src/directives/adaptive-border.ts
Normal file
|
@ -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;
|
|
@ -11,6 +11,7 @@ import anim from './anim';
|
||||||
import stickyContainer from './sticky-container';
|
import stickyContainer from './sticky-container';
|
||||||
import clickAnime from './click-anime';
|
import clickAnime from './click-anime';
|
||||||
import panel from './panel';
|
import panel from './panel';
|
||||||
|
import adaptiveBorder from './adaptive-border';
|
||||||
|
|
||||||
export default function(app: App) {
|
export default function(app: App) {
|
||||||
app.directive('userPreview', userPreview);
|
app.directive('userPreview', userPreview);
|
||||||
|
@ -25,4 +26,5 @@ export default function(app: App) {
|
||||||
app.directive('click-anime', clickAnime);
|
app.directive('click-anime', clickAnime);
|
||||||
app.directive('sticky-container', stickyContainer);
|
app.directive('sticky-container', stickyContainer);
|
||||||
app.directive('panel', panel);
|
app.directive('panel', panel);
|
||||||
|
app.directive('adaptive-border', adaptiveBorder);
|
||||||
}
|
}
|
||||||
|
|
|
@ -7,7 +7,7 @@ export default {
|
||||||
if (style.backgroundColor && !['rgba(0, 0, 0, 0)', 'rgba(0,0,0,0)', 'transparent'].includes(style.backgroundColor)) {
|
if (style.backgroundColor && !['rgba(0, 0, 0, 0)', 'rgba(0,0,0,0)', 'transparent'].includes(style.backgroundColor)) {
|
||||||
return style.backgroundColor;
|
return style.backgroundColor;
|
||||||
} else {
|
} else {
|
||||||
return getBgColor(el.parentElement);
|
return el.parentElement ? getBgColor(el.parentElement) : 'transparent';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="_formRoot">
|
<div class="_formRoot">
|
||||||
<div v-panel class="rfqxtzch _formBlock">
|
<div v-adaptive-border class="rfqxtzch _panel _formBlock">
|
||||||
<div class="toggle">
|
<div class="toggle">
|
||||||
<div class="toggleWrapper">
|
<div class="toggleWrapper">
|
||||||
<input id="dn" v-model="darkMode" type="checkbox" class="dn"/>
|
<input id="dn" v-model="darkMode" type="checkbox" class="dn"/>
|
||||||
|
|
Loading…
Reference in a new issue