toolbar

packages/web/src/widgets/Toolbar.svelte

@@ -0,0 +1,23 @@
+<script>
+  import { filter } from 'lodash';
+  import App from '../App.svelte';
+  import { commands } from '../stores';
+  import ToolbarButton from './ToolbarButton.svelte';
+</script>
+
+<div class="container">
+  {#each Object.values($commands).filter(x => (x.enabled || x.showDisabled) && x.toolbar && x.onClick) as command}
+    <ToolbarButton icon={command.icon} on:click={command.onClick} disabled={!command.enabled}
+      >{command.name}</ToolbarButton
+    >
+  {/each}
+</div>
+
+<style>
+  .container {
+    display: flex;
+    user-select: none;
+    align-items: stretch;
+    height: var(--dim-toolbar-height);
+  }
+</style>

packages/web/src/widgets/ToolbarButton.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import FontIcon from '../icons/FontIcon.svelte';
+
+  export let disabled;
+  export let icon;
+
+  const dispatch = createEventDispatcher();
+
+  function handleClick(e) {
+    if (disabled) return;
+    dispatch('click');
+  }
+</script>
+
+<div class="button" on:click={handleClick} class:disabled>
+  <div class="inner">
+    <span class="icon" class:disabled><FontIcon {icon} /></span>
+    <slot />
+  </div>
+</div>
+
+<style>
+  .button {
+    /* padding: 5px 15px; */
+    padding-left: 15px;
+    padding-right: 15px;
+    color: var(--theme-font-1);
+    border: 0;
+    border-right: 1px solid var(--theme-border);
+    align-self: stretch;
+    display: flex;
+  }
+  .button.disabled {
+    background: var(--theme-bg-2);
+    color: var(--theme-font-3);
+  }
+  .button:hover {
+    background: var(--theme-bg-2);
+  }
+  .button:active:hover {
+    background: var(--theme-bg-3);
+  }
+  .icon {
+    margin-right: 5px;
+    color: var(--theme-font-link);
+  }
+  .icon.disabled {
+    color: var(--theme-font-3);
+  }
+  .inner {
+    /* position: relative;
+    top: 2px; */
+    white-space: nowrap;
+    align-self: center;
+  }
+</style>