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,11 +15,12 @@
 -->
 
 <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 { Label, showModal, Loading } from '@anticrm/ui'
 import type { AnyComponent } from '@anticrm/ui'
 
 import { createQuery } from '@anticrm/presentation'
@@ -52,23 +53,19 @@
 function onClick(object: Doc) {
   showModal(open, { object, space })
 }
+
 </script>
 
 {#await buildModel(client, _class, config, options)}
  <Loading/>
 {:then model}
-<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}
@@ -76,52 +73,59 @@
       {/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>