improvements

marc2332 · Nov 17, 2023 · bcfd763 · bcfd763
1 parent 96503d0
commit bcfd763
Show file tree

Hide file tree

Showing 9 changed files with 72 additions and 15 deletions.
diff --git a/crates/components/src/button.rs b/crates/components/src/button.rs
@@ -8,7 +8,7 @@ use winit::window::CursorIcon;
 #[derive(Props)]
 pub struct ButtonProps<'a> {
     /// Padding for the Button.
-    #[props(default = "10 14".to_string(), into)]
+    #[props(default = "8 16".to_string(), into)]
     pub padding: String,
     /// Margin for the Button.
     #[props(default = "4".to_string(), into)]

diff --git a/crates/components/src/dropdown.rs b/crates/components/src/dropdown.rs
@@ -1,5 +1,6 @@
 use std::fmt::Display;
 
+use crate::icons::ArrowIcon;
 use dioxus::prelude::*;
 use freya_elements::elements as dioxus_elements;
 use freya_elements::events::keyboard::Key;
@@ -97,11 +98,10 @@ where
 
     render!(rect {
         color: "{color}",
-        height: "35",
         focus_id: focus_id,
         role: "button",
         background: "{background}",
-        padding: "10 14",
+        padding: "6 22 6 16",
         corner_radius: "6",
         main_align: "center",
         cross_align: "center",
@@ -238,6 +238,7 @@ where
     };
     let border_fill = theme.dropdown.border_fill;
     let color = theme.dropdown.font_theme.color;
+    let arrow_fill = theme.dropdown.arrow_fill;
 
     let selected = selected.read().to_string();
 
@@ -252,14 +253,21 @@ where
             background: "{button_background}",
             color: "{color}",
             corner_radius: "8",
-            padding: "8 20",
+            padding: "8 16",
             border: "1 solid {border_fill}",
             shadow: "0 4 5 0 rgb(0, 0, 0, 30)",
+            direction: "horizontal",
+            main_align: "center",
+            cross_align: "center",
             label {
                 text_align: "center",
                 "{selected}"
             }
-
+            ArrowIcon {
+                rotate: "0",
+                fill: "{arrow_fill}",
+                margin: "0 0 0 8",
+            }
         }
         if *opened.get() {
             rsx!(

diff --git a/crates/components/src/icons/arrow.rs b/crates/components/src/icons/arrow.rs
@@ -0,0 +1,32 @@
+use dioxus::prelude::*;
+use freya_elements::elements as dioxus_elements;
+
+#[derive(Props, PartialEq)]
+pub struct ArrowIcon {
+    #[props(into)]
+    rotate: String,
+    #[props(into)]
+    fill: String,
+    #[props(into, default = "none".to_string())]
+    margin: String,
+}
+
+#[allow(non_snake_case)]
+pub fn ArrowIcon(cx: Scope<ArrowIcon>) -> Element {
+    let ArrowIcon {
+        rotate,
+        fill,
+        margin,
+    } = &cx.props;
+    render!(svg {
+        height: "10",
+        width: "10",
+        margin: "{margin}",
+        rotate: "{rotate}deg",
+        svg_content: r#"
+            <svg viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M7.18177 9.58579L0 2.40401L1.81823 0.585785L9 7.76756L16.1818 0.585787L18 2.40402L10.8182 9.58579L10.8185 9.58601L9.00023 11.4042L9 11.404L8.99977 11.4042L7.18154 9.58602L7.18177 9.58579Z" fill="{fill}" stroke="{fill}" stroke-width="2"/>
+            </svg>
+        "#
+    })
+}
diff --git a/crates/components/src/icons/mod.rs b/crates/components/src/icons/mod.rs
@@ -0,0 +1,3 @@
+mod arrow;
+
+pub use arrow::*;
diff --git a/crates/components/src/lib.rs b/crates/components/src/lib.rs
@@ -10,6 +10,7 @@ mod dropdown;
 mod external_link;
 mod gesture_area;
 mod graph;
+mod icons;
 mod input;
 mod loader;
 mod network_image;
@@ -30,6 +31,7 @@ pub use dropdown::*;
 pub use external_link::*;
 pub use gesture_area::*;
 pub use graph::*;
+pub use icons::*;
 pub use input::*;
 pub use loader::*;
 pub use network_image::*;

diff --git a/crates/components/src/table.rs b/crates/components/src/table.rs
@@ -1,3 +1,4 @@
+use crate::icons::ArrowIcon;
 use dioxus::prelude::*;
 use freya_elements::elements as dioxus_elements;
 use freya_elements::events::MouseEvent;
@@ -13,15 +14,9 @@ fn TableArrow(cx: Scope, order_direction: OrderDirection) -> Element {
         OrderDirection::Up => "180",
     };
 
-    render!(svg {
-        height: "10",
-        width: "10",
-        rotate: "{rotate}deg",
-        svg_content: r#"
-            <svg viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path fill-rule="evenodd" clip-rule="evenodd" d="M7.18177 9.58579L0 2.40401L1.81823 0.585785L9 7.76756L16.1818 0.585787L18 2.40402L10.8182 9.58579L10.8185 9.58601L9.00023 11.4042L9 11.404L8.99977 11.4042L7.18154 9.58602L7.18177 9.58579Z" fill="{arrow_fill}"  stroke="{arrow_fill}" stroke-width="2"/>
-            </svg>
-        "#
+    render!(ArrowIcon {
+        rotate: "{rotate}",
+        fill: "{arrow_fill}"
     })
 }
 

diff --git a/crates/elements/src/elements.rs b/crates/elements/src/elements.rs
@@ -293,6 +293,7 @@ builder_constructors! {
         focusable: String,
     };
     svg {
+        margin: String,
         svg_data: String,
         svg_content: String,
         width: String,

diff --git a/crates/hooks/src/use_theme.rs b/crates/hooks/src/use_theme.rs
@@ -42,6 +42,7 @@ pub struct DropdownTheme {
     pub hover_background: &'static str,
     pub font_theme: FontTheme,
     pub border_fill: &'static str,
+    pub arrow_fill: &'static str,
 }
 
 /// Theming properties for Button components.
@@ -212,6 +213,7 @@ pub const LIGHT_THEME: Theme = Theme {
             color: "rgb(10, 10, 10)",
         },
         border_fill: "rgb(210, 210, 210)",
+        arrow_fill: "rgb(40, 40, 40)",
     },
     dropdown_item: DropdownItemTheme {
         background: "white",
@@ -288,6 +290,7 @@ pub const DARK_THEME: Theme = Theme {
         hover_background: "rgb(45, 45, 45)",
         font_theme: FontTheme { color: "white" },
         border_fill: "rgb(80, 80, 80)",
+        arrow_fill: "rgb(40, 40, 40)",
     },
     dropdown_item: DropdownItemTheme {
         background: "rgb(35, 35, 35)",

diff --git a/examples/dropdown.rs b/examples/dropdown.rs
@@ -33,9 +33,22 @@ fn app(cx: Scope) -> Element {
             })
         }
         Button {
+            onclick: |_| selected_dropdown.set("Value A".to_string()),
             label {
-                "Hello World"
+                "Reset"
             }
         }
+        Dropdown {
+            value: selected_dropdown.get().clone(),
+            values.iter().map(|ch| {
+                rsx!(
+                    DropdownItem {
+                        value: ch.to_string(),
+                        onclick: move |_| selected_dropdown.set(ch.to_string()),
+                        label { "{ch}" }
+                    }
+                )
+            })
+        }
     )
 }