[yew-devel] [PATCH yew-widget-toolkit-assets v2 6/7] buttons: rework fab menu

[Dominik Csapak <d.csapak@proxmox.com>]

this reworks the fab menu to adhere more to material3, and switch to use
flex layout instead of calculating pixel offsets. This eliminates most
offset calculations for the menu.

Also introduce animations like material3 suggests.

We now remove the left and right directions as well as the center
alignments, as they almost never make sense layout-wise.
(We can still re-implement them when we need it, but they make
the css much more complicated)

For this to work properly, the fab menu code has to be updated as well,
for the now different class hierarchy.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 scss/_button.scss | 244 ++++++++++++++++++++++------------------------
 1 file changed, 115 insertions(+), 129 deletions(-)

diff --git a/scss/_button.scss b/scss/_button.scss
index 8f3e456..f48820c 100644
--- a/scss/_button.scss
+++ b/scss/_button.scss
@@ -87,6 +87,11 @@ button,
         @include color-scheme-vars("surface", $important: true);
         @include elevation-box-shadow(0);
     }
+
+    &.medium {
+        @include font_and_line_height("title-medium");
+        padding: map-get($font-size, "title-medium") map-get($line-height, "title-medium");
+    }
 }
 
 // implement state layer for normal buttons
@@ -311,11 +316,15 @@ button,
 /// - `pwt-fab.pwt-fab-large`:  large FAB variant
 ///
 
+$normal-fab-size: calc(map-get($font-size, "headline-medium") + 2 * var(--pwt-spacer-2) + 2px);
+$small-fab-size: calc(map-get($font-size, "title-large") + 2 * var(--pwt-spacer-1) + 2px);
+$large-fab-size: calc(map-get($font-size, "headline-large") + 2 * var(--pwt-spacer-3) + 2px);
+
 .pwt-fab {
     border-radius: var(--pwt-fab-corner-shape);
     padding: var(--pwt-spacer-2);
-    height: calc(map-get($font-size, "headline-medium") + 2 * var(--pwt-spacer-2) + 2px);
-    min-width: calc(map-get($font-size, "headline-medium") + 2 * var(--pwt-spacer-2) + 2px);
+    height: $normal-fab-size;
+    min-width: $normal-fab-size;
     flex: 0 0 auto;
     align-items: center;
     justify-content: center;
@@ -324,10 +333,14 @@ button,
         font-size: map-get($font-size, "headline-medium");
     }
 
+    &.rounded {
+        border-radius: 100rem;
+    }
+
     &.pwt-fab-small {
         padding: var(--pwt-spacer-1);
-        height: calc(map-get($font-size, "title-large") + 2 * var(--pwt-spacer-1) + 2px);
-        min-width: calc(map-get($font-size, "title-large") + 2 * var(--pwt-spacer-1) + 2px);
+        height: $small-fab-size;
+        min-width: $small-fab-size;
 
         .pwt-fab-icon {
             font-size: map-get($font-size, "title-large");
@@ -340,8 +353,8 @@ button,
 
     &.pwt-fab-large {
         padding: var(--pwt-spacer-3);
-        height: calc(map-get($font-size, "headline-large") + 2 * var(--pwt-spacer-3) + 2px);
-        min-width: calc(map-get($font-size, "headline-large") + 2 * var(--pwt-spacer-3) + 2px);
+        height: $large-fab-size;
+        min-width: $large-fab-size;
 
         .pwt-fab-icon {
             font-size: map-get($font-size, "headline-large");
@@ -362,159 +375,132 @@ button,
 
 /// ##### FAB Menus
 ///
-/// Class `pwt-fab-menu-container`
+/// Class `pwt-fab-menu-outer`
 ///
-/// This class is used to arrange FABs as a menu.
+/// This class is used to arrange the FAB and the menu.
 ///
 
-.pwt-fab-menu-container {
-    position: relative;
-    z-index: $zindex-dropdown;
-
-    --fab-small-button-height: calc(#{map-get($font-size, "title-large")} + 2 * var(--pwt-spacer-1) + 2px);
-
-    .pwt-fab-menu-item {
-        position: absolute;
-        visibility: hidden;
-        opacity: 0;
-        top: calc(50% - var(--fab-small-button-height) / 2);
-        left: calc(50% - var(--fab-small-button-height) / 2);
-        z-index: -1;
-    }
-
-    &.pwt-fab-direction-left.pwt-fab-align-start .pwt-fab-menu-item,
-    &.pwt-fab-direction-right.pwt-fab-align-start .pwt-fab-menu-item {
-        top: 0;
-        bottom: unset;
-    }
-
-    &.pwt-fab-direction-left.pwt-fab-align-end .pwt-fab-menu-item,
-    &.pwt-fab-direction-right.pwt-fab-align-end .pwt-fab-menu-item {
-        top: unset;
-        bottom: 0;
-    }
-
-    &.pwt-fab-direction-up.pwt-fab-align-start .pwt-fab-menu-item,
-    &.pwt-fab-direction-down.pwt-fab-align-start .pwt-fab-menu-item {
-        left: 0;
-        right: unset;
-    }
-
-    &.pwt-fab-direction-up.pwt-fab-align-end .pwt-fab-menu-item,
-    &.pwt-fab-direction-down.pwt-fab-align-end .pwt-fab-menu-item {
-        left: unset;
-        right: 0;
-    }
-
-    &.active .pwt-fab-menu-item {
-        visibility: visible;
-        opacity: 1;
-        z-index: 1;
-    }
+.pwt-fab-menu-outer {
+  display: flex;
+  flex-direction: var(--fab-menu-direction, column-reverse);
+  align-items: var(--fab-menu-align, center);
+  gap: 8px;
+  transition: 0.1s;
+}
 
-    &.pwt-fab-direction-down.active > .pwt-fab-menu-item:nth-child(2) {
-        top: calc(100% + var(--pwt-spacer-2));
-    }
+/// Class `pwt-fab-menu-main`
+///
+/// This class is the container for the main button, and uses for aligning
+/// the close button correctly for different directions and sizes.
+///
 
-    &.pwt-fab-direction-down.active > .pwt-fab-menu-item:nth-child(3) {
-        top: calc(100% + var(--pwt-spacer-2) + 1 * (var(--fab-small-button-height) + var(--pwt-spacer-2)));
-    }
+.pwt-fab-menu-main {
+    min-height: $normal-fab-size;
+    min-width: $normal-fab-size;
+    display: flex;
+    flex-direction: var(--fab-menu-direction);
+    justify-content: flex-end;
+    align-items: var(--fab-menu-align);
 
-    &.pwt-fab-direction-down.active > .pwt-fab-menu-item:nth-child(4) {
-        top: calc(100% + var(--pwt-spacer-2) + 2 * (var(--fab-small-button-height) + var(--pwt-spacer-2)));
+    &.small {
+        min-height: $small-fab-size;
+        min-width: $small-fab-size;
     }
 
-    &.pwt-fab-direction-down.active > .pwt-fab-menu-item:nth-child(5) {
-        top: calc(100% + var(--pwt-spacer-2) + 3 * (var(--fab-small-button-height) + var(--pwt-spacer-2)));
+    &.large {
+        min-height: $large-fab-size;
+        min-width: $large-fab-size;
     }
+}
 
-    &.pwt-fab-direction-down.active > .pwt-fab-menu-item:nth-child(6) {
-        top: calc(100% + var(--pwt-spacer-2) + 4 * (var(--fab-small-button-height) + var(--pwt-spacer-2)));
-    }
+/// Class `pwt-fab-menu-container`
+///
+/// This class is the container for the fab menu items.
+///
 
-    &.pwt-fab-direction-up.active > .pwt-fab-menu-item:nth-child(2) {
-        top: calc(0px - var(--fab-small-button-height) - var(--pwt-spacer-2));
-    }
+.pwt-fab-menu-container {
+    flex-direction: column;
+    align-items: var(--fab-menu-align);
 
-    &.pwt-fab-direction-up.active > .pwt-fab-menu-item:nth-child(3) {
-        top: calc(
-            0px - var(--fab-small-button-height) -
-                (var(--pwt-spacer-2) + 1 * (var(--fab-small-button-height) + var(--pwt-spacer-2)))
-        );
-    }
+    display: flex;
+    gap: 4px;
 
-    &.pwt-fab-direction-up.active > .pwt-fab-menu-item:nth-child(4) {
-        top: calc(
-            0px - var(--fab-small-button-height) -
-                (var(--pwt-spacer-2) + 2 * (var(--fab-small-button-height) + var(--pwt-spacer-2)))
-        );
-    }
+    flex: 1 0 auto;
 
-    &.pwt-fab-direction-up.active > .pwt-fab-menu-item:nth-child(5) {
-        top: calc(
-            0px - var(--fab-small-button-height) -
-                (var(--pwt-spacer-2) + 3 * (var(--fab-small-button-height) + var(--pwt-spacer-2)))
-        );
-    }
+    --transition-delay: 0.02s;
 
-    &.pwt-fab-direction-up.active > .pwt-fab-menu-item:nth-child(6) {
-        top: calc(
-            0px - var(--fab-small-button-height) -
-                (var(--pwt-spacer-2) + 4 * (var(--fab-small-button-height) + var(--pwt-spacer-2)))
-        );
+    // make gradient appear in the reverse direction
+    &:dir(rtl) {
+        --fab-menu-animation-direction: -90deg;
+        --fab-menu-animation-start: 100%;
     }
 
-    &.pwt-fab-direction-left.active > .pwt-fab-menu-item:nth-child(2) {
-        left: calc(0px - var(--fab-small-button-height) - var(--pwt-spacer-2));
+    .pwt-fab-menu-item {
+        opacity: 0;
+        z-index: -1;
+        mask:
+          linear-gradient(#000 0 0),
+          linear-gradient(var(--fab-menu-animation-direction, 90deg), #000 50%, #0000 100%) padding-box
+            var(--fab-menu-animation-start, 0%) / var(--transition-width, 100% 100%) no-repeat;
+        mask-composite: exclude;
+        transition:  0.1s;
+    }
+
+    & .pwt-fab-menu-item {
+        // input is _n and dir,
+        // when dir is 1, _n: 0 -> 0 * delay, _n: 1 -> 1 * delay, etc.
+        // when dir is -1, _n: 0 -> 6 * delay, _n: 1 -> 5 * delay, etc.
+        transition-delay: calc((var(--_n) * ((1 + var(--dir)) / 2) + (6 - var(--_n)) * ((1 - var(--dir)) / 2)) * var(--transition-delay));
+    }
+    @for $i from 1 through 6 {
+        & .pwt-fab-menu-item:nth-child(#{$i}) {
+            --_n: #{$i};
+        }
     }
 
-    &.pwt-fab-direction-left.active > .pwt-fab-menu-item:nth-child(3) {
-        left: calc(
-            0px - var(--fab-small-button-height) -
-                (var(--pwt-spacer-2) + 1 * (var(--fab-small-button-height) + var(--pwt-spacer-2)))
-        );
+    &.active .pwt-fab-menu-item {
+        --transition-width: 0% 100%;
+        opacity: 1;
+        z-index: 1;
     }
+}
 
-    &.pwt-fab-direction-left.active > .pwt-fab-menu-item:nth-child(4) {
-        left: calc(
-            0px - var(--fab-small-button-height) -
-                (var(--pwt-spacer-2) + 2 * (var(--fab-small-button-height) + var(--pwt-spacer-2)))
-        );
-    }
+/// Classes `pwt-fab-direction-{up,down}`
+///
+/// These are used to control the layout of the FAB to the menu and the direction of the animations
+///
 
-    &.pwt-fab-direction-left.active > .pwt-fab-menu-item:nth-child(5) {
-        left: calc(
-            0px - var(--fab-small-button-height) -
-                (var(--pwt-spacer-2) + 3 * (var(--fab-small-button-height) + var(--pwt-spacer-2)))
-        );
+.pwt-fab-direction-up {
+    --fab-menu-direction: column-reverse;
+    & .pwt-fab-menu-container.active {
+        --dir: -1;
     }
-
-    &.pwt-fab-direction-left.active > .pwt-fab-menu-item:nth-child(6) {
-        left: calc(
-            0px - var(--fab-small-button-height) -
-                (var(--pwt-spacer-2) + 4 * (var(--fab-small-button-height) + var(--pwt-spacer-2)))
-        );
+    & .pwt-fab-menu-container:not(.active) {
+        --dir: 1;
     }
+}
 
-    &.pwt-fab-direction-right.active > .pwt-fab-menu-item:nth-child(2) {
-        left: calc(100% + var(--pwt-spacers-2));
+.pwt-fab-direction-down {
+    --fab-menu-direction: column;
+    & .pwt-fab-menu-container.active {
+        --dir: 1;
     }
-
-    &.pwt-fab-direction-right.active > .pwt-fab-menu-item:nth-child(3) {
-        left: calc(100% + var(--pwt-spacers-2) + 1 * (var(--fab-small-button-height) + var(--pwt-spacers-2)));
+    & .pwt-fab-menu-container:not(.active) {
+        --dir: -1;
     }
+}
 
-    &.pwt-fab-direction-right.active > .pwt-fab-menu-item:nth-child(4) {
-        left: calc(100% + var(--pwt-spacers-2) + 2 * (var(--fab-small-button-height) + var(--pwt-spacers-2)));
-    }
+/// Classes `pwt-fab-align-{start,end}`
+///
+/// These are used to align the button according to the alignment
+///
 
-    &.pwt-fab-direction-right.active > .pwt-fab-menu-item:nth-child(5) {
-        left: calc(100% + var(--pwt-spacers-2) + 3 * (var(--fab-small-button-height) + var(--pwt-spacers-2)));
-    }
+.pwt-fab-align-start {
+    --fab-menu-align: flex-start;
+}
 
-    &.pwt-fab-direction-right.active > .pwt-fab-menu-item:nth-child(6) {
-        left: calc(100% + var(--pwt-spacers-2) + 4 * (var(--fab-small-button-height) + var(--pwt-spacers-2)));
-    }
+.pwt-fab-align-end {
+    --fab-menu-align: flex-end;
 }
 
 // Material design ripple effect
-- 
2.39.5



_______________________________________________
yew-devel mailing list
yew-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/yew-devel