From f0fe8eceaf863ca66a2744cabcbbca7407592124 Mon Sep 17 00:00:00 2001
From: Mar0xy <marie@kaifa.ch>
Date: Sat, 2 Dec 2023 13:09:25 +0100
Subject: upd: add option to select between note designs

Adds the ability to choose between `Sharkey` or `Misskey`
---
 packages/frontend/src/components/MkNote.vue | 49 +++++++++++++----------------
 1 file changed, 21 insertions(+), 28 deletions(-)

(limited to 'packages/frontend/src/components/MkNote.vue')

diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index 869164273e..4da8f16df1 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -47,14 +47,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<Mfm :text="getNoteSummary(appearNote)" :plain="true" :nowrap="true" :author="appearNote.user" :nyaize="'respect'" :class="$style.collapsedRenoteTargetText" @click="renoteCollapsed = false"/>
 	</div>
 	<article v-else :class="$style.article" @contextmenu.stop="onContextmenu">
-		<div style="display: flex; padding-bottom: 10px;">
-			<div v-if="appearNote.channel" :class="$style.colorBar" :style="{ background: appearNote.channel.color }"></div>
-			<MkAvatar :class="[$style.avatar, { [$style.avatarReplyTo]: appearNote.reply }]" :user="appearNote.user" :link="!mock" :preview="!mock"/>
-			<div :class="$style.main">
-				<MkNoteHeader :note="appearNote" :mini="true"/>
-			</div>
-		</div>
-		<div :class="[{ [$style.clickToOpen]: defaultStore.state.clickToOpen }]" @click="defaultStore.state.clickToOpen ? noteclick(appearNote.id) : undefined">
+		<div v-if="appearNote.channel" :class="$style.colorBar" :style="{ background: appearNote.channel.color }"></div>
+		<MkAvatar :class="$style.avatar" :user="appearNote.user" :link="!mock" :preview="!mock"/>
+		<div :class="[$style.main, { [$style.clickToOpen]: defaultStore.state.clickToOpen }]" @click="defaultStore.state.clickToOpen ? noteclick(appearNote.id) : undefined">
+			<MkNoteHeader :note="appearNote" :mini="true" v-on:click.stop/>
+			<MkInstanceTicker v-if="showTicker" :instance="appearNote.user.instance"/>
 			<div style="container-type: inline-size;">
 				<p v-if="appearNote.cw != null" :class="$style.cw">
 					<Mfm v-if="appearNote.cw != ''" style="margin-right: 8px;" :text="appearNote.cw" :author="appearNote.user" :nyaize="'respect'"/>
@@ -63,6 +60,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<div v-show="appearNote.cw == null || showContent" :class="[{ [$style.contentCollapsed]: collapsed }]" >
 					<div :class="$style.text">
 						<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
+						<MkA v-if="appearNote.replyId" :class="$style.replyIcon" :to="`/notes/${appearNote.replyId}`"><i class="ph-arrow-bend-left-up ph-bold ph-lg"></i></MkA>
 						<Mfm
 							v-if="appearNote.text"
 							:parsedNodes="parsed"
@@ -178,6 +176,7 @@ import MkCwButton from '@/components/MkCwButton.vue';
 import MkPoll from '@/components/MkPoll.vue';
 import MkUsersTooltip from '@/components/MkUsersTooltip.vue';
 import MkUrlPreview from '@/components/MkUrlPreview.vue';
+import MkInstanceTicker from '@/components/MkInstanceTicker.vue';
 import MkButton from '@/components/MkButton.vue';
 import { pleaseLogin } from '@/scripts/please-login.js';
 import { focusPrev, focusNext } from '@/scripts/focus.js';
@@ -831,7 +830,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 	position: relative;
 	display: flex;
 	align-items: center;
-	padding: 24px 38px 16px;
+	padding: 16px 32px 8px 32px;
 	line-height: 28px;
 	white-space: pre;
 	color: var(--renote);
@@ -883,7 +882,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 	align-items: center;
 	line-height: 28px;
 	white-space: pre;
-	padding: 8px 38px 24px;
+	padding: 0 32px 18px;
 }
 
 .collapsedRenoteTargetAvatar {
@@ -910,6 +909,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 
 .article {
 	position: relative;
+	display: flex;
 	padding: 28px 32px;
 }
 
@@ -926,19 +926,12 @@ function emitUpdReaction(emoji: string, delta: number) {
 .avatar {
 	flex-shrink: 0;
 	display: block !important;
-	position: sticky !important;
 	margin: 0 14px 0 0;
 	width: 58px;
 	height: 58px;
 	position: sticky !important;
 	top: calc(22px + var(--stickyTop, 0px));
 	left: 0;
-	transition: top 0.5s;
-
-	&.avatarReplyTo {
-		position: relative !important;
-		top: 0 !important;
-	}
 }
 
 .main {
@@ -1001,6 +994,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 
 .text {
 	overflow-wrap: break-word;
+	overflow: hidden;
 }
 
 .replyIcon {
@@ -1033,8 +1027,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 
 .quoteNote {
 	padding: 16px;
-	// Made border solid, stylistic choice
-	border: solid 1px var(--renote);
+	border: dashed 1px var(--renote);
 	border-radius: var(--radius-sm);
 	overflow: clip;
 }
@@ -1074,11 +1067,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 	}
 
 	.renote {
-		padding: 24px 28px 16px;
-	}
-
-	.collapsedRenoteTarget {
-		padding: 8px 28px 24px;
+		padding: 12px 26px 0 26px;
 	}
 
 	.article {
@@ -1096,8 +1085,12 @@ function emitUpdReaction(emoji: string, delta: number) {
 		font-size: 0.9em;
 	}
 
+	.renote {
+		padding: 10px 22px 0 22px;
+	}
+
 	.article {
-		padding: 23px 25px;
+		padding: 20px 22px;
 	}
 
 	.footer {
@@ -1107,7 +1100,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 
 @container (max-width: 480px) {
 	.renote {
-		padding: 20px 24px 8px;
+		padding: 8px 16px 0 16px;
 	}
 
 	.tip {
@@ -1115,12 +1108,12 @@ function emitUpdReaction(emoji: string, delta: number) {
 	}
 
 	.collapsedRenoteTarget {
-		padding: 8px 24px 20px;
+		padding: 0 16px 9px;
 		margin-top: 4px;
 	}
 
 	.article {
-		padding: 22px 24px;
+		padding: 14px 16px;
 	}
 }
 
-- 
cgit v1.2.3-freya