Revert "New Table layout (#62)"

This reverts commit 5977de5d14.

packages/theme/styles/_colors.scss

@@ -80,9 +80,6 @@
   --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);
@@ -135,9 +132,6 @@
   --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);
@@ -189,9 +183,6 @@
   --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);

packages/theme/styles/_layouts.scss

@@ -52,19 +52,6 @@ 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,

plugins/view-resources/src/components/TableView.svelte

@@ -15,113 +15,117 @@
 -->
 
 <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 { createQuery } from '@anticrm/presentation'
+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'
 
-  export let _class: Ref<Class<Doc>>
+import { createQuery } from '@anticrm/presentation'
-  export let space: Ref<Space>
-  export let open: AnyComponent
-  export let options: FindOptions<Doc> | undefined
-  export let config: string[]
 
-  let objects: Doc[]
+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[]
 
-  const query = createQuery()
+let objects: Doc[]
-  $: query.query(_class, { space }, result => { objects = result }, options)
 
-  function getValue(doc: Doc, key: string): any {
+const query = createQuery()
-    if (key.length === 0)
+$: query.query(_class, { space }, result => { objects = result }, options)
-      return doc
+
-    const path = key.split('.')
+function getValue(doc: Doc, key: string): any {
-    const len = path.length
+  if (key.length === 0)
-    let obj = doc as any
+    return doc
-    for (let i=0; i<len; i++){
+  const path = key.split('.')
-      obj = obj?.[path[i]]
+  const len = path.length
-    }
+  let obj = doc as any
-    return obj
+  for (let i=0; i<len; i++){
+    obj = obj?.[path[i]]
   }
+  return obj
+}
 
-  const client = getClient()
+const client = getClient()
+
+function onClick(object: Doc) {
+  showModal(open, { object, space })
+}
 
-  function onClick(object: Doc) {
-    showModal(open, { object, space })
-  }
 </script>
 
 {#await buildModel(client, _class, config, options)}
  <Loading/>
 {:then model}
-<div class="container">
+<table class="table-body">
-  <ScrollBox vertical stretch noShift>
+  <tr class="tr-head">
-    <table class="table-body">
+    {#each model as attribute}
-      <thead>
+      <th><Label label = {attribute.label}/></th>
-        <tr class="tr-head">
+    {/each}
-          {#each model as attribute}
+  </tr>
-            <th><Label label = {attribute.label}/></th>
+  {#if objects}
-          {/each}
+    {#each objects as object (object._id)}
-        </tr>
+      <tr class="tr-body" on:click={() => onClick(object)}>
-      </thead>
+      {#each model as attribute}
-      {#if objects}
+        <td><svelte:component this={attribute.presenter} value={getValue(object, attribute.key)}/></td>
-        <tbody>
+      {/each}
-          {#each objects as object (object._id)}
+      </tr>
-            <tr class="tr-body" on:click={() => onClick(object)}>
+    {/each}
-            {#each model as attribute}
+  {/if}
-              <td><svelte:component this={attribute.presenter} value={getValue(object, attribute.key)}/></td>
+</table>
-            {/each}
-            </tr>
-          {/each}
-        </tbody>
-      {/if}
-    </table>
-  </ScrollBox>
-</div>
 {/await}
 
 <style lang="scss">
-  .container {
+.table-body {
-    flex-grow: 1;
+  display: table;
-    position: relative;
+  border-collapse: collapse;
-    padding-bottom: 2.5rem;
 
-    &::before {
+  td {
-      position: absolute;
+    align-items: center;
-      content: '';
+    height: 4rem;
-      top: 2.5rem;
+    padding: .375rem 1.25rem;
-      bottom: 0;
+    color: var(--theme-content-accent-color);
-      width: 100%;
-      background-color: var(--theme-table-bg-color);
-      border-radius: 0 0 1.25rem 1.25rem;
-    }
   }
-
-  th, td {
-    padding: .5rem 1.5rem;
-    text-align: left;
-    &:first-child { padding-left: 2.5rem; }
-  }
-
   th {
+    align-items: center;
+    height: 3.125rem;
+    padding: 0 1.25rem;
+    font-weight: 500;
+    text-align: left;
+    color: var(--theme-content-trans-color);
+  }
+  .tr-head {
     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);
-    box-shadow: inset 0 -1px 0 0 var(--theme-bg-focused-color);
+    border-bottom: 1px solid var(--theme-bg-focused-color);
+    box-shadow: 0 1px 0 var(--theme-bg-focused-color);
+    z-index: 5;
   }
-
   .tr-body {
-    height: 3.75rem;
+    position: relative;
-    color: var(--theme-caption-color);
+    border-top: 1px solid var(--theme-bg-accent-hover);
-    border-bottom: 1px solid var(--theme-button-border-hovered);
+    &:nth-child(2) {
-    &:last-child { border-bottom: none; }
+      border-top: 1px solid transparent;
-    &:hover { background-color: var(--theme-table-bg-hover); }
+    }
+    &:last-child {
+      border-bottom: 1px solid transparent;
+    }
   }
+  .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>