From d1b1c7daa521ffc9b8beb5265d3ddcf578c8052a Mon Sep 17 00:00:00 2001
From: Romein van Buren <romein@vburen.nl>
Date: Fri, 22 Dec 2023 13:30:03 +0100
Subject: [PATCH] UI improvements

---
 .vscode/settings.json                         |  2 +-
 CHANGELOG.md                                  |  1 +
 frontend/src/app.svelte                       | 28 +------
 frontend/src/components/contextmenu.svelte    |  2 +-
 .../src/components/editors/datepicker.svelte  |  2 +-
 .../src/components/grid/grid-items.svelte     |  7 +-
 frontend/src/components/icon.svelte           | 10 ++-
 frontend/src/components/tabbar.svelte         | 84 +++++++++++--------
 .../collection/dialogs/export.svelte          |  7 +-
 frontend/src/styles/style.css                 | 19 +++--
 10 files changed, 80 insertions(+), 82 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 74eea03..4528e24 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -6,7 +6,7 @@
     "editor.tabSize": 4,
     "editor.formatOnSave": true,
     "editor.codeActionsOnSave": {
-      "source.organizeImports": true
+      "source.organizeImports": "explicit"
     },
     "editor.suggest.snippetsPreventQuickSuggestions": false
   },
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4a026b3..6a82af4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@ Patches:
 * Preserve state after switching to another tab (#56).
 * Find view: ask for confirmation before negligently deleting documents when the user has clicked the '-' button (#58).
 * Set a deadline for counting documents, and added a button to count documents if the deadline has been exceeded.
+* UI improvements.
 
 Bugfixes:
 
diff --git a/frontend/src/app.svelte b/frontend/src/app.svelte
index d57f521..07ae7f1 100644
--- a/frontend/src/app.svelte
+++ b/frontend/src/app.svelte
@@ -1,16 +1,12 @@
 <script>
   import BlankState from '$components/blankstate.svelte';
   import ContextMenu from '$components/contextmenu.svelte';
-  import dialogs from '$lib/dialogs.js';
   import contextMenu from '$lib/stores/contextmenu.js';
   import hostTree from '$lib/stores/hosttree.js';
   import applicationInited from '$lib/stores/inited.js';
   import windowTitle from '$lib/stores/windowtitle.js';
   import Connection from '$organisms/connection/index.svelte';
-  import { EventsOn } from '$wails/runtime/runtime.js';
   import { tick } from 'svelte';
-  import AboutDialog from './dialogs/about.svelte';
-  import SettingsDialog from './dialogs/settings/index.svelte';
 
   let showWelcomeScreen = undefined;
 
@@ -27,17 +23,6 @@
     await tick();
     hostTree.newHost();
   }
-
-  function showAboutDialog() {
-    dialogs.new(AboutDialog);
-  }
-
-  function showSettings() {
-    dialogs.new(SettingsDialog);
-  }
-
-  EventsOn('OpenPreferences', showSettings);
-  EventsOn('OpenAboutModal', showAboutDialog);
 </script>
 
 <svelte:window on:contextmenu|preventDefault />
@@ -64,30 +49,23 @@
 
 <style>
   .titlebar {
-    height: 0;
-    background-color: #00002a;
+    height: var(--titlebar-height);
     --wails-draggable: drag;
-    color: #fff;
     display: flex;
     justify-content: center;
     align-items: center;
     overflow: hidden;
-  }
-  :global([data-platform="darwin"]) .titlebar {
-    height: var(--darwin-titlebar-height);
+    background-color: #ddd;
   }
 
   main {
-    height: 100vh;
+    height: calc(100vh - var(--titlebar-height));
     display: grid;
     grid-template: 1fr / minmax(300px, 0.3fr) 1fr;
   }
   main.empty {
     grid-template: 1fr / 1fr;
   }
-  :global([data-platform="darwin"]) main {
-    height: calc(100vh - var(--darwin-titlebar-height));
-  }
 
   main > :global(*) {
     overflow: auto;
diff --git a/frontend/src/components/contextmenu.svelte b/frontend/src/components/contextmenu.svelte
index b89156e..7d382fb 100644
--- a/frontend/src/components/contextmenu.svelte
+++ b/frontend/src/components/contextmenu.svelte
@@ -101,7 +101,7 @@
     text-align: left;
   }
   button.selected {
-    background-color: #00008b;
+    background-color: var(--selection);
     color: #fff;
   }
 
diff --git a/frontend/src/components/editors/datepicker.svelte b/frontend/src/components/editors/datepicker.svelte
index f20228e..cd22f41 100644
--- a/frontend/src/components/editors/datepicker.svelte
+++ b/frontend/src/components/editors/datepicker.svelte
@@ -173,7 +173,7 @@
     padding-bottom: 8px;
   }
   .calendar .day button.active {
-    background-color: #00008b;
+    background-color: var(--selection);
     color: #fff;
   }
   .calendar .day button.notinmonth {
diff --git a/frontend/src/components/grid/grid-items.svelte b/frontend/src/components/grid/grid-items.svelte
index ddd4abc..a355a0b 100644
--- a/frontend/src/components/grid/grid-items.svelte
+++ b/frontend/src/components/grid/grid-items.svelte
@@ -226,12 +226,11 @@
     cursor: pointer;
   }
   tr.selectable.selected td {
-    background-color: #00008b !important;
-    color: #fff;
+    background-color: var(--selection) !important;
   }
 
   td {
-    padding: 2px;
+    padding: 4px 2px;
     text-overflow: ellipsis;
   }
   td.has-toggle {
@@ -247,7 +246,7 @@
   }
 
   td .value {
-    height: 15px;
+    height: 1.2em;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
diff --git a/frontend/src/components/icon.svelte b/frontend/src/components/icon.svelte
index e53f38c..597f460 100644
--- a/frontend/src/components/icon.svelte
+++ b/frontend/src/components/icon.svelte
@@ -19,23 +19,25 @@
   svg {
     transition: transform 0.25s;
     will-change: transform;
+    width: 1.2em;
+    height: 1.2em;
   }
   svg.spinning {
     animation: spinning 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
   }
 
   :global(.field) svg {
-    width: 13px;
-    height: 13px;
+    width: 1em;
+    height: 1em;
     margin-right: 2px;
   }
   :global(.button) svg {
-    height: 13px;
+    height: 1em;
     width: auto;
     vertical-align: bottom;
   }
   :global(.blankstate .button) svg {
-    height: 17px;
+    height: 1.25em;
     vertical-align: -3px;
     margin-right: 4px;
   }
diff --git a/frontend/src/components/tabbar.svelte b/frontend/src/components/tabbar.svelte
index 557577c..c4d7e42 100644
--- a/frontend/src/components/tabbar.svelte
+++ b/frontend/src/components/tabbar.svelte
@@ -1,40 +1,30 @@
 <script>
-  import { createEventDispatcher, onMount } from 'svelte';
+  import { createEventDispatcher } from 'svelte';
   import Icon from './icon.svelte';
 
   export let tabs = [];
   export let selectedKey = '';
   export let canAddTab = false;
-  export let multiline = false;
+  export let compact = true;
 
   const dispatch = createEventDispatcher();
-  const maxPixelsPerMultilineTab = 120;
   let navEl;
-  let pixelsPerTab = 0;
-  $: tabs && navEl && updateMeasurements();
-
-  function updateMeasurements() {
-    pixelsPerTab = (navEl.offsetWidth ?? 0) / tabs.length;
-  }
 
   function select(tabKey) {
     selectedKey = tabKey;
     dispatch('select', tabKey);
   }
-
-  onMount(() => {
-    window.addEventListener('resize', updateMeasurements);
-  });
 </script>
 
-<nav class="tabs" class:multiline={multiline || (pixelsPerTab < maxPixelsPerMultilineTab)} bind:this={navEl}>
+<nav class="tabs" class:compact bind:this={navEl}>
   <ul>
     {#each tabs as tab (tab.key)}
-      <li class:active={tab.key === selectedKey}>
+      <li class="tab" class:active={tab.key === selectedKey} class:closable={tab.closable}>
         <button class="tab" on:click={() => select(tab.key)}>
           {#if tab.icon} <Icon name={tab.icon} /> {/if}
           <span class="label">{tab.title}</span>
         </button>
+
         {#if tab.closable}
           <button class="button-small" on:click={() => dispatch('closeTab', tab.key)}>
             <Icon name="x" />
@@ -44,8 +34,8 @@
     {/each}
 
     {#if canAddTab}
-      <li class="tab add">
-        <button class="tab" on:click={() => dispatch('addTab')}>
+      <li>
+        <button class="button-small" on:click={() => dispatch('addTab')}>
           <Icon name="+" />
         </button>
       </li>
@@ -59,24 +49,15 @@
     display: flex;
     list-style: none;
   }
+
   li {
     display: inline-block;
-    flex: 1;
     position: relative;
   }
 
-  li.add {
-    flex: 0 1;
-  }
-
-  .tabs :global(svg) {
-    width: 13px;
-    height: 13px;
+  nav.tabs :global(svg) {
     vertical-align: bottom;
   }
-  li.active :global(svg) {
-    color: #fff;
-  }
 
   button.tab {
     width: 100%;
@@ -96,20 +77,51 @@
     border-right: 1px solid #ccc;
   }
   li.active button.tab {
-    color: #fff;
-    background-color: #00008b;
-    border-color: #00008b;
+    background-color: var(--selection);
+    border-color: var(--primary);
     cursor: not-allowed;
   }
 
-  nav.tabs.multiline button.tab .label {
-    display: block;
-    margin-top: 4px;
+  button.tab .label {
+    margin-top: 5px;
+    display: inline-block;
   }
 
-  .button-small {
+  nav.tabs .button-small {
+    margin: 12px 0 0 4px;
+  }
+
+  li.closable .button-small {
+    display: none;
     position: absolute;
+    top: 0;
     right: 7px;
-    top: 7px;
+  }
+  li.closable.active {
+    padding-right: 20px;
+  }
+  li.closable.active .button-small {
+    display: block;
+  }
+
+  nav.tabs.compact {
+    border-bottom: 1px solid #aaa;
+  }
+  nav.tabs.compact li {
+    border-bottom: 2px solid transparent;
+  }
+  nav.tabs.compact li.tab:hover,
+  nav.tabs.compact li.tab.active {
+    color: var(--primary);
+    border-color: var(--primary);
+  }
+  nav.tabs.compact button.tab {
+    border: none;
+    color: inherit;
+    background-color: transparent;
+    border-width: 0;
+  }
+  nav.tabs.compact li.active button.tab {
+    border-bottom-width: 2px;
   }
 </style>
diff --git a/frontend/src/organisms/connection/collection/dialogs/export.svelte b/frontend/src/organisms/connection/collection/dialogs/export.svelte
index c4917d3..618f7dc 100644
--- a/frontend/src/organisms/connection/collection/dialogs/export.svelte
+++ b/frontend/src/organisms/connection/collection/dialogs/export.svelte
@@ -16,7 +16,7 @@
   }
 </script>
 
-<Modal title="Export results" width="450px" on:close>
+<Modal title="Export results" width="500px" on:close>
   <form on:submit|preventDefault={submit}>
     <label class="field">
       <span class="label">Export</span>
@@ -40,7 +40,10 @@
     <label class="field">
       <span class="label">View to use</span>
       <select bind:value={exportInfo.viewKey}>
-        {#each Object.entries(views.forCollection(collection.hostKey, collection.dbKey, collection.key)) as [ key, { name } ]}
+        {#each Object.entries(views.forCollection(collection.hostKey, collection.dbKey, collection.key)) as [
+          key,
+          { name },
+        ]}
           <option value={key}>{name}</option>
         {/each}
       </select>
diff --git a/frontend/src/styles/style.css b/frontend/src/styles/style.css
index 97eada7..40b6214 100644
--- a/frontend/src/styles/style.css
+++ b/frontend/src/styles/style.css
@@ -1,6 +1,9 @@
 :root {
-  --darwin-titlebar-height: 36px;
   --radius: 4px;
+  --titlebar-height: 36px;
+
+  --primary: #00008b;
+  --selection: rgba(0, 62, 205, 0.3);
 }
 
 html,
@@ -14,8 +17,8 @@ body {
   -webkit-user-select: none;
   user-select: none;
   cursor: default;
-  font-size: 13px;
-  line-height: 13px;
+  font-size: 15px;
+  line-height: 17px;
   background-color: rgba(255, 255, 255, 0.45);
 }
 
@@ -42,7 +45,7 @@ p strong {
 }
 
 a {
-  color: rgb(0, 0, 204);
+  color: #0000cc;
   text-decoration: underline;
   text-underline-offset: 2px;
   text-decoration-thickness: 1px;
@@ -66,8 +69,8 @@ select:disabled {
 }
 
 .button {
-  background-color: #00008b;
-  border: 1px solid #00008b;
+  background-color: var(--primary);
+  border: 1px solid var(--primary);
   padding: 0.5rem;
   border-radius: var(--radius);
   color: #fff;
@@ -151,8 +154,8 @@ select:disabled {
 .field > textarea:focus,
 .field > select:focus {
   outline: none;
-  border-color: #00008b;
-  box-shadow: 0 0 0 3px rgba(0, 0, 139, 0.2);
+  border-color: var(--primary);
+  box-shadow: 0 0 0 1px var(--primary);
 }
 .field > input.invalid,
 .field > textarea.invalid,