refactor top toolbar, add space and border radius

- rename cursor tools
- add left and right border

Author: krmanik

ts/image-occlusion/TopToolbar.svelte

@@ -6,7 +6,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import IconButton from "../components/IconButton.svelte";
     import { mdiEye, mdiFormatAlignCenter } from "./icons";
     import { makeMaskTransparent } from "./tools/lib";
-    import { alignTools, cursorTools, zoomTools } from "./tools/more-tools";
+    import {
+        alignTools,
+        deleteDuplicateTools,
+        groupUngroupTools,
+        zoomTools,
+    } from "./tools/more-tools";
     import { undoRedoTools } from "./tools/tool-undo-redo";
 
     export let canvas;
@@ -27,69 +32,94 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <div class="top-tool-bar-container">
     <!-- undo & redo tools -->
     <div class="undo-redo-button">
-        {#each undoRedoTools as undoRedoTool}
+        {#each undoRedoTools as tool}
             <IconButton
-                class="top-tool-icon-button"
+                class="top-tool-icon-button {tool.name === 'undo'
+                    ? 'left-border-radius'
+                    : 'right-border-radius'}"
                 {iconSize}
                 on:click={() => {
-                    undoRedoTool.action(canvas);
+                    tool.action(canvas);
                 }}
             >
-                {@html undoRedoTool.icon}
+                {@html tool.icon}
             </IconButton>
         {/each}
     </div>
 
     <!-- zoom tools -->
-    {#each zoomTools as zoomBottomTool}
+    <div class="tool-button-container">
+        {#each zoomTools as tool}
+            <IconButton
+                class="top-tool-icon-button {tool.name === 'zoomOut'
+                    ? 'left-border-radius'
+                    : ''} {tool.name === 'zoomReset' ? 'right-border-radius' : ''}"
+                {iconSize}
+                on:click={() => {
+                    tool.action(instance);
+                }}
+            >
+                {@html tool.icon}
+            </IconButton>
+        {/each}
+    </div>
+
+    <div class="tool-button-container">
+        <!-- opacity tools -->
         <IconButton
-            class="top-tool-icon-button"
+            class="top-tool-icon-button left-border-radius"
             {iconSize}
             on:click={() => {
-                zoomBottomTool.action(instance);
+                maksOpacity = !maksOpacity;
+                makeMaskTransparent(canvas, maksOpacity);
             }}
         >
-            {@html zoomBottomTool.icon}
+            {@html mdiEye}
         </IconButton>
-    {/each}
 
-    <!-- opacity tools -->
-    <IconButton
-        class="top-tool-icon-button"
-        {iconSize}
-        on:click={() => {
-            maksOpacity = !maksOpacity;
-            makeMaskTransparent(canvas, maksOpacity);
-        }}
-    >
-        {@html mdiEye}
-    </IconButton>
-
-    <!-- cursor tools -->
-    {#each cursorTools as cursorBottomTool}
-        {#if cursorBottomTool.name === "align"}
+        <!-- cursor tools -->
+        {#each deleteDuplicateTools as tool}
             <IconButton
-                class="top-tool-icon-button dropdown-tool"
+                class="top-tool-icon-button {tool.name === 'duplicate'
+                    ? 'right-border-radius'
+                    : ''}"
                 {iconSize}
-                on:click={(e) => {
-                    showAlignTools = !showAlignTools;
-                    leftPos = e.pageX - 100;
+                on:click={() => {
+                    tool.action(canvas);
                 }}
             >
-                {@html mdiFormatAlignCenter}
+                {@html tool.icon}
             </IconButton>
-        {:else}
+        {/each}
+    </div>
+
+    <div class="tool-button-container">
+        <!-- group & ungroup tools -->
+        {#each groupUngroupTools as tool}
             <IconButton
-                class="top-tool-icon-button"
+                class="top-tool-icon-button {tool.name === 'group'
+                    ? 'left-border-radius'
+                    : ''}"
                 {iconSize}
                 on:click={() => {
-                    cursorBottomTool.action(canvas);
+                    tool.action(canvas);
                 }}
             >
-                {@html cursorBottomTool.icon}
+                {@html tool.icon}
             </IconButton>
-        {/if}
-    {/each}
+        {/each}
+
+        <IconButton
+            class="top-tool-icon-button dropdown-tool right-border-radius"
+            {iconSize}
+            on:click={(e) => {
+                showAlignTools = !showAlignTools;
+                leftPos = e.pageX - 100;
+            }}
+        >
+            {@html mdiFormatAlignCenter}
+        </IconButton>
+    </div>
 </div>
 
 <div class:show={showAlignTools} class="dropdown-content" style="left:{leftPos}px;">
@@ -118,9 +148,24 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     .undo-redo-button {
         margin-left: 28px;
+        margin-right: 2px;
         display: flex;
     }
 
+    .tool-button-container {
+        margin-left: 2px;
+        margin-right: 2px;
+        display: flex;
+    }
+
+    :global(.left-border-radius) {
+        border-radius: 5px 0 0 5px !important;
+    }
+
+    :global(.right-border-radius) {
+        border-radius: 0 5px 5px 0 !important;
+    }
+
     :global(.top-tool-icon-button) {
         border: unset;
         display: inline;
@@ -133,7 +178,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     .dropdown-content {
         display: none;
         position: absolute;
-        background-color: var(--canvas);
         z-index: 100;
         top: 82px;
         margin-top: 1px;

ts/image-occlusion/tools/more-tools.ts

@@ -10,7 +10,6 @@ import {
     mdiAlignVerticalTop,
     mdiCopy,
     mdiDeleteOutline,
-    mdiFormatAlignCenter,
     mdiGroup,
     mdiUngroup,
     mdiZoomIn,
@@ -27,12 +26,7 @@ import {
     alignVerticalCenter,
 } from "./tool-aligns";
 
-export const cursorTools = [
-    {
-        name: "delete",
-        icon: mdiDeleteOutline,
-        action: deleteItem,
-    },
+export const groupUngroupTools = [
     {
         name: "group",
         icon: mdiGroup,
@@ -43,15 +37,19 @@ export const cursorTools = [
         icon: mdiUngroup,
         action: unGroupShapes,
     },
+];
+
+export const deleteDuplicateTools = [
+    {
+        name: "delete",
+        icon: mdiDeleteOutline,
+        action: deleteItem,
+    },
     {
         name: "duplicate",
         icon: mdiCopy,
         action: duplicateItem,
     },
-    {
-        name: "align",
-        icon: mdiFormatAlignCenter,
-    },
 ];
 
 export const zoomTools = [