From 5977de5d149108e46d6ef1c5375bc5496d1f90bb Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Thu, 26 Aug 2021 10:28:27 +0300
Subject: [PATCH] New Table layout (#62)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 packages/theme/styles/_colors.scss            |   9 +
 packages/theme/styles/_layouts.scss           |  13 ++
 .../src/components/TableView.svelte           | 170 +++++++++---------
 3 files changed, 105 insertions(+), 87 deletions(-)

diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss
index a2129731bd..1e00a0b6c7 100644
--- a/packages/theme/styles/_colors.scss
+++ b/packages/theme/styles/_colors.scss
@@ -80,6 +80,9 @@
   --theme-button-border-focused: rgba(255, 255, 255, .4);
   --theme-button-border-error: rgba(205, 104, 104, .1);
 
+  --theme-table-bg-color: rgba(255, 255, 255, .02);
+  --theme-table-bg-hover: rgba(255, 255, 255, .04);
+
   --theme-caption-color: #fff;
   --theme-content-accent-color: rgba(255, 255, 255, 0.8);
   --theme-content-color: rgba(255, 255, 255, 0.6);
@@ -132,6 +135,9 @@
   --theme-button-border-focused: rgba(255, 255, 255, .4);
   --theme-button-border-error: rgba(205, 104, 104, .1);
 
+  --theme-table-bg-color: rgba(255, 255, 255, .02);
+  --theme-table-bg-hover: rgba(255, 255, 255, .04);
+
   --theme-caption-color: #fff;
   --theme-content-accent-color: rgba(255, 255, 255, 0.8);
   --theme-content-color: rgba(255, 255, 255, 0.6);
@@ -183,6 +189,9 @@
   --theme-button-border-focused: rgba(255, 255, 255, .4);
   --theme-button-border-error: rgba(205, 104, 104, .1);
 
+  --theme-table-bg-color: rgba(0, 0, 0, .02);
+  --theme-table-bg-hover: rgba(0, 0, 0, .04);
+
   --theme-caption-color: #272121;
   --theme-content-accent-color: rgba(39, 33, 33, 0.8);
   --theme-content-color: rgba(39, 33, 33, 0.6);
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index b531f072bd..0b7111c7b9 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -52,6 +52,19 @@ select:-webkit-autofill:focus {
   background: transparent;
 }
 
+table, caption, tbody, tfoot, thead, tr, th, td {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: middle;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
 // input:-webkit-autofill,
 // input:-webkit-autofill:hover,
 // input:-webkit-autofill:focus,
diff --git a/plugins/view-resources/src/components/TableView.svelte b/plugins/view-resources/src/components/TableView.svelte
index 6c604c8dc2..1ef4b3bbec 100644
--- a/plugins/view-resources/src/components/TableView.svelte
+++ b/plugins/view-resources/src/components/TableView.svelte
@@ -15,117 +15,113 @@
 -->
 
 <script lang="ts">
+  import { createEventDispatcher } from 'svelte'
+  import type { Ref, Class, Doc, Space, FindOptions } from '@anticrm/core'
+  import { buildModel } from '../utils'
+  import { getClient } from '@anticrm/presentation'
+  import { Label, showModal, Loading, ScrollBox } from '@anticrm/ui'
+  import type { AnyComponent } from '@anticrm/ui'
 
-import { createEventDispatcher } from 'svelte'
-import type { Ref, Class, Doc, Space, FindOptions } from '@anticrm/core'
-import { buildModel } from '../utils'
-import { getClient } from '@anticrm/presentation'
-import { Label, showModal, Loading } from '@anticrm/ui'
-import type { AnyComponent } from '@anticrm/ui'
+  import { createQuery } from '@anticrm/presentation'
 
-import { createQuery } from '@anticrm/presentation'
+  export let _class: Ref<Class<Doc>>
+  export let space: Ref<Space>
+  export let open: AnyComponent
+  export let options: FindOptions<Doc> | undefined
+  export let config: string[]
 
-export let _class: Ref<Class<Doc>>
-export let space: Ref<Space>
-export let open: AnyComponent
-export let options: FindOptions<Doc> | undefined
-export let config: string[]
+  let objects: Doc[]
 
-let objects: Doc[]
+  const query = createQuery()
+  $: query.query(_class, { space }, result => { objects = result }, options)
 
-const query = createQuery()
-$: query.query(_class, { space }, result => { objects = result }, options)
-
-function getValue(doc: Doc, key: string): any {
-  if (key.length === 0)
-    return doc
-  const path = key.split('.')
-  const len = path.length
-  let obj = doc as any
-  for (let i=0; i<len; i++){
-    obj = obj?.[path[i]]
+  function getValue(doc: Doc, key: string): any {
+    if (key.length === 0)
+      return doc
+    const path = key.split('.')
+    const len = path.length
+    let obj = doc as any
+    for (let i=0; i<len; i++){
+      obj = obj?.[path[i]]
+    }
+    return obj
   }
-  return obj
-}
 
-const client = getClient()
-
-function onClick(object: Doc) {
-  showModal(open, { object, space })
-}
+  const client = getClient()
 
+  function onClick(object: Doc) {
+    showModal(open, { object, space })
+  }
 </script>
 
 {#await buildModel(client, _class, config, options)}
  <Loading/>
 {:then model}
-<table class="table-body">
-  <tr class="tr-head">
-    {#each model as attribute}
-      <th><Label label = {attribute.label}/></th>
-    {/each}
-  </tr>
-  {#if objects}
-    {#each objects as object (object._id)}
-      <tr class="tr-body" on:click={() => onClick(object)}>
-      {#each model as attribute}
-        <td><svelte:component this={attribute.presenter} value={getValue(object, attribute.key)}/></td>
-      {/each}
-      </tr>
-    {/each}
-  {/if}
-</table>
+<div class="container">
+  <ScrollBox vertical stretch noShift>
+    <table class="table-body">
+      <thead>
+        <tr class="tr-head">
+          {#each model as attribute}
+            <th><Label label = {attribute.label}/></th>
+          {/each}
+        </tr>
+      </thead>
+      {#if objects}
+        <tbody>
+          {#each objects as object (object._id)}
+            <tr class="tr-body" on:click={() => onClick(object)}>
+            {#each model as attribute}
+              <td><svelte:component this={attribute.presenter} value={getValue(object, attribute.key)}/></td>
+            {/each}
+            </tr>
+          {/each}
+        </tbody>
+      {/if}
+    </table>
+  </ScrollBox>
+</div>
 {/await}
 
 <style lang="scss">
-.table-body {
-  display: table;
-  border-collapse: collapse;
+  .container {
+    flex-grow: 1;
+    position: relative;
+    padding-bottom: 2.5rem;
 
-  td {
-    align-items: center;
-    height: 4rem;
-    padding: .375rem 1.25rem;
-    color: var(--theme-content-accent-color);
+    &::before {
+      position: absolute;
+      content: '';
+      top: 2.5rem;
+      bottom: 0;
+      width: 100%;
+      background-color: var(--theme-table-bg-color);
+      border-radius: 0 0 1.25rem 1.25rem;
+    }
   }
-  th {
-    align-items: center;
-    height: 3.125rem;
-    padding: 0 1.25rem;
-    font-weight: 500;
+
+  th, td {
+    padding: .5rem 1.5rem;
     text-align: left;
-    color: var(--theme-content-trans-color);
+    &:first-child { padding-left: 2.5rem; }
   }
-  .tr-head {
+
+  th {
     position: sticky;
     top: 0;
+    height: 2.5rem;
+    font-weight: 500;
+    font-size: .75rem;
+    color: var(--theme-content-dark-color);
     background-color: var(--theme-bg-color);
-    border-bottom: 1px solid var(--theme-bg-focused-color);
-    box-shadow: 0 1px 0 var(--theme-bg-focused-color);
-    z-index: 5;
+    box-shadow: inset 0 -1px 0 0 var(--theme-bg-focused-color);
   }
+
   .tr-body {
-    position: relative;
-    border-top: 1px solid var(--theme-bg-accent-hover);
-    &:nth-child(2) {
-      border-top: 1px solid transparent;
-    }
-    &:last-child {
-      border-bottom: 1px solid transparent;
-    }
+    height: 3.75rem;
+    color: var(--theme-caption-color);
+    border-bottom: 1px solid var(--theme-button-border-hovered);
+    &:last-child { border-bottom: none; }
+    &:hover { background-color: var(--theme-table-bg-hover); }
   }
-  .tr-body:hover {
-    & > td {
-      border-top: 1px solid transparent;
-      border-bottom: 1px solid transparent;
-      background-color: var(--theme-button-bg-enabled);
-      &:first-child {
-        border-radius: 12px 0 0 12px;
-      }
-      &:last-child {
-        border-radius: 0 12px 12px 0;
-      }
-    }
-  }
-}
 </style>