Update JSON, boolean and date cells to respect row height

2023-04-17 14:50:36 +01:00 · 2023-04-17 14:50:36 +01:00 · 0cede10867
parent d38cf2d7f0
commit 0cede10867
10 changed files with 47 additions and 49 deletions
--- a/packages/frontend-core/src/components/sheet/cells/BooleanCell.svelte
+++ b/packages/frontend-core/src/components/sheet/cells/BooleanCell.svelte
@ -35,7 +35,7 @@

 <style>
  .boolean-cell {
-    padding: 0 var(--cell-padding);
+    padding: 2px var(--cell-padding);
    pointer-events: none;
  }
  .boolean-cell.editable {
--- a/packages/frontend-core/src/components/sheet/cells/DateCell.svelte
+++ b/packages/frontend-core/src/components/sheet/cells/DateCell.svelte
@ -48,7 +48,7 @@

 <style>
  .container {
-    padding: 0 var(--cell-padding);
+    padding: var(--cell-padding);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
@ -62,6 +62,7 @@
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
+    line-height: 20px;
  }
  .picker {
    position: absolute;
--- a/packages/frontend-core/src/components/sheet/cells/LongFormCell.svelte
+++ b/packages/frontend-core/src/components/sheet/cells/LongFormCell.svelte
@ -83,7 +83,7 @@
    -webkit-line-clamp: var(--content-lines);
    -webkit-box-orient: vertical;
    overflow: hidden;
-    line-height: 19px;
+    line-height: 20px;
  }
  textarea {
    padding: var(--cell-padding);
@ -101,7 +101,7 @@
    z-index: 1;
    border-radius: 2px;
    resize: none;
-    line-height: 19px;
+    line-height: 20px;
  }
  textarea.invertX {
    left: auto;
--- a/packages/frontend-core/src/components/sheet/cells/OptionsCell.svelte
+++ b/packages/frontend-core/src/components/sheet/cells/OptionsCell.svelte
@ -83,7 +83,9 @@
      {@const color = getOptionColor(val)}
      {#if color}
        <div class="badge text" style="--color: {color}">
-          {val}
+          <span>
+            {val}
+          </span>
        </div>
      {:else}
        <div class="text">
@ -131,9 +133,10 @@
    display: flex;
    flex-direction: row;
    justify-content: space-between;
-    align-items: stretch;
+    align-items: flex-start;
    align-self: stretch;
    flex: 1 1 auto;
+    overflow: hidden;
  }
  .container.editable:hover {
    cursor: pointer;
@ -142,12 +145,13 @@
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
-    align-items: center;
+    align-items: flex-start;
    flex: 1 1 auto;
-    width: 0;
-    gap: var(--cell-spacing);
+    grid-column-gap: var(--cell-spacing);
+    grid-row-gap: var(--cell-padding);
    overflow: hidden;
-    padding: 0 var(--cell-padding);
+    padding: var(--cell-padding);
+    flex-wrap: wrap;
  }
  .text {
    overflow: hidden;
@ -158,10 +162,20 @@
    flex: 0 0 auto;
  }
  .badge {
-    padding: 2px var(--cell-padding);
+    padding: 0 var(--cell-padding);
    background: var(--color);
    border-radius: var(--cell-padding);
    user-select: none;
+    display: flex;
+    align-items: center;
+    gap: var(--cell-spacing);
+    height: 20px;
+    max-width: 100%;
+  }
+  .badge span {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
  }
  .arrow {
    position: absolute;
@ -210,9 +224,6 @@
    gap: var(--cell-spacing);
    background-color: var(--cell-background-hover);
  }
-  .option:first-child {
-    flex: 0 0 calc(var(--row-height) - 1px);
-  }
  .option:hover,
  .option.focused {
    background-color: var(--spectrum-global-color-gray-200);
--- a/packages/frontend-core/src/components/sheet/cells/RelationshipCell.svelte
+++ b/packages/frontend-core/src/components/sheet/cells/RelationshipCell.svelte
@ -249,7 +249,7 @@
          placeholder={primaryDisplay ? `Search by ${primaryDisplay}` : null}
        />
      </div>
-      {#if searchResults}
+      {#if searchString && searchResults}
        <div class="info">
          {searchResults.length} row{searchResults.length === 1 ? "" : "s"} found
        </div>
@ -265,7 +265,9 @@
              on:mouseenter={() => (candidateIndex = idx)}
            >
              <div class="badge">
-                {row.primaryDisplay}
+                <span>
+                  {row.primaryDisplay}
+                </span>
              </div>
              {#if isRowSelected(row)}
                <Icon
@ -342,13 +344,16 @@
    background: var(--color);
    border-radius: var(--cell-padding);
    user-select: none;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: var(--cell-spacing);
    height: 20px;
+    max-width: 100%;
+  }
+  .badge span {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
  }
  .focused .badge span:hover {
    cursor: pointer;
--- a/packages/frontend-core/src/components/sheet/cells/TextCell.svelte
+++ b/packages/frontend-core/src/components/sheet/cells/TextCell.svelte
@ -75,7 +75,7 @@
    -webkit-line-clamp: var(--content-lines);
    -webkit-box-orient: vertical;
    overflow: hidden;
-    line-height: 19px;
+    line-height: 20px;
  }
  .number .value {
    -webkit-line-clamp: 1;
@ -91,6 +91,7 @@
    font-size: var(--cell-font-size);
    font-family: var(--font-sans);
    color: inherit;
+    line-height: 20px;
  }
  input:focus {
    outline: none;
--- a/packages/frontend-core/src/components/sheet/lib/constants.js
+++ b/packages/frontend-core/src/components/sheet/lib/constants.js
@ -4,7 +4,6 @@ export const MaxCellRenderWidthOverflow = 200
 export const ScrollBarSize = 8
 export const GutterWidth = 72
 export const DefaultColumnWidth = 200
-export const DefaultRelationshipColumnWidth = 360
 export const MinColumnWidth = 100
 export const SmallRowHeight = 36
 export const MediumRowHeight = 64
--- a/packages/frontend-core/src/components/sheet/stores/columns.js
+++ b/packages/frontend-core/src/components/sheet/stores/columns.js
@ -1,16 +1,6 @@
 import { derived, get, writable } from "svelte/store"
 import { cloneDeep } from "lodash/fp"
-import {
-  GutterWidth,
-  DefaultColumnWidth,
-  DefaultRelationshipColumnWidth,
-} from "../lib/constants"
-
-export const getDefaultColumnWidth = column => {
-  return column?.schema?.type === "link"
-    ? DefaultRelationshipColumnWidth
-    : DefaultColumnWidth
-}
+import { GutterWidth, DefaultColumnWidth } from "../lib/constants"

 export const createStores = () => {
  const columns = writable([])
@ -86,12 +76,10 @@ export const deriveStores = context => {
      // Copy over metadata
      if (column === $stickyColumn?.name) {
        newSchema[column].visible = true
-        newSchema[column].width =
-          $stickyColumn.width || getDefaultColumnWidth($stickyColumn)
+        newSchema[column].width = $stickyColumn.width || DefaultColumnWidth
      } else {
        newSchema[column].visible = $columns[index]?.visible ?? true
-        newSchema[column].width =
-          $columns[index]?.width || getDefaultColumnWidth($columns[index])
+        newSchema[column].width = $columns[index]?.width || DefaultColumnWidth
      }
    })

@ -155,9 +143,7 @@ export const initialise = context => {
        .map(field => ({
          name: field,
          schema: schema[field],
-          width:
-            schema[field].width ||
-            getDefaultColumnWidth({ schema: schema[field].type }),
+          width: schema[field].width || DefaultColumnWidth,
          visible: schema[field].visible ?? true,
          order: schema[field].order,
        }))
@ -195,12 +181,9 @@ export const initialise = context => {
    if (!existing && currentStickyColumn?.name === primaryDisplay) {
      existing = currentStickyColumn
    }
-    const defaultWidth = getDefaultColumnWidth({
-      schema: schema[primaryDisplay],
-    })
    stickyColumn.set({
      name: primaryDisplay,
-      width: schema[primaryDisplay].width || defaultWidth,
+      width: schema[primaryDisplay].width || DefaultColumnWidth,
      left: GutterWidth,
      schema: schema[primaryDisplay],
      idx: "sticky",
--- a/packages/frontend-core/src/components/sheet/stores/resize.js
+++ b/packages/frontend-core/src/components/sheet/stores/resize.js
@ -1,6 +1,5 @@
 import { writable, get, derived } from "svelte/store"
-import { getDefaultColumnWidth } from "./columns"
-import { MinColumnWidth } from "../lib/constants"
+import { MinColumnWidth, DefaultColumnWidth } from "../lib/constants"

 const initialState = {
  initialMouseX: null,
@ -98,16 +97,15 @@ export const deriveStores = context => {
  // Resets a column size back to default
  const resetSize = async column => {
    const $stickyColumn = get(stickyColumn)
-    const width = getDefaultColumnWidth(column)
    if (column.name === $stickyColumn?.name) {
      stickyColumn.update(state => ({
        ...state,
-        width,
+        width: DefaultColumnWidth,
      }))
    } else {
      columns.update(state => {
        const columnIdx = state.findIndex(x => x.name === column.name)
-        state[columnIdx].width = width
+        state[columnIdx].width = DefaultColumnWidth
        return [...state]
      })
    }
--- a/packages/frontend-core/src/components/sheet/stores/ui.js
+++ b/packages/frontend-core/src/components/sheet/stores/ui.js
@ -70,7 +70,7 @@ export const deriveStores = context => {

  const contentLines = derived(rowHeight, $rowHeight => {
    if ($rowHeight === LargeRowHeight) {
-      return 4
+      return 3
    } else if ($rowHeight === MediumRowHeight) {
      return 2
    }