Madeorsk/rudeshark.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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 { ._formPanel {
background: var(--panel); background: var(--panel);
border-radius: var(--radius); border-radius: var(--radius);
transition: background 0.2s ease;
&._formClickable { &._formClickable {
&:hover { &:hover {
//background: var(--panelHighlight); //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 { &.active {
color: var(--accent); color: var(--accent);
background: var(--panelHighlight);
} }
> .icon { > .icon {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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