Tweak UI

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:

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,

src/client/pages/page.vue

@@ -1,25 +1,23 @@
 <template>
-<div class="xcukqgmh" v-if="page" :key="page.id">
+<div class="xcukqgmh _root" v-if="page" :key="page.id" v-size="{ max: [450] }">
-	<div class="_section main">
+	<div class="_block main">
-		<div class="_content">
+		<!--
-			<div class="banner">
+		<div class="header">
-				<img :src="page.eyeCatchingImage.url" v-if="page.eyeCatchingImageId"/>
+			<h1>{{ page.title }}</h1>
-			</div>
-			<div>
-				<XPage :page="page"/>
-				<small style="display: block; opacity: 0.7; margin-top: 1em;">@{{ page.user.username }}</small>
-			</div>
 		</div>
-	</div>
+		-->
-	<div class="_section like">
+		<div class="banner">
-		<div class="_content">
+			<img :src="page.eyeCatchingImage.url" v-if="page.eyeCatchingImageId"/>
-			<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>
-	</div>
+		<div class="content">
-	<div class="_section links">
+			<XPage :page="page"/>
-		<div class="_content">
+			<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() {
+		async unlike() {
-			os.api('pages/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 {
+		> .header {
-			> .banner {
+			padding: 16px;
-				> img {
+
-					display: block;
+			> h1 {
-					width: 100%;
+				margin: 0;
-					height: 120px;
+			}
-					object-fit: cover;
+		}
+
+		> .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 {
+		> .links {
-		> ._content {
+			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>

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,

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) {