@trebco/treb 23.6.2 → 25.0.0-rc1

package/treb-embed/style/layout.scss

@@ -0,0 +1,424 @@
+
+// legacy
+
+@import './grid.scss';
+@import './theme-defaults.scss';
+@import './dark-theme.scss';
+
+// not scoped to treb-layout, but has its own scope; also, 
+// no imports & relatively clean
+
+@import 'treb-charts/style/charts.scss';
+
+// relatively clean, also no imports
+
+@import './dialog.scss';
+@import './spinner.scss';
+
+// local, new (or scrubbed)
+
+@import './treb-icons.scss';
+@import './toolbar.scss';
+
+.treb-layout {
+
+  /*============================================================================
+   *
+   * Reset
+   * 
+   * Since we cannot use a shadow DOM, we're using this reset to start from
+   * a blank-ish slate. Using `revert` should reset styles back to the browser
+   * stylesheet (or user stylesheet, if anyone actually does that).
+   *
+   * Per MDN, "revert is just a value" -- so it can still be overridden by
+   * specificity. So it is possible for styles to leak in. We're encapsulating
+   * everything so there's not a lot of concern about leaking out. Once we are 
+   * three-four levels deep in specificity we probably don't need to worry too 
+   * much above stuff leaking in, so the first couple of layers should use 
+   * prefixed names just to be sure, and wrap up all the styles.
+   * 
+   * Known issues (WIP)
+   * 
+   * this reset breaks contenteditable on chrome, because it unsets the 
+   * css property "-webkit-user-modify", which should be "read-write".
+   *
+   * that's a nonstandard property which is no longer in use (?) but gets
+   * set by the contenteditable attribute. chrome/webkit is probably using 
+   * this internally to manage editability.
+   *
+   * it seems like the attribute should take priority over our reset. not sure 
+   * why it does not. in any event the fix _seems_ to be setting that property 
+   * on contenteditable elements. I say _seems_ because it is working, but we 
+   * should keep an eye out for stability issues. 
+   *
+   * it looks like there might be something similar happening on firefox
+   * because we lost the cursor (again -- what do they have against cursors?)
+   * needs some investigating.
+   *
+   *===========================================================================*/
+
+  all: revert;
+  box-sizing: border-box;
+
+  div, button, input, ul, ol, li, a, textarea {
+
+    // maybe this is being too aggressive. we could be a little 
+    // more specific about what we unset in order to avoid any 
+    // unexpected side effects.
+
+    all: revert;
+    box-sizing: border-box;
+
+  }
+
+  /**
+   * this is kind of a global property but we don't actually want
+   * to inherit from the page, so we should set a font explicitly
+   * here (in fact that should be the treb UI font).
+   */
+  button, input {
+    font: inherit;
+    color: inherit;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  /**
+   * fix for chrome (webkit?) 
+   */
+  [contenteditable] {
+    -webkit-user-modify: read-write;
+  }
+
+  // ---------------------------------------------------------------------------
+
+  color-scheme: var(--treb-color-scheme, unset);
+
+  font-family: $font-stack;
+
+  font-style: normal;
+  font-weight: normal;
+  // color: #333;
+  color: inherit;
+  font-size: 12pt;
+
+  // FIXME: use stack, var
+  // font: 14px sans-serif;
+  // color: #333;
+
+  height: 100%;
+  width: 100%;
+
+  position: relative;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  grid-template-columns: minmax(0, 1fr) auto;
+  // gap: 1em;
+
+  &[animate] {
+    .treb-layout-header {
+      transition: height var(--treb-sidebar-transition, .2s ease), 
+                  opacity var(--treb-sidebar-transition, .2s ease);
+    }    
+  }
+
+  .treb-layout-header {
+    grid-row: 1;
+    grid-column: 1/3;
+    height: 1px;
+    opacity: 0;
+  }
+
+  /**
+   * toolbar is visible when attribute is set
+   */
+  &[toolbar] {
+    .treb-layout-header {
+      height: 42px;
+      opacity: 1;
+    }
+  }
+
+  /**
+   * dialog is visible when attribute is set. when dialog 
+   * is visible, we want to fade all content -- including
+   * toolbar, which also uses opacity (above) so we need
+   * to out-specify
+   */
+  &[dialog] {
+
+    & > *, .treb-layout-header {
+      opacity: .6;
+    }
+
+    .treb-dialog-mask {
+      pointer-events: auto;
+      opacity: 1;
+    }
+
+  }
+
+  .treb-layout-spreadsheet {
+
+    grid-row: 2;
+    grid-column: 1;
+    position: relative;
+    z-index: 5;
+    display: flex;
+    flex-direction: row;
+    gap: 1em;
+    overflow: hidden;
+    transition: opacity .2s ease;
+
+    // FIXME: move up (or not needed?)
+    // line-height: normal;
+    // text-align: left;
+  
+  }
+
+  .treb-view {
+
+    position: relative;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: auto minmax(0, 1fr) auto;
+    overflow: hidden;
+    flex: 1 1 0px;
+      
+    .treb-spreadsheet-body {
+      box-shadow: 0 4px 6px -4px rgba(0, 0, 0, .4);
+    }
+
+    .treb-layout-resize-handle {
+      display: none;
+    }
+
+    &:last-of-type {
+
+      .treb-layout-resize-handle {
+        
+        display: block;
+        grid-area: 2/1/3/2; // overlap the grid body
+        justify-self: end;
+        align-self: end;
+
+        border: .5rem solid var(--treb-resize-handle-color, blue);
+        border-top-color: transparent;
+        border-left-color: transparent;
+
+        z-index: 20; // FIXME: use stack
+
+        width: 1rem;
+        height: 1rem;
+
+        cursor: nw-resize;
+
+      }
+    }
+
+  }
+
+  /*
+  .treb-layout-resize-container {
+    overflow: hidden;
+    position: relative;
+    display: flex;
+    box-shadow: 0 4px 6px -4px rgba(0, 0, 0, .4);
+    flex-grow: 1;
+  }
+  */
+
+  &[animate] {
+    .treb-layout-sidebar {
+      transition: width var(--treb-sidebar-transition, .2s ease), 
+                opacity var(--treb-sidebar-transition, .2s ease);
+    }
+  }
+
+  .treb-layout-sidebar {
+
+    grid-row: 2;
+    grid-column: 2;
+
+    padding-top: 1em;
+    grid-row: 2;
+    grid-column: 2;
+    display: flex;
+    flex-direction: column;
+    gap: .75em;
+    justify-content: flex-start;
+    overflow: hidden;
+    width: 2.5rem;
+
+    padding-top: 3em;
+    width: 3em;
+
+    align-items: center;
+
+  }
+
+  &[collapsed] {
+    .treb-layout-sidebar {
+      width: 0px;
+      opacity: 0;
+    }
+
+    .treb-toggle-sidebar-button {
+    
+        border-color: var(--treb-toolbar-border-color, var(--treb-ui-border-color, rgb(209, 213, 219)));
+        border-right-color: var(--treb-toolbar-button-background, transparent);
+        right: 0px;
+        border-top-right-radius: 0px;
+        border-bottom-right-radius: 0px;
+        &::after {
+          mask-image: var(--treb-sidebar-icon-chevron-left);
+          -webkit-mask-image: var(--treb-sidebar-icon-chevron-left);
+        }
+        background: var(--treb-toolbar-button-background, #fff);
+    
+    }
+  }
+
+  .treb-layout-sidebar > button, .treb-toggle-sidebar-button {
+
+    all: initial;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    background: transparent;
+
+    &::after {
+      display: block;
+      height: 24px;
+      width: 24px;
+      content: '';
+      background: #ccc; // FIXME
+      mask-position: center;
+      -webkit-mask-position: center;
+      mask-repeat: no-repeat;
+      -webkit-mask-repeat: no-repeat;
+      transition: background-color 0.1s ease;
+      mask-image: var(--treb-mask-image);
+      -webkit-mask-image: var(--treb-mask-image);
+    }
+  
+    &:hover::after {
+      background: #666;
+    }
+
+    &[data-command=recalculate] {
+      --treb-mask-image: var(--treb-sidebar-icon-reset);
+    }
+
+    &[data-command=toggle-toolbar] {
+      --treb-mask-image: var(--treb-sidebar-icon-toolbar);
+    }
+
+    &[data-command=revert] {
+      --treb-mask-image: var(--treb-sidebar-icon-revert);
+    }
+
+    &[data-command=export-xlsx] {
+      --treb-mask-image: var(--treb-sidebar-icon-export);
+    }
+
+    &[data-command=about] {
+      --treb-mask-image: var(--treb-sidebar-icon-about);
+    }
+   
+  }
+
+  .treb-toggle-sidebar-button {
+
+    position: absolute;
+    right: .5rem;
+    bottom: 6rem;
+    background: transparent;
+    border: 0;
+    border: 1px solid transparent;
+    height: 24px;
+    width: 24px;
+
+    right: calc(1.5rem - 12px);
+
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    margin: 0;
+
+    z-index: $z-index-note;
+
+    &::after {
+      height: 12px;
+      width: 12px;
+      mask-image: var(--treb-sidebar-icon-chevron-right);
+      -webkit-mask-image: var(--treb-sidebar-icon-chevron-right);
+    }
+
+  }
+
+  /*
+  .treb-resize-handle {
+
+    // FIXME: use the stack, but (at least firefox) needs a z-index on this
+    z-index: 20;
+
+    border: .5rem solid var(--treb-resize-handle-color, blue);
+    border-top-color: transparent;
+    border-left-color: transparent;
+    position: absolute;
+    bottom: 0px;
+    right: 0px;
+    cursor: nw-resize;
+  
+    // the opacity change is just annoying, don't bother
+    / *
+    opacity: .35;
+    transition: opacity var(--treb-resize-transition, .1s ease-in-out);
+    &:hover, &.retain-opacity {
+      opacity: 1;
+    }
+    * /
+  
+    &.disabled {
+      display: none;
+    }
+  
+  }
+  */
+
+}
+
+// these are (atm) outside of the container because we want them
+// to be able to float over any outside content as well... what's the
+// rule with that? something about stacking contexts? of course we're
+// always goint to be fighting z-indexes.
+//
+// ...possible to use a dialog element? TODO: investigate...
+//
+
+.treb-resize-rect {
+  all: initial;
+  z-index: 9998; // ugh
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  border: 1px dotted var(--treb-resize-frame-color, blue);
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.treb-resize-mask {
+  all: initial;
+  z-index: 9999; // ugh
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  width: 100vw;
+  height: 100vh;
+}

package/treb-embed/style/mouse-mask.scss

@@ -0,0 +1,67 @@
+/*
+ * 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 {
+
+  /**
+   * event mask for mouse drag. currently this is added _within_ node 
+   * structure, although it covers the whole viewport. we should share
+   * with the mouse mask we are using for resize.
+   */
+  .treb-mouse-mask {
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    background: transparent;
+    z-index: $z-index-mask;
+    display: none;
+
+    /** style is attached when drag operation is a resize */
+    &.column-resize {
+      cursor: col-resize;
+    }
+
+    /** style is attached when drag operation is a resize */
+    &.row-resize {
+      cursor: row-resize;
+    }
+
+    /** when resizing a grid selection via the nub */
+    &.nub-select {
+      cursor: crosshair;
+    }
+
+    /** for moving annotations */
+    &.move {
+      cursor: move;
+    }
+
+    /** for resizing annotations */
+    &.nw-resize {
+      cursor: nw-resize;
+    }
+
+  }
+
+}
+

package/treb-embed/style/note.scss

@@ -0,0 +1,92 @@
+/*
+ * 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 {
+
+  // are these exactly the same? clearly we copied-and-pasted
+  // at first. seems like we could consolidate.
+
+  .treb-note {
+
+    position: fixed;
+    padding: 7px 10px;
+    border-radius: 2px;
+    box-shadow: $default-box-shadow;
+    z-index: $z-index-note;
+    line-height: normal;
+
+    top: 100px;
+    left: 100px;
+
+    max-width: 15em; /* which em? seems to be way too large */
+    min-width: 15em;
+
+    opacity: 0;
+    transition: opacity .2s;
+
+    /* themeable properties */
+
+    font-family: $font-stack;
+
+    border: 1px solid var(--treb-note-border-color, var(--treb-ui-border-color, #ddd));
+    color: var(--treb-note-color, #333);
+    background: var(--treb-note-background, #fff);
+    font-size: 10.5pt;
+
+    white-space: pre-line;
+
+  }
+
+  .treb-hover-title {
+
+    position: fixed;
+    padding: 7px 10px;
+    border-radius: 2px;
+    box-shadow: $default-box-shadow;
+    z-index: $z-index-note;
+    line-height: normal;
+
+    top: 100px;
+    left: 100px;
+
+    /* max-width: 15em; / * which em? seems to be way too large */
+    min-width: 10em;
+
+    opacity: 0;
+    transition: opacity .2s;
+
+    /* themeable properties */
+
+    font-family: $font-stack; /* can't we inherit? ... */
+
+    border: 1px solid var(--treb-note-border-color, var(--treb-ui-border-color, #ddd));
+    color: var(--treb-note-color, #333);
+    background: var(--treb-note-background, #fff);
+
+    font-size: 10.5pt;
+
+    white-space: pre-line;
+
+    pointer-events: none;
+
+  }
+
+}

package/treb-embed/style/overlay-editor.scss

@@ -0,0 +1,102 @@
+/*
+ * 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-grid {
+
+    // rewrite of the overlay structure. much simpler. 
+    // 
+    // the aim is to bottom-justify the editor in a cell, and then 
+    // left/right/center justify based on cell style. all that seems
+    // to work with this new structure, and we were able to drop the
+    // extra node.
+    //
+    // there is one layout issue in firefox having to do with the caret
+    // in an empty contenteditable cell. we're adding a zero-width space
+    // in a ::before pseudoelement, which seems to fix. this should only
+    // be necessary when the edit node is empty, but I can't get firefox
+    // to do :empty::before (could be I have the syntax wrong).
+
+    // going to bring back the extra node, so we can have a background
+    // that crosses the selection box...
+
+    .treb-overlay-container {
+
+      padding: 0;
+      margin: 0;
+
+      /* gets positioned to the rect */
+      position: absolute;
+
+      /* gets set on edit, along with pointer-events */
+      opacity: 0;
+
+      /* probably unecessary */
+      outline: none;
+
+      z-index: $z-index-cell-editor;
+
+      &.align-right .treb-overlay-inset {
+        right: 0px;
+        text-align: right;
+        padding-right: 3px;
+      }
+
+      &.align-center .treb-overlay-inset {
+        text-align: center;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
+
+    }
+
+    .treb-overlay-inset {
+
+      padding: 0;
+      margin: 0;
+      padding: 0 4px;
+
+      position: absolute;
+      height: 100%;
+      min-width: 100%;
+
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+    }
+
+    .treb-overlay-editor {
+      outline: none;
+      white-space: nowrap;
+      position: relative;
+      // -webkit-user-modify: read-write;
+    }
+
+    /** fix for firefox layout bug */
+    .treb-overlay-editor.firefox::before {
+      content: '\200B';
+    }
+
+  }
+
+}