view cue for horizontal tabs

oxdc · Feb 17, 2025 · 3f17a76 · 3f17a76
1 parent 0321cf8
commit 3f17a76
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 0 deletions.
diff --git a/src/components/NavigationContainer.tsx b/src/components/NavigationContainer.tsx
@@ -184,6 +184,7 @@ export const NavigationContainer = () => {
 				setTimeout(() => {
 					if (useViewState.getState().hasCtrlKeyPressed) {
 						ref.current?.toggleClass("tab-index-view-cue", true);
+						document.body.toggleClass("vt-tab-index-view-cue", true);
 						scorllToViewCueFirstTab(app);
 					}
 				}, VIEW_CUE_DELAY);
@@ -197,6 +198,7 @@ export const NavigationContainer = () => {
 		plugin.registerDomEvent(window, "keyup", () => {
 			setCtrlKeyState(false);
 			ref.current?.toggleClass("tab-index-view-cue", false);
+			document.body.toggleClass("vt-tab-index-view-cue", false);
 		});
 		plugin.registerDomEvent(document, "dblclick", (event) => {
 			makeDblclickedFileNonEphemeral(app, event);

diff --git a/src/components/Tab.tsx b/src/components/Tab.tsx
@@ -512,6 +512,14 @@ export const Tab = ({
 			viewCueIndex === VIEW_CUE_PREV ||
 			(viewCueIndex === index && index === 1);
 		registerViewCueTab(leaf, ref.current, isFirstTab);
+		if (leaf.tabHeaderInnerTitleEl) {
+			if (viewCueIndex) {
+				leaf.tabHeaderInnerTitleEl.dataset.index =
+					viewCueIndex.toString();
+			} else {
+				delete leaf.tabHeaderInnerTitleEl.dataset.index;
+			}
+		}
 	}, [viewCueIndex, ref]);
 
 	const previewTab = (

diff --git a/src/styles/TabIndexViewCue.scss b/src/styles/TabIndexViewCue.scss
@@ -26,3 +26,27 @@
 		}
 	}
 }
+
+body.vt-tab-index-view-cue {
+	.workspace-tab-header-inner-title {
+		&[data-index]::before {
+			content: attr(data-index);
+			display: inline-block;
+			width: var(--size-4-4);
+			height: var(--size-4-4);
+			line-height: var(--size-4-4);
+			background: var(--background-primary);
+			border-radius: var(--radius-s);
+			border: var(--border-width) solid;
+			text-align: center;
+			left: var(--size-2-1);
+			z-index: var(--layer-tooltip);
+			margin-right: var(--size-4-1);
+		}
+
+		&[data-index="→"]::before,
+		&[data-index="←"]::before {
+			background: var(--background-secondary);
+		}
+	}
+}