From b68ebb7c15bf0ce7c802b4231833d22091f41df9 Mon Sep 17 00:00:00 2001 From: Adam Treat Date: Wed, 13 Mar 2024 08:53:53 -0400 Subject: [PATCH] Rework the left chat panel to be persistently open. Signed-off-by: Adam Treat --- gpt4all-chat/CMakeLists.txt | 2 + gpt4all-chat/icons/left_panel_closed.svg | 3 + gpt4all-chat/icons/left_panel_open.svg | 3 + gpt4all-chat/main.qml | 87 ++++++++++++------------ gpt4all-chat/qml/ChatDrawer.qml | 10 +-- 5 files changed, 55 insertions(+), 50 deletions(-) create mode 100644 gpt4all-chat/icons/left_panel_closed.svg create mode 100644 gpt4all-chat/icons/left_panel_open.svg diff --git a/gpt4all-chat/CMakeLists.txt b/gpt4all-chat/CMakeLists.txt index 2720064b..2ead372f 100644 --- 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 new file mode 100644 index 00000000..edc4b34d --- /dev/null +++ b/gpt4all-chat/icons/left_panel_closed.svg @@ -0,0 +1,3 @@ + + + diff --git a/gpt4all-chat/icons/left_panel_open.svg b/gpt4all-chat/icons/left_panel_open.svg new file mode 100644 index 00000000..d6c08745 --- /dev/null +++ b/gpt4all-chat/icons/left_panel_open.svg @@ -0,0 +1,3 @@ + + + diff --git a/gpt4all-chat/main.qml b/gpt4all-chat/main.qml index 34339a82..0635023f 100644 --- 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 index 2c4350b0..2f243f36 100644 --- 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