From 40ed020c0a7d1649e66f31ed0a3de60c9b01bb7c Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Sat, 20 Feb 2021 11:53:00 +0100
Subject: [PATCH] left panel

---
 packages/web-svelte/public/global.css         | 16 ++++++-
 .../src/widgets/ConnectionList.svelte         | 18 +++++++
 .../src/widgets/DatabaseWidget.svelte         | 17 ++++++-
 .../src/widgets/InlineButton.svelte           | 47 +++++++++++++++++++
 .../web-svelte/src/widgets/SearchInput.svelte | 14 ++++++
 .../src/widgets/WidgetColumnBar.svelte        | 13 +++++
 .../src/widgets/WidgetColumnBarItem.svelte    | 23 +++++++++
 .../src/widgets/WidgetsInnerContainer.svelte  | 10 ++++
 8 files changed, 155 insertions(+), 3 deletions(-)
 create mode 100644 packages/web-svelte/src/widgets/ConnectionList.svelte
 create mode 100644 packages/web-svelte/src/widgets/InlineButton.svelte
 create mode 100644 packages/web-svelte/src/widgets/SearchInput.svelte
 create mode 100644 packages/web-svelte/src/widgets/WidgetColumnBar.svelte
 create mode 100644 packages/web-svelte/src/widgets/WidgetColumnBarItem.svelte
 create mode 100644 packages/web-svelte/src/widgets/WidgetsInnerContainer.svelte

diff --git a/packages/web-svelte/public/global.css b/packages/web-svelte/public/global.css
index bb28a941..b063dff2 100644
--- a/packages/web-svelte/public/global.css
+++ b/packages/web-svelte/public/global.css
@@ -1,4 +1,16 @@
-html, body {
+body {
+  font-family: -apple-system, BlinkMacSystemFont, Segoe WPC, Segoe UI, HelveticaNeue-Light, Ubuntu, Droid Sans,
+    sans-serif;
+  font-size: 14px;
+  /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+	  'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+	  sans-serif; 
+	  */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* html, body {
 	position: relative;
 	width: 100%;
 	height: 100%;
@@ -60,4 +72,4 @@ button:not(:disabled):active {
 
 button:focus {
 	border-color: #666;
-}
+} */
diff --git a/packages/web-svelte/src/widgets/ConnectionList.svelte b/packages/web-svelte/src/widgets/ConnectionList.svelte
new file mode 100644
index 00000000..b1c4f76e
--- /dev/null
+++ b/packages/web-svelte/src/widgets/ConnectionList.svelte
@@ -0,0 +1,18 @@
+<script>
+  import InlineButton from './InlineButton.svelte';
+  import SearchInput from './SearchInput.svelte';
+  import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
+</script>
+
+<div class="search-box">
+  <SearchInput placeholder="Search connection" />
+  <InlineButton>Refresh</InlineButton>
+</div>
+<WidgetsInnerContainer>CONNECTIONS</WidgetsInnerContainer>
+
+<style>
+  .search-box {
+    display: flex;
+    margin-bottom: 5px;
+  }
+</style>
diff --git a/packages/web-svelte/src/widgets/DatabaseWidget.svelte b/packages/web-svelte/src/widgets/DatabaseWidget.svelte
index 281c6866..61d5b452 100644
--- a/packages/web-svelte/src/widgets/DatabaseWidget.svelte
+++ b/packages/web-svelte/src/widgets/DatabaseWidget.svelte
@@ -1 +1,16 @@
-<div></div>
\ No newline at end of file
+<script>
+  import ConnectionList from './ConnectionList.svelte';
+
+  import WidgetColumnBar from './WidgetColumnBar.svelte';
+  import WidgetColumnBarItem from './WidgetColumnBarItem.svelte';
+</script>
+
+<WidgetColumnBar>
+  <WidgetColumnBarItem title="Connections" name="connections" height="50%">
+    <ConnectionList />
+  </WidgetColumnBarItem>
+  <WidgetColumnBarItem title="Tables, views, functions" name="dbObjects">
+    TABLES
+    <!-- <SqlObjectListWrapper /> -->
+  </WidgetColumnBarItem>
+</WidgetColumnBar>
diff --git a/packages/web-svelte/src/widgets/InlineButton.svelte b/packages/web-svelte/src/widgets/InlineButton.svelte
new file mode 100644
index 00000000..e475e0d2
--- /dev/null
+++ b/packages/web-svelte/src/widgets/InlineButton.svelte
@@ -0,0 +1,47 @@
+<script>
+  export let disabled;
+  export let square;
+</script>
+
+<div class="outer buttonLike" class:disabled class:square>
+  <div class="inner">
+    <slot />
+  </div>
+</div>
+
+<style>
+  .outer {
+    background: linear-gradient(to bottom, var(--theme-bg-2) 5%, var(--theme-bg-3) 100%);
+    background-color: var(--theme-bg-2);
+    border: 1px solid var(--theme-bg-3);
+    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-bg-2);
+    background: linear-gradient(to bottom, var(--theme-bg-3) 5%, var(--theme-bg-2) 100%);
+    background-color: var(--theme-bg-3);
+  }
+
+  .inner {
+    margin: auto;
+    flex: 1;
+    text-align: center;
+  }
+
+  .square {
+    width: 18px;
+  }
+</style>
diff --git a/packages/web-svelte/src/widgets/SearchInput.svelte b/packages/web-svelte/src/widgets/SearchInput.svelte
new file mode 100644
index 00000000..4df5902d
--- /dev/null
+++ b/packages/web-svelte/src/widgets/SearchInput.svelte
@@ -0,0 +1,14 @@
+<script>
+  export let placeholder;
+</script>
+
+<input type="text" {placeholder} />
+
+<style>
+  input {
+    flex: 1;
+    min-width: 10px;
+    width: 10px;
+    border: none;
+  }
+</style>
diff --git a/packages/web-svelte/src/widgets/WidgetColumnBar.svelte b/packages/web-svelte/src/widgets/WidgetColumnBar.svelte
new file mode 100644
index 00000000..45313b01
--- /dev/null
+++ b/packages/web-svelte/src/widgets/WidgetColumnBar.svelte
@@ -0,0 +1,13 @@
+<div class="main-container">
+    <slot></slot>
+</div>
+
+<style>
+  .main-container {
+    position: relative;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    user-select: none;
+  }
+</style>
diff --git a/packages/web-svelte/src/widgets/WidgetColumnBarItem.svelte b/packages/web-svelte/src/widgets/WidgetColumnBarItem.svelte
new file mode 100644
index 00000000..73a1050c
--- /dev/null
+++ b/packages/web-svelte/src/widgets/WidgetColumnBarItem.svelte
@@ -0,0 +1,23 @@
+<script>
+  export let title;
+  export let visible = true;
+</script>
+
+<div class="title" on:click={() => (visible = !visible)}>{title}</div>
+
+{#if visible}
+  <slot />
+{/if}
+
+<style>
+  .title {
+    padding: 5px;
+    font-weight: bold;
+    text-transform: uppercase;
+    background-color: var(--theme-bg-4);
+    border: 1px solid var(--theme-border);
+  }
+  .title:hover {
+    background-color: var(--theme-bg-3);
+  }
+</style>
diff --git a/packages/web-svelte/src/widgets/WidgetsInnerContainer.svelte b/packages/web-svelte/src/widgets/WidgetsInnerContainer.svelte
new file mode 100644
index 00000000..1ee9dd5b
--- /dev/null
+++ b/packages/web-svelte/src/widgets/WidgetsInnerContainer.svelte
@@ -0,0 +1,10 @@
+<div><slot /></div>
+
+<style>
+  div {
+    flex: 1 1;
+    overflow-x: auto;
+    overflow-y: auto;
+    width: var(--dim-left-panel-width);
+  }
+</style>