UI improvements

.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
   },

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:
 

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;
+    height: var(--titlebar-height);
-    background-color: #00002a;
     --wails-draggable: drag;
-    color: #fff;
     display: flex;
     justify-content: center;
     align-items: center;
     overflow: hidden;
-  }
+    background-color: #ddd;
-  :global([data-platform="darwin"]) .titlebar {
-    height: var(--darwin-titlebar-height);
   }
 
   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;

frontend/src/components/contextmenu.svelte

@@ -101,7 +101,7 @@
     text-align: left;
   }
   button.selected {
-    background-color: #00008b;
+    background-color: var(--selection);
     color: #fff;
   }
 

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 {

frontend/src/components/grid/grid-items.svelte

@@ -226,12 +226,11 @@
     cursor: pointer;
   }
   tr.selectable.selected td {
-    background-color: #00008b !important;
+    background-color: var(--selection) !important;
-    color: #fff;
   }
 
   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;

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;
+    width: 1em;
-    height: 13px;
+    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;
   }

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">
+      <li>
-        <button class="tab" on:click={() => dispatch('addTab')}>
+        <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 {
+  nav.tabs :global(svg) {
-    flex: 0 1;
-  }
-
-  .tabs :global(svg) {
-    width: 13px;
-    height: 13px;
     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: var(--selection);
-    background-color: #00008b;
+    border-color: var(--primary);
-    border-color: #00008b;
     cursor: not-allowed;
   }
 
-  nav.tabs.multiline button.tab .label {
+  button.tab .label {
-    display: block;
+    margin-top: 5px;
-    margin-top: 4px;
+    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>

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>

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;
+  font-size: 15px;
-  line-height: 13px;
+  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;
+  background-color: var(--primary);
-  border: 1px solid #00008b;
+  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;
+  border-color: var(--primary);
-  box-shadow: 0 0 0 3px rgba(0, 0, 139, 0.2);
+  box-shadow: 0 0 0 1px var(--primary);
 }
 .field > input.invalid,
 .field > textarea.invalid,