From 5f869e5d8735f3c058554b59e2c33f40ae7ef959 Mon Sep 17 00:00:00 2001 From: syuilo <Syuilotan@yahoo.co.jp> Date: Sat, 7 Aug 2021 17:55:16 +0900 Subject: [PATCH] Improve client --- locales/ja-JP.yml | 1 + src/client/components/ui/button.vue | 4 +- src/client/pages/_error_.vue | 26 +++++--- src/client/pages/my-antennas/create.vue | 51 ++++++++++++++++ src/client/pages/my-antennas/edit.vue | 56 ++++++++++++++++++ .../{index.antenna.vue => editor.vue} | 28 +++++---- src/client/pages/my-antennas/index.vue | 59 ++++++++----------- src/client/style.scss | 1 + src/client/themes/_light.json5 | 2 +- src/client/themes/l-vivid.json5 | 2 +- 10 files changed, 171 insertions(+), 59 deletions(-) create mode 100644 src/client/pages/my-antennas/create.vue create mode 100644 src/client/pages/my-antennas/edit.vue rename src/client/pages/my-antennas/{index.antenna.vue => editor.vue} (92%) diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index ef6a094fd7..3a00c28ddb 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -769,6 +769,7 @@ sent: "送信" received: "受信" searchResult: "検索結果" hashtags: "ハッシュタグ" +troubleshooting: "トラブルシューティング" _docs: continueReading: "続きを読む" diff --git a/src/client/components/ui/button.vue b/src/client/components/ui/button.vue index c92f30db97..8a83943825 100644 --- a/src/client/components/ui/button.vue +++ b/src/client/components/ui/button.vue @@ -1,6 +1,6 @@ <template> <component class="bghgjjyj _button" - :is="link ? 'a' : 'button'" + :is="link ? 'MkA' : 'button'" :class="{ inline, primary, danger, full }" :type="type" @click="$emit('click', $event)" @@ -115,6 +115,7 @@ export default defineComponent({ z-index: 1; // 他コンポーネントのbox-shadowに隠されないようにするため display: block; min-width: 100px; + width: min-content; padding: 8px 14px; text-align: center; font-weight: normal; @@ -125,6 +126,7 @@ export default defineComponent({ background: var(--buttonBg); border-radius: 999px; overflow: hidden; + box-sizing: border-box; &:not(:disabled):hover { background: var(--buttonHoverBg); diff --git a/src/client/pages/_error_.vue b/src/client/pages/_error_.vue index 6caecd6eaf..1d67d9b14d 100644 --- a/src/client/pages/_error_.vue +++ b/src/client/pages/_error_.vue @@ -1,11 +1,11 @@ <template> <transition :name="$store.state.animation ? 'zoom' : ''" appear> - <div class="_section"> - <div class="mjndxjch _content"> - <img src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/> - <p><i class="fas fa-exclamation-triangle"></i> {{ $ts.pageLoadError }}</p> - <p>{{ $ts.pageLoadErrorDescription }}</p> - </div> + <div class="mjndxjch"> + <img src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/> + <p><b><i class="fas fa-exclamation-triangle"></i> {{ $ts.pageLoadError }}</b></p> + <p>{{ $ts.pageLoadErrorDescription }}</p> + <p><MkA to="/docs/general/troubleshooting" class="_link">{{ $ts.troubleshooting }}</MkA></p> + <p v-if="error" class="error">ERROR: {{ error }}</p> </div> </transition> </template> @@ -19,6 +19,11 @@ export default defineComponent({ components: { MkButton, }, + props: { + error: { + required: false, + } + }, data() { return { [symbols.PAGE_INFO]: { @@ -32,10 +37,11 @@ export default defineComponent({ <style lang="scss" scoped> .mjndxjch { + padding: 32px; text-align: center; > p { - margin: 0 0 8px 0; + margin: 0 0 12px 0; } > .button { @@ -45,8 +51,12 @@ export default defineComponent({ > img { vertical-align: bottom; height: 128px; - margin-bottom: 16px; + margin-bottom: 24px; border-radius: 16px; } + + > .error { + opacity: 0.7; + } } </style> diff --git a/src/client/pages/my-antennas/create.vue b/src/client/pages/my-antennas/create.vue new file mode 100644 index 0000000000..d4762411e7 --- /dev/null +++ b/src/client/pages/my-antennas/create.vue @@ -0,0 +1,51 @@ +<template> +<div class="geegznzt"> + <XAntenna :antenna="draft" @created="onAntennaCreated"/> +</div> +</template> + +<script lang="ts"> +import { defineComponent } from 'vue'; +import MkButton from '@client/components/ui/button.vue'; +import XAntenna from './editor.vue'; +import * as symbols from '@client/symbols'; + +export default defineComponent({ + components: { + MkButton, + XAntenna, + }, + + data() { + return { + [symbols.PAGE_INFO]: { + title: this.$ts.manageAntennas, + icon: 'fas fa-satellite', + }, + draft: { + name: '', + src: 'all', + userListId: null, + userGroupId: null, + users: [], + keywords: [], + excludeKeywords: [], + withReplies: false, + caseSensitive: false, + withFile: false, + notify: false + }, + }; + }, + + methods: { + onAntennaCreated() { + this.$router.push('/my/antennas'); + }, + } +}); +</script> + +<style lang="scss" scoped> + +</style> diff --git a/src/client/pages/my-antennas/edit.vue b/src/client/pages/my-antennas/edit.vue new file mode 100644 index 0000000000..9deafb4235 --- /dev/null +++ b/src/client/pages/my-antennas/edit.vue @@ -0,0 +1,56 @@ +<template> +<div class=""> + <XAntenna v-if="antenna" :antenna="antenna" @updated="onAntennaUpdated"/> +</div> +</template> + +<script lang="ts"> +import { defineComponent } from 'vue'; +import MkButton from '@client/components/ui/button.vue'; +import XAntenna from './editor.vue'; +import * as symbols from '@client/symbols'; +import * as os from '@client/os'; + +export default defineComponent({ + components: { + MkButton, + XAntenna, + }, + + props: { + antennaId: { + type: String, + required: true, + } + }, + + data() { + return { + [symbols.PAGE_INFO]: { + title: this.$ts.manageAntennas, + icon: 'fas fa-satellite', + }, + antenna: null, + }; + }, + + watch: { + antennaId: { + async handler() { + this.antenna = await os.api('antennas/show', { antennaId: this.antennaId }); + }, + immediate: true, + } + }, + + methods: { + onAntennaUpdated() { + this.$router.push('/my/antennas'); + }, + } +}); +</script> + +<style lang="scss" scoped> + +</style> diff --git a/src/client/pages/my-antennas/index.antenna.vue b/src/client/pages/my-antennas/editor.vue similarity index 92% rename from src/client/pages/my-antennas/index.antenna.vue rename to src/client/pages/my-antennas/editor.vue index 3a74a9d7f1..882d48e643 100644 --- a/src/client/pages/my-antennas/index.antenna.vue +++ b/src/client/pages/my-antennas/editor.vue @@ -1,8 +1,7 @@ <template> -<div class="shaynizk _card"> - <div class="_title" v-if="antenna.name">{{ antenna.name }}</div> - <div class="_content body"> - <MkInput v-model="name"> +<div class="shaynizk"> + <div class="form"> + <MkInput v-model="name" class="_inputNoTopMargin"> <template #label>{{ $ts.name }}</template> </MkInput> <MkSelect v-model="src"> @@ -38,9 +37,9 @@ <MkSwitch v-model="withFile">{{ $ts.withFileAntenna }}</MkSwitch> <MkSwitch v-model="notify">{{ $ts.notifyAntenna }}</MkSwitch> </div> - <div class="_footer"> + <div class="actions"> <MkButton inline @click="saveAntenna()" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton> - <MkButton inline @click="deleteAntenna()" v-if="antenna.id != null"><i class="fas fa-trash"></i> {{ $ts.delete }}</MkButton> + <MkButton inline @click="deleteAntenna()" v-if="antenna.id != null" danger><i class="fas fa-trash"></i> {{ $ts.delete }}</MkButton> </div> </div> </template> @@ -117,7 +116,7 @@ export default defineComponent({ methods: { async saveAntenna() { if (this.antenna.id == null) { - await os.api('antennas/create', { + await os.apiWithDialog('antennas/create', { name: this.name, src: this.src, userListId: this.userListId, @@ -132,7 +131,7 @@ export default defineComponent({ }); this.$emit('created'); } else { - await os.api('antennas/update', { + await os.apiWithDialog('antennas/update', { antennaId: this.antenna.id, name: this.name, src: this.src, @@ -146,9 +145,8 @@ export default defineComponent({ keywords: this.keywords.trim().split('\n').map(x => x.trim().split(' ')), excludeKeywords: this.excludeKeywords.trim().split('\n').map(x => x.trim().split(' ')), }); + this.$emit('updated'); } - - os.success(); }, async deleteAntenna() { @@ -180,9 +178,13 @@ export default defineComponent({ <style lang="scss" scoped> .shaynizk { - > .body { - max-height: 250px; - overflow: auto; + > .form { + padding: 32px; + } + + > .actions { + padding: 24px 32px; + border-top: solid 0.5px var(--divider); } } </style> diff --git a/src/client/pages/my-antennas/index.vue b/src/client/pages/my-antennas/index.vue index 57c55cefdd..c27bb2c15e 100644 --- a/src/client/pages/my-antennas/index.vue +++ b/src/client/pages/my-antennas/index.vue @@ -1,12 +1,12 @@ <template> <div class="ieepwinx _section"> - <MkButton @click="create" primary class="add"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton> + <MkButton :link="true" to="/my/antennas/create" primary class="add"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton> <div class="_content"> - <XAntenna v-if="draft" :antenna="draft" @created="onAntennaCreated" style="margin-bottom: var(--margin);"/> - - <MkPagination :pagination="pagination" #default="{items}" class="antennas" ref="list"> - <XAntenna v-for="(antenna, i) in items" :key="antenna.id" :antenna="antenna" @deleted="onAntennaDeleted"/> + <MkPagination :pagination="pagination" #default="{items}" ref="list"> + <MkA class="ljoevbzj" v-for="antenna in items" :key="antenna.id" :to="`/my/antennas/${antenna.id}`"> + <div class="name">{{ antenna.name }}</div> + </MkA> </MkPagination> </div> </div> @@ -16,14 +16,12 @@ import { defineComponent } from 'vue'; import MkPagination from '@client/components/ui/pagination.vue'; import MkButton from '@client/components/ui/button.vue'; -import XAntenna from './index.antenna.vue'; import * as symbols from '@client/symbols'; export default defineComponent({ components: { MkPagination, MkButton, - XAntenna, }, data() { @@ -40,43 +38,34 @@ export default defineComponent({ endpoint: 'antennas/list', limit: 10, }, - draft: null, }; }, - - methods: { - create() { - this.draft = { - name: '', - src: 'all', - userListId: null, - userGroupId: null, - users: [], - keywords: [], - excludeKeywords: [], - withReplies: false, - caseSensitive: false, - withFile: false, - notify: false - }; - }, - - onAntennaCreated() { - this.$refs.list.reload(); - this.draft = null; - }, - - onAntennaDeleted() { - this.$refs.list.reload(); - }, - } }); </script> <style lang="scss" scoped> .ieepwinx { + padding: 16px; + > .add { margin: 0 auto 16px auto; } + + .ljoevbzj { + display: block; + padding: 16px; + margin-bottom: 8px; + border: solid 1px var(--divider); + border-radius: 6px; + + &:hover { + border: solid 1px var(--accent); + text-decoration: none; + } + + > .name { + font-weight: bold; + } + } } </style> diff --git a/src/client/style.scss b/src/client/style.scss index 99c1ced049..9127b6f238 100644 --- a/src/client/style.scss +++ b/src/client/style.scss @@ -255,6 +255,7 @@ hr { margin: var(--margin) 0; } +// TODO: 廃止 ._card { @extend ._panel; diff --git a/src/client/themes/_light.json5 b/src/client/themes/_light.json5 index b31e369a37..97f56c75f5 100644 --- a/src/client/themes/_light.json5 +++ b/src/client/themes/_light.json5 @@ -47,7 +47,7 @@ infoBg: '#e5f5ff', infoFg: '#72818a', infoWarnBg: '#fff0db', - infoWarnFg: '#573c08', + infoWarnFg: '#8f6e31', cwBg: '#b1b9c1', cwFg: '#fff', cwHoverBg: '#bbc4ce', diff --git a/src/client/themes/l-vivid.json5 b/src/client/themes/l-vivid.json5 index 32bb9dc26b..0f4abe0a45 100644 --- a/src/client/themes/l-vivid.json5 +++ b/src/client/themes/l-vivid.json5 @@ -38,7 +38,7 @@ messageBg: '@bg', navActive: '@accent', infoWarnBg: '#fff0db', - infoWarnFg: '#573c08', + infoWarnFg: '#8f6e31', navHoverFg: ':darken<17<@fg', dateLabelFg: '@fg', inputBorder: 'rgba(0, 0, 0, 0.1)',