Merge pull request #400

* Feat (Frontend): DefaultStore: Add 'renoteVisibilitySelection' * Impl (Frontend): Add 'addDividersBetweenMenuSections' utility functio… * Fix (Frontend): Fix 'Prefer named exports' warn * Refactor (Frontend): use addDividersBetweenMenuSections instead of us… * Impl (Frontend): Add 'visibilityRenoteItems' to support new feature * Merge branch 'develop' into renote-visibility * Impl (Frontend): Add getQuoteMenu to separate home quote, channel quote * Locale (Frontend): Update ko-KR, en-US * Impl (Frontend): Apply changes to MkSubNoteContent also * Fix (Frontend): renote menu condition * Locale (Frontend): reuse exist string * Fix mistake * Fix mistake (...) * Fix (Frontend): change button order
kokonect-link · Dec 18, 2023 · 3b2ffa1 · 3b2ffa1
1 parent 214047c
commit 3b2ffa1
Show file tree

Hide file tree

Showing 10 changed files with 211 additions and 45 deletions.
diff --git a/locales/en-US.yml b/locales/en-US.yml
@@ -1277,6 +1277,7 @@ additionalPermissionsForFlash: "Allow to add permission to Play"
 thisFlashRequiresTheFollowingPermissions: "This Play requires the following permissions"
 doYouWantToAllowThisPlayToAccessYourAccount: "Do you want to allow this Play to access your account?"
 translateProfile: "Translate profile"
+showRenoteVisibilitySelector: "Show renote visibility selector"
 _nsfwOpenBehavior:
   click: "Click to open"
   doubleClick: "Double click to open"

diff --git a/locales/index.d.ts b/locales/index.d.ts
@@ -1289,6 +1289,7 @@ export interface Locale {
     "thisFlashRequiresTheFollowingPermissions": string;
     "doYouWantToAllowThisPlayToAccessYourAccount": string;
     "translateProfile": string;
+    "showRenoteVisibilitySelector": string;
     "_nsfwOpenBehavior": {
         "click": string;
         "doubleClick": string;

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
@@ -1286,6 +1286,7 @@ additionalPermissionsForFlash: "Playへの追加許可"
 thisFlashRequiresTheFollowingPermissions: "このPlayは以下の権限を要求しています"
 doYouWantToAllowThisPlayToAccessYourAccount: "このPlayによるアカウントへのアクセスを許可しますか？"
 translateProfile: "プロフィールを翻訳する"
+showRenoteVisibilitySelector: "TRANSLATME-showRenoteVisibilitySelector"
 
 _nsfwOpenBehavior:
   click: "タップして開く"

diff --git a/locales/ko-KR.yml b/locales/ko-KR.yml
@@ -1277,6 +1277,7 @@ additionalPermissionsForFlash: "Play에 대한 추가 권한"
 thisFlashRequiresTheFollowingPermissions: "이 Play는 다음 권한을 요구해요"
 doYouWantToAllowThisPlayToAccessYourAccount: "이 Play가 계정에 접근하도록 허용할까요?"
 translateProfile: "프로필 번역하기"
+showRenoteVisibilitySelector: "리노트 공개범위 옵션 표시"
 _nsfwOpenBehavior:
   click: "탭하여 열기"
   doubleClick: "두 번 탭하여 열기"

diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
@@ -146,7 +146,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					v-tooltip="i18n.ts.renote"
 					:class="$style.footerButton"
 					class="_button"
-					@click.stop="defaultStore.state.renoteQuoteButtonSeparation ? renoteOnly() : renote()"
+					@click.stop="(defaultStore.state.renoteQuoteButtonSeparation && !defaultStore.state.renoteVisibilitySelection && !appearNote.channel) || (defaultStore.state.renoteQuoteButtonSeparation && appearNote.channel && !appearNote.channel.allowRenoteToExternal) || (defaultStore.state.renoteQuoteButtonSeparation && appearNote.visibility === 'followers') ? renoteOnly() : renote()"
 				>
 					<i class="ti ti-repeat"></i>
 					<p v-if="appearNote.renoteCount > 0" :class="$style.footerButtonCount">{{ appearNote.renoteCount }}</p>
@@ -164,7 +164,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<button v-if="appearNote.myReaction != null && appearNote.reactionAcceptance == 'likeOnly'" ref="reactButton" v-vibrate="defaultStore.state.vibrateSystem ? [30, 50, 50] : []" v-tooltip="i18n.ts.removeReaction" :class="$style.footerButton" class="_button" @click.stop="undoReact(appearNote)">
 					<i class="ti ti-heart-minus"></i>
 				</button>
-				<button v-if="canRenote && defaultStore.state.renoteQuoteButtonSeparation" v-vibrate="defaultStore.state.vibrateSystem ? 5 : []" v-tooltip="i18n.ts.quote" class="_button" :class="$style.footerButton" @click.stop="quote()">
+				<button v-if="canRenote && defaultStore.state.renoteQuoteButtonSeparation" ref="quoteButton" v-vibrate="defaultStore.state.vibrateSystem ? 5 : []" v-tooltip="i18n.ts.quote" class="_button" :class="$style.footerButton" @click.stop="quote()">
 					<i class="ti ti-quote"></i>
 				</button>
 				<button v-if="defaultStore.state.showClipButtonInNoteFooter" ref="clipButton" v-vibrate="defaultStore.state.vibrateSystem ? 5 : []" v-tooltip="i18n.ts.clip" :class="$style.footerButton" class="_button" @click.stop="clip()">
@@ -222,7 +222,7 @@ import { reactionPicker } from '@/scripts/reaction-picker.js';
 import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm.js';
 import { $i } from '@/account.js';
 import { i18n } from '@/i18n.js';
-import { getAbuseNoteMenu, getCopyNoteLinkMenu, getNoteClipMenu, getNoteMenu, getRenoteMenu, getRenoteOnly } from '@/scripts/get-note-menu.js';
+import { getAbuseNoteMenu, getCopyNoteLinkMenu, getNoteClipMenu, getNoteMenu, getRenoteMenu, getRenoteOnly, getQuoteMenu } from '@/scripts/get-note-menu.js';
 import { useNoteCapture } from '@/scripts/use-note-capture.js';
 import { deepClone } from '@/scripts/clone.js';
 import { useTooltip } from '@/scripts/use-tooltip.js';
@@ -293,6 +293,7 @@ const isRenote = (
 
 const el = shallowRef<HTMLElement>();
 const menuButton = shallowRef<HTMLElement>();
+const quoteButton = shallowRef<HTMLElement>();
 const renoteButton = shallowRef<HTMLElement>();
 const renoteTime = shallowRef<HTMLElement>();
 const reactButton = shallowRef<HTMLElement>();
@@ -418,19 +419,27 @@ function quote(viaKeyboard = false): void {
 		return;
 	}
 	if (appearNote.value.channel) {
+		if (appearNote.value.channel.allowRenoteToExternal) {
+			const { menu } = getQuoteMenu({ note: note.value, mock: props.mock });
+			os.popupMenu(menu, quoteButton.value, {
+				viaKeyboard,
+			});
+		} else {
+			os.post({
+				renote: appearNote.value,
+				channel: appearNote.value.channel,
+				animation: !viaKeyboard,
+			}, () => {
+				focus();
+			});
+		}
+	} else {
 		os.post({
 			renote: appearNote.value,
-			channel: appearNote.value.channel,
-			animation: !viaKeyboard,
 		}, () => {
 			focus();
 		});
 	}
-	os.post({
-		renote: appearNote.value,
-	}, () => {
-		focus();
-	});
 }
 
 function reply(viaKeyboard = false): void {

diff --git a/packages/frontend/src/components/MkSubNoteContent.vue b/packages/frontend/src/components/MkSubNoteContent.vue
@@ -80,7 +80,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				v-tooltip="i18n.ts.renote"
 				:class="$style.footerButton"
 				class="_button"
-				@click.stop="defaultStore.state.renoteQuoteButtonSeparation ? renoteOnly() : renote()"
+				@click.stop="(defaultStore.state.renoteQuoteButtonSeparation && !defaultStore.state.renoteVisibilitySelection && !note.channel) || (defaultStore.state.renoteQuoteButtonSeparation && note.channel && !note.channel.allowRenoteToExternal) || (defaultStore.state.renoteQuoteButtonSeparation && note.visibility === 'followers') ? renoteOnly() : renote()"
 			>
 				<i class="ti ti-repeat"></i>
 				<p v-if="note.renoteCount > 0" :class="$style.footerButtonCount">{{ note.renoteCount }}</p>
@@ -98,7 +98,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<button v-if="note.myReaction != null && note.reactionAcceptance == 'likeOnly'" ref="reactButton" v-vibrate="defaultStore.state.vibrateSystem ? [30, 50, 50] : []" v-tooltip="i18n.ts.removeReaction" :class="$style.footerButton" class="_button" @click.stop="undoReact(note)">
 				<i class="ti ti-heart-minus"></i>
 			</button>
-			<button v-if="canRenote && defaultStore.state.renoteQuoteButtonSeparation" v-vibrate="defaultStore.state.vibrateSystem ? 5 : []" v-tooltip="i18n.ts.quote" class="_button" :class="$style.footerButton" @click.stop="quote()">
+			<button v-if="canRenote && defaultStore.state.renoteQuoteButtonSeparation" ref="quoteButton" v-vibrate="defaultStore.state.vibrateSystem ? 5 : []" v-tooltip="i18n.ts.quote" class="_button" :class="$style.footerButton" @click.stop="quote()">
 				<i class="ti ti-quote"></i>
 			</button>
 			<button v-if="defaultStore.state.showClipButtonInNoteFooter" ref="clipButton" v-vibrate="defaultStore.state.vibrateSystem ? 5 : []" v-tooltip="i18n.ts.clip" :class="$style.footerButton" class="_button" @click.stop="clip()">
@@ -136,7 +136,7 @@ import { notePage } from '@/filters/note.js';
 import { useTooltip } from '@/scripts/use-tooltip.js';
 import { pleaseLogin } from '@/scripts/please-login.js';
 import { showMovedDialog } from '@/scripts/show-moved-dialog.js';
-import { getNoteClipMenu, getNoteMenu, getRenoteMenu, getRenoteOnly } from '@/scripts/get-note-menu.js';
+import { getNoteClipMenu, getNoteMenu, getRenoteMenu, getRenoteOnly, getQuoteMenu } from '@/scripts/get-note-menu.js';
 import { deepClone } from '@/scripts/clone.js';
 import { reactionPicker } from '@/scripts/reaction-picker.js';
 import { claimAchievement } from '@/scripts/achievements.js';
@@ -165,6 +165,7 @@ const note = ref(deepClone(props.note));
 const el = shallowRef<HTMLElement>();
 const menuButton = shallowRef<HTMLElement>();
 const renoteButton = shallowRef<HTMLElement>();
+const quoteButton = shallowRef<HTMLElement>();
 const reactButton = shallowRef<HTMLElement>();
 const heartReactButton = shallowRef<HTMLElement>();
 const clipButton = shallowRef<HTMLElement>();
@@ -248,19 +249,27 @@ function quote(viaKeyboard = false): void {
 		return;
 	}
 	if (props.note.channel) {
+		if (props.note.channel.allowRenoteToExternal) {
+			const { menu } = getQuoteMenu({ note: note.value, mock: props.mock });
+			os.popupMenu(menu, quoteButton.value, {
+				viaKeyboard,
+			});
+		} else {
+			os.post({
+				renote: props.note,
+				channel: props.note.channel,
+				animation: !viaKeyboard,
+			}, () => {
+				focus();
+			});
+		}
+	} else {
 		os.post({
 			renote: props.note,
-			channel: props.note.channel,
-			animation: !viaKeyboard,
 		}, () => {
 			focus();
 		});
 	}
-	os.post({
-		renote: props.note,
-	}, () => {
-		focus();
-	});
 }
 
 function reply(viaKeyboard = false): void {

diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue
@@ -74,6 +74,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkSwitch v-model="infoButtonForNoteActionsEnabled">{{ i18n.ts.infoButtonForNoteActions }}<template #caption>{{ i18n.ts.infoButtonForNoteActionsDescription }}</template> <span class="_beta">CherryPick</span></MkSwitch>
 				<MkSwitch v-model="showReplyInNotification">{{ i18n.ts.showReplyInNotification }} <span class="_beta">CherryPick</span></MkSwitch>
 				<MkSwitch v-model="renoteQuoteButtonSeparation">{{ i18n.ts.renoteQuoteButtonSeparation }} <span class="_beta">CherryPick</span></MkSwitch>
+				<MkSwitch v-model="renoteVisibilitySelection">{{ i18n.ts.showRenoteVisibilitySelector }} <span class="_beta">CherryPick</span></MkSwitch>
 				<MkSwitch v-model="showFixedPostFormInReplies">{{ i18n.ts.showFixedPostFormInReplies }}<template #caption>{{ i18n.ts.showFixedPostFormInRepliesDescription }}</template> <span class="_beta">CherryPick</span></MkSwitch>
 				<MkSwitch v-model="allMediaNoteCollapse">{{ i18n.ts.allMediaNoteCollapse }} <span class="_beta">CherryPick</span></MkSwitch>
 			</div>
@@ -426,6 +427,7 @@ const showFixedPostFormInReplies = computed(defaultStore.makeGetterSetter('showF
 const showingAnimatedImages = computed(defaultStore.makeGetterSetter('showingAnimatedImages'));
 const allMediaNoteCollapse = computed(defaultStore.makeGetterSetter('allMediaNoteCollapse'));
 const nsfwOpenBehavior = computed(defaultStore.makeGetterSetter('nsfwOpenBehavior'));
+const renoteVisibilitySelection = computed(defaultStore.makeGetterSetter('renoteVisibilitySelection'));
 
 watch(lang, () => {
 	miLocalStorage.setItem('lang', lang.value as string);

diff --git a/packages/frontend/src/scripts/add-dividers-between-menu-sections.ts b/packages/frontend/src/scripts/add-dividers-between-menu-sections.ts
@@ -0,0 +1,17 @@
+import { MenuItem } from '@/types/menu.js';
+
+// Add dividers between menu sections. if some menu section has menu item
+export function addDividersBetweenMenuSections(...sections:MenuItem[][]): MenuItem[] {
+	const result:MenuItem[] = [];
+
+	let needDivider = false;
+	for (const section of sections) {
+		if (section.length !== 0) {
+			if (needDivider) result.push({ type: 'divider' });
+			needDivider = true;
+			result.push(...section);
+		}
+	}
+
+	return result;
+}