live-preview: console scale control (#9199)

tools/lsp/ui/components/console-panel.slint

@@ -6,22 +6,101 @@ import { Api, LogMessage, LogMessageLevel } from "../api.slint";
 import { RecentColorPicker } from "widgets/floating-brush-sections/palettes.slint";
 import { SimpleColumn } from "layout-helpers.slint";
 import { ConsoleStyles, EditorSizeSettings, Icons,  } from "styling.slint";
-import { WindowManager } from "../windowglobal.slint";
+import {WindowGlobal } from "../windowglobal.slint";
 
 
 export component ConsolePanel inherits SimpleColumn {
     property <bool> panel-expanded: false;
+    property <bool> dragging-up: false;  // Track if currently dragging upward
+    property <length> panel-height: ConsoleStyles.log-height;
+    property <length> drag-start-height; // Track height at start of drag
+    property <length> previous-height: 300px; // Track previous panel height for restoration
+    property <bool> animate-panel: false; // Control animation state
+    property <bool> drag-started: false;
 
+    animate panel-height {
+        duration: animate-panel ? 200ms : 0ms;
+        easing: ease-out-quad;
+    }
+    changed panel-height => {
+        if !dragging-up && panel-height <= (-ConsoleStyles.header-height) {
+            panel-expanded = false;
+        }
+    }
     Rectangle {
         height: ConsoleStyles.header-height;
         background: ConsoleStyles.header-background;
+        main-resize-handle := TouchArea {
+            y: 0;
+            height: 4px;
+            mouse-cursor: ns-resize;
+            moved => {
+                if !panel-expanded && self.mouse-y < self.pressed-y {
+                    panel-expanded = true;
+                    dragging-up = true;
+                    drag-started = true;
+                    panel-height = Math.max(30px, -(self.mouse-y - self.pressed-y));
+                } else if panel-expanded {
+                    // Only update direction if we're actively moving
+                    if !drag-started {
+                        drag-started = true;
+                        dragging-up = self.mouse-y < self.pressed-y;
+                    }
+
+                    // Resizing panel during drag
+                    let max-height = WindowGlobal.window-height - 200px;
+                    let new-height = panel-height - (self.mouse-y - self.pressed-y);
+                    panel-height = Math.max((-ConsoleStyles.header-height), Math.min(max-height, new-height));
+                }
+            }
+            pointer-event(event) => {
+                if event.kind == PointerEventKind.down {
+                    drag-started = false;
+                    animate-panel = false; // Disable animation during drag
+                }
+                if event.kind == PointerEventKind.up {
+                    animate-panel = true;
+                }
+                // Make close decision on release
+                if event.kind == PointerEventKind.up && panel-expanded {
+
+                    if !dragging-up && panel-height <= 5px {
+                        // Store current height before closing (if it's a reasonable size)
+                        if panel-height > 50px {
+                            previous-height = panel-height;
+                        }
+                        panel-height = (-ConsoleStyles.header-height);
+                    }
+                    if dragging-up && panel-height <= 30px {
+                        panel-height = previous-height; // Restore previous height
+                    }
+                    // Also update previous-height when panel is at a good size
+                    if panel-height > 50px {
+                        previous-height = panel-height;
+                    }
+                    // Reset drag tracking
+                    dragging-up = false;
+                    drag-started = false;
+                }
+            }
+        }
+
         Rectangle {
             y: 0;
             width: 100%;
+            height: 2px;
+            background: ConsoleStyles.divider-line;
+            opacity: main-resize-handle.has-hover ? 1.0 : 0.3;
+        }
+
+        Rectangle {
+            y: parent.height - self.height;
+            width: 100%;
             height: 1px;
             background: ConsoleStyles.divider-line;
             opacity: 50%;
         }
+
         Rectangle {
             y: parent.height - self.height;
             width: 100%;
@@ -52,27 +131,16 @@ export component ConsolePanel inherits SimpleColumn {
             lm-ta := TouchArea {
                 mouse-cursor: MouseCursor.pointer;
                 clicked => {
-                    panel-expanded = true;
+                    if panel-expanded {
+                        animate-panel = true;
+                        panel-height = (-ConsoleStyles.header-height);
+                    } else {
+                        panel-height = previous-height;
+                        panel-expanded = true;
+                        animate-panel = true;
+                    }
                 }
             }
-            Rectangle {
-                x: 0;
-                y: parent.height - self.height;
-                width: min(last-message.preferred-width, last-message.width) - 4px;
-                height: 1px;
-                background: ConsoleStyles.slint-blue;
-                opacity: lm-ta.has-hover ? 0.8 : 0;
-
-            }
-        }
-
-        Rectangle {
-            x: 0;
-            y: parent.height - self.height;
-            width: label.width + label.x * 2;
-            height: 2px;
-            background: ConsoleStyles.slint-blue;
-            visible: panel-expanded;
         }
 
         HorizontalLayout {
@@ -128,7 +196,14 @@ export component ConsolePanel inherits SimpleColumn {
                 chevron-ta := TouchArea {
                     mouse-cursor: MouseCursor.pointer;
                     clicked => {
-                        panel-expanded = !panel-expanded;
+                        if panel-expanded {
+                            animate-panel = true;
+                            panel-height = (-ConsoleStyles.header-height);
+                        } else {
+                            panel-height = previous-height;
+                            panel-expanded = true;
+                            animate-panel = true;
+                        }
                     }
                 }
 
@@ -144,10 +219,12 @@ export component ConsolePanel inherits SimpleColumn {
             }
         }
     }
+
     if panel-expanded: Rectangle {
         width: 100%;
         height: ConsoleStyles.header-height;
         background: ConsoleStyles.toolbar-background;
+
         Rectangle {
             x: 0;
             width: 36px;
@@ -163,6 +240,7 @@ export component ConsolePanel inherits SimpleColumn {
                     }
                 }
             }
+
             Rectangle {
                 x: parent.width - self.width;
                 width: 1px;
@@ -181,12 +259,15 @@ export component ConsolePanel inherits SimpleColumn {
                 color: ConsoleStyles.text-color;
                 vertical-alignment: center;
             }
+
             Rectangle {
                 width: 6px;
             }
+
             Switch {
                 checked <=> Api.auto-clear-console;
             }
+
             Rectangle {
                 width: 10px;
             }
@@ -201,12 +282,14 @@ export component ConsolePanel inherits SimpleColumn {
     }
 
     if panel-expanded: Rectangle {
-        height: ConsoleStyles.log-height;
+        preferred-height: Math.min(panel-height, (WindowGlobal.window-height - 200px));
+        min-height: (-ConsoleStyles.header-height);
+
         background: ConsoleStyles.log-background;
 
         // Scroll to end workaround while this feature is missing from ScrollView
         property <int> timer-clicked: 0;
-        function scroll-to-bottom(){
+        function scroll-to-bottom() {
             lv.viewport-y = -100000px;
             timer-clicked = 0;
             scroll-timer.running = true;
@@ -246,6 +329,7 @@ export component ConsolePanel inherits SimpleColumn {
                     wrap: message.wrap;
                     visible: false;
                 }
+
                 message := TextInput {
                     x: 10px;
                     width: parent.width - 80px;

tools/lsp/ui/main.slint

@@ -132,7 +132,7 @@ export component PreviewUi inherits Window {
         WindowGlobal.window-height = self.height;
     }
 
-    VerticalLayout {
+    ap := VerticalLayout {
         if !Api.show-preview-ui: no-ui-drawing-rect := Rectangle {
             VerticalLayout {
                 ComponentContainer {
@@ -142,6 +142,7 @@ export component PreviewUi inherits Window {
         }
         if Api.show-preview-ui: Rectangle {
             VerticalLayout {
+                padding-bottom: 0px;
                 header-view := HeaderView {
                     show-left-sidebar <=> root.show-left-sidebar;
                     show-right-sidebar <=> root.show-right-sidebar;
@@ -233,9 +234,16 @@ export component PreviewUi inherits Window {
                     }
                 }
 
-                ConsolePanel { }
+                Rectangle {
+                    height: cp.height;
+                }
 
-                StatusLine { }
+                // StatusLine { }
+            }
+
+            cp := ConsolePanel {
+                y: parent.height - self.height - 1px;
+                width: parent.width;
             }
         }
     }