phonograph/static/portal-table.css

@import "./expression-editor.css";

/* ======== Toolbar ======== */

.filter-menu {
  --button-background: var(--button-background--secondary);
  --button-border-color: var(--button-border-color--secondary);
  --button-color: var(--button-color--secondary);
}

/* ======== Layout ======== */

.table-viewer__layout {
  display: grid;
  grid-template:
    'table' 1fr
    'editor' max-content;
  height: 100%;
  width: 100%;
}

.table-viewer__table {
  display: grid;
  grid-area: table;
  grid-template:
    'headers' max-content
    'main' 1fr
    'inserter' max-content;
  height: 100%;
  outline: none;
  overflow: auto;
  width: 100%;
}

.table-viewer__headers {
  align-items: stretch;
  display: flex;
  grid-area: headers;
  /*
  Ensure that there will be enough space on the right for popovers to
  render without overflowing the container.
  */
  padding-right: 480px;
}

/* ======== Table Headers ======== */

.field-header,
.field-adder__header-lookalike {
  align-items: center;
  background: #0001;
  border: solid 1px #ccc;
  border-top: none;
  border-left: none;
  display: flex;
  flex: none;
  font-family: var(--default-font-family--data);
  height: 100%;
  justify-content: space-between;
  padding: 0.25rem;
  text-align: left;
}

.field-header .basic-dropdown__button {
  --button-background: transparent;
  --button-border-color: transparent;
  --button-color: var(--button-color--secondary);
  --button-shadow: none;
}

.field-header__label {
  padding: 4px;
}

.field-header__type-indicator {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 0;

  height: 2rem;
  width: 2rem;

  svg path {
    fill: currentColor;
  }
}

.field-header__popover:popover-open {
  left: anchor(left);
  top: anchor(bottom);
  padding: 1rem;
  position: absolute;
}

/* ======== Component: Field Adder ======== */

.field-adder {
  align-items: stretch;
  display: flex;
  height: 100%;
}

.field-adder__summary-buttons {
  align-items: center;
  display: flex;
}

.field-adder__header-lookalike:not(.field-adder__header-lookalike--visible) {
  display: none;
}

.field-adder__popover:popover-open {
  display: grid;
  font-family: var(--default-font-family);
  grid-template: "completions configs" 1fr / 1fr 2fr;
  left: anchor(left);
  position: absolute;
  top: anchor(bottom);
  width: 480px;
}

.field-adder__completions {
  align-items: stretch;
  border-right: solid 1px var(--default-border-color);
  grid-area: completions;
  display: flex;
  flex-direction: column;
  font-family: var(--default-font-family--data);
  justify-content: start;

  & > button {
    display: block;
    padding: 0.5rem;
    font-weight: normal;
    text-align: left;
    width: 100%;

    &:hover,
    &:focus,
    &[aria-selected="true"] {
      background: #0000001f;
    }
  }
}

.field-adder__configs {
  grid-area: configs;
  padding: var(--default-padding);
}

/* ======== Table Body ======== */

.table-viewer__main {
  grid-area: main;
  overflow-y: auto;
}

.table-viewer__row {
  align-items: stretch;
  display: flex;
  height: 2.25rem;
}

.table-viewer__cell {
  align-items: stretch;
  border: solid 1px var(--default-border-color);
  border-left: none;
  border-top: none;
  display: flex;
  flex: none;
  padding: 0;

  &:focus {
    outline: none;
  }

  .table-viewer__cell-container {
    align-items: center;
    display: flex;
    flex: none;
    user-select: none;
    width: 100%;

    &.table-viewer__cell-container--selected {
      background: #07f3;
    }

    &.table-viewer__cell-container--cursor {
      outline: 3px solid #37f;
      outline-offset: -2px;
    }
  }

  .table-viewer__cell-content {
    flex: 1;
    font-family: var(--default-font-family--data);

    &.table-viewer__cell-content--dropdown {
      overflow: hidden;
      padding: 0 8px;
    }

    &.table-viewer__cell-content--numeric {
      overflow: hidden;
      text-align: right;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 0 8px;
    }

    &.table-viewer__cell-content--text {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 0 8px;
    }

    &.table-viewer__cell-content--timestamp {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 0 8px;
    }

    &.table-viewer__cell-content--uuid {
      font-family: var(--default-font-family--mono);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 0 8px;
    }

    &.table-viewer__cell-content--null {
      align-items: center;
      color: #aaa;
      display: flex;
      font-family: var(--default-font-family--data);
      font-style: oblique;
      justify-content: center;
      padding: 0 4px;

      svg path {
        fill: currentColor;
      }
    }
  }
}

.table-viewer__notice {
  align-items: center;
  color: #888;
  display: flex;
  padding: 0 4px;

  svg path {
    fill: currentColor;
  }
}

.table-viewer__inserter {
  grid-area: inserter;
  margin-bottom: 2rem;

  .table-viewer__inserter-help {
    font-size: 1rem;
    font-weight: 300;
    margin: 8px;
    opacity: 0.5;
  }

  .table-viewer__inserter-main {
    align-items: stretch;
    display: flex;
    justify-items: flex-start;
  }

  .table-viewer__inserter-rows {
    .table-viewer__cell {
      border: dashed 1px var(--default-border-color);
      border-left: none;

      &:last-child {
        border-right: none;
      }
    }
  }

  .table-viewer__inserter-submit {
    align-items: center;
    border: dashed 1px var(--button-background--primary);
    border-bottom-right-radius: var(--default-border-radius--rounded-sm);
    border-top-right-radius: var(--default-border-radius--rounded-sm);
    color: var(--button-background--primary);
    display: flex;
    justify-content: center;
    padding: 0 var(--default-padding);

    svg path {
      fill: currentColor;
    }
  }
}

/* ======== Datum Editor ======== */

.datum-editor {
  border-top: solid 1px var(--default-border-color);
  display: flex;
  grid-area: editor;
  height: 6rem;

  .datum-editor__container {
    border-left: solid 4px transparent;
    display: grid;
    flex: 1;
    grid-template:
      'null-control value-control' max-content
      'helpers helpers' auto / max-content auto;

    &:has(:focus) {
      border-left-color: #07f;
    }
  
    &.datum-editor__container--incomplete {
      border-left-color: #f33;
    }
  }

  .datum-editor__type-selector {
    grid-area: type-selector;
  }

  .datum-editor__null-control {
    align-self: start;
    grid-area: null-control;
    padding: 12px;

    &.datum-editor__null-control--disabled {
      opacity: 0.75;
    }
  }

  .datum-editor__text-input {
    grid-area: value-control;
    font-family: var(--default-font-family--data);
    padding: 12px 8px;
  }

  .datum-editor__timestamp-inputs {
    align-items: center;
    display: flex;
    grid-area: value-control;
    justify-content: start;
  }

  .datum-editor__helpers {
    grid-area: helpers;
    overflow: auto;
  }

  .datum-editor__dropdown-options {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
    margin: 0;
    padding: 0 8px;
  }
}

/* ======== Data Display ======== */

.dropdown-option-badge {
  --badge-color-base: #f99;
  --badge-hue-rot: 0;
  --badge-background: oklch(from var(--badge-color-base) l c calc(h + var(--badge-hue-rot)));
  
  background: var(--badge-background);
  border-radius: 999px;
  color: oklch(from var(--badge-background) calc(l * 0.3) c h);
  display: block;
  width: max-content;

  &:not(:has(button)) {
    padding: 6px 12px;
  }

  &.dropdown-option-badge--red {
    --badge-hue-rot: 50;
  }

  &.dropdown-option-badge--orange {
    --badge-hue-rot: 50;
  }

  &.dropdown-option-badge--yellow {
    --badge-hue-rot: 100;
  }

  &.dropdown-option-badge--green {
    --badge-hue-rot: 150;
  }

  &.dropdown-option-badge--blue {
    --badge-hue-rot: 200;
  }

  &.dropdown-option-badge--indigo {
    --badge-hue-rot: 250;
  }

  &.dropdown-option-badge--violet {
    --badge-hue-rot: 300;
  }

  button {
    color: inherit;
    padding: 6px 12px;
  }
}