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

@@ -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