mirror/cherrypick
1
1
Fork 0
mirror of https://github.com/kokonect-link/cherrypick synced 2024-10-30 23:01:48 +09:00
Code

Tweak UI

Browse Source
This commit is contained in:
syuilo 2021-04-14 01:41:49 +09:00
parent a085d9fbd7
commit b9c4a582ac
13 changed files with 75 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/client/components/form/form.scss
View File

@ -1,11 +1,17 @@
._formPanel {
background: var(--panel);
border-radius: var(--radius);
transition: background 0.2s ease;
&._formClickable {
&:hover {
//background: var(--panelHighlight);
}
&:active {
background: var(--panelHighlight);
transition: background 0s;
}
}
}

49
src/client/components/form/info.vue Normal file
View File

@ -0,0 +1,49 @@
<template>
<div class="fzenkabp _formItem">
<div class="_formPanel" :class="{ warn }">
<i v-if="warn"><Fa :icon="faExclamationTriangle"/></i>
<i v-else><Fa :icon="faInfoCircle"/></i>
<slot></slot>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { faInfoCircle, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
export default defineComponent({
props: {
warn: {
type: Boolean,
required: false,
default: false
},
},
data() {
return {
faInfoCircle, faExclamationTriangle
};
}
});
</script>
<style lang="scss" scoped>
.fzenkabp {
> div {
padding: 14px 16px;
font-size: 90%;
background: var(--infoBg);
color: var(--infoFg);
&.warn {
background: var(--infoWarnBg);
color: var(--infoWarnFg);
}
> i {
margin-right: 4px;
}
}
}
</style>

1
src/client/components/form/link.vue
View File

@ -66,6 +66,7 @@ export default defineComponent({
&.active {
color: var(--accent);
background: var(--panelHighlight);
}
> .icon {

2
src/client/components/modal-page-window.vue
View File

@ -168,7 +168,7 @@ export default defineComponent({
}
> .header {
$height: 54px;
$height: 52px;
$height-narrow: 42px;
display: flex;
flex-shrink: 0;

8
src/client/pages/settings/mute-block.vue
View File

@ -6,7 +6,7 @@
</MkTab>
<div v-if="tab === 'mute'">
<MkPagination :pagination="mutingPagination" class="muting">
<template #empty><MkInfo>{{ $ts.noUsers }}</MkInfo></template>
<template #empty><FormInfo>{{ $ts.noUsers }}</FormInfo></template>
<template #default="{items}">
<FormGroup>
<FormLink v-for="mute in items" :key="mute.id" :to="userPage(mute.mutee)">
@ -18,7 +18,7 @@
</div>
<div v-if="tab === 'block'">
<MkPagination :pagination="blockingPagination" class="blocking">
<template #empty><MkInfo>{{ $ts.noUsers }}</MkInfo></template>
<template #empty><FormInfo>{{ $ts.noUsers }}</FormInfo></template>
<template #default="{items}">
<FormGroup>
<FormLink v-for="block in items" :key="block.id" :to="userPage(block.blockee)">
@ -36,7 +36,7 @@ import { defineComponent } from 'vue';
import { faBan } from '@fortawesome/free-solid-svg-icons';
import MkPagination from '@client/components/ui/pagination.vue';
import MkTab from '@client/components/tab.vue';
import MkInfo from '@client/components/ui/info.vue';
import FormInfo from '@client/components/form/info.vue';
import FormLink from '@client/components/form/link.vue';
import FormBase from '@client/components/form/base.vue';
import FormGroup from '@client/components/form/group.vue';
@ -48,7 +48,7 @@ export default defineComponent({
components: {
MkPagination,
MkTab,
MkInfo,
FormInfo,
FormBase,
FormGroup,
FormLink,

6
src/client/pages/settings/plugin.install.vue
View File

@ -1,6 +1,6 @@
<template>
<FormBase>
<MkInfo warn>{{ $ts._plugin.installWarn }}</MkInfo>
<FormInfo warn>{{ $ts._plugin.installWarn }}</FormInfo>
<FormGroup>
<FormTextarea v-model:value="code" tall>
@ -25,7 +25,7 @@ import FormBase from '@client/components/form/base.vue';
import FormGroup from '@client/components/form/group.vue';
import FormLink from '@client/components/form/link.vue';
import FormButton from '@client/components/form/button.vue';
import MkInfo from '@client/components/ui/info.vue';
import FormInfo from '@client/components/form/info.vue';
import * as os from '@client/os';
import { ColdDeviceStorage } from '@client/store';
import { unisonReload } from '@client/scripts/unison-reload';
@ -40,7 +40,7 @@ export default defineComponent({
FormGroup,
FormLink,
FormButton,
MkInfo,
FormInfo,
},
emits: ['info'],

2
src/client/pages/settings/plugin.manage.vue
View File

@ -36,7 +36,6 @@ import { faPlug, faSave, faTrashAlt, faFolderOpen, faDownload, faCog } from '@fo
import MkButton from '@client/components/ui/button.vue';
import MkTextarea from '@client/components/ui/textarea.vue';
import MkSelect from '@client/components/ui/select.vue';
import MkInfo from '@client/components/ui/info.vue';
import FormSwitch from '@client/components/form/switch.vue';
import FormBase from '@client/components/form/base.vue';
import FormGroup from '@client/components/form/group.vue';
@ -49,7 +48,6 @@ export default defineComponent({
MkButton,
MkTextarea,
MkSelect,
MkInfo,
FormSwitch,
FormBase,
FormGroup,

2
src/client/pages/settings/registry.keys.vue
View File

@ -24,7 +24,6 @@
import { defineAsyncComponent, defineComponent } from 'vue';
import { faCogs } from '@fortawesome/free-solid-svg-icons';
import * as JSON5 from 'json5';
import MkInfo from '@client/components/ui/info.vue';
import FormSwitch from '@client/components/form/switch.vue';
import FormSelect from '@client/components/form/select.vue';
import FormLink from '@client/components/form/link.vue';
@ -37,7 +36,6 @@ import * as symbols from '@client/symbols';
export default defineComponent({
components: {
MkInfo,
FormBase,
FormSelect,
FormSwitch,

6
src/client/pages/settings/registry.value.vue
View File

@ -1,6 +1,6 @@
<template>
<FormBase>
<MkInfo warn>{{ $ts.editTheseSettingsMayBreakAccount }}</MkInfo>
<FormInfo warn>{{ $ts.editTheseSettingsMayBreakAccount }}</FormInfo>
<template v-if="value">
<FormGroup>
@ -39,7 +39,7 @@
import { defineAsyncComponent, defineComponent } from 'vue';
import { faCogs, faSave, faTrash } from '@fortawesome/free-solid-svg-icons';
import * as JSON5 from 'json5';
import MkInfo from '@client/components/ui/info.vue';
import FormInfo from '@client/components/form/info.vue';
import FormSwitch from '@client/components/form/switch.vue';
import FormSelect from '@client/components/form/select.vue';
import FormTextarea from '@client/components/form/textarea.vue';
@ -52,7 +52,7 @@ import * as symbols from '@client/symbols';
export default defineComponent({
components: {
MkInfo,
FormInfo,
FormBase,
FormSelect,
FormSwitch,

2
src/client/pages/settings/registry.vue
View File

@ -12,7 +12,6 @@
import { defineAsyncComponent, defineComponent } from 'vue';
import { faCogs } from '@fortawesome/free-solid-svg-icons';
import * as JSON5 from 'json5';
import MkInfo from '@client/components/ui/info.vue';
import FormSwitch from '@client/components/form/switch.vue';
import FormSelect from '@client/components/form/select.vue';
import FormLink from '@client/components/form/link.vue';
@ -25,7 +24,6 @@ import * as symbols from '@client/symbols';
export default defineComponent({
components: {
MkInfo,
FormBase,
FormSelect,
FormSwitch,

8
src/client/pages/settings/update.vue
View File

@ -1,8 +1,8 @@
<template>
<FormBase>
<template v-if="meta">
<MkInfo v-if="version === meta.version">{{ $ts.youAreRunningUpToDateClient }}</MkInfo>
<MkInfo v-else warn>{{ $ts.newVersionOfClientAvailable }}</MkInfo>
<FormInfo v-if="version === meta.version">{{ $ts.youAreRunningUpToDateClient }}</FormInfo>
<FormInfo v-else warn>{{ $ts.newVersionOfClientAvailable }}</FormInfo>
</template>
<FormGroup>
<template #label>{{ instanceName }}</template>
@ -38,7 +38,7 @@ import FormBase from '@client/components/form/base.vue';
import FormGroup from '@client/components/form/group.vue';
import FormButton from '@client/components/form/button.vue';
import FormKeyValueView from '@client/components/form/key-value-view.vue';
import MkInfo from '@client/components/ui/info.vue';
import FormInfo from '@client/components/form/info.vue';
import * as os from '@client/os';
import { version, instanceName } from '@client/config';
import * as symbols from '@client/symbols';
@ -52,7 +52,7 @@ export default defineComponent({
FormLink,
FormGroup,
FormKeyValueView,
MkInfo,
FormInfo,
},
emits: ['info'],

8
src/client/pages/settings/word-mute.vue
View File

@ -7,14 +7,14 @@
<FormBase>
<div class="_formItem">
<div v-show="tab === 'soft'">
<MkInfo>{{ $ts._wordMute.softDescription }}</MkInfo>
<FormInfo>{{ $ts._wordMute.softDescription }}</FormInfo>
<FormTextarea v-model:value="softMutedWords">
<span>{{ $ts._wordMute.muteWords }}</span>
<template #desc>{{ $ts._wordMute.muteWordsDescription }}<br>{{ $ts._wordMute.muteWordsDescription2 }}</template>
</FormTextarea>
</div>
<div v-show="tab === 'hard'">
<MkInfo>{{ $ts._wordMute.hardDescription }}</MkInfo>
<FormInfo>{{ $ts._wordMute.hardDescription }}</FormInfo>
<FormTextarea v-model:value="hardMutedWords">
<span>{{ $ts._wordMute.muteWords }}</span>
<template #desc>{{ $ts._wordMute.muteWordsDescription }}<br>{{ $ts._wordMute.muteWordsDescription2 }}</template>
@ -37,8 +37,8 @@ import FormTextarea from '@client/components/form/textarea.vue';
import FormBase from '@client/components/form/base.vue';
import FormKeyValueView from '@client/components/form/key-value-view.vue';
import FormButton from '@client/components/form/button.vue';
import FormInfo from '@client/components/form/info.vue';
import MkTab from '@client/components/tab.vue';
import MkInfo from '@client/components/ui/info.vue';
import * as os from '@client/os';
import number from '@client/filters/number';
import * as symbols from '@client/symbols';
@ -50,7 +50,7 @@ export default defineComponent({
FormTextarea,
FormKeyValueView,
MkTab,
MkInfo,
FormInfo,
},
emits: ['info'],

1
src/client/pages/user/index.vue
View File

@ -545,7 +545,6 @@ export default defineComponent({
.ftskorzw.narrow {
box-sizing: border-box;
overflow: hidden;
overflow: clip;
> .punished {