Begin redesign of settings dialog.

This commit is contained in:
Adam Treat 2023-06-30 09:50:09 -04:00 committed by AT
parent dedb0025be
commit 2a6c673c25
7 changed files with 169 additions and 44 deletions

View File

@ -98,6 +98,7 @@ qt_add_qml_module(chat
qml/PopupDialog.qml
qml/AboutDialog.qml
qml/Theme.qml
qml/ModelSettings.qml
qml/GenerationSettings.qml
qml/ApplicationSettings.qml
qml/LocalDocsSettings.qml

View File

@ -7,7 +7,7 @@ import localdocs
import mysettings
MySettingsTab {
title: qsTr("Generation")
title: qsTr("Presets")
contentItem: GridLayout {
id: generationSettingsTabInner
columns: 2

View File

@ -0,0 +1,29 @@
import QtCore
import QtQuick
import QtQuick.Controls
import QtQuick.Controls.Basic
import QtQuick.Layouts
import localdocs
import mysettings
MySettingsTab {
title: qsTr("Models")
contentItem: GridLayout {
id: generationSettingsTabInner
columns: 2
rowSpacing: 10
columnSpacing: 10
MyButton {
Layout.row: 8
Layout.column: 1
Layout.fillWidth: true
text: qsTr("Restore Defaults")
Accessible.description: qsTr("Restores the settings dialog to a default state")
onClicked: {
MySettings.restoreGenerationDefaults();
templateTextArea.text = MySettings.promptTemplate
}
}
}
}

View File

@ -15,10 +15,29 @@ Item {
property ListModel tabTitlesModel: ListModel { }
property list<Component> tabs: [ ]
Canvas {
id: canvas
anchors.fill: parent
contextType: "2d"
onPaint: {
var context = getContext("2d");
context.reset();
context.lineWidth = 2;
context.moveTo(stackLayout.x, stackLayout.y);
context.lineTo(stackLayout.x, stackLayout.y + stackLayout.height);
context.lineTo(stackLayout.x + stackLayout.width, stackLayout.y + stackLayout.height);
context.lineTo(stackLayout.x + stackLayout.width, stackLayout.y);
context.lineTo(/*settingsTabBar.currentItem.x + */settingsTabBar.currentItem.width, stackLayout.y);
context.strokeStyle = theme.tabBorder;
context.stroke();
}
}
TabBar {
id: settingsTabBar
width: parent.width / 1.25
z: 200
visible: tabTitlesModel.count > 1
Repeater {
model: settingsStack.tabTitlesModel
TabButton {
@ -30,34 +49,34 @@ Item {
}
background: Rectangle {
color: tabButton.checked ? theme.backgroundDarkest : theme.backgroundLight
Rectangle {
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
height: tabButton.checked
color: theme.tabBorder
}
Rectangle {
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
height: !tabButton.checked
color: theme.tabBorder
}
Rectangle {
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.left: parent.left
width: tabButton.checked
color: theme.tabBorder
}
Rectangle {
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.right: parent.right
width: tabButton.checked
color: theme.tabBorder
}
// Rectangle {
// anchors.top: parent.top
// anchors.left: parent.left
// anchors.right: parent.right
// height: tabButton.checked
// color: theme.tabBorder
// }
// Rectangle {
// anchors.bottom: parent.bottom
// anchors.left: parent.left
// anchors.right: parent.right
// height: !tabButton.checked
// color: theme.tabBorder
// }
// Rectangle {
// anchors.top: parent.top
// anchors.bottom: parent.bottom
// anchors.left: parent.left
// width: tabButton.checked
// color: theme.tabBorder
// }
// Rectangle {
// anchors.top: parent.top
// anchors.bottom: parent.bottom
// anchors.right: parent.right
// width: tabButton.checked
// color: theme.tabBorder
// }
}
Accessible.role: Accessible.Button
Accessible.name: model.title
@ -67,7 +86,7 @@ Item {
StackLayout {
id: stackLayout
anchors.top: settingsTabBar.bottom
anchors.top: tabTitlesModel.count > 1 ? settingsTabBar.bottom : parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom

View File

@ -30,12 +30,12 @@ Item {
id: theme
}
background: Rectangle {
color: 'transparent'
border.color: theme.tabBorder
border.width: 1
radius: 2
}
// background: Rectangle {
// color: 'transparent'
// border.color: theme.tabBorder
// border.width: 1
// radius: 10
// }
Column {
id: tabInner

View File

@ -35,12 +35,88 @@ Dialog {
Accessible.description: qsTr("Dialog containing various application settings")
}
MySettingsStack {
anchors.fill: parent
tabs: [
Component { GenerationSettings { } },
Component { ApplicationSettings { } },
Component { LocalDocsSettings { } }
]
ListModel {
id: stacksModel
ListElement {
title: "Generation"
}
ListElement {
title: "Application"
}
ListElement {
title: "Plugins"
}
}
ScrollView {
id: stackList
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.left: parent.left
width: 200
ScrollBar.vertical.policy: ScrollBar.AsNeeded
clip: true
ListView {
id: listView
anchors.fill: parent
anchors.rightMargin: 10
model: stacksModel
delegate: Rectangle {
id: item
width: listView.width
height: titleLabel.height + 25
// color: index % 2 === 0 ? theme.backgroundLight : theme.backgroundLighter
color: "transparent"
border.color: theme.backgroundLighter
border.width: index == listView.currentIndex ? 1 : 0
radius: 10
Text {
id: titleLabel
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.margins: 20
text: title
elide: Text.ElideRight
color: theme.textColor
width: 200
TapHandler {
onTapped: {
listView.currentIndex = index
}
}
}
}
}
}
StackLayout {
id: stackLayout
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.left: stackList.right
anchors.right: parent.right
currentIndex: listView.currentIndex
MySettingsStack {
tabs: [
Component { ModelSettings { } },
Component { GenerationSettings { } }
]
}
MySettingsStack {
tabs: [
Component { ApplicationSettings { } }
]
}
MySettingsStack {
tabs: [
Component { LocalDocsSettings { } }
]
}
}
}

View File

@ -19,7 +19,7 @@ QtObject {
property color userColor: "#ec86bf"
property color assistantColor: "#10a37f"
property color linkColor: "#55aaff"
property color tabBorder: "#2c2d35"
property color tabBorder: backgroundLight
property real fontSizeLarge: Qt.application.font.pixelSize
property real fontSizeLarger: Qt.application.font.pixelSize + 2
}