@trebco/treb 23.6.2 → 25.0.0-rc1

package/treb-embed/style/dropdown-select.scss

@@ -0,0 +1,101 @@
+/*
+ * This file is part of TREB.
+ *
+ * TREB is free software: you can redistribute it and/or modify it under the 
+ * terms of the GNU General Public License as published by the Free Software 
+ * Foundation, either version 3 of the License, or (at your option) any 
+ * later version.
+ *
+ * TREB is distributed in the hope that it will be useful, but WITHOUT ANY 
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS 
+ * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more 
+ * details.
+ *
+ * You should have received a copy of the GNU General Public License along 
+ * with TREB. If not, see <https://www.gnu.org/licenses/>. 
+ *
+ * Copyright 2022-2023 trebco, llc. 
+ * info@treb.app
+ * 
+ */
+
+.treb-layout {
+
+  .treb-dropdown-caret {
+
+    display: none;
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    
+    background: var(--treb-dropdown-caret-background, #fff);
+    border: 1px solid var(--treb-dropdown-caret-border-color, #ccc);
+    border-radius: 2px;
+
+    box-shadow: $default-box-shadow;
+    z-index: $z-index-dropdown-caret;
+
+    & path {
+      fill: none;
+      stroke: var(--treb-dropdown-caret-color, #444);
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-width: 2;
+    }
+
+  }
+
+  .treb-dropdown-list {
+
+    position: absolute;
+    display: none;
+    box-shadow: $default-box-shadow;
+    z-index: $z-index-dropdown-caret;
+    background: var(--treb-dropdown-background, #fff);
+    font-size: 10pt;
+    color: var(--treb-dropdown-color, inherit);
+    border: 1px solid var(--treb-dropdown-border-color, unset);
+
+    & div {
+      padding: 2px;
+      cursor: default;
+    }  
+
+    & div.selected {
+      background: var(--treb-dropdown-selected-background, #555);
+      color: var(--treb-dropdown-selected-color, #fff);
+    }
+
+    text-align: left;
+
+    max-height: 10em;
+    overflow-y: auto;
+    outline: none;
+
+  }
+
+  .treb-dropdown-caret.active {
+    background: var(--treb-dropdown-caret-active-background, #eee);
+
+    & + .treb-dropdown-list {
+      display: block;
+    }
+
+  }
+
+  /**
+   * FIXME: this should move, it's used in dropdowns but it 
+   * is more general (should be used for all errors)
+   */
+  .treb-error-highlight {
+    transition: opacity 0.15s ease-in-out;
+    background: rgba(255, 0, 0, .25);
+    opacity: 0;
+    pointer-events: none;
+    position: absolute;
+    z-index: $z-index-error-highlight;
+
+  }
+
+}
+

package/treb-embed/style/formula-bar.scss

@@ -0,0 +1,193 @@
+/*
+ * This file is part of TREB.
+ *
+ * TREB is free software: you can redistribute it and/or modify it under the 
+ * terms of the GNU General Public License as published by the Free Software 
+ * Foundation, either version 3 of the License, or (at your option) any 
+ * later version.
+ *
+ * TREB is distributed in the hope that it will be useful, but WITHOUT ANY 
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS 
+ * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more 
+ * details.
+ *
+ * You should have received a copy of the GNU General Public License along 
+ * with TREB. If not, see <https://www.gnu.org/licenses/>. 
+ *
+ * Copyright 2022-2023 trebco, llc. 
+ * info@treb.app
+ * 
+ */
+
+.treb-layout {
+
+    .treb-formula-bar {
+
+      grid-area: 1/1/2/2;
+      
+      // min-height: 3em; // FIXME
+
+      display: flex;
+      flex-direction: row;
+      text-align: left;
+
+      &[hidden] {
+        display: none;
+      }
+
+      padding: 0px 2px 12px 2px; // FIXME: use ems?
+
+      max-width: 100%;
+      overflow-x: hidden;
+      /* last ditch for IE11 */
+
+      /** label for selection address */
+      .treb-address-label {
+
+        width: 95px;
+        min-width: 95px;
+
+        min-height: 1.5em;
+        height: 1.75em;
+        border: 1px solid var(--treb-formula-bar-border-color, var(--treb-ui-border-color, #ccc));
+        border-radius: 2px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding-left: 3px;
+
+        margin-right: 6px;
+
+        &>div {
+          outline: none;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+
+      .expand-button {
+        background: transparent;
+        border: 0;
+        border-radius: 2px;
+        margin-left: 2px;
+        padding: 1px;
+        outline: none;
+        height: 1.75em;
+
+        &::after {
+          content: ' ';
+          border: 5px solid transparent;
+          position: relative;
+          display: inline-block;
+          border-top-color: #999;
+          padding: 0;
+          margin: 0;
+          top: -6px;
+          transition: transform .15s ease;
+        }
+      }
+
+      &[expanded] {
+        .expand-button::after {
+          transform: rotate(180deg) translateY(6px);
+        }
+      }
+
+      .treb-editor-container {
+        border: 1px solid var(--treb-formula-bar-border-color, var(--treb-ui-border-color, #ccc));
+        
+        border-radius: 2px;
+        flex-grow: 1;
+
+        height: 1.75em;
+
+        display: flex;
+        min-width: 0px;
+        flex-direction: column;
+        justify-content: center;
+
+      }
+
+      &[expanded] {
+        .treb-editor-container {
+          transition: height .1s ease-in-out;
+          height: 4.5em;
+
+          &>div {
+            overflow-y: auto;
+          }
+        }
+      }
+
+      .treb-editor-container>div {
+        width: 100%;
+        margin: 2px;
+        outline: none;
+        overflow-y: hidden;
+        overflow-x: hidden;
+
+        /** 
+         * 1.35 is better on safari, seems like a wash on windows.
+         * can we browser-limit this? (...)
+         */
+        line-height: 1.35;
+        /* normal; */
+
+        flex-grow: 1;
+        /* keeps content at the top */
+        min-height: 1em;
+
+
+
+        /* I don't like this, let's figure out a better way w/ wrapping */
+
+        /**
+         * FIXME: we're using this for a single-line formula, but
+         * it needs to come out for multiline (if we do that).
+         */
+
+        /*
+        white-space: nowrap;
+        text-overflow: ellipsis;
+
+        &:focus {
+          text-overflow: clip;
+        }
+        */
+
+      }
+
+      /** f(x) button, optional */
+      .formula-button {
+        border: 1px solid #ccc;
+        border-radius: 2px;
+        margin-left: 6px;
+        height: 1.75em;
+        overflow: hidden;
+        white-space: nowrap;
+
+        .text-1 {
+          font-style: italic;
+
+          &:after {
+            content: 'f';
+          }
+
+          padding-right: .1em;
+        }
+
+        .text-2 {
+          font-size: .7em;
+
+          &:after {
+            content: '(x)';
+          }
+        }
+
+      }
+    }
+
+  
+
+}

package/treb-embed/style/grid.scss

@@ -0,0 +1,374 @@
+/*
+ * This file is part of TREB.
+ *
+ * TREB is free software: you can redistribute it and/or modify it under the 
+ * terms of the GNU General Public License as published by the Free Software 
+ * Foundation, either version 3 of the License, or (at your option) any 
+ * later version.
+ *
+ * TREB is distributed in the hope that it will be useful, but WITHOUT ANY 
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS 
+ * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more 
+ * details.
+ *
+ * You should have received a copy of the GNU General Public License along 
+ * with TREB. If not, see <https://www.gnu.org/licenses/>. 
+ *
+ * Copyright 2022-2023 trebco, llc. 
+ * info@treb.app
+ * 
+ */
+
+// sass vars only
+
+@import 'z-index.scss';
+@import 'defaults.scss';
+
+// clean, no imports (but use sass vars)
+
+@import 'mouse-mask.scss';
+@import 'note.scss';
+@import 'table.scss';
+@import 'tooltip.scss';
+@import 'dropdown-select.scss';
+@import 'autocomplete.scss';
+@import 'formula-bar.scss';
+@import 'tab-bar.scss';
+@import 'overlay-editor.scss';
+
+.treb-layout {
+
+
+  /* 
+    * new: we need the rendering buffer to inherit font size. so 
+    * we add it as a child of contents, but it's not displayed.
+    * still seems to paint OK.
+    */
+  .treb-buffer-canvas {
+    position: absolute;
+    display: none;
+  }
+
+  .treb-spreadsheet-body {
+    grid-area: 2/1/3/2;
+    -webkit-overflow-scrolling: touch;
+    -webkit-tap-highlight-color: transparent;
+    overflow: hidden;
+    display: flex;
+    position: relative;
+    z-index: 1;
+  }
+
+  .treb-grid {
+
+    flex-grow: 1;
+    order: 2;
+    position: relative;
+    overflow: scroll;
+    -webkit-overflow-scrolling: touch;
+    -webkit-tap-highlight-color: transparent;
+    outline: none;
+
+    // --- merging from old (split) layout ---
+
+    display: grid;
+    grid-template-columns: 100px auto;
+    grid-template-rows: 20px auto;
+
+
+    .tile-cover {
+
+      /** specific layout for main grid cover */
+      &.grid-cover {
+        grid-area: 2/2/3/3;
+      }
+
+      /** specific layout for column header cover */
+      &.column-header-cover {
+        grid-area: 1/2/2/3;
+        position: -webkit-sticky;
+        position: sticky;
+        top: 0px;
+      }
+
+      /** specific layout for row header cover */
+      &.row-header-cover {
+        grid-area: 2/1/3/2;
+        position: -webkit-sticky;
+        position: sticky;
+        left: 0px;
+      }
+    }
+
+    /** selection stacks over the grid but under the cover */
+    .treb-grid-selection {
+      grid-area: 1/1/2/2;
+    }
+
+    /** corner node to cover headers as they scroll across/down */
+    .treb-corner {
+      grid-area: 1/1/2/2;
+      position: -webkit-sticky;
+      position: sticky;
+    }
+
+    /** contains row header tiles */
+    .treb-left-header {
+      grid-area: 2/1/3/2;
+      position: -webkit-sticky;
+      position: sticky;
+      display: grid;
+      grid-template-columns: auto;
+      grid-template-rows: auto;
+    }
+
+    /** contains column header tiles */
+    .treb-top-header {
+      grid-area: 1/2/2/3;
+      position: -webkit-sticky;
+      position: sticky;
+      display: grid;
+      grid-template-columns: auto;
+      grid-template-rows: auto;
+    }
+
+    /** contains main grid tiles */
+    .treb-contents {
+      grid-area: 2/2/3/3;
+      display: grid;
+      grid-template-columns: auto;
+      grid-template-rows: auto;
+    }
+
+
+    // ---
+
+    &.safari {
+
+      // WTF is this stuff?
+
+      &::-webkit-scrollbar {
+        -webkit-appearance: none;
+        width: 7px;
+        height: 7px;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        border-radius: 4px;
+        background-color: rgba(0, 0, 0, .25);
+        -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
+      }
+
+    }
+
+    canvas {
+      border: 0;
+      margin: 0;
+      padding: 0;
+      background: transparent;
+    }
+
+    .nub-select {
+      cursor: crosshair;
+    }
+
+    .link-pointer {
+      cursor: pointer;
+    }
+
+    .mock-selection-node {
+      background: red;
+      position: fixed;
+      left: -100px;
+      top: -100px;
+    }
+
+    /** covers for canvas nodes to intercept events */
+    .tile-cover {
+      background: transparent;
+      position: relative;
+      z-index: $z-index-tile-cover;
+
+      /** specific layout for column header cover */
+      &.column-header-cover {
+
+        /** style is attached when mousing over a column boundary */
+        &.resize {
+          cursor: col-resize;
+        }
+
+        z-index: $z-index-header-tile-cover;
+      }
+
+      /** specific layout for row header cover */
+      &.row-header-cover {
+
+        /** style is attached when mousing over a row boundary */
+        &.resize {
+          cursor: row-resize;
+        }
+
+        z-index: $z-index-header-tile-cover;
+      }
+
+    }
+
+    .treb-annotation-container,
+    .frozen-annotation-container {
+      position: absolute;
+      top: 0px;
+      left: 0px;
+
+      .annotation {
+        position: absolute;
+        overflow: hidden;
+        pointer-events: auto;
+        background: rgba(255, 255, 255, .5);
+        border: 1px solid #999;
+        z-index: 1;
+
+        .annotation-content {
+          position: absolute;
+          top: 0px;
+          left: 0px;
+          height: 100%;
+          width: 100%;
+          font-family: inherit;
+          font-size: inherit;
+          z-index: 1;
+        }
+
+        .annotation-move-target {
+          position: absolute;
+          z-index: 2;
+          cursor: move;
+          top: 0px;
+          left: 0px;
+          height: 10%;
+          min-height: 14px;
+          width: 100%;
+        }
+
+        .annotation-resize-target {
+          position: absolute;
+          z-index: 3;
+          cursor: nwse-resize;
+          bottom: 0px;
+          right: 0px;
+          width: 10%;
+          height: 10%;
+          min-height: 14px;
+          min-width: 14px;
+        }
+
+        &:focus,
+        &.retain-focus,
+        &.clone-focus {
+          // outline: 2px solid lightblue;
+          // box-shadow: 0 0 0 3px #0ea5e954;
+          box-shadow: 0px 0px 0px 3px rgba(14, 165, 233, 0.33); // IE can't handle RGBA hex
+        }
+
+      }
+
+      /** what is this? */
+      .move-buffer {
+        position: absolute;
+        border: 1px solid red;
+        height: 10%;
+        top: 0px;
+        width: 100%;
+        left: 0px;
+        cursor: move;
+      }
+
+      z-index: $z-index-annotations;
+      pointer-events: none;
+    }
+
+    /** selection stacks over the grid but under the cover */
+    .treb-grid-selection {
+      background: transparent;
+      position: absolute;
+      z-index: $z-index-grid-selection;
+      -moz-transform: scale(1); // firefox anti-blur
+    }
+
+    /** separate selection node for frozen rows/columns (needs different stacking) */
+    .frozen-selection {
+
+      /* background: transparent; */
+      transition: background .33s;
+
+      position: absolute;
+      z-index: $z-index-frozen-selection;
+      overflow: hidden; // needed for IE11 (put in legacy?) 
+      -moz-transform: scale(1); // firefox anti-blur
+      pointer-events: none;
+
+      &.frozen-selection-rows {
+        border-bottom: 1px solid transparent;
+      }
+
+      &.frozen-selection-columns {
+        border-right: 1px solid transparent;
+      }
+
+    }
+
+    /** separate annotation node for frozen row/column/corner */
+    .frozen-annotation-container {
+
+      position: absolute;
+      top: 0px;
+      left: 0px;
+      overflow: hidden;
+      width: 100%;
+      height: 100%;
+
+    }
+
+    /**
+     * corner node to cover headers as they scroll across/down. this is now
+     * used for freeze panes; row/column headers are rendered in the corner
+     * and in the case of both frozen rows and columns, the fixed bit is
+     * rendered to the corner.
+     */
+    .treb-corner {
+
+      top: 0px;
+      left: 0px;
+      z-index: $z-index-corner;
+
+      canvas {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        pointer-events: none;
+      }
+
+    }
+
+    /** contains row header tiles */
+    .treb-left-header {
+      left: 0px;
+      z-index: $z-index-headers;
+      pointer-events: none;
+    }
+
+    /** contains column header tiles */
+    .treb-top-header {
+      top: 0px;
+      z-index: $z-index-headers;
+      pointer-events: none;
+    }
+
+    /** contains main grid tiles */
+    .treb-contents {
+      height: 2000px;
+      width: 2000px;
+    }
+
+  }
+
+}