Add field reordering

danielstuart14 · Jul 4, 2024 · 55b79df · 55b79df
1 parent 8615fd6
commit 55b79df
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 14 deletions.
diff --git a/assets/main.css b/assets/main.css
@@ -74,7 +74,7 @@ html,body, #st-full-pg {
 }
 
 .button:hover {
-  background-color: #2c6c97;
+  background-color: #275d81;
 }
 
 .button:focus {
@@ -83,14 +83,14 @@ html,body, #st-full-pg {
 }
 
 .button:disabled {
-  background-color: #94c1d3;
+  background-color: #757575;
   border-color: rgba(27, 31, 35, .1);
   color: rgba(255, 255, 255, .8);
   cursor: default;
 }
 
-.button:active {
-  background-color: #235979;
+.button:active:enabled {
+  background-color: #1f4c66;
   box-shadow: rgba(20, 52, 70, 0.2) 0 1px 0 inset;
 }
 
@@ -105,6 +105,17 @@ html,body, #st-full-pg {
     line-height: 0px;
 }
 
+.arrow_button {
+  border-radius: 0;
+  padding: 1px 6px;
+  line-height: 0px;
+}
+
+.arrow_column {
+  gap: 1px;
+}
+
+
 .title {
     line-height: 100%;
 }

diff --git a/src/main.rs b/src/main.rs
@@ -1,7 +1,7 @@
 mod utils;
 
 use dioxus::prelude::*;
-use dioxus_free_icons::{icons::fa_solid_icons::{FaPlus, FaX}, Icon};
+use dioxus_free_icons::{icons::fa_solid_icons::{FaCaretDown, FaCaretUp, FaPlus, FaX}, Icon};
 use hex_color::{Display, HexColor};
 use protoviz::descriptor::ProtoDescriptor;
 use dioxus_logger::tracing::{Level, error};
@@ -133,16 +133,32 @@ fn app() -> Element {
                 div { class: "list",
                     for (i, field) in input_fields.read().iter().enumerate() {
                         div { class: "row list_row",
-                            button { class: "button circle_button",
-                                onclick: move |_| {
-                                    input_fields.write().remove(i);
-                                    descriptor.write().fields = create_field_descriptors(&input_fields.read());
-                                    *svg_data.write() = update_svg(&descriptor.read());
+                            div { class: "column arrow_column",
+                                button { class: "button arrow_button",
+                                    disabled: i == 0,
+                                    onclick: move |_| {
+                                        input_fields.write().swap(i, i - 1);
+                                        descriptor.write().fields = create_field_descriptors(&input_fields.read());
+                                        *svg_data.write() = update_svg(&descriptor.read());
+                                    },
+                                    Icon {
+                                        width: 10,
+                                        height: 10,
+                                        icon: FaCaretUp,
+                                    },
                                 },
-                                Icon {
-                                    width: 15,
-                                    height: 15,
-                                    icon: FaX,
+                                button { class: "button arrow_button",
+                                    disabled: i == input_fields.read().len() - 1,
+                                    onclick: move |_| {
+                                        input_fields.write().swap(i, i + 1);
+                                        descriptor.write().fields = create_field_descriptors(&input_fields.read());
+                                        *svg_data.write() = update_svg(&descriptor.read());
+                                    },
+                                    Icon {
+                                        width: 10,
+                                        height: 10,
+                                        icon: FaCaretDown,
+                                    },
                                 },
                             },
                             input { class: "text_entry", style: "flex: 2;",
@@ -186,6 +202,18 @@ fn app() -> Element {
                                     descriptor.write().fields = create_field_descriptors(&input_fields.read());
                                     *svg_data.write() = update_svg(&descriptor.read());
                                 }
+                            },
+                            button { class: "button circle_button",
+                                onclick: move |_| {
+                                    input_fields.write().remove(i);
+                                    descriptor.write().fields = create_field_descriptors(&input_fields.read());
+                                    *svg_data.write() = update_svg(&descriptor.read());
+                                },
+                                Icon {
+                                    width: 12,
+                                    height: 12,
+                                    icon: FaX,
+                                },
                             }
                         }
                     }