SYNC: Merge pull request #2 from dbgate/feature/admin-ui

packages/web/src/elements/TabControl.svelte

@@ -17,6 +17,7 @@
   export let containerMaxWidth = undefined;
   export let flex1 = true;
   export let contentTestId = undefined;
+  export let inlineTabs = false;
 
   export function setValue(index) {
     value = index;
@@ -27,7 +28,7 @@
 </script>
 
 <div class="main" class:flex1>
-  <div class="tabs">
+  <div class="tabs" class:inlineTabs>
     {#each _.compact(tabs) as tab, index}
       <div class="tab-item" class:selected={value == index} on:click={() => (value = index)} data-testid={tab.testid}>
         <span class="ml-2">
@@ -78,17 +79,27 @@
     height: var(--dim-tabs-height);
     min-height: var(--dim-tabs-height);
     right: 0;
-    background-color: var(--theme-bg-2);
     overflow-x: auto;
     max-width: 100%;
   }
 
+  .tabs:not(.inlineTabs) {
+    background-color: var(--theme-bg-2);
+  }
+
+  .tabs.inlineTabs {
+    border-bottom: 1px solid var(--theme-border);
+    text-transform: uppercase;
+  }
+
+  .tabs.inlineTabs .tab-item.selected {
+    border-bottom: 2px solid var(--theme-font-link);
+  }
   .tabs::-webkit-scrollbar {
     height: 7px;
   }
 
   .tab-item {
-    border-right: 1px solid var(--theme-border);
     padding-left: 15px;
     padding-right: 15px;
     display: flex;
@@ -96,6 +107,10 @@
     cursor: pointer;
   }
 
+  .tabs:not(.inlineTabs) .tab-item {
+    border-right: 1px solid var(--theme-border);
+  }
+
   /* .tab-item:hover {
     color: ${props => props.theme.tabs_font_hover};
   } */
@@ -124,4 +139,5 @@
   .container.isInline:not(.tabVisible) {
     display: none;
   }
+
 </style>

packages/web/src/elements/TableControl.svelte

@@ -31,6 +31,11 @@
   export let noCellPadding = false;
 
   export let domTable = undefined;
+  export let stickyHeader = false;
+
+  export let checkedKeys = null;
+  export let onSetCheckedKeys = null;
+  export let extractCheckedKey = x => x.id;
 
   const dispatch = createEventDispatcher();
 
@@ -63,11 +68,15 @@
   on:keydown
   tabindex={selectable ? -1 : undefined}
   on:keydown={handleKeyDown}
+  class:stickyHeader
 >
-  <thead>
+  <thead class:stickyHeader>
     <tr>
+      {#if checkedKeys}
+        <th></th>
+      {/if}
       {#each columnList as col}
-        <td
+        <th
           class:clickable={col.sortable}
           on:click={() => {
             if (col.sortable) {
@@ -89,7 +98,7 @@
           {#if sortedByField == col.fieldName}
             <FontIcon icon={sortOrderIsDesc ? 'img sort-desc' : 'img sort-asc'} padLeft />
           {/if}
-        </td>
+        </th>
       {/each}
     </tr>
   </thead>
@@ -108,6 +117,18 @@
           }
         }}
       >
+        {#if checkedKeys}
+          <td>
+            <input
+              type="checkbox"
+              checked={checkedKeys.includes(extractCheckedKey(row))}
+              on:change={e => {
+                if (e.target['checked']) onSetCheckedKeys(_.uniq([...checkedKeys, extractCheckedKey(row)]));
+                else onSetCheckedKeys(checkedKeys.filter(x => x != extractCheckedKey(row)));
+              }}
+            />
+          </td>
+        {/if}
         {#each columnList as col}
           {@const rowProps = { ...col.props, ...(col.getProps ? col.getProps(row) : null) }}
           <td class:isHighlighted={col.isHighlighted && col.isHighlighted(row)} class:noCellPadding>
@@ -164,7 +185,7 @@
     background: var(--theme-bg-hover);
   }
 
-  thead td {
+  thead th {
     border: 1px solid var(--theme-border);
     background-color: var(--theme-bg-1);
     padding: 5px;
@@ -184,4 +205,31 @@
   td.clickable {
     cursor: pointer;
   }
+
+  thead.stickyHeader {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    border-top: 1px solid var(--theme-border);
+  }
+
+  table.stickyHeader th {
+    border-left: none;
+  }
+
+  thead.stickyHeader :global(tr:first-child) :global(th) {
+    border-top: 1px solid var(--theme-border);
+  }
+
+  table.stickyHeader td {
+    border: 0px;
+    border-bottom: 1px solid var(--theme-border);
+    border-right: 1px solid var(--theme-border);
+  }
+
+  table.stickyHeader {
+    border-spacing: 0;
+    border-collapse: separate;
+    border-left: 1px solid var(--theme-border);
+  }
 </style>