From b9c4a582acd1a96248be4acf42df56b4a43ecaa3 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 14 Apr 2021 01:41:49 +0900
Subject: [PATCH] Tweak UI
---
src/client/components/form/form.scss | 6 +++
src/client/components/form/info.vue | 49 ++++++++++++++++++++
src/client/components/form/link.vue | 1 +
src/client/components/modal-page-window.vue | 2 +-
src/client/pages/settings/mute-block.vue | 8 ++--
src/client/pages/settings/plugin.install.vue | 6 +--
src/client/pages/settings/plugin.manage.vue | 2 -
src/client/pages/settings/registry.keys.vue | 2 -
src/client/pages/settings/registry.value.vue | 6 +--
src/client/pages/settings/registry.vue | 2 -
src/client/pages/settings/update.vue | 8 ++--
src/client/pages/settings/word-mute.vue | 8 ++--
src/client/pages/user/index.vue | 1 -
13 files changed, 75 insertions(+), 26 deletions(-)
create mode 100644 src/client/components/form/info.vue
diff --git a/src/client/components/form/form.scss b/src/client/components/form/form.scss
index b8d1429c9d..8c01fad727 100644
--- a/src/client/components/form/form.scss
+++ b/src/client/components/form/form.scss
@@ -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;
+ }
}
}
diff --git a/src/client/components/form/info.vue b/src/client/components/form/info.vue
new file mode 100644
index 0000000000..a9224c7e65
--- /dev/null
+++ b/src/client/components/form/info.vue
@@ -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>
diff --git a/src/client/components/form/link.vue b/src/client/components/form/link.vue
index 2efc6b58c9..af36bcf22c 100644
--- a/src/client/components/form/link.vue
+++ b/src/client/components/form/link.vue
@@ -66,6 +66,7 @@ export default defineComponent({
&.active {
color: var(--accent);
+ background: var(--panelHighlight);
}
> .icon {
diff --git a/src/client/components/modal-page-window.vue b/src/client/components/modal-page-window.vue
index 24511215da..474a67f985 100644
--- a/src/client/components/modal-page-window.vue
+++ b/src/client/components/modal-page-window.vue
@@ -168,7 +168,7 @@ export default defineComponent({
}
> .header {
- $height: 54px;
+ $height: 52px;
$height-narrow: 42px;
display: flex;
flex-shrink: 0;
diff --git a/src/client/pages/settings/mute-block.vue b/src/client/pages/settings/mute-block.vue
index d1c3d5f29e..11450e049b 100644
--- a/src/client/pages/settings/mute-block.vue
+++ b/src/client/pages/settings/mute-block.vue
@@ -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,
diff --git a/src/client/pages/settings/plugin.install.vue b/src/client/pages/settings/plugin.install.vue
index ecda0a4e0c..bc80188fc6 100644
--- a/src/client/pages/settings/plugin.install.vue
+++ b/src/client/pages/settings/plugin.install.vue
@@ -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'],
diff --git a/src/client/pages/settings/plugin.manage.vue b/src/client/pages/settings/plugin.manage.vue
index 16d2225d0b..d7aabe560e 100644
--- a/src/client/pages/settings/plugin.manage.vue
+++ b/src/client/pages/settings/plugin.manage.vue
@@ -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,
diff --git a/src/client/pages/settings/registry.keys.vue b/src/client/pages/settings/registry.keys.vue
index d2fd75aca1..5cdfdc1332 100644
--- a/src/client/pages/settings/registry.keys.vue
+++ b/src/client/pages/settings/registry.keys.vue
@@ -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,
diff --git a/src/client/pages/settings/registry.value.vue b/src/client/pages/settings/registry.value.vue
index bba92bb746..7d5756af99 100644
--- a/src/client/pages/settings/registry.value.vue
+++ b/src/client/pages/settings/registry.value.vue
@@ -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,
diff --git a/src/client/pages/settings/registry.vue b/src/client/pages/settings/registry.vue
index a09c309d33..085389fc95 100644
--- a/src/client/pages/settings/registry.vue
+++ b/src/client/pages/settings/registry.vue
@@ -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,
diff --git a/src/client/pages/settings/update.vue b/src/client/pages/settings/update.vue
index fb1458da81..d7b2adae56 100644
--- a/src/client/pages/settings/update.vue
+++ b/src/client/pages/settings/update.vue
@@ -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'],
diff --git a/src/client/pages/settings/word-mute.vue b/src/client/pages/settings/word-mute.vue
index 029eb5d415..79de2ebbdf 100644
--- a/src/client/pages/settings/word-mute.vue
+++ b/src/client/pages/settings/word-mute.vue
@@ -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'],
diff --git a/src/client/pages/user/index.vue b/src/client/pages/user/index.vue
index 58f800d186..52b2725964 100644
--- a/src/client/pages/user/index.vue
+++ b/src/client/pages/user/index.vue
@@ -545,7 +545,6 @@ export default defineComponent({
.ftskorzw.narrow {
box-sizing: border-box;
- overflow: hidden;
overflow: clip;
> .punished {