mirror of
https://github.com/kokonect-link/cherrypick
synced 2024-10-30 23:01:48 +09:00
Tweak UI
This commit is contained in:
parent
a085d9fbd7
commit
b9c4a582ac
@ -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
49
src/client/components/form/info.vue
Normal 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>
|
@ -66,6 +66,7 @@ export default defineComponent({
|
||||
|
||||
&.active {
|
||||
color: var(--accent);
|
||||
background: var(--panelHighlight);
|
||||
}
|
||||
|
||||
> .icon {
|
||||
|
@ -168,7 +168,7 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
> .header {
|
||||
$height: 54px;
|
||||
$height: 52px;
|
||||
$height-narrow: 42px;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
|
@ -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,
|
||||
|
@ -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'],
|
||||
|
@ -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,
|
||||
|
@ -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,
|
||||
|
@ -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,
|
||||
|
@ -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,
|
||||
|
@ -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'],
|
||||
|
@ -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'],
|
||||
|
@ -545,7 +545,6 @@ export default defineComponent({
|
||||
|
||||
.ftskorzw.narrow {
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
overflow: clip;
|
||||
|
||||
> .punished {
|
||||
|
Loading…
Reference in New Issue
Block a user