moved some widgets to elements

packages/web/src/elements/DropDownButton.svelte

@@ -0,0 +1,22 @@
+<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;
+  let domButton;
+
+  function handleClick() {
+    const rect = domButton.getBoundingClientRect();
+    const left = rect.left;
+    const top = rect.bottom;
+    currentDropDownMenu.set({ left, top, items: _.isFunction(menu) ? menu() : menu });
+  }
+</script>
+
+<InlineButton square on:click={handleClick} bind:this={domButton}>
+  <FontIcon {icon} />
+</InlineButton>

packages/web/src/elements/ErrorInfo.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import FontIcon from '../icons/FontIcon.svelte';
+
+  export let message;
+  export let icon = 'img error';
+  export let isSmall = false;
+</script>
+
+{#if isSmall}
+  <div class="container-small">
+    <FontIcon {icon} />
+    {message}
+  </div>
+{:else}
+  <div class="container">
+    <div class="icon">
+      <FontIcon {icon} />
+    </div>
+    {message}
+  </div>
+{/if}
+
+<style>
+  .container {
+    display: flex;
+    align-items: center;
+    margin-right: 10px;
+  }
+  .icon {
+    font-size: 20pt;
+    margin: 10px;
+  }
+
+  .container-small {
+    display: flex;
+    margin-right: 10px;
+  }
+</style>

packages/web/src/elements/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/elements/InlineButton.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  export let disabled = false;
+  export let square = false;
+
+  let domButton;
+
+  export function getBoundingClientRect() {
+    return domButton.getBoundingClientRect();
+  }
+</script>
+
+<div class="outer buttonLike" class:disabled class:square 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;
+  }
+
+  .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/elements/LoadingInfo.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import FontIcon from '../icons/FontIcon.svelte';
+
+  export let message;
+  export let wrapper = false;
+</script>
+
+{#if wrapper}
+  <div class="wrapper">
+    <div class="box">
+      <div class="container">
+        <div class="spinner">
+          <FontIcon icon="icon loading" />
+        </div>
+        {message}
+      </div>
+    </div>
+  </div>
+{:else}
+  <div class="container">
+    <div class="spinner">
+      <FontIcon icon="icon loading" />
+    </div>
+    {message}
+  </div>
+{/if}
+
+<style>
+  .container {
+    display: flex;
+    align-items: center;
+    margin-right: 10px;
+  }
+
+  .spinner {
+    font-size: 20pt;
+    margin: 10px;
+  }
+  .wrapper {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+  }
+  .box {
+    background-color: var(--theme-bg-2);
+    padding: 10px;
+    border: 1px solid var(--theme-border);
+  }
+</style>

packages/web/src/elements/SearchBoxWrapper.svelte

@@ -0,0 +1,8 @@
+<div><slot /></div>
+
+<style>
+  div {
+    display: flex;
+    margin-bottom: 5px;
+  }
+</style>

packages/web/src/elements/SearchInput.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import keycodes from '../utility/keycodes';
+
+  export let placeholder;
+  export let value;
+
+  let domInput;
+
+  function handleKeyDown(e) {
+    if (e.keyCode == keycodes.escape) {
+      value = '';
+    }
+  }
+</script>
+
+<input
+  type="text"
+  {placeholder}
+  bind:value
+  on:keydown={handleKeyDown}
+  bind:this={domInput}
+  on:focus={e => domInput.select()}
+/>
+
+<style>
+  input {
+    flex: 1;
+    min-width: 10px;
+    width: 10px;
+    border: none;
+  }
+</style>

packages/web/src/elements/TabControl.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+  interface TabDef {
+    label: string;
+    slot?: number;
+    component?: any;
+    props?: any;
+  }
+
+  export let tabs: TabDef[];
+  export let value = 0;
+  export let isInline = false;
+</script>
+
+<div class="main">
+  <div class="tabs">
+    {#each tabs as tab, index}
+      <div class="tab-item" class:selected={value == index} on:click={() => (value = index)}>
+        <span class="ml-2">
+          {tab.label}
+        </span>
+      </div>
+    {/each}
+  </div>
+
+  <div class="content-container">
+    {#each tabs as tab, index}
+      <div class="container" class:isInline class:tabVisible={index == value}>
+        <svelte:component this={tab.component} {...tab.props} />
+        {#if tab.slot == 0}<slot name="0" />{/if}
+        {#if tab.slot == 1}<slot name="1" />{/if}
+        {#if tab.slot == 2}<slot name="2" />{/if}
+        {#if tab.slot == 3}<slot name="3" />{/if}
+        {#if tab.slot == 4}<slot name="4" />{/if}
+        {#if tab.slot == 5}<slot name="5" />{/if}
+        {#if tab.slot == 6}<slot name="6" />{/if}
+        {#if tab.slot == 7}<slot name="7" />{/if}
+      </div>
+    {/each}
+  </div>
+</div>
+
+<style>
+  .main {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+  }
+
+  .tabs {
+    display: flex;
+    height: var(--dim-tabs-height);
+    right: 0;
+    background-color: var(--theme-bg-2);
+  }
+
+  .tab-item {
+    border-right: 1px solid var(--theme-border);
+    padding-left: 15px;
+    padding-right: 15px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  /* .tab-item:hover {
+    color: ${props => props.theme.tabs_font_hover};
+  } */
+  .tab-item.selected {
+    background-color: var(--theme-bg-1);
+  }
+
+  .content-container {
+    flex: 1;
+    position: relative;
+  }
+
+  .container:not(.isInline) {
+    position: absolute;
+    display: flex;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+  }
+
+  .container:not(.tabVisible):not(.isInline) {
+    visibility: hidden;
+  }
+
+  .container.isInline:not(.tabVisible) {
+    display: none;
+  }
+</style>