wunderbaum 0.0.4 → 0.0.5

package/src/wunderbaum.scss

@@ -12,8 +12,8 @@ $node-text-color: #56534c;
 $bg-highlight-color: #26a0da;
 $header-color: #dedede;
 $background-color: white;
-$alternate-row-color: #fcfcfc;
-$alternate-row-color-even: #f7fcfe;
+$alternate-row-color: #f7f7f7; // #fcfcfc;
+$alternate-row-color-hover: #f3f3f3; //#f7fcfe;
 $focus-border-color: #275dc5;
 
 // derived
@@ -72,23 +72,61 @@ div.wunderbaum {
   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: 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: $focus-border-color;
-    //    outline-style: none;
+    // 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;
@@ -100,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 {
@@ -115,6 +153,15 @@ div.wunderbaum {
       }
     }
   }
+  &.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 {
@@ -153,17 +200,33 @@ div.wunderbaum {
         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,
@@ -176,7 +239,7 @@ div.wunderbaum {
   // --- HEADER ---
 
   div.wb-header {
-    position: relative;
+    position: sticky;
     height: $header-height;
     border-bottom: 1px solid $border-color;
     padding: 0;
@@ -271,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;
@@ -328,6 +391,7 @@ div.wunderbaum {
         > input[type="week"],
         > select {
           width: 100%;
+          max-height: $row-inner-height;
         }
       }
     }
@@ -359,12 +423,12 @@ div.wunderbaum {
         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 {
@@ -529,20 +593,24 @@ div.wunderbaum {
 // }
 
 /* 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;
   }
 }
@@ -584,12 +652,12 @@ div.wunderbaum {
   }
 }
 
-@keyframes wb-dirty-animation {
+@keyframes wb-busy-animation {
   0% {
     background-position: 0 0;
   }
 
   100% {
-    background-position: -70px 0;
+    background-position: 0 $row-outer-height;
   }
 }