em: fix issues after layout pr update (slint-ui#2427)

Mehrbod2002 · Mar 28, 2023 · b2a149e · b2a149e
1 parent c6472f9
commit b2a149e
Show file tree

Hide file tree

Showing 9 changed files with 87 additions and 47 deletions.
diff --git a/examples/energy-monitor/ui/big_main.slint b/examples/energy-monitor/ui/big_main.slint
@@ -7,10 +7,10 @@ import { Dashboard, WeatherAdapter } from "pages/pages.slint";
 import { Header, HeaderAdapter } from "blocks/blocks.slint";
 
 export component BigMain{
-    VerticalLayout {  
+    VerticalLayout {
         Header {}
-        
-        i-tab-widget := TabWidget {  
+
+        i-tab-widget := TabWidget {
             tabs: [
                 "Dashboard",
                 "Energy Flow",
@@ -19,7 +19,7 @@ export component BigMain{
                 "Settings",
             ];
 
-            Dashboard {  
+            Dashboard {
                 index: 0;
                 current-index: i-tab-widget.selected-tab;
             }

diff --git a/examples/energy-monitor/ui/desktop_window.slint b/examples/energy-monitor/ui/desktop_window.slint
@@ -29,9 +29,20 @@ export component MainWindow inherits Window {
     min-height: 240px;
     background: Theme.palette.pure-black;
 
-    if show-big : BigMain {}
-    if show-mid : MidMain {}
-    if show-small : SmallMain {}
+    if show-big : BigMain {
+        preferred-width: 100%;
+        preferred-height: 100%;
+    }
+
+    if show-mid : MidMain {
+        preferred-width: 100%;
+        preferred-height: 100%;
+    }
+
+    if show-small : SmallMain {
+        preferred-width: 100%;
+        preferred-height: 100%;
+    }
 
     if SettingsAdapter.kiosk-mode-checked : KioskOverlay {}
 }
diff --git a/examples/energy-monitor/ui/mid_main.slint b/examples/energy-monitor/ui/mid_main.slint
@@ -63,13 +63,17 @@ export component MidMain {
 
         i-menu := Menu {
             stays-open: true;
-
+            preferred-width: 100%;
+            preferred-height: 100%;
             start-y: 35px;
             end-y: 75px;
             menu-width: root.width / 3;
             menu-height: root.height - 75px;
 
             i-menu-page := MenuPage {
+                preferred-width: 100%;
+                preferred-height: 100%;
+
                 page-changed(index) => {
                     i-menu.hide();
                     show-page(index);

diff --git a/examples/energy-monitor/ui/pages/dashboard.slint b/examples/energy-monitor/ui/pages/dashboard.slint
@@ -15,7 +15,10 @@ export component ValueTile {
     in property <bool> active;
 
     i-group-box := GroupBox {
-        i-value-display := ValueDisplay {  
+        preferred-width: 100%;
+        preferred-height: 100%;
+
+        i-value-display := ValueDisplay {
             active: root.active;
         }
     }
@@ -28,20 +31,20 @@ export component BarChartTile {
     in property <float> min <=> i-bar-chart.min;
     in property <float> max <=> i-bar-chart.max;
     in property <bool> active;
- 
-    i-group-box := GroupBox {  
-        i-value-display := ValueDisplay { 
+
+    i-group-box := GroupBox {
+        i-value-display := ValueDisplay {
             min-width: 216px;
             horizontal-stretch: 0;
             alternative-colors: true;
             active: root.active;
             vertical: true;
         }
 
-        i-bar-chart := BarChart {  
+        i-bar-chart := BarChart {
             horizontal-stretch: 1;
-        }  
-    }  
+        }
+    }
 }
 
 export component WeatherTile {
@@ -52,7 +55,7 @@ export component WeatherTile {
     in property <string> current-weather-description <=> i-tile.sub-text;
     in property <[BarTileModel]> week-model <=> i-bar-tiles.model;
 
-    i-group-box := GroupBox {  
+    i-group-box := GroupBox {
         spacing: 1px;
         i-tile := Tile {}
         i-bar-tiles := BarTiles {}
@@ -68,10 +71,11 @@ export component BalanceTile {
     in property <string> y-unit;
     in property <string> title;
 
-    GroupBox {  
+    GroupBox {
         title: root.title;
 
-        BalanceChart {  
+        BalanceChart {
+
             x-axis-model: root.x-axis-model;
             y-axis-model: root.y-axis-model;
             model: root.model;
@@ -83,7 +87,7 @@ export component BalanceTile {
 }
 
 export component Dashboard inherits Page {
-    GridLayout {  
+    GridLayout {
         padding-left: 20px;
         padding-right: 20px;
         padding-top: 20px;
@@ -92,7 +96,7 @@ export component Dashboard inherits Page {
 
         Row {
             ValueTile {
-                title: OverviewAdapter.production-title; 
+                title: OverviewAdapter.production-title;
                 model: OverviewAdapter.production-model;
                 active: root.active;
              }
@@ -106,7 +110,7 @@ export component Dashboard inherits Page {
         }
 
         Row {
-            BalanceTile {  
+            BalanceTile {
                 x-axis-model <=> BalanceAdapter.x-axis-model;
                 y-axis-model <=> BalanceAdapter.y-axis-model;
                 model <=> BalanceAdapter.model;
@@ -116,7 +120,7 @@ export component Dashboard inherits Page {
                 title <=> BalanceAdapter.title;
             }
 
-            WeatherTile {  
+            WeatherTile {
                 title <=> WeatherAdapter.title;
                 current-temperature-icon <=> WeatherAdapter.current-temperature-icon;
                 current-temperature <=> WeatherAdapter.current-temperature;
@@ -136,6 +140,6 @@ export component Dashboard inherits Page {
                 value-model: UsageAdapter.overview-model;
                 active: root.active;
             }
-        } 
+        }
     }
 }
diff --git a/examples/energy-monitor/ui/pages/usage.slint b/examples/energy-monitor/ui/pages/usage.slint
@@ -45,20 +45,22 @@ export component Usage inherits Page {
     in property <float> min <=> UsageAdapter.min;
     in property <float> max <=> UsageAdapter.max;
 
-    GroupBox {  
+    GroupBox {
         title: root.title;
 
-        Rectangle {  
-            BarChart {  
+        Rectangle {
+            BarChart {
+                preferred-width: 100%;
+                preferred-height: 100%;
                 model: root.model;
                 min: root.min;
                 max: root.max;
             }
 
-            VerticalLayout {  
+            VerticalLayout {
                 alignment: start;
 
-                ValueDisplay { 
+                ValueDisplay {
                     model: overview-model;
                     transparent-background: true;
                     alternative-colors: true;

diff --git a/examples/energy-monitor/ui/small_main.slint b/examples/energy-monitor/ui/small_main.slint
@@ -40,12 +40,17 @@ export component SmallMain {
     }
 
     i-menu := Menu {
+        preferred-width: 100%;
+        preferred-height: 100%;
         start-y:  25px;
         end-y: 22px;
         menu-width: parent.width - 8px;
         menu-height: parent.height - 14px;
 
         if(i-menu.open) : MenuPage {
+            preferred-width: 100%;
+            preferred-height: 100%;
+
             page-changed => {
                 i-menu.hide();
             }

diff --git a/examples/energy-monitor/ui/widgets/balance_chart.slint b/examples/energy-monitor/ui/widgets/balance_chart.slint
@@ -6,32 +6,32 @@ import { ChartAxis, AxisLabel, AxisValue } from "chart_axis.slint";
 import { ChartPattern, BarBackground } from "chart_pattern.slint";
 
 component UpBar {
-    VerticalLayout {  
-        Rectangle {  
+    VerticalLayout {
+        Rectangle {
             height: 0.6 * root.height;
             background: Theme.palette.alternative-bar-gradient;
         }
- 
-        Rectangle {  
+
+        Rectangle {
             height: 0.4 * root.height;
             background: Theme.palette.alternative-light-bar-gradient;
         }
     }
 }
 
 component DownBar {
-    VerticalLayout {  
-        Rectangle {  
+    VerticalLayout {
+        Rectangle {
             height: 0.37 * root.height;
             background: Theme.palette.inverted-bar-gradient;
         }
- 
-        Rectangle {  
+
+        Rectangle {
             height: 0.26 * root.height;
             background: Theme.palette.inverted-alternative-bar-gradient;
         }
 
-        Rectangle {  
+        Rectangle {
             height: 0.37 * root.height;
             background: Theme.palette.inverted-alternative-bar-gradient;
         }
@@ -40,27 +40,33 @@ component DownBar {
 
 export component BalanceChart {
     private property <length> zero: root.height * (1 - (0. - min) / (max - min));
-    
+
     in property <float> min;
     in property <float> max;
     in property <[string]> x-axis-model;
     in property <[int]> y-axis-model;
     in property <string> y-unit;
     in property <[float]> model;
 
-    i-zero-pattern := ChartPattern {  
+    i-zero-pattern := ChartPattern {
+        preferred-width: 100%;
+        preferred-height: 100%;
         y: 0px;
         count: x-axis-model.length;
         height: root.zero;
     }
 
-    ChartPattern {  
+    ChartPattern {
+        preferred-width: 100%;
+        preferred-height: 100%;
         y: i-zero-pattern.height;
         count: x-axis-model.length;
         height: root.height - i_zero_pattern.height;
     }
 
-    ChartAxis {  
+    ChartAxis {
+        preferred-width: 100%;
+        preferred-height: 100%;
         x-model: x-axis-model;
         y-model: y-axis-model;
         vertical-stretch: 1;
@@ -69,19 +75,21 @@ export component BalanceChart {
         y-unit: root.y-unit;
     }
 
-    HorizontalLayout {  
+    HorizontalLayout {
         padding-left: 6px;
         padding-right: 6px;
         spacing: 10px;
 
         for value[index] in model : Rectangle {
             if(value > 0.0) : UpBar {
+                width: 100%;
                 y: zero - self.height;
                 height: parent.height * (value / (root.max - root.min));
             }
 
             if(value < 0.0) : DownBar {
                 y: zero;
+                width: 100%;
                 height: parent.height * (-1 * value / (root.max - root.min));
             }
         }

diff --git a/examples/energy-monitor/ui/widgets/group_box.slint b/examples/energy-monitor/ui/widgets/group_box.slint
@@ -7,19 +7,22 @@ export component GroupBox {
     in property <string> title <=> i-title.text;
     in property <length> spacing;
 
-    VerticalLayout {  
+    preferred-width: 100%;
+    preferred-height: 100%;
+
+    VerticalLayout {
         spacing: Theme.spaces.medium;
-        
-        i-title := Text {  
+
+        i-title := Text {
             horizontal-alignment: left;
             color: Theme.palette.white;
             font-size: Theme.typo.header.size;
             font-weight: Theme.typo.header.weight;
         }
 
-        i-layout := HorizontalLayout { 
+        i-layout := HorizontalLayout {
             spacing: root.spacing;
-            
+
             @children
         }
     }

diff --git a/examples/energy-monitor/ui/widgets/navigation.slint b/examples/energy-monitor/ui/widgets/navigation.slint
@@ -15,6 +15,9 @@ export component Navigation {
     in-out property <int> current-index <=> i-pagination.selected-index;
     in property <int> page-count <=> i-pagination.count;
 
+    preferred-width: 100%;
+    preferred-height: 100%;
+
     VerticalLayout {
         padding-top: Theme.spaces.small;