Commit 1debef9c authored by Marco Martin's avatar Marco Martin
Browse files

Use a normal config dialog look

Maintain the implementation with ApplicationItem and the breadcrumb toolbar,
but make the dialog look like a normal config dialog again,
consistent with apps config dialogs

The sidebar is not in the pagerow, as is not part of the page navigation
(and such never appear on the breadcrumb)

Separator lines are present only iff the content don't fit and there is a scrollbar to make
scrollbar look right and items to be clipped with a line instead of in the nothing
parent 88ba401f
......@@ -68,7 +68,7 @@ Rectangle {
function pushReplace(item, config) {
let page;
if (app.pageStack.depth === 1) {
if (app.pageStack.depth === 0) {
page = app.pageStack.push(item, config);
} else {
page = app.pageStack.replace(item, config);
......@@ -121,134 +121,160 @@ Rectangle {
return app;
}
Kirigami.ApplicationItem {
id: app
anchors.fill: parent
pageStack.globalToolBar.style: Kirigami.ApplicationHeaderStyle.Breadcrumb
wideScreen: true
QtControls.ScrollView {
id: categoriesScroll
anchors {
left: parent.left
top: parent.top
bottom: parent.bottom
}
width: Kirigami.Units.gridUnit * 7
Kirigami.Theme.colorSet: Kirigami.Theme.View
leftPadding: 0
rightPadding: 0
topPadding: 0
bottomPadding: 0
focus: true
Accessible.role: Accessible.MenuBar
background: Rectangle {
color: Kirigami.Theme.backgroundColor
}
property var currentConfigPage: null
property bool isAboutPage: false
ColumnLayout {
id: categories
Keys.onUpPressed: {
const buttons = categories.children
let foundPrevious = false
for (let i = buttons.length - 1; i >= 0; --i) {
const button = buttons[i];
if (!button.hasOwnProperty("highlighted")) {
// not a ConfigCategoryDelegate
continue;
}
// HACK: setting columnResizeMode to DynamicColumns has weird effects
// and since we only have maximum 2 pages, settings the left page with
// columnWidth also works.
pageStack.columnView.columnWidth: Kirigami.Units.gridUnit * 7
pageStack.initialPage: Kirigami.ScrollablePage {
id: categoriesScroll
title: i18n("Settings")
Kirigami.Theme.colorSet: Kirigami.Theme.View
leftPadding: 0
rightPadding: 0
topPadding: 0
bottomPadding: 0
focus: true
if (foundPrevious) {
categories.openCategory(button.item)
return
} else if (button.highlighted) {
foundPrevious = true
}
}
}
FocusScope {
focus: true
Accessible.role: Accessible.MenuBar
ColumnLayout {
id: categories
Keys.onUpPressed: {
const buttons = categories.children
let foundPrevious = false
for (let i = buttons.length - 1; i >= 0; --i) {
const button = buttons[i];
if (!button.hasOwnProperty("highlighted")) {
// not a ConfigCategoryDelegate
continue;
}
if (foundPrevious) {
categories.openCategory(button.item)
return
} else if (button.highlighted) {
foundPrevious = true
}
}
Keys.onDownPressed: {
const buttons = categories.children
let foundNext = false
for (let i = 0, length = buttons.length; i < length; ++i) {
const button = buttons[i];
if (!button.hasOwnProperty("highlighted")) {
continue;
}
Keys.onDownPressed: {
const buttons = categories.children
let foundNext = false
for (let i = 0, length = buttons.length; i < length; ++i) {
const button = buttons[i];
if (!button.hasOwnProperty("highlighted")) {
continue;
}
if (foundNext) {
categories.openCategory(button.item)
return
} else if (button.highlighted) {
foundNext = true
}
}
if (foundNext) {
categories.openCategory(button.item)
return
} else if (button.highlighted) {
foundNext = true
}
spacing: 0
anchors.fill: parent
focus: true
function openCategory(item) {
if (applyButton.enabled) {
messageDialog.item = item;
messageDialog.open();
return;
}
}
spacing: 0
anchors.fill: parent
focus: true
function openCategory(item) {
if (applyButton.enabled) {
messageDialog.item = item;
messageDialog.open();
return;
}
open(item)
}
Component {
id: categoryDelegate
ConfigCategoryDelegate {
id: delegate
onActivated: categories.openCategory(model);
highlighted: {
if (model.kcm && app.pageStack.currentItem.kcm) {
return model.kcm == app.pageStack.currentItem.kcm
}
open(item)
}
Component {
id: categoryDelegate
ConfigCategoryDelegate {
id: delegate
onActivated: categories.openCategory(model);
highlighted: {
if (model.kcm && app.pageStack.currentItem.kcm) {
return model.kcm == app.pageStack.currentItem.kcm
}
if (app.pageStack.currentItem && app.pageStack.currentItem.configItem) {
return model.source == app.pageStack.currentItem.configItem.source
}
return app.pageStack.currentItem.source == Qt.resolvedUrl(model.source)
}
item: model
if (app.pageStack.currentItem && app.pageStack.currentItem.configItem) {
return model.source == app.pageStack.currentItem.configItem.source
}
return app.pageStack.currentItem.source == Qt.resolvedUrl(model.source)
}
item: model
}
}
Repeater {
Layout.fillWidth: true
model: root.isContainment ? globalConfigModel : undefined
delegate: categoryDelegate
}
Repeater {
Layout.fillWidth: true
model: configDialogFilterModel
delegate: categoryDelegate
}
Repeater {
Layout.fillWidth: true
model: !root.isContainment ? globalConfigModel : undefined
delegate: categoryDelegate
}
Repeater {
Layout.fillWidth: true
model: ConfigModel {
ConfigCategory{
name: i18nd("plasma_shell_org.kde.plasma.desktop", "About")
icon: "help-about"
source: "AboutPlugin.qml"
}
}
delegate: categoryDelegate
Repeater {
Layout.fillWidth: true
model: root.isContainment ? globalConfigModel : undefined
delegate: categoryDelegate
}
Repeater {
Layout.fillWidth: true
model: configDialogFilterModel
delegate: categoryDelegate
}
Repeater {
Layout.fillWidth: true
model: !root.isContainment ? globalConfigModel : undefined
delegate: categoryDelegate
}
Repeater {
Layout.fillWidth: true
model: ConfigModel {
ConfigCategory{
name: i18nd("plasma_shell_org.kde.plasma.desktop", "About")
icon: "help-about"
source: "AboutPlugin.qml"
}
}
delegate: categoryDelegate
}
}
}
Kirigami.Separator {
anchors {
left: parent.left
right: parent.right
top: parent.top
}
z: 1
}
Kirigami.Separator {
anchors {
right: categoriesScroll.right
top: parent.top
bottom: parent.bottom
}
z: 1
}
Kirigami.ApplicationItem {
id: app
anchors {
left: categoriesScroll.right
top: parent.top
right: parent.right
bottom: parent.bottom
}
pageStack.globalToolBar.style: Kirigami.ApplicationHeaderStyle.Breadcrumb
wideScreen: true
pageStack.globalToolBar.separatorVisible: bottomSeparator.visible
pageStack.globalToolBar.colorSet: Kirigami.Theme.Window
property var currentConfigPage: null
property bool isAboutPage: false
MessageDialog {
id: messageDialog
......@@ -266,7 +292,8 @@ Rectangle {
}
}
footer: QtControls.ToolBar {
footer: QtControls.Pane {
contentItem: RowLayout {
id: buttonsRow
spacing: Kirigami.Units.smallSpacing
......@@ -296,6 +323,20 @@ Rectangle {
visible: !app.isAboutPage
}
}
background: Item {
Kirigami.Separator {
id: bottomSeparator
visible: app.pageStack.currentItem
&& app.pageStack.currentItem.flickable
&& !(app.pageStack.currentItem.flickable.atYBeginning
&& app.pageStack.currentItem.flickable.atYEnd)
anchors {
left: parent.left
right: parent.right
top: parent.top
}
}
}
}
QtControls.Action {
......
......@@ -64,7 +64,7 @@ QtControls.ItemDelegate {
width: PlasmaCore.Units.iconSizes.medium
height: width
icon: model.icon
state: highlighted && categoriesScroll.activeFocus ? QIconItem.SelectedState : QIconItem.DefaultState
state: highlighted && Window.active ? QIconItem.SelectedState : QIconItem.DefaultState
}
QtControls.Label {
......@@ -75,7 +75,7 @@ QtControls.ItemDelegate {
text: model.name
wrapMode: Text.Wrap
horizontalAlignment: Text.AlignHCenter
color: highlighted && categoriesScroll.activeFocus ? Kirigami.Theme.highlightedTextColor : Kirigami.Theme.textColor
color: highlighted && Window.active ? Kirigami.Theme.highlightedTextColor : Kirigami.Theme.textColor
Behavior on color {
ColorAnimation {
duration: PlasmaCore.Units.longDuration
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment