Add tag display mode toggle for full hierarchical view

CONTRIBUTORS

@@ -217,7 +217,7 @@ Mike Hardy <github@mikehardy.net>
 Danika_Dakika <https://github.com/Danika-Dakika>
 Mumtaz Hajjo Alrifai <mumtazrifai@protonmail.com>
 Thomas Graves <fate@hey.com>
-Jakub Fidler <jakub.fidler@protonmail.com>
+Jakub Fidler <jakub.fidler@protonmail.com> 
 Valerie Enfys <val@unidentified.systems>
 Julien Chol <https://github.com/chel-ou>
 ikkz <ylei.mk@gmail.com>

ftl/core/editing.ftl

@@ -69,6 +69,8 @@ editing-warning-cloze-deletions-will-not-work = Warning, cloze deletions will no
 editing-mathjax-preview = MathJax Preview
 editing-shrink-images = Shrink Images
 editing-close-html-tags = Auto-close HTML tags
+editing-tags-show-full = Show full tags
+editing-tags-show-compact = Show compact tags
 editing-from-clipboard = From Clipboard
 editing-alignment = Alignment
 editing-equations = Equations

qt/aqt/editor.py

@@ -501,6 +501,10 @@ def onBridgeCmd(self, cmd: str) -> Any:
             collapsed = collapsed_string == "true"
             self.setTagsCollapsed(collapsed)
 
+        elif cmd.startswith("setTagDisplayFull"):
+            (type, value) = cmd.split(":", 1)
+            self.mw.col.set_config("tagDisplayFull", value == "true")
+
         elif cmd.startswith("editorState"):
             (_, new_state_id, old_state_id) = cmd.split(":", 2)
             self.signal_state_change(
@@ -607,6 +611,7 @@ def oncallback(arg: Any) -> None:
             setMathjaxEnabled({json.dumps(self.mw.col.get_config("renderMathjax", True))});
             setShrinkImages({json.dumps(self.mw.col.get_config("shrinkEditorImages", True))});
             setCloseHTMLTags({json.dumps(self.mw.col.get_config("closeHTMLTags", True))});
+            setTagDisplayFull({json.dumps(self.mw.col.get_config("tagDisplayFull", False))});
             triggerChanges();
             """
 

ts/editor/NoteEditor.svelte

@@ -222,6 +222,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         $tagsCollapsed = collapsed;
     }
 
+    const tagDisplayFull = writable<boolean>(false);
+    const tagDisplayModeShortcut = "Control+.";
+
+    export function setTagDisplayFull(full: boolean): void {
+        $tagDisplayFull = full;
+    }
+
+    function toggleTagDisplayMode(): void {
+        $tagDisplayFull = !$tagDisplayFull;
+        bridgeCommand(`setTagDisplayFull:${$tagDisplayFull}`);
+    }
+
     function updateTagsCollapsed(collapsed: boolean) {
         $tagsCollapsed = collapsed;
         bridgeCommand(`setTagsCollapsed:${$tagsCollapsed}`);
@@ -596,6 +608,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             setMathjaxEnabled,
             setShrinkImages,
             setCloseHTMLTags,
+            setTagDisplayFull,
             triggerChanges,
             setIsImageOcclusion,
             setupMaskEditor,
@@ -802,6 +815,10 @@ the AddCards dialog) should be implemented in the user of this component.
                 updateTagsCollapsed(false);
             }}
         />
+        <Shortcut
+            keyCombination={tagDisplayModeShortcut}
+            on:action={toggleTagDisplayMode}
+        />
         <CollapseLabel
             collapsed={$tagsCollapsed}
             tooltip={$tagsCollapsed ? tr.editingExpand() : tr.editingCollapse()}
@@ -810,7 +827,13 @@ the AddCards dialog) should be implemented in the user of this component.
             {@html `${tagAmount > 0 ? tagAmount : ""} ${tr.editingTags()}`}
         </CollapseLabel>
         <Collapsible toggleDisplay collapse={$tagsCollapsed}>
-            <TagEditor {tags} on:tagsupdate={saveTags} />
+            <TagEditor
+                {tags}
+                displayFull={$tagDisplayFull}
+                displayModeShortcut={tagDisplayModeShortcut}
+                on:tagsupdate={saveTags}
+                on:displaymodechange={toggleTagDisplayMode}
+            />
         </Collapsible>
     {/if}
 </div>

ts/lib/components/icons.ts

@@ -141,8 +141,12 @@ import Update_ from "@mdi/svg/svg/update.svg?component";
 import update_ from "@mdi/svg/svg/update.svg?url";
 import VectorPolygonVariant_ from "@mdi/svg/svg/vector-polygon-variant.svg?component";
 import vectorPolygonVariant_ from "@mdi/svg/svg/vector-polygon-variant.svg?url";
+import ViewCompact_ from "@mdi/svg/svg/view-compact.svg?component";
+import viewCompact_ from "@mdi/svg/svg/view-compact.svg?url";
 import ViewDashboard_ from "@mdi/svg/svg/view-dashboard.svg?component";
 import viewDashboard_ from "@mdi/svg/svg/view-dashboard.svg?url";
+import ViewList_ from "@mdi/svg/svg/view-list.svg?component";
+import viewList_ from "@mdi/svg/svg/view-list.svg?url";
 import Revert_ from "bootstrap-icons/icons/arrow-counterclockwise.svg?component";
 import revert_ from "bootstrap-icons/icons/arrow-counterclockwise.svg?url";
 import ArrowLeft_ from "bootstrap-icons/icons/arrow-left.svg?component";
@@ -283,5 +287,7 @@ export const mdiUndo = { url: undo_, component: Undo_ };
 export const mdiUnfoldMoreHorizontal = { url: unfoldMoreHorizontal_, component: UnfoldMoreHorizontal_ };
 export const mdiUngroup = { url: ungroup_, component: Ungroup_ };
 export const mdiVectorPolygonVariant = { url: vectorPolygonVariant_, component: VectorPolygonVariant_ };
+export const mdiViewCompact = { url: viewCompact_, component: ViewCompact_ };
+export const mdiViewList = { url: viewList_, component: ViewList_ };
 export const incrementClozeIcon = { url: incrementCloze_, component: IncrementCloze_ };
 export const mdiEarth = { url: earth_, component: Earth_ };

ts/lib/tag-editor/TagDisplayModeButton.svelte

@@ -0,0 +1,62 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    import * as tr from "@generated/ftl";
+    import { getPlatformString } from "@tslib/shortcuts";
+    import { createEventDispatcher } from "svelte";
+
+    import Icon from "$lib/components/Icon.svelte";
+    import IconConstrain from "$lib/components/IconConstrain.svelte";
+    import { mdiViewCompact, mdiViewList } from "$lib/components/icons";
+
+    export let full: boolean = false;
+    export let keyCombination: string = "Control+.";
+
+    const dispatch = createEventDispatcher<{ displaymodechange: null }>();
+
+    function toggle() {
+        dispatch("displaymodechange");
+    }
+
+    $: title = full
+        ? `${tr.editingTagsShowCompact()} (${getPlatformString(keyCombination)})`
+        : `${tr.editingTagsShowFull()} (${getPlatformString(keyCombination)})`;
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div
+    class="tag-display-mode-button"
+    {title}
+    role="button"
+    tabindex="-1"
+    on:mousedown|preventDefault
+    on:click={toggle}
+>
+    <IconConstrain>
+        {#if full}
+            <Icon icon={mdiViewCompact} />
+        {:else}
+            <Icon icon={mdiViewList} />
+        {/if}
+    </IconConstrain>
+</div>
+
+<style lang="scss">
+    .tag-display-mode-button {
+        line-height: 1;
+        margin-left: 4px;
+
+        :global(svg) {
+            padding-bottom: 2px;
+            cursor: pointer;
+            fill: currentColor;
+            opacity: 0.4;
+        }
+
+        &:hover :global(svg) {
+            opacity: 1;
+        }
+    }
+</style>

ts/lib/tag-editor/TagEditMode.svelte

@@ -17,6 +17,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let selected: boolean;
     export let active: boolean;
     export let shorten: boolean;
+    export let truncateMiddle: boolean = false;
+    export let editorWidth: number = 0;
 
     export let flash: () => void;
 
@@ -34,6 +36,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     {selected}
     {active}
     {shorten}
+    {truncateMiddle}
+    {editorWidth}
     {flash}
     on:tagrange
     on:tagselect