all lists on lists.proxmox.com
 help / color / mirror / Atom feed
From: Dominik Csapak <d.csapak@proxmox.com>
To: yew-devel@lists.proxmox.com
Subject: [yew-devel] [PATCH yew-widget-toolkit-assets 6/6] buttons: rework fab menu
Date: Fri, 27 Jun 2025 14:08:48 +0200	[thread overview]
Message-ID: <20250627120859.3723554-7-d.csapak@proxmox.com> (raw)
In-Reply-To: <20250627120859.3723554-1-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 | 246 ++++++++++++++++++++++------------------------
 1 file changed, 116 insertions(+), 130 deletions(-)

diff --git a/scss/_button.scss b/scss/_button.scss
index 8f3e456..52e6037 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)))
-        );
+    .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(2) {
-        left: calc(0px - 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(3) {
-        left: calc(
-            0px - var(--fab-small-button-height) -
-                (var(--pwt-spacer-2) + 1 * (var(--fab-small-button-height) + var(--pwt-spacer-2)))
-        );
-    }
+// make gradient appear in the reverse direction
+html[dir=rtl] .pwt-fab-menu-item {
+    --fab-menu-animation-direction: -90deg;
+    --fab-menu-animation-start: 100%;
+}
 
-    &.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


  parent reply	other threads:[~2025-06-27 12:08 UTC|newest]

Thread overview: 25+ messages / expand[flat|nested]  mbox.gz  Atom feed  top
2025-06-27 12:08 [yew-devel] [PATCH yew-widget-toolkit/yew-widget-toolkit-assets 00/17] various touch improvements Dominik Csapak
2025-06-27 12:08 ` [yew-devel] [PATCH yew-widget-toolkit-assets 1/6] reset: remove the tap highlight color for chrome Dominik Csapak
2025-06-27 12:08 ` [yew-devel] [PATCH yew-widget-toolkit-assets 2/6] page: add more page animation styles Dominik Csapak
2025-06-27 12:08 ` [yew-devel] [PATCH yew-widget-toolkit-assets 3/6] page: animations: reverse the direction on X axis for RTL mode Dominik Csapak
2025-06-27 12:08 ` [yew-devel] [PATCH yew-widget-toolkit-assets 4/6] application bar: reduce horizontal padding Dominik Csapak
2025-06-27 12:08 ` [yew-devel] [PATCH yew-widget-toolkit-assets 5/6] application bar: reverse back arrow for rtl Dominik Csapak
2025-06-27 12:54   ` Shannon Sterz
2025-06-27 13:38     ` Dominik Csapak
2025-06-27 12:08 ` Dominik Csapak [this message]
2025-06-27 12:08 ` [yew-devel] [PATCH yew-widget-toolkit 01/11] widget: implement Image widget Dominik Csapak
2025-06-27 12:08 ` [yew-devel] [PATCH yew-widget-toolkit 02/11] widget: button: don't hardcode icons font size Dominik Csapak
2025-06-27 12:08 ` [yew-devel] [PATCH yew-widget-toolkit 03/11] touch: page stack: add more animations Dominik Csapak
2025-06-27 12:08 ` [yew-devel] [PATCH yew-widget-toolkit 04/11] touch: application bar: set custom class on back button Dominik Csapak
2025-06-27 12:08 ` [yew-devel] [PATCH yew-widget-toolkit 05/11] touch: material app: allow pass through of page animation style Dominik Csapak
2025-06-27 13:37   ` Shannon Sterz
2025-06-27 13:38     ` Dominik Csapak
2025-06-27 14:32     ` Dietmar Maurer
2025-06-27 14:40       ` Shannon Sterz
2025-06-27 12:08 ` [yew-devel] [PATCH yew-widget-toolkit 06/11] touch: scaffold: fix overflow setting for body Dominik Csapak
2025-06-27 12:08 ` [yew-devel] [PATCH yew-widget-toolkit 07/11] touch: scaffold: use direction independent positioning for the FAB Dominik Csapak
2025-06-27 12:08 ` [yew-devel] [PATCH yew-widget-toolkit 08/11] touch: fab: add size option Dominik Csapak
2025-06-27 12:08 ` [yew-devel] [PATCH yew-widget-toolkit 09/11] touch: fab: convert to widget macro Dominik Csapak
2025-06-27 12:08 ` [yew-devel] [PATCH yew-widget-toolkit 10/11] touch: fab menu: " Dominik Csapak
2025-06-27 12:08 ` [yew-devel] [PATCH yew-widget-toolkit 11/11] touch: fab menu: rework fab menu Dominik Csapak
2025-06-30  8:25 ` [yew-devel] [PATCH yew-widget-toolkit/yew-widget-toolkit-assets 00/17] various touch improvements Dominik Csapak

Reply instructions:

You may reply publicly to this message via plain-text email
using any one of the following methods:

* Save the following mbox file, import it into your mail client,
  and reply-to-all from there: mbox

  Avoid top-posting and favor interleaved quoting:
  https://en.wikipedia.org/wiki/Posting_style#Interleaved_style

* Reply using the --to, --cc, and --in-reply-to
  switches of git-send-email(1):

  git send-email \
    --in-reply-to=20250627120859.3723554-7-d.csapak@proxmox.com \
    --to=d.csapak@proxmox.com \
    --cc=yew-devel@lists.proxmox.com \
    /path/to/YOUR_REPLY

  https://kernel.org/pub/software/scm/git/docs/git-send-email.html

* If your mail client supports setting the In-Reply-To header
  via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line before the message body.
This is an external index of several public inboxes,
see mirroring instructions on how to clone and mirror
all data and code used by this external index.
Service provided by Proxmox Server Solutions GmbH | Privacy | Legal