wunderbaum 0.0.2 → 0.0.5

package/src/wunderbaum.scss

@@ -11,8 +11,11 @@ $error-color: #b5373b;
 $node-text-color: #56534c;
 $bg-highlight-color: #26a0da;
 $header-color: #dedede;
-$alternate-row-color: #fcfcfc;
-$alternate-row-color-even: #f7fcfe;
+$background-color: white;
+$alternate-row-color: #f7f7f7; // #fcfcfc;
+$alternate-row-color-hover: #f3f3f3; //#f7fcfe;
+$focus-border-color: #275dc5;
+
 // derived
 $border-color: $node-text-color;
 $drop-source-color: adjust-color($node-text-color, $lightness: 50%);
@@ -22,14 +25,12 @@ $error-background-color: adjust-color($error-color, $lightness: 45%);
 // @debug $dim-color;
 $hover-color: adjust-color($bg-highlight-color, $lightness: 48%); // #f7f7f7;
 $hover-border-color: $hover-color;
-$focus-border-color: #969da3;
 $grid-color: #dedede;
 $active-color: #e5f3fb;
 $active-cell-color: $bg-highlight-color;
 $active-border-color: #70c0e7;
 $active-hover-color: #dceff8;
 $active-hover-border-color: $bg-highlight-color;
-$background-color: #fcfcfc;
 $active-column-color: $hover-color;
 $active-header-column-color: adjust-color($header-color, $lightness: -10%);
 // @debug $active-header-column-color;
@@ -60,6 +61,7 @@ $level-rainbow: rgba(255, 255, 232, 1), rgba(240, 255, 240, 1),
 div.wunderbaum {
   box-sizing: border-box;
   height: 100%; // fill parent container
+  background-color: $background-color;
   margin: 0;
   padding: 0;
 
@@ -67,23 +69,64 @@ div.wunderbaum {
   font-size: 14px;
 
   color: $node-text-color;
-  border: 1px solid $border-color;
-  overflow: hidden; // avoid unwanted effects when auto-resizing
+  border: 2px solid $border-color;
+  border-radius: 4px;
+  background-clip: content-box; // Keep color outside rounded borders?
+  // overflow: hidden; // avoid unwanted effects when auto-resizing
+  overflow-x: auto;
+  overflow-y: scroll;
 
   // Focus border is generated by the browsers per default:
-  // &:focus,
-  // &:focus-within {
-  //   border-color: $active-border-color;
-  // }
+  &:focus,
+  &:focus-within {
+    border-color: $focus-border-color;
+    // outline-style: none;
+  }
+
+  &.wb-disabled {
+    opacity: 0.7;
+    pointer-events: none;
+  }
 
   div.wb-scroll-container {
     position: relative;
-    overflow: auto;
+    // overflow: auto;
     // scroll-behavior: smooth;
     min-height: 4px;
     // height: calc(100% - #{$header-height});  // didn't work. Using JS instead
   }
 
+  /* --- FIXED-COLUMN --- */
+
+  div.wb-header {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+  }
+
+  div.wb-header,
+  div.wb-scroll-container {
+    overflow: unset;
+  }
+
+  // }
+
+  /* Fixed column must be opaque, i.e. have the bg color set.*/
+  &.wb-fixed-col {
+    div.wb-header {
+      span.wb-col:first-of-type {
+        background-color: $header-color;
+      }
+    }
+
+    span.wb-col:first-of-type {
+      position: sticky;
+      left: 0;
+      z-index: 1;
+      background-color: $background-color;
+    }
+  }
+
   // --- Header and node list ---
   div.wb-row {
     position: absolute;
@@ -95,7 +138,7 @@ div.wunderbaum {
 
   // --- Node List Only ---
 
-  // Dimm some colors if tree has no focus
+  // Dim some colors if tree has no focus
   &:not(:focus-within),
   &:not(:focus) {
     div.wb-node-list div.wb-row {
@@ -103,54 +146,89 @@ div.wunderbaum {
       &.wb-selected {
         background-color: grayscale($active-color);
         border-color: grayscale($active-border-color);
+
         &:hover {
           background-color: grayscale($active-hover-color);
         }
       }
     }
   }
+  &.wb-alternate div.wb-node-list {
+    div.wb-row:nth-of-type(even):not(.wb-active):not(.wb-selected) {
+      background-color: $alternate-row-color;
+
+      &:hover {
+        background-color: $alternate-row-color-hover;
+      }
+    }
+  }
+
   div.wb-node-list {
     div.wb-row {
       &:hover {
         background-color: $hover-color;
       }
+
       &.wb-active,
       &.wb-selected {
         background-color: $active-color;
+
         // border-color: $active-border-color;
         &:hover {
           background-color: $active-hover-color;
           // border-color: $active-hover-border-color;
         }
       }
+
       &.wb-focus:not(.wb-active) {
         border-style: dotted;
         border-color: $active-border-color;
       }
+
       &.wb-active {
         // background-color: $active-hover-color;
         border-style: solid;
         border-color: $active-border-color;
+
         &:hover {
           // background-color: $active-hover-color;
           border-color: $active-hover-border-color;
         }
       }
+
       &.wb-loading {
         font-style: italic;
       }
-      &.wb-dirty,
-      .wb-col.wb-dirty {
+
+      &.wb-busy,
+      i.wb-busy,
+      .wb-col.wb-busy {
         font-style: italic;
+
+        // For our stripe pattern, we want a frictionless transition at
+        // the bottom, when repeating in y-direction:
+        // h: height of row = 22px
+        // d: spacing between stripe pairs (white + gray)
+        // Calculate the spacing that will lead to a minimal quadratic
+        // pattern with a height of h pixels:
+        //
+        //     (2 * d)^2 = 2 * h^2
+        // =>  d = sqrt(2 * h^2) / 2
+        //       = 15.56px
+        // We use the half distance to get a finer stripe pattern:
+        //     d/2 = 7.78
         background: repeating-linear-gradient(
           45deg,
-          $hover-color,
-          $hover-color 5px,
-          $grid-color 5px,
-          $grid-color 10px
+          // $hover-color,
+          // $hover-color 3.88px,
+          transparent,
+          transparent 3.88px,
+          $grid-color 3.88px,
+          $grid-color 7.78px
         );
-        animation: wb-dirty-animation 2s linear infinite;
+        animation: wb-busy-animation 2s linear infinite;
       }
+
       &.wb-error,
       &.wb-status-error {
         color: $error-color;
@@ -161,11 +239,12 @@ div.wunderbaum {
   // --- HEADER ---
 
   div.wb-header {
-    position: relative;
+    position: sticky;
     height: $header-height;
     border-bottom: 1px solid $border-color;
     padding: 0;
     background-color: $header-color;
+
     span.wb-col {
       font-weight: bold;
       // &::after {
@@ -182,9 +261,11 @@ div.wunderbaum {
     line-height: $row-inner-height;
     padding: 0 $col-padding-x;
     border-right: 1px solid $grid-color;
+
     &:last-of-type {
       border-right: none;
     }
+
     overflow: visible; // allow resizer to overlap next col
 
     span.wb-col-title {
@@ -192,6 +273,7 @@ div.wunderbaum {
       overflow: hidden;
       text-overflow: ellipsis;
     }
+
     span.wb-col-resizer {
       position: absolute;
       top: 0;
@@ -227,18 +309,21 @@ div.wunderbaum {
   i.bi::before {
     vertical-align: baseline;
   }
+
   img.wb-icon {
     width: $icon-width;
     height: $icon-height;
     padding: $icon-padding-y $icon-padding-x;
     // margin-top: $icon-padding-y;
   }
+
   i.wb-indent {
     // border-left: 1px solid gray;
     &::before {
       content: "\00a0";
     }
   }
+
   i.wb-expander.wb-spin,
   i.wb-icon.wb-spin {
     height: unset; // Prevent wobble
@@ -249,7 +334,7 @@ div.wunderbaum {
 
   span.wb-title {
     min-width: 1em;
-    display: inline-block; // fix vertical offset on Chrome?
+    // display: inline-block; // fix vertical offset on Chrome?
     vertical-align: top;
     overflow-x: hidden;
     white-space: nowrap;
@@ -267,69 +352,83 @@ div.wunderbaum {
         }
       }
     }
+
     &.wb-cell-mode div.wb-header div.wb-row span.wb-col {
       &.wb-active {
         background-color: $active-hover-color;
       }
     }
+
     div.wb-node-list div.wb-row {
       border-bottom-color: $grid-color;
+
       &:hover:not(.wb-active):not(.wb-selected) {
         background-color: $hover-color;
         // border-color: $hover-border-color;
       }
+
       &.wb-active {
         border-bottom-color: $active-border-color;
       }
+
       span.wb-col {
         border-right: 1px solid $grid-color;
 
         input.wb-input-edit,
-        >input[type=color],
-        >input[type=date],
-        >input[type=datetime],  // deprecated
-        >input[type=datetime-local],
-        >input[type=email],
-        >input[type=month],
-        >input[type=number],
-        >input[type=password],
-        >input[type=search],
-        >input[type=tel],
-        >input[type=text],
-        >input[type=time],
-        >input[type=url],
-        >input[type=week],
-        >select {
+        > input[type="color"],
+        > input[type="date"],
+        > input[type="datetime"],
+        > input[type="datetime-local"],
+        > input[type="email"],
+        > input[type="month"],
+        > input[type="number"],
+        > input[type="password"],
+        > input[type="search"],
+        > input[type="tel"],
+        > input[type="text"],
+        > input[type="time"],
+        > input[type="url"],
+        > input[type="week"],
+        > select {
           width: 100%;
+          max-height: $row-inner-height;
         }
       }
     }
+
     &.wb-cell-mode {
       div.wb-row {
         background-color: $background-color;
+
         span.wb-col.wb-active {
           background-color: $active-column-color;
         }
+
         &.wb-active {
           background-color: $active-column-color;
+
           span.wb-col.wb-active {
             background-color: $active-cell-color;
           }
         }
       }
+
       &.wb-cell-edit-mode div.wb-row.wb-active span.wb-col.wb-active {
         background-color: $error-color;
       }
     }
+
     &.wb-alternate div.wb-node-list {
       div.wb-row:nth-of-type(even):not(.wb-active):not(.wb-selected) {
         background-color: $alternate-row-color;
+
         &:hover {
-          background-color: $alternate-row-color-even;
+          background-color: $alternate-row-color-hover;
         }
       }
     }
-    // Dimm some colors if tree has no focus
+
+    // Dim some colors if tree has no focus
     &:not(:focus-within),
     &:not(:focus) {
       div.wb-node-list div.wb-row {
@@ -343,30 +442,38 @@ div.wunderbaum {
   &.wb-ext-filter-hide {
     div.wb-node-list div.wb-row {
       color: $filter-dim-color;
+
       &.wb-submatch {
         color: $filter-submatch-color;
       }
+
       &.wb-match {
         color: $node-text-color;
       }
     }
   }
+
   /* --- DND --- */
   div.wb-row.wb-drag-source {
     opacity: 0.5;
+
     .wb-node {
       background-color: $drop-source-color;
     }
   }
+
   div.wb-row.wb-drop-target {
     overflow: visible;
+
     .wb-node {
       background-color: $drop-target-color;
       overflow: visible;
+
       // z-index: 1000;
       .wb-icon {
         position: relative;
         overflow: visible;
+
         &::after {
           // use ::after, because ::before is used by icon fonts
           // vertical-align: baseline;
@@ -379,11 +486,13 @@ div.wunderbaum {
       }
     }
   }
+
   div.wb-row.wb-drop-target.wb-drop-before .wb-node .wb-icon::after {
     content: url(../docs/assets/drop_marker_insert_16x64.png);
     left: 0; // $icon-outer-width * 1.5;
     top: ($row-outer-height - 16) / 2 - $row-outer-height / 2;
   }
+
   div.wb-row.wb-drop-target.wb-drop-after .wb-node .wb-icon::after {
     content: url(../docs/assets/drop_marker_insert_16x64.png);
     left: 0; //$icon-outer-width * 1.5;
@@ -392,6 +501,7 @@ div.wunderbaum {
 
   &.wb-rainbow {
     @for $i from 1 through length($level-rainbow) {
+      i.wb-expander:nth-child(#{length($level-rainbow)}n + #{$i}),
       i.wb-indent:nth-child(#{length($level-rainbow)}n + #{$i}) {
         background: nth($level-rainbow, $i);
       }
@@ -401,16 +511,20 @@ div.wunderbaum {
   /* Fade out expanders, when container is not hovered or active */
   &.wb-fade-expander {
     i.wb-expander {
-      transition: opacity 1.5s;
-      opacity: 0;
+      // only text-alpha is animated, since we want to keep the background color
+      // transition: opacity 1.5s;
+      // opacity: 0;
+      transition: color 1.5s;
+      color: rgba($node-text-color, 0);
     }
+
     div.wb-row.wb-loading i.wb-expander,
     &:hover i.wb-expander,
     &:focus i.wb-expander,
     &:focus-within i.wb-expander,
     [class*="wb-statusnode-"] i.wb-expander {
-      transition: opacity 0.6s;
-      opacity: 1;
+      transition: color 0.6s;
+      color: $node-text-color;
     }
   }
 
@@ -431,10 +545,12 @@ div.wunderbaum {
     i.wb-checkbox {
       visibility: hidden;
     }
+
     .wb-row:hover i.wb-checkbox,
     .wb-row.wb-selected i.wb-checkbox {
       visibility: unset;
     }
+
     &:focus,
     &:focus-within {
       .wb-row.wb-active i.wb-checkbox {
@@ -442,47 +558,63 @@ div.wunderbaum {
       }
     }
   }
-} // div.wunderbaum
+}
+
+// div.wunderbaum
 
 /* --- TOOL CLASSES --- */
 
 .wb-helper-center {
   text-align: center;
 }
+
 .wb-helper-disabled {
   color: $dim-color;
 }
+
 .wb-helper-hidden {
   display: none;
 }
+
 .wb-helper-invalid {
   color: $error-color;
 }
+
 .wb-helper-lazy-expander {
   color: $bg-highlight-color;
 }
+
 .wb-helper-link {
   cursor: pointer;
 }
+
 // .wb-helper-edit-text {
 //   // content-editable: true;
 // }
 
 /* RTL support */
-.wb-helper-start {
+.wb-helper-start,
+.wb-helper-start > input {
   text-align: left;
 }
-.wb-helper-end {
+
+.wb-helper-end,
+.wb-helper-end > input {
   text-align: right;
 }
+
 .wb-rtl {
-  .wb-helper-start {
+  .wb-helper-start,
+  .wb-helper-start > input {
     text-align: right;
   }
-  .wb-helper-end {
+
+  .wb-helper-end,
+  .wb-helper-end > input {
     text-align: left;
   }
 }
+
 /* Class 'wb-tristate' is used to mark checkboxes that should toggle like
  *   indeterminate -> checked -> unchecked -> indeterminate ...
  */
@@ -504,6 +636,7 @@ div.wunderbaum {
   0% {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(1turn);
   }
@@ -513,16 +646,18 @@ div.wunderbaum {
   0% {
     background-color: hsl(200, 20%, 70%);
   }
+
   100% {
     background-color: hsl(200, 20%, 95%);
   }
 }
 
-@keyframes wb-dirty-animation {
+@keyframes wb-busy-animation {
   0% {
     background-position: 0 0;
   }
+
   100% {
-    background-position: -70px 0;
+    background-position: 0 $row-outer-height;
   }
 }