From 361069314ffaa61a81b2189c2eec000a3d1d9c35 Mon Sep 17 00:00:00 2001 From: syuilo Date: Fri, 17 Sep 2021 22:39:15 +0900 Subject: [PATCH] Refine UI (#7806) * wip * wip * wip * wip * wip * wip * wip * wip * Update default.vue * wip --- src/client/components/global/avatar.vue | 26 ++++ src/client/components/ui/folder.vue | 3 +- src/client/components/ui/input.vue | 2 +- src/client/components/ui/textarea.vue | 2 +- src/client/init.ts | 4 +- src/client/pages/emojis.category.vue | 134 +++++++++++++++++++++ src/client/pages/emojis.emoji.vue | 92 +++++++++++++++ src/client/pages/emojis.vue | 139 ++-------------------- src/client/pages/favorites.vue | 3 +- src/client/pages/note.vue | 150 ++++++++++++------------ src/client/pages/notifications.vue | 1 + src/client/pages/settings/index.vue | 3 +- src/client/pages/timeline.vue | 128 ++++++-------------- src/client/pages/user/index.vue | 93 ++++----------- src/client/style.scss | 1 - src/client/themes/_dark.json5 | 2 +- src/client/themes/_light.json5 | 2 +- src/client/ui/_common_/header.vue | 99 ++++++++++++++-- src/client/ui/default.vue | 11 +- src/client/ui/universal.vue | 8 +- 20 files changed, 517 insertions(+), 386 deletions(-) create mode 100644 src/client/pages/emojis.category.vue create mode 100644 src/client/pages/emojis.emoji.vue diff --git a/src/client/components/global/avatar.vue b/src/client/components/global/avatar.vue index eea970ec9..395ed5d8c 100644 --- a/src/client/components/global/avatar.vue +++ b/src/client/components/global/avatar.vue @@ -73,6 +73,22 @@ export default defineComponent({ diff --git a/src/client/components/ui/folder.vue b/src/client/components/ui/folder.vue index 1f3593a74..eecf1d8be 100644 --- a/src/client/components/ui/folder.vue +++ b/src/client/components/ui/folder.vue @@ -99,7 +99,8 @@ export default defineComponent({ z-index: 10; position: sticky; top: var(--stickyTop, 0px); - background: var(--panel); + padding: var(--x-padding); + background: var(--x-header, var(--panel)); /* TODO panelの半透明バージョンをプログラマティックに作りたい background: var(--X17); -webkit-backdrop-filter: var(--blur, blur(8px)); diff --git a/src/client/components/ui/input.vue b/src/client/components/ui/input.vue index 05ce5d3e1..a916a0b03 100644 --- a/src/client/components/ui/input.vue +++ b/src/client/components/ui/input.vue @@ -245,7 +245,7 @@ export default defineComponent({ font-size: 1em; color: var(--fg); background: var(--panel); - border: solid 1px var(--inputBorder); + border: solid 0.5px var(--inputBorder); border-radius: 6px; outline: none; box-shadow: none; diff --git a/src/client/components/ui/textarea.vue b/src/client/components/ui/textarea.vue index 53a141f01..08ac3182a 100644 --- a/src/client/components/ui/textarea.vue +++ b/src/client/components/ui/textarea.vue @@ -212,7 +212,7 @@ export default defineComponent({ font-size: 1em; color: var(--fg); background: var(--panel); - border: solid 1px var(--inputBorder); + border: solid 0.5px var(--inputBorder); border-radius: 6px; outline: none; box-shadow: none; diff --git a/src/client/init.ts b/src/client/init.ts index 4d2170e03..aa9cd817c 100644 --- a/src/client/init.ts +++ b/src/client/init.ts @@ -15,7 +15,7 @@ if (localStorage.getItem('accounts') != null) { import * as Sentry from '@sentry/browser'; import { Integrations } from '@sentry/tracing'; -import { computed, createApp, watch, markRaw } from 'vue'; +import { computed, createApp, watch, markRaw, version as vueVersion } from 'vue'; import compareVersions from 'compare-versions'; import widgets from '@client/widgets'; @@ -47,6 +47,8 @@ window.onunhandledrejection = null; if (_DEV_) { console.warn('Development mode!!!'); + console.info(`vue ${vueVersion}`); + (window as any).$i = $i; (window as any).$store = defaultStore; diff --git a/src/client/pages/emojis.category.vue b/src/client/pages/emojis.category.vue new file mode 100644 index 000000000..0c24b06d1 --- /dev/null +++ b/src/client/pages/emojis.category.vue @@ -0,0 +1,134 @@ + + + + + diff --git a/src/client/pages/emojis.emoji.vue b/src/client/pages/emojis.emoji.vue new file mode 100644 index 000000000..3c9bb4deb --- /dev/null +++ b/src/client/pages/emojis.emoji.vue @@ -0,0 +1,92 @@ + + + + + diff --git a/src/client/pages/emojis.vue b/src/client/pages/emojis.vue index 391aff829..c1f87047d 100644 --- a/src/client/pages/emojis.vue +++ b/src/client/pages/emojis.vue @@ -1,151 +1,30 @@ diff --git a/src/client/pages/favorites.vue b/src/client/pages/favorites.vue index a2d61b98d..f13723c2d 100644 --- a/src/client/pages/favorites.vue +++ b/src/client/pages/favorites.vue @@ -22,7 +22,8 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.favorites, - icon: 'fas fa-star' + icon: 'fas fa-star', + bg: 'var(--bg)', }, pagination: { endpoint: 'i/favorites', diff --git a/src/client/pages/note.vue b/src/client/pages/note.vue index 7725ca14b..fe85d7364 100644 --- a/src/client/pages/note.vue +++ b/src/client/pages/note.vue @@ -1,37 +1,39 @@ @@ -63,12 +65,14 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: computed(() => this.note ? { title: this.$ts.note, + subtitle: new Date(this.note.createdAt).toLocaleString(), avatar: this.note.user, path: `/notes/${this.note.id}`, share: { title: this.$t('noteOf', { user: this.note.user.name }), text: this.note.text, }, + bg: 'var(--bg)', } : null), note: null, clips: null, @@ -149,52 +153,54 @@ export default defineComponent({ .fcuexfpr { background: var(--bg); - > .note { - > .main { - > .load { - min-width: 0; - margin: 0 auto; - border-radius: 999px; + > ._root { + > .note { + > .main { + > .load { + min-width: 0; + margin: 0 auto; + border-radius: 999px; - &.next { - margin-bottom: var(--margin); - } - - &.prev { - margin-top: var(--margin); - } - } - - > .note { - > .note { - border-radius: var(--radius); - background: var(--panel); - } - } - - > .clips { - > .title { - font-weight: bold; - padding: 12px; - } - - > .item { - display: block; - padding: 16px; - - > .description { - padding: 8px 0; + &.next { + margin-bottom: var(--margin); } - > .user { - $height: 32px; - padding-top: 16px; - border-top: solid 0.5px var(--divider); - line-height: $height; + &.prev { + margin-top: var(--margin); + } + } - > .avatar { - width: $height; - height: $height; + > .note { + > .note { + border-radius: var(--radius); + background: var(--panel); + } + } + + > .clips { + > .title { + font-weight: bold; + padding: 12px; + } + + > .item { + display: block; + padding: 16px; + + > .description { + padding: 8px 0; + } + + > .user { + $height: 32px; + padding-top: 16px; + border-top: solid 0.5px var(--divider); + line-height: $height; + + > .avatar { + width: $height; + height: $height; + } } } } diff --git a/src/client/pages/notifications.vue b/src/client/pages/notifications.vue index 633718a90..06f8ad3cb 100644 --- a/src/client/pages/notifications.vue +++ b/src/client/pages/notifications.vue @@ -21,6 +21,7 @@ export default defineComponent({ [symbols.PAGE_INFO]: { title: this.$ts.notifications, icon: 'fas fa-bell', + bg: 'var(--bg)', actions: [{ text: this.$ts.markAllAsRead, icon: 'fas fa-check', diff --git a/src/client/pages/settings/index.vue b/src/client/pages/settings/index.vue index e7e250602..3fb5f5f1e 100644 --- a/src/client/pages/settings/index.vue +++ b/src/client/pages/settings/index.vue @@ -86,7 +86,8 @@ export default defineComponent({ setup(props, context) { const indexInfo = { title: i18n.locale.settings, - icon: 'fas fa-cog' + icon: 'fas fa-cog', + bg: 'var(--bg)', }; const INFO = ref(indexInfo); const page = ref(props.initialPage); diff --git a/src/client/pages/timeline.vue b/src/client/pages/timeline.vue index f54549b98..125191223 100644 --- a/src/client/pages/timeline.vue +++ b/src/client/pages/timeline.vue @@ -1,25 +1,10 @@