From f44517f4afb31fa38a6aee4dd758fc003874e5ba Mon Sep 17 00:00:00 2001 From: syuilo <Syuilotan@yahoo.co.jp> Date: Sat, 10 Apr 2021 23:52:45 +0900 Subject: [PATCH] Tweak UI --- locales/ja-JP.yml | 2 + src/client/pages/note.vue | 3 +- src/client/pages/page.vue | 124 +++++++++++++++++++++--------- src/client/pages/user/index.vue | 3 +- src/client/ui/_common_/header.vue | 6 +- 5 files changed, 98 insertions(+), 40 deletions(-) diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 7b73c5f2ea..4c0dd2bc24 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -687,6 +687,7 @@ textColor: "文字" saveAs: "名前を付けて保存" advanced: "高度" value: "値" +createdAt: "作成日時" updatedAt: "更新日時" saveConfirm: "保存しますか?" deleteConfirm: "削除しますか?" @@ -712,6 +713,7 @@ showingPastTimeline: "過去のタイムラインを表示しています" clear: "クリア" markAllAsRead: "全て既読にする" goBack: "戻る" +unlikeConfirm: "いいね解除しますか?" _email: _follow: diff --git a/src/client/pages/note.vue b/src/client/pages/note.vue index 318e43c7f6..871bdd7200 100644 --- a/src/client/pages/note.vue +++ b/src/client/pages/note.vue @@ -45,7 +45,6 @@ import MkRemoteCaution from '@client/components/remote-caution.vue'; import MkButton from '@client/components/ui/button.vue'; import * as os from '@client/os'; import * as symbols from '@client/symbols'; -import { url } from '@client/config'; export default defineComponent({ components: { @@ -66,10 +65,10 @@ export default defineComponent({ [symbols.PAGE_INFO]: computed(() => this.note ? { title: this.$ts.note, avatar: this.note.user, + path: `/notes/${this.note.id}`, share: { title: this.$t('noteOf', { user: this.note.user.name }), text: this.note.text, - url: `${url}/notes/${this.note.id}` }, } : null), note: null, diff --git a/src/client/pages/page.vue b/src/client/pages/page.vue index 6dda65f50f..bae72c0539 100644 --- a/src/client/pages/page.vue +++ b/src/client/pages/page.vue @@ -1,25 +1,23 @@ <template> -<div class="xcukqgmh" v-if="page" :key="page.id"> - <div class="_section main"> - <div class="_content"> - <div class="banner"> - <img :src="page.eyeCatchingImage.url" v-if="page.eyeCatchingImageId"/> - </div> - <div> - <XPage :page="page"/> - <small style="display: block; opacity: 0.7; margin-top: 1em;">@{{ page.user.username }}</small> - </div> +<div class="xcukqgmh _root" v-if="page" :key="page.id" v-size="{ max: [450] }"> + <div class="_block main"> + <!-- + <div class="header"> + <h1>{{ page.title }}</h1> </div> - </div> - <div class="_section like"> - <div class="_content"> - <button class="_button" @click="unlike()" v-if="page.isLiked" :title="$ts._pages.unlike"><Fa :icon="faHeartS"/></button> - <button class="_button" @click="like()" v-else :title="$ts._pages.like"><Fa :icon="faHeartR"/></button> - <span class="count" v-if="page.likedCount > 0">{{ page.likedCount }}</span> + --> + <div class="banner"> + <img :src="page.eyeCatchingImage.url" v-if="page.eyeCatchingImageId"/> </div> - </div> - <div class="_section links"> - <div class="_content"> + <div class="content"> + <XPage :page="page"/> + <small style="display: block; opacity: 0.7; margin-top: 1em;">@{{ page.user.username }}</small> + </div> + <div class="like"> + <MkButton class="button" @click="unlike()" v-if="page.isLiked" v-tooltip="$ts._pages.unlike" primary><Fa :icon="faHeartS"/><span class="count" v-if="page.likedCount > 0">{{ page.likedCount }}</span></MkButton> + <MkButton class="button" @click="like()" v-else v-tooltip="$ts._pages.like"><Fa :icon="faHeartR"/><span class="count" v-if="page.likedCount > 0">{{ page.likedCount }}</span></MkButton> + </div> + <div class="links"> <MkA :to="`/@${username}/pages/${pageName}/view-source`" class="link">{{ $ts._pages.viewSource }}</MkA> <template v-if="$i && $i.id === page.userId"> <MkA :to="`/pages/edit/${page.id}`" class="link">{{ $ts._pages.editThisPage }}</MkA> @@ -28,20 +26,26 @@ </template> </div> </div> + <div class="footer"> + <div><Fa :icon="faClock"/> {{ $ts.createdAt }}: <MkTime :time="page.createdAt" mode="detail"/></div> + <div v-if="page.createdAt != page.updatedAt"><Fa :icon="faClock"/> {{ $ts.updatedAt }}: <MkTime :time="page.updatedAt" mode="detail"/></div> + </div> </div> </template> <script lang="ts"> import { computed, defineComponent } from 'vue'; import { faHeart as faHeartS } from '@fortawesome/free-solid-svg-icons'; -import { faHeart as faHeartR } from '@fortawesome/free-regular-svg-icons'; +import { faHeart as faHeartR, faClock } from '@fortawesome/free-regular-svg-icons'; import XPage from '@client/components/page/page.vue'; +import MkButton from '@client/components/ui/button.vue'; import * as os from '@client/os'; import * as symbols from '@client/symbols'; export default defineComponent({ components: { - XPage + XPage, + MkButton, }, props: { @@ -60,9 +64,14 @@ export default defineComponent({ [symbols.PAGE_INFO]: computed(() => this.page ? { title: computed(() => this.page.title || this.page.name), avatar: this.page.user, + path: `/@${this.page.user.username}/pages/${this.page.name}`, + share: { + title: this.page.title || this.page.name, + text: this.page.summary, + }, } : null), page: null, - faHeartS, faHeartR + faHeartS, faHeartR, faClock, }; }, @@ -93,7 +102,7 @@ export default defineComponent({ }, like() { - os.api('pages/like', { + os.apiWithDialog('pages/like', { pageId: this.page.id, }).then(() => { this.page.isLiked = true; @@ -101,8 +110,14 @@ export default defineComponent({ }); }, - unlike() { - os.api('pages/unlike', { + async unlike() { + const confirm = await os.dialog({ + type: 'warning', + showCancelButton: true, + text: this.$ts.unlikeConfirm, + }); + if (confirm.canceled) return; + os.apiWithDialog('pages/unlike', { pageId: this.page.id, }).then(() => { this.page.isLiked = false; @@ -121,25 +136,64 @@ export default defineComponent({ <style lang="scss" scoped> .xcukqgmh { + --padding: 32px; + + &.max-width_450px { + --padding: 16px; + } + > .main { - > ._content { - > .banner { - > img { - display: block; - width: 100%; - height: 120px; - object-fit: cover; + > .header { + padding: 16px; + + > h1 { + margin: 0; + } + } + + > .banner { + > img { + display: block; + width: 100%; + height: 120px; + object-fit: cover; + } + } + + > .content { + padding: var(--padding); + } + + > .like { + padding: var(--padding); + border-top: solid 0.5px var(--divider); + + > .button { + --accent: rgb(216 71 106); + --X8: rgb(241 92 128); + --buttonBg: rgb(216 71 106 / 5%); + --buttonHoverBg: rgb(216 71 106 / 10%); + + ::v-deep(.count) { + margin-left: 0.5em; } } } - } - > .links { - > ._content { + > .links { + padding: var(--padding); + border-top: solid 0.5px var(--divider); + > .link { margin-right: 0.75em; } } } + + > .footer { + padding: var(--padding); + font-size: 85%; + opacity: 0.75; + } } </style> diff --git a/src/client/pages/user/index.vue b/src/client/pages/user/index.vue index c0318dcb38..773fd4b282 100644 --- a/src/client/pages/user/index.vue +++ b/src/client/pages/user/index.vue @@ -238,7 +238,6 @@ import { getUserMenu } from '@client/scripts/get-user-menu'; import number from '../../filters/number'; import { userPage, acct as getAcct } from '../../filters/user'; import * as os from '@client/os'; -import { url } from '@client/config'; import * as symbols from '@client/symbols'; export default defineComponent({ @@ -274,9 +273,9 @@ export default defineComponent({ [symbols.PAGE_INFO]: computed(() => this.user ? { userName: this.user, avatar: this.user, + path: `/@${this.user.username}`, share: { title: this.user.name, - url: `${url}/@${this.user.username}` }, } : null), user: null, diff --git a/src/client/ui/_common_/header.vue b/src/client/ui/_common_/header.vue index 64ad0393c2..8e547eba92 100644 --- a/src/client/ui/_common_/header.vue +++ b/src/client/ui/_common_/header.vue @@ -26,6 +26,7 @@ import { defineComponent } from 'vue'; import { faChevronLeft, faCircle, faShareAlt, faEllipsisH } from '@fortawesome/free-solid-svg-icons'; import { modalMenu } from '@client/os'; +import { url } from '@client/config'; export default defineComponent({ props: { @@ -86,7 +87,10 @@ export default defineComponent({ }, share() { - navigator.share(this.info.share); + navigator.share({ + url: url + this.info.path, + ...this.info.share, + }); }, menu(ev) {