Add ability to toggle H on touch devices (#2674)

LycheeOrg · Nov 12, 2024 · bbdd883 · bbdd883
1 parent ad9e3c1
commit bbdd883
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/resources/js/components/headers/AlbumsHeader.vue b/resources/js/components/headers/AlbumsHeader.vue
@@ -97,7 +97,7 @@ import AlbumCreateTagDialog from "@/components/forms/album/AlbumCreateTagDialog.
 import { computed, ComputedRef, ref } from "vue";
 import { onKeyStroke } from "@vueuse/core";
 import { useLycheeStateStore } from "@/stores/LycheeState";
-import { shouldIgnoreKeystroke } from "@/utils/keybindings-utils";
+import { isTouchDevice, shouldIgnoreKeystroke } from "@/utils/keybindings-utils";
 import { storeToRefs } from "pinia";
 import BackLinkButton from "./BackLinkButton.vue";
 import { useContextMenuAlbumsAdd } from "@/composables/contextMenus/contextMenuAlbumsAdd";
@@ -284,6 +284,18 @@ const menu = computed(() =>
 			callback: openAddMenu,
 			if: props.rights.can_upload,
 		},
+		{
+			icon: "pi pi-eye-slash",
+			type: "fn",
+			callback: () => (lycheeStore.are_nsfw_visible = false),
+			if: isTouchDevice() && lycheeStore.are_nsfw_visible,
+		},
+		{
+			icon: "pi pi-eye",
+			type: "fn",
+			callback: () => (lycheeStore.are_nsfw_visible = true),
+			if: isTouchDevice() && !lycheeStore.are_nsfw_visible,
+		},
 	].filter((item) => item.if),
 ) as ComputedRef<MenuRight[]>;
 

diff --git a/resources/js/utils/keybindings-utils.ts b/resources/js/utils/keybindings-utils.ts
@@ -76,3 +76,7 @@ export function disableCtrlA(): void {
 		false,
 	);
 }
+
+export function isTouchDevice(): boolean {
+	return "ontouchstart" in document.documentElement || navigator.maxTouchPoints > 0;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -76,3 +76,7 @@ export function disableCtrlA(): void { @@
     		false,
     	);
     }
+    export function isTouchDevice(): boolean {
+    	return "ontouchstart" in document.documentElement || navigator.maxTouchPoints > 0;
+    }