[yew-devel] [PATCH yew-widget-toolkit/yew-widget-toolkit-assets 00/17] various touch improvements

[yew-devel] [PATCH yew-widget-toolkit/yew-widget-toolkit-assets 00/17] various touch improvements

[Dominik Csapak]

among others, this series combines several improvements for the touch interface:
* introduce new Image widget
* remove tap highlight in chrome
* new page animations
* rtl improvements for application bar, fab menu and scaffold
* fab improvements
* fab menu rework
* various style fixes

proxmox-yew-widget-toolkit-assets:

Dominik Csapak (6):
  reset: remove the tap highlight color for chrome
  page: add more page animation styles
  page: animations: reverse the direction on X axis for RTL mode
  application bar: reduce horizontal padding
  application bar: reverse back arrow for rtl
  buttons: rework fab menu

 scss/_application_bar.scss |   9 +-
 scss/_button.scss          | 246 +++++++++++++++++--------------------
 scss/_page.scss            |  95 +++++++++++++-
 scss/_reset-src.scss       |   5 +
 4 files changed, 222 insertions(+), 133 deletions(-)


proxmox-yew-widget-toolkit:

Dominik Csapak (11):
  widget: implement Image widget
  widget: button: don't hardcode icons font size
  touch: page stack: add more animations
  touch: application bar: set custom class on back button
  touch: material app: allow pass through of page animation style
  touch: scaffold: fix overflow setting for body
  touch: scaffold: use direction independent positioning for the FAB
  touch: fab: add size option
  touch: fab: convert to widget macro
  touch: fab menu: convert to widget macro
  touch: fab menu: rework fab menu

 src/touch/application_bar.rs |  16 +--
 src/touch/fab.rs             | 132 ++++++++----------------
 src/touch/fab_menu.rs        | 193 ++++++++++++++++++++---------------
 src/touch/material_app.rs    |  12 ++-
 src/touch/mod.rs             |   6 +-
 src/touch/page_stack.rs      |   7 ++
 src/touch/scaffold.rs        |   9 +-
 src/widget/button.rs         |   2 +-
 src/widget/image.rs          |  76 ++++++++++++++
 src/widget/mod.rs            |   3 +
 10 files changed, 264 insertions(+), 192 deletions(-)
 create mode 100644 src/widget/image.rs


Summary over all repositories:
  14 files changed, 486 insertions(+), 325 deletions(-)

-- 
Generated by git-murpp 0.8.1


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

[yew-devel] [PATCH yew-widget-toolkit-assets 1/6] reset: remove the tap highlight color for chrome

[Dominik Csapak]

on chrome based browsers, a (touch) tap will highlight the tapped
element with an overlay. Since we already have interaction
animations/highlights and the default here is distracting, make it
transparent.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 scss/_reset-src.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/scss/_reset-src.scss b/scss/_reset-src.scss
index 40f42f6..3c377c0 100644
--- a/scss/_reset-src.scss
+++ b/scss/_reset-src.scss
@@ -45,3 +45,8 @@ table {
   border-collapse: collapse;
   border-spacing: 0;
 }
+
+// get rid of the default chrome tapping color
+* {
+  -webkit-tap-highlight-color: transparent;
+}
-- 
2.39.5



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

[yew-devel] [PATCH yew-widget-toolkit-assets 2/6] page: add more page animation styles

[Dominik Csapak]

* fade-from-right: same as fade, but the new page moves in from the right
* fade-from-bottom: same as above, but moves in from the bottom
* flip: flips the page like a card and reveals the new page on the
  backside

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 scss/_page.scss | 86 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 86 insertions(+)

diff --git a/scss/_page.scss b/scss/_page.scss
index d76100c..4fb9295 100644
--- a/scss/_page.scss
+++ b/scss/_page.scss
@@ -4,6 +4,10 @@
     --page-animation-out: page-animation-push-out var(--page-animation-time) ease-out;
 }
 
+.pwt-page-outer {
+    perspective: 1000px;
+}
+
 .pwt-page-container {
     top: 0;
     left: 0;
@@ -57,6 +61,72 @@
     }
 }
 
+@keyframes page-animation-fade-from-right-in {
+    from {
+        opacity: 0;
+        transform: translateX(10%);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0%);
+    }
+}
+
+@keyframes page-animation-fade-from-bottom-in {
+    from {
+        opacity: 0;
+        transform: translateY(10%);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0%);
+    }
+}
+
+@keyframes page-animation-flip-in {
+  0% {
+    opacity: 0;
+    transform: rotateY(180deg);
+  }
+
+  50% {
+    opacity: 0;
+    transform: rotateY(90deg);
+  }
+
+  51% {
+    opacity: 1;
+    transform: rotateY(90deg);
+  }
+
+  100% {
+    opacity: 1;
+    transform: rotateY(0deg);
+  }
+}
+
+@keyframes page-animation-flip-out {
+  0% {
+    opacity: 1;
+    transform: rotateY(0deg);
+  }
+
+  50% {
+    opacity: 1;
+    transform: rotateY(-90deg);
+  }
+
+  51% {
+    opacity: 0;
+    transform: rotateY(-90deg);
+  }
+
+  100% {
+    opacity: 0;
+    transform: rotateY(180deg);
+  }
+}
+
 @keyframes page-animation-cover-in {
     from {
         transform: translateX(100%);
@@ -108,6 +178,22 @@
     --page-animation-out: page-animation-fade-out var(--page-animation-time) ease-out;
 }
 
+.pwt-page-animation-fade-from-right {
+    --page-animation-in: page-animation-fade-from-right-in var(--page-animation-time) ease-out;
+    --page-animation-out: page-animation-fade-out var(--page-animation-time) ease-out;
+}
+
+.pwt-page-animation-fade-from-bottom {
+    --page-animation-in: page-animation-fade-from-bottom-in var(--page-animation-time) ease-out;
+    --page-animation-out: page-animation-fade-out var(--page-animation-time) ease-out;
+}
+
+.pwt-page-animation-flip {
+    transform-style: preserve-3d;
+    --page-animation-in: page-animation-flip-in var(--page-animation-time) ease-out;
+    --page-animation-out: page-animation-flip-out var(--page-animation-time) ease-out;
+}
+
 .pwt-page-animation-cover {
     --page-animation-in: page-animation-cover-in var(--page-animation-time) ease-out;
     --page-animation-out: page-animation-cover-out var(--page-animation-time) ease-out;
-- 
2.39.5



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

[yew-devel] [PATCH yew-widget-toolkit-assets 3/6] page: animations: reverse the direction on X axis for RTL mode

[Dominik Csapak]

e.g. the fade-from-right animation, should fade in from the left in RTL
mode.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 scss/_page.scss | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/scss/_page.scss b/scss/_page.scss
index 4fb9295..e119550 100644
--- a/scss/_page.scss
+++ b/scss/_page.scss
@@ -2,6 +2,11 @@
     --page-animation-time: 0.3s;
     --page-animation-in: page-animation-push-in var(--page-animation-time) ease-out;
     --page-animation-out: page-animation-push-out var(--page-animation-time) ease-out;
+    --rtl-factor: 1;
+}
+
+html[dir=rtl] {
+  --rtl-factor: -1;
 }
 
 .pwt-page-outer {
@@ -23,7 +28,7 @@
 
 @keyframes page-animation-push-in {
     from {
-        transform: translateX(100%);
+        transform: translateX(calc(100% * var(--rtl-factor)));
         transform-origin: left;
     }
     to {
@@ -38,7 +43,7 @@
         transform-origin: left;
     }
     to {
-        transform: translateX(-100%);
+        transform: translateX(calc(-100% * var(--rtl-factor)));
         transform-origin: left;
     }
 }
@@ -64,7 +69,7 @@
 @keyframes page-animation-fade-from-right-in {
     from {
         opacity: 0;
-        transform: translateX(10%);
+        transform: translateX(calc(10% *var(--rtl-factor)));
     }
     to {
         opacity: 1;
-- 
2.39.5



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

[yew-devel] [PATCH yew-widget-toolkit-assets 4/6] application bar: reduce horizontal padding

[Dominik Csapak]

to not waste as much space, as one base spacer is enough.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 scss/_application_bar.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scss/_application_bar.scss b/scss/_application_bar.scss
index f8d95c6..b367a0b 100644
--- a/scss/_application_bar.scss
+++ b/scss/_application_bar.scss
@@ -7,7 +7,7 @@
 
     .pwt-application-bar-row1 {
         align-items: center;
-        padding: var(--pwt-spacer-1) var(--pwt-spacer-2);
+        padding: var(--pwt-spacer-1);
         gap: var(--pwt-spacer-2);
     }
 }
-- 
2.39.5



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

[yew-devel] [PATCH yew-widget-toolkit-assets 5/6] application bar: reverse back arrow for rtl

[Dominik Csapak]

so it's in the correct orientation in RTL mode.

needs the corresponding pwt patch to set the class.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 scss/_application_bar.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/scss/_application_bar.scss b/scss/_application_bar.scss
index b367a0b..17d4e63 100644
--- a/scss/_application_bar.scss
+++ b/scss/_application_bar.scss
@@ -10,4 +10,11 @@
         padding: var(--pwt-spacer-1);
         gap: var(--pwt-spacer-2);
     }
+
+}
+
+/* change arrow icon direction */
+/* Note: :dir(rtl) only works with firefox, so we cant use that. */
+html[dir="rtl"] .pwt-application-bar-back {
+  transform: scaleX(-1);
 }
-- 
2.39.5



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

Re: [yew-devel] [PATCH yew-widget-toolkit-assets 5/6] application bar: reverse back arrow for rtl

[Shannon Sterz]

On Fri Jun 27, 2025 at 2:08 PM CEST, Dominik Csapak wrote:
> so it's in the correct orientation in RTL mode.
>
> needs the corresponding pwt patch to set the class.
>
> Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
> ---
>  scss/_application_bar.scss | 7 +++++++
>  1 file changed, 7 insertions(+)
>
> diff --git a/scss/_application_bar.scss b/scss/_application_bar.scss
> index b367a0b..17d4e63 100644
> --- a/scss/_application_bar.scss
> +++ b/scss/_application_bar.scss
> @@ -10,4 +10,11 @@
>          padding: var(--pwt-spacer-1);
>          gap: var(--pwt-spacer-2);
>      }
> +
> +}
> +
> +/* change arrow icon direction */
> +/* Note: :dir(rtl) only works with firefox, so we cant use that. */

this is not true (anymore?), `:dir()` has been declared baseline as of
2023 and is available in chrome since chrome 120 according to can i use
[1,2].

> +html[dir="rtl"] .pwt-application-bar-back {
> +  transform: scaleX(-1);
>  }

[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/:dir
[2]: https://caniuse.com/css-dir-pseudo


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

Re: [yew-devel] [PATCH yew-widget-toolkit-assets 5/6] application bar: reverse back arrow for rtl

[Dominik Csapak]

On 6/27/25 14:54, Shannon Sterz wrote:
> On Fri Jun 27, 2025 at 2:08 PM CEST, Dominik Csapak wrote:
>> so it's in the correct orientation in RTL mode.
>>
>> needs the corresponding pwt patch to set the class.
>>
>> Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
>> ---
>>   scss/_application_bar.scss | 7 +++++++
>>   1 file changed, 7 insertions(+)
>>
>> diff --git a/scss/_application_bar.scss b/scss/_application_bar.scss
>> index b367a0b..17d4e63 100644
>> --- a/scss/_application_bar.scss
>> +++ b/scss/_application_bar.scss
>> @@ -10,4 +10,11 @@
>>           padding: var(--pwt-spacer-1);
>>           gap: var(--pwt-spacer-2);
>>       }
>> +
>> +}
>> +
>> +/* change arrow icon direction */
>> +/* Note: :dir(rtl) only works with firefox, so we cant use that. */
> 
> this is not true (anymore?), `:dir()` has been declared baseline as of
> 2023 and is available in chrome since chrome 120 according to can i use
> [1,2].
> 
>> +html[dir="rtl"] .pwt-application-bar-back {
>> +  transform: scaleX(-1);
>>   }
> 
> [1]: https://developer.mozilla.org/en-US/docs/Web/CSS/:dir
> [2]: https://caniuse.com/css-dir-pseudo

yeah, true. i just copied the comment from other places, that probably were
introduced before this happened, thanks for noticing !

I'll see where else we can replace that with the ':dir()' selector


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

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

[Dominik Csapak]

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

[yew-devel] [PATCH yew-widget-toolkit 01/11] widget: implement Image widget

[Dominik Csapak]

It's a thin wrapper around the <img> tag, but provide convenience
properties for switching the image in dark mode, like we want to use for
our logo for example.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/widget/image.rs | 76 +++++++++++++++++++++++++++++++++++++++++++++
 src/widget/mod.rs   |  3 ++
 2 files changed, 79 insertions(+)
 create mode 100644 src/widget/image.rs

diff --git a/src/widget/image.rs b/src/widget/image.rs
new file mode 100644
index 0000000..002e879
--- /dev/null
+++ b/src/widget/image.rs
@@ -0,0 +1,76 @@
+use yew::html::IntoPropValue;
+use yew::prelude::*;
+use yew::AttrValue;
+
+use crate::props::{EventSubscriber, WidgetBuilder};
+use crate::state::Theme;
+use crate::state::ThemeObserver;
+use crate::widget::Container;
+
+use pwt_macros::{builder, widget};
+
+/// Image
+///
+/// An image element. Has convenience options to change the image in dark mode.
+#[widget(pwt=crate, comp=PwtImage, @element)]
+#[derive(Properties, PartialEq, Clone)]
+#[builder]
+pub struct Image {
+    /// The source url for the image.
+    pub src: AttrValue,
+
+    /// An alternative source url for the image used in dark mode.
+    #[prop_or_default]
+    #[builder(IntoPropValue, into_prop_value)]
+    pub dark_mode_src: Option<AttrValue>,
+}
+
+impl Image {
+    /// Create a new [Image] with a src image url.
+    pub fn new(src: impl Into<AttrValue>) -> Self {
+        yew::props!(Self { src: src.into() })
+    }
+}
+
+pub enum Msg {
+    ThemeChanged((Theme, bool)),
+}
+
+#[doc(hidden)]
+pub struct PwtImage {
+    dark_mode: bool,
+    _theme_observer: ThemeObserver,
+}
+
+impl Component for PwtImage {
+    type Message = Msg;
+    type Properties = Image;
+
+    fn create(_ctx: &Context<Self>) -> Self {
+        let _theme_observer = ThemeObserver::new(_ctx.link().callback(Msg::ThemeChanged));
+        Self {
+            dark_mode: _theme_observer.dark_mode(),
+            _theme_observer,
+        }
+    }
+
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
+        match msg {
+            Msg::ThemeChanged((_theme, dark_mode)) => self.dark_mode = dark_mode,
+        }
+        true
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let props = ctx.props();
+        let src = match (self.dark_mode, &props.dark_mode_src) {
+            (true, Some(src)) => src.clone(),
+            _ => props.src.clone(),
+        };
+        Container::from_tag("img")
+            .with_std_props(&props.std_props)
+            .listeners(&props.listeners)
+            .attribute("src", src)
+            .into()
+    }
+}
diff --git a/src/widget/mod.rs b/src/widget/mod.rs
index 18c52ad..2385bb7 100644
--- a/src/widget/mod.rs
+++ b/src/widget/mod.rs
@@ -65,6 +65,9 @@ pub use field_label::FieldLabel;
 #[doc(hidden)]
 pub use field_label::PwtFieldLabel;
 
+mod image;
+pub use image::Image;
+
 mod input;
 pub use input::Input;
 
-- 
2.39.5



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

[yew-devel] [PATCH yew-widget-toolkit 02/11] widget: button: don't hardcode icons font size

[Dominik Csapak]

the button already sets a font size, and if that gets overwritten,
hardcoding the icon size here does not get overwritten. By removing this
here, we allow setting both the text and icon size from outside

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/widget/button.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/widget/button.rs b/src/widget/button.rs
index 1dc924d..b324ca7 100644
--- a/src/widget/button.rs
+++ b/src/widget/button.rs
@@ -214,7 +214,7 @@ impl Component for PwtButton {
             if !icon_class.is_empty() {
                 // Chromium fires onclick from nested elements, so we need to suppress that manually here
                 children.push(html!{
-                    <span class="pwt-font-label-large" onclick={suppress_onclick.clone()}><i role="none" class={icon_class.clone()}></i></span>
+                    <span onclick={suppress_onclick.clone()}><i role="none" class={icon_class.clone()}></i></span>
                 });
             }
         }
-- 
2.39.5



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

[yew-devel] [PATCH yew-widget-toolkit 03/11] touch: page stack: add more animations

[Dominik Csapak]

needs the changes from pwt-assets too, otherwise the animations won't
work. For the 'flip' effect, we need to set the class 'pwt-page-outer'
since that contains a relevant css property.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/touch/page_stack.rs | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/touch/page_stack.rs b/src/touch/page_stack.rs
index 85d4438..bb05058 100644
--- a/src/touch/page_stack.rs
+++ b/src/touch/page_stack.rs
@@ -15,6 +15,9 @@ use crate::widget::Container;
 pub enum PageAnimationStyle {
     Push,
     Fade,
+    FadeFromRight,
+    FadeFromBottom,
+    Flip,
     Cover,
 }
 
@@ -23,6 +26,9 @@ impl From<PageAnimationStyle> for Classes {
         match val {
             PageAnimationStyle::Push => "pwt-page-animation-push",
             PageAnimationStyle::Fade => "pwt-page-animation-fade",
+            PageAnimationStyle::FadeFromRight => "pwt-page-animation-fade-from-right",
+            PageAnimationStyle::FadeFromBottom => "pwt-page-animation-fade-from-bottom",
+            PageAnimationStyle::Flip => "pwt-page-animation-flip",
             PageAnimationStyle::Cover => "pwt-page-animation-cover",
         }
         .into()
@@ -206,6 +212,7 @@ impl Component for PwtPageStack {
         Container::new()
             .class("pwt-position-relative")
             .class("pwt-overflow-hidden")
+            .class("pwt-page-outer")
             .width(CssLength::Fraction(1.0))
             .height(CssLength::Fraction(1.0))
             .children(children)
-- 
2.39.5



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

[yew-devel] [PATCH yew-widget-toolkit 04/11] touch: application bar: set custom class on back button

[Dominik Csapak]

so we can apply some manual style, e.g. flip the icon in rtl mode.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/touch/application_bar.rs | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/touch/application_bar.rs b/src/touch/application_bar.rs
index 637635c..b7e98da 100644
--- a/src/touch/application_bar.rs
+++ b/src/touch/application_bar.rs
@@ -174,12 +174,14 @@ impl From<ApplicationBar> for VNode {
 }
 
 fn create_back_button(page_controller: Option<PageController>) -> ActionIcon {
-    ActionIcon::new("fa fa-lg fa-arrow-left").on_activate({
-        let page_controller = page_controller.clone();
-        move |_| {
-            if let Some(page_controller) = &page_controller {
-                page_controller.last_page();
+    ActionIcon::new("fa fa-lg fa-arrow-left")
+        .class("pwt-application-bar-back")
+        .on_activate({
+            let page_controller = page_controller.clone();
+            move |_| {
+                if let Some(page_controller) = &page_controller {
+                    page_controller.last_page();
+                }
             }
-        }
-    })
+        })
 }
-- 
2.39.5



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

[yew-devel] [PATCH yew-widget-toolkit 05/11] touch: material app: allow pass through of page animation style

[Dominik Csapak]

to the page stack. Otherwise it's impossible to set the animation style
for a material app.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/touch/material_app.rs | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/touch/material_app.rs b/src/touch/material_app.rs
index d9ea2a0..6d7ac54 100644
--- a/src/touch/material_app.rs
+++ b/src/touch/material_app.rs
@@ -13,7 +13,7 @@ use pwt_macros::builder;
 
 use crate::prelude::*;
 use crate::state::{NavigationContainer, SharedState, SharedStateObserver};
-use crate::touch::{SnackBarController, SnackBarManager};
+use crate::touch::{PageAnimationStyle, SnackBarController, SnackBarManager};
 use crate::widget::{Container, ThemeLoader};
 
 use super::{PageStack, SideDialog, SideDialogController, SideDialogLocation};
@@ -207,6 +207,11 @@ pub struct MaterialApp {
     #[builder(IntoPropValue, into_prop_value)]
     #[prop_or_default]
     pub history: Option<AnyHistory>,
+
+    /// Page animation style used when switching between pages
+    #[builder(IntoPropValue, into_prop_value)]
+    #[prop_or_default]
+    pub page_animation: Option<PageAnimationStyle>,
 }
 
 impl MaterialApp {
@@ -372,7 +377,10 @@ impl Component for PwtMaterialApp {
 
         let app = Container::new()
             .class("pwt-viewport")
-            .with_child(PageStack::new(page_stack))
+            .with_child(
+                PageStack::new(page_stack)
+                    .animation_style(props.page_animation.unwrap_or(PageAnimationStyle::Push)),
+            )
             .with_child(
                 SnackBarManager::new()
                     .controller(self.snackbar_controller.clone())
-- 
2.39.5



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

Re: [yew-devel] [PATCH yew-widget-toolkit 05/11] touch: material app: allow pass through of page animation style

[Shannon Sterz]

On Fri Jun 27, 2025 at 2:08 PM CEST, Dominik Csapak wrote:
> to the page stack. Otherwise it's impossible to set the animation style
> for a material app.
>
> Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
> ---
>  src/touch/material_app.rs | 12 ++++++++++--
>  1 file changed, 10 insertions(+), 2 deletions(-)
>
> diff --git a/src/touch/material_app.rs b/src/touch/material_app.rs
> index d9ea2a0..6d7ac54 100644
> --- a/src/touch/material_app.rs
> +++ b/src/touch/material_app.rs
> @@ -13,7 +13,7 @@ use pwt_macros::builder;
>
>  use crate::prelude::*;
>  use crate::state::{NavigationContainer, SharedState, SharedStateObserver};
> -use crate::touch::{SnackBarController, SnackBarManager};
> +use crate::touch::{PageAnimationStyle, SnackBarController, SnackBarManager};
>  use crate::widget::{Container, ThemeLoader};
>
>  use super::{PageStack, SideDialog, SideDialogController, SideDialogLocation};
> @@ -207,6 +207,11 @@ pub struct MaterialApp {
>      #[builder(IntoPropValue, into_prop_value)]
>      #[prop_or_default]
>      pub history: Option<AnyHistory>,

could we implement `Default` on `PageAnimationStyle` here and remove the
`Option`? that would also clean up the code below a bit. or is there a
reason not to do that?

> +
> +    /// Page animation style used when switching between pages
> +    #[builder(IntoPropValue, into_prop_value)]
> +    #[prop_or_default]
> +    pub page_animation: Option<PageAnimationStyle>,
>  }
>
>  impl MaterialApp {
> @@ -372,7 +377,10 @@ impl Component for PwtMaterialApp {
>
>          let app = Container::new()
>              .class("pwt-viewport")
> -            .with_child(PageStack::new(page_stack))
> +            .with_child(
> +                PageStack::new(page_stack)
> +                    .animation_style(props.page_animation.unwrap_or(PageAnimationStyle::Push)),
> +            )
>              .with_child(
>                  SnackBarManager::new()
>                      .controller(self.snackbar_controller.clone())



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

Re: [yew-devel] [PATCH yew-widget-toolkit 05/11] touch: material app: allow pass through of page animation style

[Dominik Csapak]

On 6/27/25 15:37, Shannon Sterz wrote:
> On Fri Jun 27, 2025 at 2:08 PM CEST, Dominik Csapak wrote:
>> to the page stack. Otherwise it's impossible to set the animation style
>> for a material app.
>>
>> Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
>> ---
>>   src/touch/material_app.rs | 12 ++++++++++--
>>   1 file changed, 10 insertions(+), 2 deletions(-)
>>
>> diff --git a/src/touch/material_app.rs b/src/touch/material_app.rs
>> index d9ea2a0..6d7ac54 100644
>> --- a/src/touch/material_app.rs
>> +++ b/src/touch/material_app.rs
>> @@ -13,7 +13,7 @@ use pwt_macros::builder;
>>
>>   use crate::prelude::*;
>>   use crate::state::{NavigationContainer, SharedState, SharedStateObserver};
>> -use crate::touch::{SnackBarController, SnackBarManager};
>> +use crate::touch::{PageAnimationStyle, SnackBarController, SnackBarManager};
>>   use crate::widget::{Container, ThemeLoader};
>>
>>   use super::{PageStack, SideDialog, SideDialogController, SideDialogLocation};
>> @@ -207,6 +207,11 @@ pub struct MaterialApp {
>>       #[builder(IntoPropValue, into_prop_value)]
>>       #[prop_or_default]
>>       pub history: Option<AnyHistory>,
> 
> could we implement `Default` on `PageAnimationStyle` here and remove the
> `Option`? that would also clean up the code below a bit. or is there a
> reason not to do that?
> 

sounds good to me, will do in a v2

>> +
>> +    /// Page animation style used when switching between pages
>> +    #[builder(IntoPropValue, into_prop_value)]
>> +    #[prop_or_default]
>> +    pub page_animation: Option<PageAnimationStyle>,
>>   }
>>
>>   impl MaterialApp {
>> @@ -372,7 +377,10 @@ impl Component for PwtMaterialApp {
>>
>>           let app = Container::new()
>>               .class("pwt-viewport")
>> -            .with_child(PageStack::new(page_stack))
>> +            .with_child(
>> +                PageStack::new(page_stack)
>> +                    .animation_style(props.page_animation.unwrap_or(PageAnimationStyle::Push)),
>> +            )
>>               .with_child(
>>                   SnackBarManager::new()
>>                       .controller(self.snackbar_controller.clone())
> 



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

Re: [yew-devel] [PATCH yew-widget-toolkit 05/11] touch: material app: allow pass through of page animation style

[Dietmar Maurer]

> could we implement `Default` on `PageAnimationStyle` here and remove the
> `Option`? that would also clean up the code below a bit. or is there a
> reason not to do that?

I guess we want to be able to set it to None (no animation)...


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

Re: [yew-devel] [PATCH yew-widget-toolkit 05/11] touch: material app: allow pass through of page animation style

[Shannon Sterz]

On Fri Jun 27, 2025 at 4:32 PM CEST, Dietmar Maurer wrote:
>
>> could we implement `Default` on `PageAnimationStyle` here and remove the
>> `Option`? that would also clean up the code below a bit. or is there a
>> reason not to do that?
>
> I guess we want to be able to set it to None (no animation)...

but the code that uses this property below calls `unwrap_or` with
`PageAnimationStyle::Push`. this means setting `None` here would still
result in the `Push` animation style (or for that matter, not specifying
an animation style at all).

so yeah if that's the desired behavior, then the `unwrap_or` here:

>>> +            .with_child(
>>> +                PageStack::new(page_stack)
>>> +                    .animation_style(props.page_animation.unwrap_or(PageAnimationStyle::Push)),
>>> +            )
>>>

would need to be removed.

ps: sorry resend this one as the list got dropped previously



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

[yew-devel] [PATCH yew-widget-toolkit 06/11] touch: scaffold: fix overflow setting for body

[Dominik Csapak]

otherwise the content of the body will exceed the viewport and widget
that depend on it being scrolled won't work properly (like the List
widget that does virtual scrolling)

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/touch/scaffold.rs | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/touch/scaffold.rs b/src/touch/scaffold.rs
index e5b4741..bd271d1 100644
--- a/src/touch/scaffold.rs
+++ b/src/touch/scaffold.rs
@@ -4,6 +4,7 @@ use yew::html::IntoPropValue;
 use yew::prelude::*;
 use yew::virtual_dom::{Key, VComp, VNode};
 
+use crate::css::FlexFit;
 use crate::props::{ContainerBuilder, WidgetBuilder, WidgetStyleBuilder};
 use crate::widget::{Column, Container};
 
@@ -107,7 +108,7 @@ impl Component for PwtScaffold {
 
         let body = Column::new()
             .class("pwt-position-relative")
-            .class("pwt-flex-fill")
+            .class(FlexFit)
             .with_optional_child(props.body.clone())
             .with_optional_child(positioned_fab);
 
-- 
2.39.5



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

[yew-devel] [PATCH yew-widget-toolkit 07/11] touch: scaffold: use direction independent positioning for the FAB

[Dominik Csapak]

inset-inline-end instead of right and
inset-block-end instead of bottom

this ensures that it looks correct in RTL mode

also use the PwtSpace enum instead of manual css styling

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/touch/scaffold.rs | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/touch/scaffold.rs b/src/touch/scaffold.rs
index bd271d1..59f0024 100644
--- a/src/touch/scaffold.rs
+++ b/src/touch/scaffold.rs
@@ -5,7 +5,7 @@ use yew::prelude::*;
 use yew::virtual_dom::{Key, VComp, VNode};
 
 use crate::css::FlexFit;
-use crate::props::{ContainerBuilder, WidgetBuilder, WidgetStyleBuilder};
+use crate::props::{ContainerBuilder, PwtSpace, WidgetBuilder, WidgetStyleBuilder};
 use crate::widget::{Column, Container};
 
 use super::NavigationBar;
@@ -101,8 +101,8 @@ impl Component for PwtScaffold {
         let positioned_fab = props.favorite_action_button.clone().map(|fab| {
             Container::new()
                 .class("pwt-position-absolute")
-                .style("right", "var(--pwt-spacer-2)")
-                .style("bottom", "var(--pwt-spacer-2)")
+                .style("inset-inline-end", PwtSpace::Pwt(2))
+                .style("inset-block-end", PwtSpace::Pwt(2))
                 .with_child(fab)
         });
 
-- 
2.39.5



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

[yew-devel] [PATCH yew-widget-toolkit 08/11] touch: fab: add size option

[Dominik Csapak]

While this can be configured with classes (and the large/small method).
It's more ergonomic to have it directly as an enum, especially when
we'll want to pass that through in the FabMenu also.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/touch/fab.rs | 37 +++++++++++++++++++++++++++++++++++--
 src/touch/mod.rs |  2 +-
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/src/touch/fab.rs b/src/touch/fab.rs
index 72637c7..2ae1551 100644
--- a/src/touch/fab.rs
+++ b/src/touch/fab.rs
@@ -7,6 +7,14 @@ use yew::virtual_dom::{Key, VComp, VNode};
 use crate::props::{AsClassesMut, WidgetBuilder};
 use crate::widget::Button;
 
+#[derive(Clone, Copy, PartialEq, Eq, Default)]
+pub enum FabSize {
+    Small,
+    #[default]
+    Standard,
+    Large,
+}
+
 /// Favorite action button.
 #[derive(Properties, Clone, PartialEq)]
 pub struct Fab {
@@ -14,6 +22,10 @@ pub struct Fab {
     #[prop_or_default]
     pub key: Option<Key>,
 
+    /// The size of the FAB
+    #[prop_or_default]
+    pub size: FabSize,
+
     /// Icon (CSS class).
     pub icon_class: Classes,
 
@@ -83,16 +95,27 @@ impl Fab {
 
     /// Builder style method to add the "pwt-fab-small" class
     pub fn small(mut self) -> Self {
-        self.add_class("pwt-fab-small");
+        self.size = FabSize::Small;
         self
     }
 
     /// Builder style method to add the "pwt-fab-large" class
     pub fn large(mut self) -> Self {
-        self.add_class("pwt-fab-large");
+        self.size = FabSize::Large;
+        self
+    }
+
+    /// Builder method to set the FAB size.
+    pub fn size(mut self, size: FabSize) -> Self {
+        self.set_size(size);
         self
     }
 
+    /// Method to set the FAB size.
+    pub fn set_size(&mut self, size: FabSize) {
+        self.size = size;
+    }
+
     /// Builder style method to set the button text
     pub fn text(mut self, text: impl IntoPropValue<Option<AttrValue>>) -> Self {
         self.set_text(text);
@@ -131,6 +154,16 @@ impl Component for PwtFab {
         let mut class = props.class.clone();
         class.push("pwt-fab");
 
+        match props.size {
+            FabSize::Small => {
+                class.push("pwt-fab-small");
+            }
+            FabSize::Standard => {}
+            FabSize::Large => {
+                class.push("pwt-fab-large");
+            }
+        }
+
         let button = match &props.text {
             Some(text) => Button::new(text)
                 .icon_class(icon_class)
diff --git a/src/touch/mod.rs b/src/touch/mod.rs
index 87fcc85..f559689 100644
--- a/src/touch/mod.rs
+++ b/src/touch/mod.rs
@@ -8,7 +8,7 @@ mod gesture_detector;
 pub use gesture_detector::{GestureDetector, GestureSwipeEvent, InputEvent, PwtGestureDetector};
 
 mod fab;
-pub use fab::{Fab, PwtFab};
+pub use fab::{Fab, FabSize, PwtFab};
 
 mod fab_menu;
 pub use fab_menu::{FabMenu, FabMenuAlign, FabMenuDirection, PwtFabMenu};
-- 
2.39.5



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

[yew-devel] [PATCH yew-widget-toolkit 09/11] touch: fab: convert to widget macro

[Dominik Csapak]

This does most of the things we did manually here.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/touch/fab.rs | 117 +++++++----------------------------------------
 1 file changed, 16 insertions(+), 101 deletions(-)

diff --git a/src/touch/fab.rs b/src/touch/fab.rs
index 2ae1551..1e6d5e8 100644
--- a/src/touch/fab.rs
+++ b/src/touch/fab.rs
@@ -1,12 +1,11 @@
-use std::rc::Rc;
-
 use yew::html::{IntoEventCallback, IntoPropValue};
 use yew::prelude::*;
-use yew::virtual_dom::{Key, VComp, VNode};
 
-use crate::props::{AsClassesMut, WidgetBuilder};
+use crate::props::{EventSubscriber, WidgetBuilder};
 use crate::widget::Button;
 
+use pwt_macros::{builder, widget};
+
 #[derive(Clone, Copy, PartialEq, Eq, Default)]
 pub enum FabSize {
     Small,
@@ -16,14 +15,13 @@ pub enum FabSize {
 }
 
 /// Favorite action button.
+#[widget(pwt=crate, comp=PwtFab, @element)]
 #[derive(Properties, Clone, PartialEq)]
+#[builder]
 pub struct Fab {
-    /// The yew component key.
-    #[prop_or_default]
-    pub key: Option<Key>,
-
     /// The size of the FAB
     #[prop_or_default]
+    #[builder]
     pub size: FabSize,
 
     /// Icon (CSS class).
@@ -31,27 +29,15 @@ pub struct Fab {
 
     /// Optional Button text (for small buttons)
     #[prop_or_default]
+    #[builder(IntoPropValue, into_prop_value)]
     pub text: Option<AttrValue>,
 
-    /// CSS class.
-    #[prop_or_default]
-    pub class: Classes,
-
-    /// Style attribute (use this to set button position)
-    #[prop_or_default]
-    pub style: Option<AttrValue>,
-
     /// Click callback
     #[prop_or_default]
+    #[builder_cb(IntoEventCallback, into_event_callback, MouseEvent)]
     pub on_activate: Option<Callback<MouseEvent>>,
 }
 
-impl AsClassesMut for Fab {
-    fn as_classes_mut(&mut self) -> &mut yew::Classes {
-        &mut self.class
-    }
-}
-
 impl Fab {
     /// Create a new instance.
     pub fn new(icon_class: impl Into<Classes>) -> Self {
@@ -60,39 +46,6 @@ impl Fab {
         })
     }
 
-    /// Builder style method to set the yew `key` property
-    pub fn key(mut self, key: impl IntoPropValue<Option<Key>>) -> Self {
-        self.set_key(key);
-        self
-    }
-
-    /// Method to set the yew `key` property
-    pub fn set_key(&mut self, key: impl IntoPropValue<Option<Key>>) {
-        self.key = key.into_prop_value();
-    }
-
-    /// Builder style method to add a html class
-    pub fn class(mut self, class: impl Into<Classes>) -> Self {
-        self.add_class(class);
-        self
-    }
-
-    /// Method to add a html class.
-    pub fn add_class(&mut self, class: impl Into<Classes>) {
-        self.class.push(class);
-    }
-
-    /// Builder style method to set the html style
-    pub fn style(mut self, style: impl IntoPropValue<Option<AttrValue>>) -> Self {
-        self.set_style(style);
-        self
-    }
-
-    /// Method to set the html style
-    pub fn set_style(&mut self, style: impl IntoPropValue<Option<AttrValue>>) {
-        self.style = style.into_prop_value();
-    }
-
     /// Builder style method to add the "pwt-fab-small" class
     pub fn small(mut self) -> Self {
         self.size = FabSize::Small;
@@ -104,34 +57,6 @@ impl Fab {
         self.size = FabSize::Large;
         self
     }
-
-    /// Builder method to set the FAB size.
-    pub fn size(mut self, size: FabSize) -> Self {
-        self.set_size(size);
-        self
-    }
-
-    /// Method to set the FAB size.
-    pub fn set_size(&mut self, size: FabSize) {
-        self.size = size;
-    }
-
-    /// Builder style method to set the button text
-    pub fn text(mut self, text: impl IntoPropValue<Option<AttrValue>>) -> Self {
-        self.set_text(text);
-        self
-    }
-
-    /// Method to set the button text
-    pub fn set_text(&mut self, text: impl IntoPropValue<Option<AttrValue>>) {
-        self.text = text.into_prop_value();
-    }
-
-    /// Builder style method to set the on_activate callback.
-    pub fn on_activate(mut self, cb: impl IntoEventCallback<MouseEvent>) -> Self {
-        self.on_activate = cb.into_event_callback();
-        self
-    }
 }
 
 #[doc(hidden)]
@@ -151,8 +76,7 @@ impl Component for PwtFab {
         let mut icon_class = props.icon_class.clone();
         icon_class.push("pwt-fab-icon");
 
-        let mut class = props.class.clone();
-        class.push("pwt-fab");
+        let mut class = classes!("pwt-fab");
 
         match props.size {
             FabSize::Small => {
@@ -164,16 +88,15 @@ impl Component for PwtFab {
             }
         }
 
-        let button = match &props.text {
-            Some(text) => Button::new(text)
-                .icon_class(icon_class)
-                .class("pwt-fab-extended"),
-            None => Button::new_icon(icon_class),
-        };
+        if props.text.is_some() {
+            class.push("pwt-fab-extended");
+        }
 
-        button
+        Button::new(&props.text)
+            .icon_class(icon_class)
+            .with_std_props(&props.std_props)
+            .listeners(&props.listeners)
             .class(class)
-            .attribute("style", props.style.clone())
             .on_activate(Callback::from({
                 let on_activate = props.on_activate.clone();
                 move |event: MouseEvent| {
@@ -185,11 +108,3 @@ impl Component for PwtFab {
             .into()
     }
 }
-
-impl From<Fab> for VNode {
-    fn from(val: Fab) -> Self {
-        let key = val.key.clone();
-        let comp = VComp::new::<PwtFab>(Rc::new(val), key);
-        VNode::from(comp)
-    }
-}
-- 
2.39.5



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

[yew-devel] [PATCH yew-widget-toolkit 10/11] touch: fab menu: convert to widget macro

[Dominik Csapak]

This does many things we did here manually.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/touch/fab_menu.rs | 57 ++++++-------------------------------------
 1 file changed, 8 insertions(+), 49 deletions(-)

diff --git a/src/touch/fab_menu.rs b/src/touch/fab_menu.rs
index 4ad1234..92f2331 100644
--- a/src/touch/fab_menu.rs
+++ b/src/touch/fab_menu.rs
@@ -1,12 +1,10 @@
-use std::rc::Rc;
-
-use yew::html::IntoPropValue;
 use yew::prelude::*;
-use yew::virtual_dom::{Key, VComp, VNode};
 
 use crate::props::{ContainerBuilder, EventSubscriber, WidgetBuilder};
 use crate::widget::Container;
 
+use pwt_macros::{builder, widget};
+
 use super::Fab;
 
 /// [FabMenu] direction.
@@ -27,12 +25,10 @@ pub enum FabMenuAlign {
 }
 
 /// Favorite actions button Menu.
+#[widget(pwt=crate, comp=PwtFabMenu, @element)]
 #[derive(Properties, Clone, PartialEq)]
+#[builder]
 pub struct FabMenu {
-    /// The yew component key.
-    #[prop_or_default]
-    pub key: Option<Key>,
-
     /// Main button Icon (CSS class).
     #[prop_or_default]
     pub main_icon_class: Option<Classes>,
@@ -43,11 +39,13 @@ pub struct FabMenu {
 
     /// Menu popup direction
     #[prop_or(FabMenuDirection::Up)]
+    #[builder]
     pub direction: FabMenuDirection,
 
     /// Menu alignment
     ///
     #[prop_or(FabMenuAlign::Center)]
+    #[builder]
     pub align: FabMenuAlign,
 
     /// Child buttons, which popup when main button is pressed.
@@ -69,17 +67,6 @@ impl FabMenu {
         yew::props!(Self {})
     }
 
-    /// Builder style method to set the yew `key` property
-    pub fn key(mut self, key: impl IntoPropValue<Option<Key>>) -> Self {
-        self.set_key(key);
-        self
-    }
-
-    /// Method to set the yew `key` property
-    pub fn set_key(&mut self, key: impl IntoPropValue<Option<Key>>) {
-        self.key = key.into_prop_value();
-    }
-
     /// Builder style method to set the icon class for the main button.
     pub fn main_icon_class(mut self, class: impl Into<Classes>) -> Self {
         self.set_main_icon_class(class);
@@ -106,28 +93,6 @@ impl FabMenu {
         }
     }
 
-    /// Builder style method to set the popup alignment
-    pub fn align(mut self, align: FabMenuAlign) -> Self {
-        self.set_align(align);
-        self
-    }
-
-    /// Method to set the popup alignment
-    pub fn set_align(&mut self, align: FabMenuAlign) {
-        self.align = align;
-    }
-
-    /// Builder style method to set the popup direction
-    pub fn direction(mut self, direction: FabMenuDirection) -> Self {
-        self.set_direction(direction);
-        self
-    }
-
-    /// Method to set the popup direction
-    pub fn set_direction(&mut self, direction: FabMenuDirection) {
-        self.direction = direction;
-    }
-
     /// Builder style method to add a child button
     pub fn with_child(mut self, child: impl Into<Fab>) -> Self {
         self.add_child(child);
@@ -180,6 +145,8 @@ impl Component for PwtFabMenu {
         };
 
         let mut container = Container::new()
+            .with_std_props(&props.std_props)
+            .listeners(&props.listeners)
             .class("pwt-fab-menu-container")
             .class(match props.align {
                 FabMenuAlign::Start => Some("pwt-fab-align-start"),
@@ -232,11 +199,3 @@ impl Component for PwtFabMenu {
         container.into()
     }
 }
-
-impl From<FabMenu> for VNode {
-    fn from(val: FabMenu) -> Self {
-        let key = val.key.clone();
-        let comp = VComp::new::<PwtFabMenu>(Rc::new(val), key);
-        VNode::from(comp)
-    }
-}
-- 
2.39.5



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

[yew-devel] [PATCH yew-widget-toolkit 11/11] touch: fab menu: rework fab menu

[Dominik Csapak]

This changes the way the fab menu is structured:
* use the new FabMenuEntry for entries instead of full Fab's
  this way we have better control over the layout and functions
* use a different markup so we can use flex-layout
  (see the necessary and corresponding pwt-assets patch)
* remove the left/right direction and center alignment since they're
  almost never useful, and can be reimplemented if necessary
  (removal makes the css part easier)
* introduce size and color options to better apply the material3 design

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/touch/fab_menu.rs | 140 +++++++++++++++++++++++++++++++-----------
 src/touch/mod.rs      |   4 +-
 2 files changed, 106 insertions(+), 38 deletions(-)

diff --git a/src/touch/fab_menu.rs b/src/touch/fab_menu.rs
index 92f2331..6a4f3f7 100644
--- a/src/touch/fab_menu.rs
+++ b/src/touch/fab_menu.rs
@@ -1,10 +1,12 @@
 use yew::prelude::*;
 
+use crate::css::ColorScheme;
 use crate::props::{ContainerBuilder, EventSubscriber, WidgetBuilder};
-use crate::widget::Container;
+use crate::widget::{Button, Container};
 
 use pwt_macros::{builder, widget};
 
+use super::fab::FabSize;
 use super::Fab;
 
 /// [FabMenu] direction.
@@ -12,23 +14,63 @@ use super::Fab;
 pub enum FabMenuDirection {
     Up,
     Down,
-    Left,
-    Right,
 }
 
 /// [FabMenu] alignment.
 #[derive(Copy, Clone, PartialEq)]
 pub enum FabMenuAlign {
     Start,
-    Center,
     End,
 }
 
+/// An entry for a [FabMenu]
+#[derive(PartialEq, Clone)]
+pub struct FabMenuEntry {
+    pub text: AttrValue,
+    pub icon: AttrValue,
+    pub on_activate: Callback<MouseEvent>,
+}
+
+impl FabMenuEntry {
+    pub fn new(
+        text: impl Into<AttrValue>,
+        icon: impl Into<AttrValue>,
+        on_activate: impl Into<Callback<MouseEvent>>,
+    ) -> Self {
+        Self {
+            text: text.into(),
+            icon: icon.into(),
+            on_activate: on_activate.into(),
+        }
+    }
+}
+
+/// [FabMenu] Color
+///
+/// Determines the color of the [Fab] and the [FabMenuEntry].
+#[derive(Clone, Copy, PartialEq, Eq, Default)]
+pub enum FabMenuColor {
+    #[default]
+    Primary,
+    Secondary,
+    Tertiary,
+}
+
 /// Favorite actions button Menu.
 #[widget(pwt=crate, comp=PwtFabMenu, @element)]
 #[derive(Properties, Clone, PartialEq)]
 #[builder]
 pub struct FabMenu {
+    /// The size of the [Fab]
+    #[prop_or_default]
+    #[builder]
+    pub size: FabSize,
+
+    /// The color scheme to apply on the [Fab] and the [FabMenuEntry]
+    #[prop_or_default]
+    #[builder]
+    pub color: FabMenuColor,
+
     /// Main button Icon (CSS class).
     #[prop_or_default]
     pub main_icon_class: Option<Classes>,
@@ -44,7 +86,7 @@ pub struct FabMenu {
 
     /// Menu alignment
     ///
-    #[prop_or(FabMenuAlign::Center)]
+    #[prop_or(FabMenuAlign::End)]
     #[builder]
     pub align: FabMenuAlign,
 
@@ -52,7 +94,7 @@ pub struct FabMenu {
     ///
     /// We currently support up to 5 children.
     #[prop_or_default]
-    pub children: Vec<Fab>,
+    pub children: Vec<FabMenuEntry>,
 }
 
 impl Default for FabMenu {
@@ -94,13 +136,13 @@ impl FabMenu {
     }
 
     /// Builder style method to add a child button
-    pub fn with_child(mut self, child: impl Into<Fab>) -> Self {
+    pub fn with_child(mut self, child: impl Into<FabMenuEntry>) -> Self {
         self.add_child(child);
         self
     }
 
     /// Method to add a child button
-    pub fn add_child(&mut self, child: impl Into<Fab>) {
+    pub fn add_child(&mut self, child: impl Into<FabMenuEntry>) {
         self.children.push(child.into());
     }
 }
@@ -139,26 +181,33 @@ impl Component for PwtFabMenu {
     fn view(&self, ctx: &Context<Self>) -> Html {
         let props = ctx.props();
 
-        let main_icon_class = match &props.main_icon_class {
-            Some(class) => class.clone(),
-            None => classes!("fa", "fa-plus"),
+        let main_icon_class = match (self.show_items, &props.main_icon_class) {
+            (false, Some(class)) => class.clone(),
+            (false, None) => classes!("fa", "fa-plus"),
+            (true, _) => classes!("fa", "fa-times"),
+        };
+
+        let (close_color, color) = match props.color {
+            FabMenuColor::Primary => (ColorScheme::Primary, ColorScheme::PrimaryContainer),
+            FabMenuColor::Secondary => (ColorScheme::Secondary, ColorScheme::SecondaryContainer),
+            FabMenuColor::Tertiary => (ColorScheme::Tertiary, ColorScheme::TertiaryContainer),
         };
 
+        let main_button = Fab::new(main_icon_class)
+            .size(if self.show_items {
+                FabSize::Small
+            } else {
+                props.size
+            })
+            .class(props.main_button_class.clone())
+            .class(if self.show_items { close_color } else { color })
+            .class(self.show_items.then_some("rounded"))
+            .on_activate(ctx.link().callback(|_| Msg::Toggle));
+
         let mut container = Container::new()
             .with_std_props(&props.std_props)
             .listeners(&props.listeners)
             .class("pwt-fab-menu-container")
-            .class(match props.align {
-                FabMenuAlign::Start => Some("pwt-fab-align-start"),
-                FabMenuAlign::End => Some("pwt-fab-align-end"),
-                FabMenuAlign::Center => None,
-            })
-            .class(match props.direction {
-                FabMenuDirection::Up => "pwt-fab-direction-up",
-                FabMenuDirection::Down => "pwt-fab-direction-down",
-                FabMenuDirection::Left => "pwt-fab-direction-left",
-                FabMenuDirection::Right => "pwt-fab-direction-right",
-            })
             .class(self.show_items.then_some("active"))
             .onkeydown({
                 let link = ctx.link().clone();
@@ -169,33 +218,50 @@ impl Component for PwtFabMenu {
                 }
             });
 
-        let main_button = Fab::new(main_icon_class)
-            .class(props.main_button_class.clone())
-            .on_activate(ctx.link().callback(|_| Msg::Toggle));
-
-        container.add_child(main_button);
-
         for (i, child) in props.children.iter().enumerate() {
             if i >= 5 {
                 log::error!("FabMenu only supports 5 child buttons.");
                 break;
             }
-            let orig_on_activate = child.on_activate.clone();
+
+            let on_activate = child.on_activate.clone();
             let link = ctx.link().clone();
 
-            let child_button = child
-                .clone()
-                .small()
+            let child = Button::new(child.text.clone())
+                .icon_class(child.icon.clone())
+                .class("medium")
+                .class(color)
                 .class("pwt-fab-menu-item")
                 .on_activate(move |event| {
                     link.send_message(Msg::Toggle);
-                    if let Some(on_activate) = &orig_on_activate {
-                        on_activate.emit(event);
-                    }
+                    on_activate.emit(event);
                 });
-            container.add_child(child_button);
+            container.add_child(child);
         }
 
-        container.into()
+        Container::new()
+            .with_std_props(&props.std_props)
+            .listeners(&props.listeners)
+            .class("pwt-fab-menu-outer")
+            .class(match props.align {
+                FabMenuAlign::Start => Some("pwt-fab-align-start"),
+                FabMenuAlign::End => Some("pwt-fab-align-end"),
+            })
+            .class(match props.direction {
+                FabMenuDirection::Up => "pwt-fab-direction-up",
+                FabMenuDirection::Down => "pwt-fab-direction-down",
+            })
+            .with_child(
+                Container::new()
+                    .class("pwt-fab-menu-main")
+                    .class(match props.size {
+                        FabSize::Small => "small",
+                        FabSize::Standard => "",
+                        FabSize::Large => "large",
+                    })
+                    .with_child(main_button),
+            )
+            .with_child(container)
+            .into()
     }
 }
diff --git a/src/touch/mod.rs b/src/touch/mod.rs
index f559689..acb27ae 100644
--- a/src/touch/mod.rs
+++ b/src/touch/mod.rs
@@ -11,7 +11,9 @@ mod fab;
 pub use fab::{Fab, FabSize, PwtFab};
 
 mod fab_menu;
-pub use fab_menu::{FabMenu, FabMenuAlign, FabMenuDirection, PwtFabMenu};
+pub use fab_menu::{
+    FabMenu, FabMenuAlign, FabMenuColor, FabMenuDirection, FabMenuEntry, PwtFabMenu,
+};
 
 mod material_app;
 pub use material_app::PageController;
-- 
2.39.5



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

Re: [yew-devel] [PATCH yew-widget-toolkit/yew-widget-toolkit-assets 00/17] various touch improvements

[Dominik Csapak]

superseeded by v2:

https://lore.proxmox.com/yew-devel/20250630082509.1202308-1-d.csapak@proxmox.com/


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