[yew-devel] [PATCH yew-widget-toolkit/yew-widget-toolkit-assets 0/2] fix style for secondary material style tabs

[yew-devel] [PATCH yew-widget-toolkit/yew-widget-toolkit-assets 0/2] fix style for secondary material style tabs

[Dominik Csapak]

adds some classes to the tab bar to determine the style, and adds custom style
for the secondary material tabs

proxmox-yew-widget-toolkit:

Dominik Csapak (1):
  widget: tab panel: mark material tabs with css class for variants

 src/widget/tab/tab_bar.rs | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)


proxmox-yew-widget-toolkit-assets:

Dominik Csapak (1):
  material: tab panel: fix secondary tab bar style

 scss/material/_theme_post_material.scss | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)


Summary over all repositories:
  2 files changed, 19 insertions(+), 7 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 1/1] widget: tab panel: mark material tabs with css class for variants

[Dominik Csapak]

that way it's possible to give different css properties to primary
and secondary style material tabs.

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

diff --git a/src/widget/tab/tab_bar.rs b/src/widget/tab/tab_bar.rs
index 44fb9f3..6714746 100644
--- a/src/widget/tab/tab_bar.rs
+++ b/src/widget/tab/tab_bar.rs
@@ -487,13 +487,13 @@ impl Component for PwtTabBar {
         let rtl = self.rtl.unwrap_or(false);
 
         let (variant_class, indicator_class) = match ctx.props().style {
-            TabBarStyle::Pills => ("pwt-nav-pills", classes!()),
+            TabBarStyle::Pills => (classes!("pwt-nav-pills"), classes!()),
             TabBarStyle::MaterialPrimary => (
-                "pwt-tab-material",
+                classes!("pwt-tab-material", "primary"),
                 classes!("pwt-tab-active-indicator", "primary"),
             ),
             TabBarStyle::MaterialSecondary => (
-                "pwt-tab-material",
+                classes!("pwt-tab-material", "secondary"),
                 classes!("pwt-tab-active-indicator", "secondary"),
             ),
         };
-- 
2.47.3



_______________________________________________
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/1] material: tab panel: fix secondary tab bar style

[Dominik Csapak]

secondary tabbars should align the icon in a row, not a column, and also
the icon should use the same size as the text.

Use the new 'primary' and 'secondary' classes on the tabbars to
differentiate them.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 scss/material/_theme_post_material.scss | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/scss/material/_theme_post_material.scss b/scss/material/_theme_post_material.scss
index 0f448cb..c88b055 100644
--- a/scss/material/_theme_post_material.scss
+++ b/scss/material/_theme_post_material.scss
@@ -35,15 +35,27 @@ ul.pwt-menubar {
 
         span {
             display: flex;
-            flex-direction: column;
             align-items: center;
-            gap: 0;
+        }
+    }
+
+    &.primary {
+        .pwt-nav-link {
+            span {
+                gap: 0;
+                flex-direction: column;
 
-            &:before {
-                font-size: map-get($font-size, "headline-small");
+                &:before {
+                    font-size: map-get($font-size, "headline-small");
+                }
             }
         }
     }
+    &.secondary {
+        span {
+            flex-direction: row;
+        }
+    }
 }
 
 /// `pwt-datatable-content tr`
-- 
2.47.3



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

[yew-devel] applied: [PATCH yew-widget-toolkit/yew-widget-toolkit-assets 0/2] fix style for secondary material style tabs

[Dietmar Maurer]

[-- Attachment #1.1: Type: text/plain, Size: 7 bytes --]

applied

[-- Attachment #1.2: Type: text/html, Size: 201 bytes --]

[-- Attachment #2: Type: text/plain, Size: 160 bytes --]

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