Rework the left chat panel to be persistently open.

Signed-off-by: Adam Treat <[email protected]>
zdj15534309450 · Mar 13, 2024 · b68ebb7 · b68ebb7
1 parent 0072860
commit b68ebb7
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 50 deletions.
diff --git a/gpt4all-chat/CMakeLists.txt b/gpt4all-chat/CMakeLists.txt
@@ -142,6 +142,8 @@ qt_add_qml_module(chat
       icons/network.svg
       icons/thumbs_up.svg
       icons/thumbs_down.svg
+      icons/left_panel_closed.svg
+      icons/left_panel_open.svg
       icons/logo.svg
       icons/logo-32.png
       icons/logo-48.png

diff --git a/gpt4all-chat/icons/left_panel_closed.svg b/gpt4all-chat/icons/left_panel_closed.svg
diff --git a/gpt4all-chat/icons/left_panel_open.svg b/gpt4all-chat/icons/left_panel_open.svg
diff --git a/gpt4all-chat/main.qml b/gpt4all-chat/main.qml
@@ -528,57 +528,24 @@ Window {
         }
     }
 
-    Button {
+    MyToolButton {
         id: drawerButton
+        backgroundColor: theme.iconBackgroundLight
         anchors.left: parent.left
         anchors.top: parent.top
         anchors.topMargin: 42.5
         anchors.leftMargin: 30
         width: 40
         height: 40
+        scale: 1.5
         z: 200
         padding: 15
-
+        source: conversation.state === "expanded" ? "qrc:/gpt4all/icons/left_panel_open.svg" : "qrc:/gpt4all/icons/left_panel_closed.svg"
         Accessible.role: Accessible.ButtonMenu
-        Accessible.name: qsTr("Main menu")
-        Accessible.description: qsTr("Navigation drawer with options")
-
-        background: Item {
-            anchors.centerIn: parent
-            width: 30
-            height: 30
-
-            Rectangle {
-                id: bar1
-                color: drawerButton.hovered ? theme.iconBackgroundHovered : theme.iconBackgroundLight
-                width: parent.width
-                height: 6
-                radius: 2
-                antialiasing: true
-            }
-
-            Rectangle {
-                id: bar2
-                anchors.centerIn: parent
-                color: drawerButton.hovered ? theme.iconBackgroundHovered : theme.iconBackgroundLight
-                width: parent.width
-                height: 6
-                radius: 2
-                antialiasing: true
-            }
-
-            Rectangle {
-                id: bar3
-                anchors.bottom: parent.bottom
-                color: drawerButton.hovered ? theme.iconBackgroundHovered : theme.iconBackgroundLight
-                width: parent.width
-                height: 6
-                radius: 2
-                antialiasing: true
-            }
-        }
+        Accessible.name: qsTr("Chat panel")
+        Accessible.description: qsTr("Chat panel with options")
         onClicked: {
-            drawer.visible = !drawer.visible
+            conversation.toggleLeftPanel()
         }
     }
 
@@ -857,9 +824,10 @@ Window {
 
     ChatDrawer {
         id: drawer
-        y: header.height + accentRibbon.height
-        width: Math.min(600, 0.3 * window.width)
-        height: window.height - y
+        anchors.left: parent.left
+        anchors.top: accentRibbon.bottom
+        anchors.bottom: parent.bottom
+        width: Math.min(600, 0.2 * window.width)
         onDownloadClicked: {
             downloadNewModels.showEmbeddingModels = false
             downloadNewModels.open()
@@ -884,6 +852,39 @@ Window {
         anchors.right: parent.right
         anchors.bottom: parent.bottom
         anchors.top: accentRibbon.bottom
+        state: "collapsed"
+
+        states: [
+            State {
+                name: "expanded"
+                AnchorChanges {
+                    target: conversation
+                    anchors.left: drawer.right
+                }
+            },
+            State {
+                name: "collapsed"
+                AnchorChanges {
+                    target: conversation
+                    anchors.left: parent.left
+                }
+            }
+        ]
+
+        function toggleLeftPanel() {
+            if (conversation.state === "expanded") {
+                conversation.state = "collapsed";
+            } else {
+                conversation.state = "expanded";
+            }
+        }
+
+        transitions: Transition {
+            AnchorAnimation {
+                easing.type: Easing.InOutQuad
+                duration: 200
+            }
+        }
 
         ScrollView {
             id: scrollView

diff --git a/gpt4all-chat/qml/ChatDrawer.qml b/gpt4all-chat/qml/ChatDrawer.qml
@@ -9,9 +9,8 @@ import download
 import network
 import mysettings
 
-Drawer {
+Rectangle {
     id: chatDrawer
-    modal: false
 
     Theme {
         id: theme
@@ -20,10 +19,7 @@ Drawer {
     signal downloadClicked
     signal aboutClicked
 
-    background: Rectangle {
-        height: parent.height
-        color: theme.containerBackground
-    }
+    color: theme.containerBackground
 
     Item {
         anchors.fill: parent
@@ -94,7 +90,7 @@ Drawer {
                         wrapMode: Text.NoWrap
                         hoverEnabled: false // Disable hover events on the TextArea
                         selectByMouse: false // Disable text selection in the TextArea
-                        font.pixelSize: theme.fontSizeLarger
+                        font.pixelSize: theme.fontSizeLarge
                         text: readOnly ? metrics.elidedText : name
                         horizontalAlignment: TextInput.AlignLeft
                         opacity: trashQuestionDisplayed ? 0.5 : 1.0