more redesign

magnetophon · Oct 16, 2024 · 3c87720 · 3c87720
1 parent b9a55d2
commit 3c87720
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 37 deletions.
diff --git a/src/editor.rs b/src/editor.rs
@@ -115,34 +115,34 @@ pub(crate) fn create(editor_data: Data, editor_state: Arc<ViziaState>) -> Option
             // .child_left(Pixels(9.0))
             // .child_right(Pixels(9.0));
             VStack::new(cx, |cx| {
-                HStack::new(cx, |cx| {
-                    VStack::new(cx, |cx| {
-                        //meters
-                        HStack::new(cx, |cx| {
-                            Label::new(cx, "input").class("meter-label");
-                            PeakMeter::new(
-                                cx,
-                                Data::input_meter.map(|input_meter| {
-                                    util::gain_to_db(input_meter.load(Ordering::Relaxed))
-                                }),
-                                Some(Duration::from_millis(600)),
-                            );
-                        });
-                        HStack::new(cx, |cx| {
-                            Label::new(cx, "output").class("meter-label");
-                            PeakMeter::new(
-                                cx,
-                                Data::output_meter.map(|output_meter| {
-                                    util::gain_to_db(output_meter.load(Ordering::Relaxed))
-                                }),
-                                Some(Duration::from_millis(600)),
-                            );
-                        });
-                    });
+                ZStack::new(cx, |cx| {
                     Label::new(cx, "DEL2").class("plugin-name");
+                    DelayGraph::new(cx, Data::delay_data);
+                });
+                VStack::new(cx, |cx| {
+                    //meters
+                    HStack::new(cx, |cx| {
+                        PeakMeter::new(
+                            cx,
+                            Data::input_meter.map(|input_meter| {
+                                util::gain_to_db(input_meter.load(Ordering::Relaxed))
+                            }),
+                            Some(Duration::from_millis(600)),
+                        );
+                        Label::new(cx, "input").class("meter-label");
+                    });
+                    HStack::new(cx, |cx| {
+                        PeakMeter::new(
+                            cx,
+                            Data::output_meter.map(|output_meter| {
+                                util::gain_to_db(output_meter.load(Ordering::Relaxed))
+                            }),
+                            Some(Duration::from_millis(600)),
+                        );
+                        Label::new(cx, "output").class("meter-label");
+                    });
                 })
                 .class("meters_and_name");
-                DelayGraph::new(cx, Data::delay_data);
                 ResizeHandle::new(cx);
             });
         });

diff --git a/src/style.css b/src/style.css
@@ -23,7 +23,6 @@ param-slider {
     border-width: 1px;
     background-color: #4e4e4e;
     border-color: #fabdf0;
-    /* border-color: #e0ce91; */
     transition: background-color 300ms;
 }
 
@@ -56,15 +55,13 @@ param-slider .value-entry {
 /* } */
 .plugin-name {
     font-size: 42;
-    /* height: 50px; */
-    top: 5px;
-    left: 9px;
-    right: 9px;
-    /* width: 100px; */
+    top: 12px;
+    right: 18px;
 }
 
 .meters_and_name {
-    top: 9px;
+    top: 14px;
+    right: 9px;
     height: 80px;
 }
 
@@ -93,8 +90,10 @@ param-slider .value-entry {
 }
 
 delay-graph {
-    border-width: 3px;
-    outline-width: 6px;
+    top: 9px;
+    right: 9px;
+    border-width: 2px;
+    outline-width: 5px;
     border-color: #4e4e4e;
     outline-color: #5879af;
     selection-color: #fabdf0;
@@ -120,8 +119,7 @@ generic-ui .label {
 
 peak-meter {
     height: 30px;
-    width: 470px;
-    /* child-right: 9px; */
+    width: 589px;
     color: #e0ce91;
     left: 0px;
     bottom: 6px;
@@ -147,7 +145,7 @@ peak-meter .ticks__label {
 }
 .meter-label {
     child-left: 1s;
-    right: 9px;
+    right: 0px;
     /* top: 0px; */
     bottom: 24px;
     font-size: 15;