buttons folder

packages/web/src/buttons/CloseSearchButton.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import FontIcon from '../icons/FontIcon.svelte';
+
+  import InlineButton from './InlineButton.svelte';
+
+  export let filter;
+</script>
+
+{#if filter}
+  <InlineButton
+    on:click
+    on:click={() => {
+      filter = '';
+    }}
+    title="Clear filter"
+  >
+    <FontIcon icon="icon close" />
+  </InlineButton>
+{/if}

packages/web/src/buttons/DropDownButton.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import _ from 'lodash';
+
+  import FontIcon from '../icons/FontIcon.svelte';
+  import { currentDropDownMenu } from '../stores';
+  import InlineButton from './InlineButton.svelte';
+
+  export let icon = 'icon chevron-down';
+  export let menu;
+  export let narrow = false;
+  let domButton;
+
+  function handleClick() {
+    const rect = domButton.getBoundingClientRect();
+    const left = rect.left;
+    const top = rect.bottom;
+    currentDropDownMenu.set({ left, top, items: menu });
+  }
+</script>
+
+<InlineButton square {narrow} on:click={handleClick} bind:this={domButton}>
+  <FontIcon {icon} />
+</InlineButton>

packages/web/src/buttons/FormStyledButton.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  const dispatch = createEventDispatcher();
+
+  export let type = 'button';
+  export let disabled = false;
+  export let value;
+
+  function handleClick() {
+    if (!disabled) dispatch('click');
+  }
+</script>
+
+<input {type} {value} class:disabled {...$$restProps} on:click={handleClick} />
+
+<style>
+  input {
+    border: 1px solid var(--theme-bg-button-inv-2);
+    padding: 5px;
+    margin: 2px;
+    width: 100px;
+    background-color: var(--theme-bg-button-inv);
+    color: var(--theme-font-inv-1);
+    border-radius: 2px;
+  }
+
+  input:hover:not(.disabled) {
+    background-color: var(--theme-bg-button-inv-2);
+  }
+  input:active:not(.disabled) {
+    background-color: var(--theme-bg-button-inv-3);
+  }
+  input.disabled {
+    background-color: var(--theme-bg-button-inv-3);
+    color: var(--theme-font-inv-3);
+  }
+</style>

packages/web/src/buttons/FormStyledButtonLikeLabel.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  export let disabled = false;
+</script>
+
+<label {...$$props} class:disabled>
+  <slot />
+</label>
+
+<style>
+  label {
+    border: 1px solid var(--theme-bg-button-inv-2);
+    padding: 5px;
+    margin: 2px;
+    width: 100px;
+    background-color: var(--theme-bg-button-inv);
+    color: var(--theme-font-inv-1);
+    border-radius: 2px;
+  }
+
+  label:hover:not(.disabled) {
+    background-color: var(--theme-bg-button-inv-2);
+  }
+  label:active:not(.disabled) {
+    background-color: var(--theme-bg-button-inv-3);
+  }
+  label.disabled {
+    background-color: var(--theme-bg-button-inv-3);
+    color: var(--theme-font-inv-3);
+  }
+</style>

packages/web/src/buttons/InlineButton.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  export let disabled = false;
+  export let square = false;
+  export let narrow = false;
+  export let title = null;
+
+  let domButton;
+
+  export function getBoundingClientRect() {
+    return domButton.getBoundingClientRect();
+  }
+</script>
+
+<div class="outer buttonLike" {title} class:disabled class:square class:narrow on:click bind:this={domButton}>
+  <div class="inner">
+    <slot />
+  </div>
+</div>
+
+<style>
+  .outer {
+    --bg-1: var(--theme-bg-1);
+    --bg-2: var(--theme-bg-3);
+
+    background: linear-gradient(to bottom, var(--bg-1) 5%, var(--bg-2) 100%);
+    background-color: var(--bg-1);
+    border: 1px solid var(--bg-2);
+    display: inline-block;
+    cursor: pointer;
+    vertical-align: middle;
+    color: var(--theme-font-1);
+    font-size: 12px;
+    padding: 3px;
+    margin: 0;
+    text-decoration: none;
+    display: flex;
+  }
+
+  .narrow {
+    padding: 3px 1px;
+  }
+
+  .outer.disabled {
+    color: var(--theme-font-3);
+  }
+
+  .outer:hover:not(.disabled) {
+    border: 1px solid var(--theme-font-1);
+  }
+
+  .outer:active:not(.disabled) {
+    background: linear-gradient(to bottom, var(--bg-2) 5%, var(--bg-1) 100%);
+    background-color: var(--bg-2);
+  }
+
+  .inner {
+    margin: auto;
+    flex: 1;
+    text-align: center;
+  }
+
+  .square {
+    width: 18px;
+  }
+</style>

packages/web/src/buttons/LargeButton.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import FontIcon from '../icons/FontIcon.svelte';
+  import { createEventDispatcher } from 'svelte';
+
+  export let icon;
+  export let disabled = false;
+
+  const dispatch = createEventDispatcher();
+
+  function handleClick() {
+    if (!disabled) dispatch('click');
+  }
+</script>
+
+<div class="button" on:click={handleClick} class:disabled>
+  <div class="icon">
+    <FontIcon {icon} />
+  </div>
+  <div class="inner">
+    <slot />
+  </div>
+</div>
+
+<style>
+  .button {
+    padding: 5px 15px;
+    color: var(--theme-font-1);
+    border: 1px solid var(--theme-border);
+    width: 120px;
+    height: 60px;
+    background-color: var(--theme-bg-1);
+  }
+
+  .button:not(.disabled):hover {
+    background-color: var(--theme-bg-2);
+  }
+
+  .button:not(.disabled):active {
+    background-color: var(--theme-bg-3);
+  }
+
+  .button.disabled {
+    color: var(--theme-font-3);
+  }
+
+  .icon {
+    font-size: 30px;
+    text-align: center;
+  }
+
+  .inner {
+    text-align: center;
+  }
+</style>

packages/web/src/buttons/ToolStripButton.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import FontIcon from '../icons/FontIcon.svelte';
+
+  export let disabled = false;
+  export let icon = null;
+  export let title = null;
+  export let externalImage = null;
+
+  const dispatch = createEventDispatcher();
+
+  function handleClick(e) {
+    if (disabled) return;
+    dispatch('click');
+  }
+</script>
+
+<div class="button" class:disabled {title}>
+  <div class="inner" class:disabled on:click={handleClick}>
+    {#if externalImage}
+      <img src={externalImage} />
+    {:else}
+      <span class="icon" class:disabled><FontIcon {icon} /></span>
+      <slot />
+    {/if}
+  </div>
+</div>
+
+<style>
+  .button {
+    /* padding: 5px 15px; */
+    padding-left: 5px;
+    padding-right: 5px;
+    color: var(--theme-font-1);
+    border: 0;
+    align-self: stretch;
+    display: flex;
+    user-select: none;
+  }
+  .button.disabled {
+    color: var(--theme-font-3);
+  }
+  .inner:hover:not(.disabled) {
+    background: var(--theme-bg-3);
+  }
+  .inner:active:hover:not(.disabled) {
+    background: var(--theme-bg-4);
+  }
+  .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;
+    background: var(--theme-bg-2);
+    padding: 3px 8px;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+  img {
+    width: 20px;
+    height: 20px;
+  }
+</style>

packages/web/src/buttons/ToolStripCommandButton.svelte

@@ -0,0 +1,29 @@
+<script context="module">
+  function getCommandTitle(command) {
+    let res = command.text;
+    if (command.keyText || command.keyTextFromGroup) res += ` (${command.keyText || command.keyTextFromGroup})`;
+    return res;
+  }
+</script>
+
+<script lang="ts">
+  import { commandsCustomized } from '../stores';
+  import ToolStripButton from './ToolStripButton.svelte';
+
+  export let command;
+  export let component = ToolStripButton;
+
+  $: cmd = Object.values($commandsCustomized).find((x: any) => x.id == command) as any;
+</script>
+
+{#if cmd}
+  <svelte:component
+    this={component}
+    title={getCommandTitle(cmd)}
+    icon={cmd.icon}
+    on:click={cmd.onClick}
+    disabled={!cmd.enabled}
+  >
+    {cmd.toolbarName || cmd.name}
+  </svelte:component>
+{/if}

packages/web/src/buttons/ToolStripContainer.svelte

@@ -0,0 +1,27 @@
+<div class="toolstrip">
+  <slot name="toolstrip" />
+</div>
+
+<div class="content">
+  <slot />
+</div>
+
+<style>
+  .content {
+    position: absolute;
+    left: 0;
+    top: var(--dim-toolbar-height);
+    right: 0;
+    bottom: 0;
+    display: flex;
+  }
+
+  .toolstrip {
+    position: absolute;
+    left: 0;
+    height: var(--dim-toolbar-height);
+    right: 0;
+    display: flex;
+    background: var(--theme-bg-0);
+  }
+</style>

packages/web/src/buttons/ToolStripDropDownButton.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { currentDropDownMenu } from '../stores';
+
+  import ToolStripButton from './ToolStripButton.svelte';
+
+  export let menu;
+  export let title;
+  export let label;
+  export let icon;
+  export let component = ToolStripButton;
+
+  function handleClick(e) {
+    const rect = e.target.getBoundingClientRect();
+    const left = rect.left;
+    const top = rect.bottom;
+    currentDropDownMenu.set({ left, top, items: menu });
+  }
+</script>
+
+<svelte:component this={component} {title} {icon} on:click={handleClick}>
+  {label}
+</svelte:component>

packages/web/src/buttons/ToolbarButton.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import FontIcon from '../icons/FontIcon.svelte';
+
+  export let disabled = false;
+  export let icon = null;
+  export let title = null;
+  export let externalImage = null;
+
+  const dispatch = createEventDispatcher();
+
+  function handleClick(e) {
+    if (disabled) return;
+    dispatch('click');
+  }
+</script>
+
+<div class="button" on:click={handleClick} class:disabled {title}>
+  <div class="inner">
+    {#if externalImage}
+      <img src={externalImage} />
+    {:else}
+      <span class="icon" class:disabled><FontIcon {icon} /></span>
+      <slot />
+    {/if}
+  </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;
+    user-select: none;
+  }
+  .button.disabled {
+    color: var(--theme-font-3);
+  }
+  .button:hover:not(.disabled) {
+    background: var(--theme-bg-2);
+  }
+  .button:active:hover:not(.disabled) {
+    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;
+  }
+  img {
+    width: 20px;
+    height: 20px;
+  }
+</style>

packages/web/src/buttons/UploadButton.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import FormStyledButtonLikeLabel from '../buttons/FormStyledButtonLikeLabel.svelte';
+  import uploadFiles from '../utility/uploadFiles';
+
+  const handleChange = e => {
+    const files = [...e.target.files];
+    uploadFiles(files);
+  };
+</script>
+
+<div class="m-1">
+  <FormStyledButtonLikeLabel htmlFor="uploadFileButton">Upload file</FormStyledButtonLikeLabel>
+  <input type="file" id="uploadFileButton" hidden on:change={handleChange} />
+</div>