sanitize layout

plule · Oct 24, 2023 · 1cf7e3b · 1cf7e3b
1 parent 3ba89d1
commit 1cf7e3b
Show file tree

Hide file tree

Showing 11 changed files with 140 additions and 96 deletions.
diff --git a/theremotion-ui/ui/common.slint b/theremotion-ui/ui/common.slint
@@ -1,4 +1,4 @@
-import { HorizontalBox, LineEdit } from "std-widgets.slint";
+import { LineEdit } from "std-widgets.slint";
 import "./fonts/NotoEmoji-Bold.ttf";
 import "./fonts/NotoSans-Bold.ttf";
 
@@ -14,20 +14,22 @@ export global Palette {
     out property <color> inactive: porange.darker(200%);
 
     out property <color> neutral-bright: pbeige;
-    out property <color> neutral-dark: black;
+    out property <color> neutral-dark: porange.darker(500%);
+
+    out property <color> win-bg: pbeige.darker(6);
 
-    out property <color> win-bg: neutral-dark;
     out property <color> tab-bg: neutral-bright;
     out property <color> plot-bg: group-bg;
-    out property <color> group-bg: porange.darker(500%);
+    out property <color> group-bg: neutral-dark;
     out property <brush> screen-bg: @radial-gradient(circle,#ffffff21 0%, #ffffff00 100%);
 
     out property <color> button-inactive: neutral-bright;
     out property <color> button-active: porange;
     out property <color> button-hover: button-inactive.brighter(20%);
-    out property <brush> button-text: @linear-gradient(0deg, neutral-dark 0%, neutral-dark 30%, #4b4b4b 50%, neutral-dark 70%, neutral-dark 100%);
+    out property <brush> button-text: neutral-dark;
 
     out property <color> plot-grad: pgreen;
+    out property <color> plot-grad-text: neutral-bright;
     out property <color> lead: pcyan;
     out property <color> drone: ppink;
     out property <color> raw: porange;
@@ -48,13 +50,46 @@ export global Palette {
 }
 
 export global Style {
+    out property <length> area-padding: 8px;
+    out property <length> area-spacing: 8px;
+
     out property <length> area-corner-radius: 10px;
     out property <length> grad-extralight-thickness: 1px;
     out property <length> grad-light-thickness: 2px;
     out property <length> grad-strong-thickness: 5px;
     out property <length> grad-font-size: 20px;
 }
 
+export component HL inherits HorizontalLayout {
+    padding: Style.area-padding;
+    spacing: Style.area-spacing;
+}
+
+export component VL inherits VerticalLayout {
+    padding: Style.area-padding;
+    spacing: Style.area-spacing;
+}
+
+export component GL inherits GridLayout {
+    padding: Style.area-padding;
+    spacing: Style.area-spacing;
+}
+
+export component IHL inherits HorizontalLayout {
+    padding: 0px;
+    spacing: Style.area-spacing;
+}
+
+export component IVL inherits VerticalLayout {
+    padding: 0px;
+    spacing: Style.area-spacing;
+}
+
+export component IGL inherits GridLayout {
+    padding: 0px;
+    spacing: Style.area-spacing;
+}
+
 export component ScreenGlare {
     width: 100%;
     height: 100%;
@@ -203,8 +238,8 @@ export component TitleText inherits Text {
 }
 
 export component GradText inherits Text {
-    font-family: "Noto Emoji";
-    color: Palette.plot-grad;
+    font-family: "Noto Sans";
+    color: Palette.plot-grad-text;
     font-size: 20px;
 }
 
@@ -238,7 +273,7 @@ export component TouchButton inherits BevelRectangle {
     in property <brush> inactive-color: Palette.button-inactive;
     in property <brush> hover-color: Palette.button-hover;
     in property <string> font-family: "Noto Sans";
-    in property <length> font-size: 30px;
+    in property <length> font-size: 25px;
     in property <bool> checkable: true;
     background: ta.has-hover ? hover-color : inactive-color;
 
@@ -502,8 +537,9 @@ export component Group inherits Rectangle {
                 }
                 Rectangle {}
             }
+
 
-            Rectangle {
+            GL {
                 padding: 4px;
                 padding-top: 0px;
                 @children
@@ -536,7 +572,7 @@ export component SelectableButtons {
         interactive: true;
         viewport-height: options.length * 84px;
         //height: 100%;
-        for option[index] in options: HorizontalLayout {
+        for option[index] in options: HL {
             padding: 2px;
             spacing: 4px;
             height: 84px;
@@ -560,7 +596,7 @@ export component SelectableButtonsWithSave {
     callback delete-clicked <=> btns.delete-clicked;
     callback save-clicked(string);
 
-    HorizontalBox {
+    IHL {
         Group {
             width: 50%;
             //height: 10%;
@@ -569,11 +605,10 @@ export component SelectableButtonsWithSave {
         }
         Group {
             name: "Save new";
-            padding: 5px;
 
             //height: 78%;
-            VerticalLayout {
-                HorizontalBox {
+            IVL {
+                HL {
                     //height: 80px;
                     le:= LineEdit { 
                         font-size: 32px;
@@ -587,4 +622,5 @@ export component SelectableButtonsWithSave {
             }
         }
     }
-}
+}
+
diff --git a/theremotion-ui/ui/keyboard.slint b/theremotion-ui/ui/keyboard.slint
@@ -1,4 +1,4 @@
-import { Palette, Tab , BevelRectangle, Led, SmallText, Group} from "common.slint";
+import { Palette, Tab , BevelRectangle, Led, SmallText, Group, VL} from "common.slint";
 
 component Key inherits BevelRectangle {
     callback clicked;
@@ -164,36 +164,28 @@ export enum EditMode {
     Scale
 }
 
-export component KeyboardTab inherits Tab {
+export component KeyboardFooter {
     callback clicked <=> kb.clicked;
     in property <[bool]> scale-notes <=> kb.scale-notes;
     in property <[float]> leads <=> kb.leads;
     in property <[float]> drones <=> kb.drones;
     in property <int> root-pitch <=> kb.root-pitch;
     in property <EditMode> edit-mode: EditMode.Drone;
-    property <length> item-width: 75px;
-
-    VerticalLayout {
-        Rectangle {
-            @children
-        }
 
+    VerticalLayout {
         Group {
             has-name: false;
             height: 110px;
             VerticalLayout {
-                padding: 8px;
-                padding-top: 0px;
-
                 HorizontalLayout {
                     alignment: LayoutAlignment.center;
                     kb := Keyboard {
-                        height: 85px;
+                        y: -5px;
+                        height: 80px;
                         width: 700px;
                     }
                 }
 
-
                 HorizontalLayout {
                     height: 30px;
                     alignment: LayoutAlignment.center;
@@ -216,6 +208,5 @@ export component KeyboardTab inherits Tab {
             }
 
         }
-
     }
-}
+}
diff --git a/theremotion-ui/ui/main.slint b/theremotion-ui/ui/main.slint
@@ -1,4 +1,4 @@
-import { Palette, Style, Handedness, TitleText, BevelRectangle} from "common.slint";
+import { Palette, Style, Handedness, TitleText, BevelRectangle, GL} from "common.slint";
 import { PlayingTab } from "tab-play.slint";
 import { SettingsTab } from "tab-settings.slint";
 import { RootTab } from "tab-root.slint";
@@ -178,7 +178,7 @@ export component MainWindow inherits Window {
         }
     }
 
-    GridLayout {
+    GL {
         spacing: 0px;
         padding: 2px;
 
@@ -280,7 +280,7 @@ export component MainWindow inherits Window {
                     height: icon-size;
                     Text {
                         text: tab.icon;
-                        color: active-tab == idx ? Palette.button-text : Palette.neutral-bright;
+                        color: active-tab == idx ? Palette.win-bg : Palette.neutral-bright;
                         animate color {
                              easing: ease-out;
                              duration: 100ms;

diff --git a/theremotion-ui/ui/plot.slint b/theremotion-ui/ui/plot.slint
@@ -1,4 +1,4 @@
-import { Palette, Style , GradText, BevelRectangle, ScreenGlare , CaptionText} from "common.slint";
+import { Palette, Style , GradText, BevelRectangle, ScreenGlare } from "common.slint";
 
 export struct Graduation {
     value: float,
@@ -14,10 +14,10 @@ export component Plot inherits BevelRectangle {
     clip: true;
     @children
 
-    CaptionText {
+    GradText {
+        z: 1;
         y: root.height - self.font-size*2;
         text: text;
-        color: Palette.plot-grad.darker(50%);
     }
     ScreenGlare {}
 }
@@ -54,7 +54,7 @@ export component Plot1D inherits Plot {
             y: to-px-y(graduation.value);
             GradText {
                 text: graduation.text;
-                y: -self.font-size;
+                y: -self.font-size - 10px;
             }
         }
 
@@ -130,10 +130,8 @@ export component Tuner inherits Plot {
                 background: Palette.plot-grad;
                 width: Style.grad-strong-thickness;
                 x: note-to-px(octave * 12 + note.value) - self.width / 2;
-                Text {
+                GradText {
                     text: "\{note.text}\{octave}";
-                    color: Palette.plot-grad;
-                    font-size: 20px;
                     x: 15px;
                 }
             }

diff --git a/theremotion-ui/ui/tab-effects.slint b/theremotion-ui/ui/tab-effects.slint
@@ -1,5 +1,4 @@
-import { Tab , CaptionedRotaryKnob, Group, TouchButton, TextTouchButton} from "common.slint";
-import { GridBox , VerticalBox} from "std-widgets.slint";
+import { Tab , CaptionedRotaryKnob, Group, TouchButton, TextTouchButton, GL, HL, VL} from "common.slint";
 
 export component EffectsTab inherits Tab {
     in-out property <float> echo-amount: 0;
@@ -27,12 +26,14 @@ export component EffectsTab inherits Tab {
     property <length> inner-padding: 10px;
     property <length> inner-spacing: 40px;
 
-    GridBox {
+    GL {
         Group {
             col: 0;
             rowspan: 2;
             name: "Echo";
-            GridBox {
+            GL {
+                spacing: inner-spacing;
+                padding: inner-padding;
                 CaptionedRotaryKnob { 
                     text: "Amount";
                     value: echo-amount;
@@ -64,7 +65,7 @@ export component EffectsTab inherits Tab {
             rowspan: 2;
             name: "Reverb";
 
-            GridBox {
+            GL {
                 spacing: inner-spacing;
                 padding: inner-padding;
                 CaptionedRotaryKnob {
@@ -105,7 +106,7 @@ export component EffectsTab inherits Tab {
             col: 2;
             name: "Drone";
             height: 50%;
-            HorizontalLayout {
+            HL {
                 alignment: LayoutAlignment.center;
                 spacing: inner-spacing;
                 padding: inner-padding;
@@ -121,7 +122,7 @@ export component EffectsTab inherits Tab {
             col: 2;
             row: 1;
             name: "Pluck Drone";
-            VerticalBox {
+            VL {
                 gdrone := TextTouchButton { 
                     text: "Enable";
                 }

diff --git a/theremotion-ui/ui/tab-mix.slint b/theremotion-ui/ui/tab-mix.slint
@@ -1,5 +1,4 @@
-import { CaptionedFader, Tab , Group} from "common.slint";
-import { HorizontalBox} from "std-widgets.slint";
+import { CaptionedFader, Tab , Group, HL} from "common.slint";
 
 export component MixTab inherits Tab {
     in-out property mix-lead <=> lead.value;
@@ -14,10 +13,10 @@ export component MixTab inherits Tab {
     callback mix-master-changed <=> master.changed;
 
 
-    HorizontalBox {
+    HL {
         alignment: LayoutAlignment.space-around;
         Group {
-            HorizontalLayout {
+            HL {
                 lead := CaptionedFader {
                     text: "Lead";
                 }
@@ -30,7 +29,7 @@ export component MixTab inherits Tab {
             }
         }
         Group {
-            HorizontalLayout {
+            HL {
                 master := CaptionedFader {
                     text: "Master";
                 }