graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-11-27 00:23:08 +02:00
Code Issues Projects Releases Packages Wiki Activity

enhance(client): 🎨

Browse source
This commit is contained in:
syuilo 2021-12-26 01:42:50 +09:00
parent 3692c9eb64
commit fe3609451e
9 changed files with 74 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
packages/client/src/components/form/input.vue
View file

@ -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);
} }
} }

9
packages/client/src/components/form/select.vue
View file

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

72
packages/client/src/components/form/switch.vue
View file

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

9
packages/client/src/components/form/textarea.vue
View file

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

11
packages/client/src/components/signup.vue
View file

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

2
packages/client/src/directives/index.ts
View file

@ -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);
} }

2
packages/client/src/directives/panel.ts
View file

@ -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';
} }
} }

2
packages/client/src/pages/settings/theme.vue
View file

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