From 04b75859cc5571875fcc3886ff507ab84dd2a0fc Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Fri, 9 Jul 2021 01:33:06 +0200
Subject: [PATCH] Implement nowrap mode

---
 ts/components/ButtonToolbar.svelte | 18 +++++++++--
 ts/editor/AddTagBadge.svelte       | 25 +++++++++++----
 ts/editor/TagEditor.svelte         | 50 +++++++++++++++++-------------
 ts/editor/TagOptionsBadge.svelte   | 24 ++++++++++++++
 4 files changed, 88 insertions(+), 29 deletions(-)
 create mode 100644 ts/editor/TagOptionsBadge.svelte

diff --git a/ts/components/ButtonToolbar.svelte b/ts/components/ButtonToolbar.svelte
index 245e8c950..6fcc24b25 100644
--- a/ts/components/ButtonToolbar.svelte
+++ b/ts/components/ButtonToolbar.svelte
@@ -3,10 +3,10 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
-    import { setContext } from "svelte";
+    import { getContext, setContext } from "svelte";
     import { writable } from "svelte/store";
     import Item from "./Item.svelte";
-    import { sectionKey } from "./context-keys";
+    import { sectionKey, nightModeKey } from "./context-keys";
     import type { Identifier } from "./identifier";
     import { insertElement, appendElement } from "./identifier";
     import type { SvelteComponent, Registration } from "./registration";
@@ -73,12 +73,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             toggleGroup,
         });
     }
+
+    const nightMode = getContext<boolean>(nightModeKey);
 </script>
 
 <div
     bind:this={buttonToolbarRef}
     {id}
     class={`btn-toolbar container wrap-variable ${className}`}
+    class:overflow={!wrap}
+    class:nightMode
     {style}
     role="toolbar"
     on:focusout
@@ -92,7 +96,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </div>
 
 <style lang="scss">
+    @use 'ts/sass/scrollbar';
+
+    .nightMode {
+        @include scrollbar.night-mode;
+    }
+
     .wrap-variable {
         flex-wrap: var(--buttons-wrap);
     }
+
+    .overflow {
+        overflow-x: auto;
+    }
 </style>
diff --git a/ts/editor/AddTagBadge.svelte b/ts/editor/AddTagBadge.svelte
index 48f84166a..b87d77e2b 100644
--- a/ts/editor/AddTagBadge.svelte
+++ b/ts/editor/AddTagBadge.svelte
@@ -10,21 +10,20 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { appendInParentheses } from "./helpers";
     import { tagIcon, addTagIcon } from "./icons";
 
-    let theTagIcon = tagIcon;
-
     const tooltip = "Add tag";
 </script>
 
 <WithShortcut shortcut="Control+Shift+T" let:createShortcut let:shortcutLabel>
     <div class="add-icon">
         <Badge
-            class="me-1"
+            class="d-flex me-1"
             tooltip={appendInParentheses(tooltip, shortcutLabel)}
             on:click
-            on:mouseenter={() => (theTagIcon = addTagIcon)}
-            on:mouseleave={() => (theTagIcon = tagIcon)}
-            on:mount={withSpan(createShortcut)}>{@html theTagIcon}</Badge
+            on:mount={withSpan(createShortcut)}
         >
+            {@html tagIcon}
+            {@html addTagIcon}
+        </Badge>
     </div>
 </WithShortcut>
 
@@ -32,6 +31,20 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     .add-icon {
         line-height: 1;
 
+        :global(svg:last-child) {
+            display: none;
+        }
+
+        &:hover {
+            :global(svg:first-child) {
+                display: none;
+            }
+
+            :global(svg:last-child) {
+                display: block;
+            }
+        }
+
         :global(svg) {
             cursor: pointer;
             fill: currentColor;
diff --git a/ts/editor/TagEditor.svelte b/ts/editor/TagEditor.svelte
index 0f8ac3f49..ee08f476b 100644
--- a/ts/editor/TagEditor.svelte
+++ b/ts/editor/TagEditor.svelte
@@ -8,8 +8,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { bridgeCommand } from "lib/bridgecommand";
     import Spacer from "components/Spacer.svelte";
     import StickyBottom from "components/StickyBottom.svelte";
-    import AddTagBadge from "./AddTagBadge.svelte";
-    import SelectedTagBadge from "./SelectedTagBadge.svelte";
+    import TagOptionsBadge from "./TagOptionsBadge.svelte";
     import TagWithTooltip from "./TagWithTooltip.svelte";
     import TagInput from "./TagInput.svelte";
     import WithAutocomplete from "./WithAutocomplete.svelte";
@@ -18,10 +17,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import type { Tag as TagType } from "./tags";
     import { attachId, getName, replaceWithDelimChar, replaceWithColon } from "./tags";
 
-    export let size = isApplePlatform() ? 1.6 : 2.0;
-
     export let tags: TagType[] = [];
 
+    export let size = isApplePlatform() ? 1.6 : 2.0;
+    export let wrap = true;
+
     export function resetTags(names: string[]): void {
         tags = names.map(replaceWithDelimChar).map(attachId);
     }
@@ -375,27 +375,35 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <Spacer --height={`${height}px`} />
 
-<StickyBottom bind:height>
+<StickyBottom class="d-flex" bind:height>
+    {#if !wrap}
+        <TagOptionsBadge
+            --button-size={`${size}rem`}
+            showSelectionsOptions={tags.some((tag) => tag.selected)}
+            bind:badgeHeight
+            on:tagselectall={selectAllTags}
+            on:tagcopy={copySelectedTags}
+            on:tagdelete={deleteSelectedTags}
+            on:click={appendEmptyTag}
+        />
+    {/if}
+
     <ButtonToolbar
-        class="d-flex flex-wrap align-items-center mx-1"
+        class="align-items-center mx-1"
         {size}
+        {wrap}
         on:focusout={deselectIfLeave}
     >
-        <div class="gap" bind:offsetHeight={badgeHeight} on:mousedown|preventDefault>
-            {#if tags.some((tag) => tag.selected)}
-                <SelectedTagBadge
-                    --badge-align="-webkit-baseline-middle"
-                    on:tagselectall={selectAllTags}
-                    on:tagcopy={copySelectedTags}
-                    on:tagdelete={deleteSelectedTags}
-                />
-            {:else}
-                <AddTagBadge
-                    --badge-align="-webkit-baseline-middle"
-                    on:click={appendEmptyTag}
-                />
-            {/if}
-        </div>
+        {#if wrap}
+            <TagOptionsBadge
+                showSelectionsOptions={tags.some((tag) => tag.selected)}
+                bind:badgeHeight
+                on:tagselectall={selectAllTags}
+                on:tagcopy={copySelectedTags}
+                on:tagdelete={deleteSelectedTags}
+                on:click={appendEmptyTag}
+            />
+        {/if}
 
         {#each tags as tag, index (tag.id)}
             <div class="position-relative gap" class:hide-tag={index === active}>
diff --git a/ts/editor/TagOptionsBadge.svelte b/ts/editor/TagOptionsBadge.svelte
new file mode 100644
index 000000000..79d798515
--- /dev/null
+++ b/ts/editor/TagOptionsBadge.svelte
@@ -0,0 +1,24 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="typescript">
+    import SelectedTagBadge from "./SelectedTagBadge.svelte";
+    import AddTagBadge from "./AddTagBadge.svelte";
+
+    export let badgeHeight: number;
+    export let showSelectionsOptions: boolean;
+</script>
+
+<div class="gap" bind:offsetHeight={badgeHeight} on:mousedown|preventDefault>
+    {#if showSelectionsOptions}
+        <SelectedTagBadge
+            --badge-align="-webkit-baseline-middle"
+            on:tagselectall
+            on:tagcopy
+            on:tagdelete
+        />
+    {:else}
+        <AddTagBadge --badge-align="-webkit-baseline-middle" on:click />
+    {/if}
+</div>