From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [IPv6:2a01:7e0:0:424::9]) by lore.proxmox.com (Postfix) with ESMTPS id B46A41FF187 for ; Mon, 30 Jun 2025 10:25:11 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id CB6B716503; Mon, 30 Jun 2025 10:25:49 +0200 (CEST) From: Dominik Csapak To: yew-devel@lists.proxmox.com Date: Mon, 30 Jun 2025 10:24:56 +0200 Message-Id: <20250630082509.1202308-7-d.csapak@proxmox.com> X-Mailer: git-send-email 2.39.5 In-Reply-To: <20250630082509.1202308-1-d.csapak@proxmox.com> References: <20250630082509.1202308-1-d.csapak@proxmox.com> MIME-Version: 1.0 X-SPAM-LEVEL: Spam detection results: 0 AWL 0.022 Adjusted score from AWL reputation of From: address BAYES_00 -1.9 Bayes spam probability is 0 to 1% DMARC_MISSING 0.1 Missing DMARC policy KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record Subject: [yew-devel] [PATCH yew-widget-toolkit-assets v2 6/7] buttons: rework fab menu X-BeenThere: yew-devel@lists.proxmox.com X-Mailman-Version: 2.1.29 Precedence: list List-Id: Yew framework devel list at Proxmox List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , Reply-To: Yew framework devel list at Proxmox Content-Type: text/plain; charset="us-ascii" Content-Transfer-Encoding: 7bit Errors-To: yew-devel-bounces@lists.proxmox.com Sender: "yew-devel" 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 --- 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