Changeset View
Changeset View
Standalone View
Standalone View
desktoppackage/contents/configuration/AppletConfiguration.qml
| Show First 20 Lines • Show All 92 Lines • ▼ Show 20 Line(s) | 87 | if (!isContainment && configDialog.configModel && configDialog.configModel.count > 0) { | |||
|---|---|---|---|---|---|
| 93 | } else { | 93 | } else { | ||
| 94 | pageStack.sourceFile = ""; | 94 | pageStack.sourceFile = ""; | ||
| 95 | } | 95 | } | ||
| 96 | pageStack.title = configDialog.configModel.get(0).name | 96 | pageStack.title = configDialog.configModel.get(0).name | ||
| 97 | } else { | 97 | } else { | ||
| 98 | pageStack.sourceFile = globalConfigModel.get(0).source | 98 | pageStack.sourceFile = globalConfigModel.get(0).source | ||
| 99 | pageStack.title = globalConfigModel.get(0).name | 99 | pageStack.title = globalConfigModel.get(0).name | ||
| 100 | } | 100 | } | ||
| 101 | // root.width = pageStackColumn.implicitWidth | | |||
| 102 | // root.height = pageStackColumn.implicitHeight | | |||
| 103 | } | 101 | } | ||
| 104 | //END connections | 102 | //END connections | ||
| 105 | 103 | | |||
| 106 | //BEGIN UI components | 104 | //BEGIN UI components | ||
| 107 | Rectangle { | 105 | Rectangle { | ||
| 108 | id: sidebar | 106 | id: sidebar | ||
| 109 | visible: configDialog.configModel | 107 | visible: configDialog.configModel | ||
| 110 | anchors.left: root.left | 108 | anchors.left: root.left | ||
| 111 | width: categories.width | 109 | width: categoriesScroll.width | ||
| 112 | height: root.height | 110 | height: root.height | ||
| 113 | Kirigami.Theme.inherit: false | 111 | Kirigami.Theme.inherit: false | ||
| 114 | Kirigami.Theme.colorSet: Kirigami.Theme.View | 112 | Kirigami.Theme.colorSet: Kirigami.Theme.View | ||
| 115 | color: Kirigami.Theme.backgroundColor | 113 | color: Kirigami.Theme.backgroundColor | ||
| 116 | } | 114 | } | ||
| 117 | 115 | | |||
| 118 | Kirigami.Separator { | 116 | Kirigami.Separator { | ||
| 119 | visible: configDialog.configModel | 117 | visible: configDialog.configModel | ||
| 120 | anchors.left: sidebar.right | 118 | anchors.left: sidebar.right | ||
| 121 | height: root.height | 119 | height: root.height | ||
| 122 | } | 120 | } | ||
| 123 | 121 | | |||
| 124 | Kirigami.Separator { | 122 | Kirigami.Separator { | ||
| 123 | id: topSeparator | ||||
ngraham: Hmm, mking the separator always span the full width introduces a row of pixels on top of the… | |||||
I can make this side to draw on top of the separator, as it was. Will be incorrect again. Maybe separator must leave. It looks nice for breeze dark, but if the theme says no line, why force it? It is not forced in system settings. And despite if it looks okay or not for most setups, it is wrong to display for all themes. gvgeo: I can make this side to draw on top of the separator, as it was. Will be incorrect again. | |||||
I agree. I already tried doing it in D25728. filipf: > Maybe separator must leave
I agree. I already tried doing it in D25728. | |||||
| 125 | anchors.top: root.top | 124 | anchors.top: root.top | ||
| 126 | width: root.width | 125 | width: root.width | ||
| 127 | } | 126 | } | ||
| 128 | 127 | | |||
| 129 | MessageDialog { | 128 | MessageDialog { | ||
| 130 | id: messageDialog | 129 | id: messageDialog | ||
| 131 | icon: StandardIcon.Warning | 130 | icon: StandardIcon.Warning | ||
| 132 | property Item delegate | 131 | property Item delegate | ||
| 133 | title: i18nd("plasma_shell_org.kde.plasma.desktop", "Apply Settings") | 132 | title: i18nd("plasma_shell_org.kde.plasma.desktop", "Apply Settings") | ||
| 134 | text: i18nd("plasma_shell_org.kde.plasma.desktop", "The settings of the current module have changed. Do you want to apply the changes or discard them?") | 133 | text: i18nd("plasma_shell_org.kde.plasma.desktop", "The settings of the current module have changed. Do you want to apply the changes or discard them?") | ||
| 135 | standardButtons: StandardButton.Apply | StandardButton.Discard | StandardButton.Cancel | 134 | standardButtons: StandardButton.Apply | StandardButton.Discard | StandardButton.Cancel | ||
| 136 | onApply: { | 135 | onApply: { | ||
| 137 | applyAction.trigger() | 136 | applyAction.trigger() | ||
| 138 | delegate.openCategory() | 137 | delegate.openCategory() | ||
| 139 | } | 138 | } | ||
| 140 | onDiscard: { | 139 | onDiscard: { | ||
| 141 | delegate.openCategory() | 140 | delegate.openCategory() | ||
| 142 | } | 141 | } | ||
| 143 | } | 142 | } | ||
| 144 | 143 | | |||
| 145 | ColumnLayout { | 144 | RowLayout { | ||
| 146 | id: pageStackColumn | | |||
| 147 | anchors { | 145 | anchors { | ||
| 148 | fill: parent | 146 | fill: parent | ||
| 149 | rightMargin: units.smallSpacing * 2 | | |||
| 150 | leftMargin: configDialog.configModel ? 0 : units.smallSpacing * 2 | 147 | leftMargin: configDialog.configModel ? 0 : units.smallSpacing * 2 | ||
| 151 | bottomMargin: units.smallSpacing * 2 | | |||
| 152 | } | 148 | } | ||
| 153 | property int implicitWidth: Math.max(contentRow.implicitWidth, buttonsRow.implicitWidth) + 8 | | |||
| 154 | property int implicitHeight: contentRow.implicitHeight + buttonsRow.implicitHeight + 8 | | |||
| 155 | | ||||
| 156 | RowLayout { | | |||
| 157 | id: contentRow | | |||
| 158 | spacing: 0 | 149 | spacing: 0 | ||
| 159 | Layout.fillWidth: true | | |||
| 160 | Layout.fillHeight: true | | |||
| 161 | Layout.preferredHeight: parent.height - buttonsRow.height | | |||
| 162 | 150 | | |||
| 163 | QtControls.ScrollView { | 151 | QtControls.ScrollView { | ||
| 164 | id: categoriesScroll | 152 | id: categoriesScroll | ||
| 165 | QtControls.ScrollBar.horizontal.policy: QtControls.ScrollBar.AlwaysOff | | |||
| 166 | Layout.fillHeight: true | 153 | Layout.fillHeight: true | ||
| 167 | visible: true | 154 | visible: true | ||
| 168 | Layout.maximumWidth: units.gridUnit * 7 | 155 | clip: true | ||
| 169 | Layout.preferredWidth: categories.implicitWidth | 156 | Layout.preferredWidth: units.gridUnit * 7 | ||
| 157 | contentWidth: -1 | ||||
ngraham: What's this for? | |||||
So that content does not touch the bottom edge, but was unsightly with double space.. gvgeo: So that content does not touch the bottom edge, but was unsightly with double space..
I will… | |||||
| 170 | 158 | | |||
| 171 | Keys.onUpPressed: { | 159 | Keys.onUpPressed: { | ||
| 172 | var buttons = categories.children | 160 | var buttons = categories.children | ||
| 173 | 161 | | |||
| 174 | var foundPrevious = false | 162 | var foundPrevious = false | ||
| 175 | for (var i = buttons.length - 1; i >= 0; --i) { | 163 | for (var i = buttons.length - 1; i >= 0; --i) { | ||
| 176 | var button = buttons[i]; | 164 | var button = buttons[i]; | ||
| 177 | if (!button.hasOwnProperty("current")) { | 165 | if (!button.hasOwnProperty("current")) { | ||
| Show All 25 Lines | 190 | if (foundNext) { | |||
| 203 | button.openCategory() | 191 | button.openCategory() | ||
| 204 | return | 192 | return | ||
| 205 | } else if (button.current) { | 193 | } else if (button.current) { | ||
| 206 | foundNext = true | 194 | foundNext = true | ||
| 207 | } | 195 | } | ||
| 208 | } | 196 | } | ||
| 209 | } | 197 | } | ||
| 210 | 198 | | |||
| 211 | // Encapsulate as ColumnLayout will keep overwriting its own implicitWidth | | |||
| 212 | Item { | | |||
| 213 | implicitWidth: categoriesScroll.Layout.maximumWidth | | |||
| 214 | implicitHeight: categories.implicitHeight | | |||
| 215 | ColumnLayout { | 199 | ColumnLayout { | ||
| 216 | id: categories | 200 | id: categories | ||
| 217 | spacing: 0 | 201 | spacing: 0 | ||
| 218 | width: categoriesScroll.width | 202 | width: categoriesScroll.availableWidth | ||
| 219 | 203 | | |||
| 220 | property Item currentItem: children[1] | 204 | property Item currentItem: children[1] | ||
| 221 | 205 | | |||
| 222 | Repeater { | 206 | Repeater { | ||
| 223 | model: root.isContainment ? globalConfigModel : undefined | 207 | model: root.isContainment ? globalConfigModel : undefined | ||
| 224 | delegate: ConfigCategoryDelegate {} | 208 | delegate: ConfigCategoryDelegate {} | ||
| 225 | } | 209 | } | ||
| 226 | Repeater { | 210 | Repeater { | ||
| 227 | model: configDialogFilterModel | 211 | model: configDialogFilterModel | ||
| 228 | delegate: ConfigCategoryDelegate {} | 212 | delegate: ConfigCategoryDelegate {} | ||
| 229 | } | 213 | } | ||
| 230 | Repeater { | 214 | Repeater { | ||
| 231 | model: !root.isContainment ? globalConfigModel : undefined | 215 | model: !root.isContainment ? globalConfigModel : undefined | ||
| 232 | delegate: ConfigCategoryDelegate {} | 216 | delegate: ConfigCategoryDelegate {} | ||
| 233 | } | 217 | } | ||
| 234 | } | 218 | } | ||
| 235 | } | 219 | } | ||
| 236 | } | | |||
| 237 | 220 | | |||
| 238 | Item { // spacer | 221 | // Configuration area and buttons. | ||
| 239 | visible: categoriesScroll.visible | 222 | ColumnLayout { | ||
| 240 | width: units.smallSpacing * 2 | 223 | id: configColumn | ||
| 241 | } | 224 | Layout.topMargin: topSeparator.height | ||
| 225 | Layout.bottomMargin: units.smallSpacing * 2 | ||||
| 242 | 226 | | |||
| 227 | // Configuration scroll area | ||||
| 243 | QtControls.ScrollView { | 228 | QtControls.ScrollView { | ||
| 244 | id: scroll | 229 | id: scroll | ||
| 245 | Layout.fillHeight: true | 230 | Layout.fillHeight: true | ||
| 246 | Layout.fillWidth: true | 231 | Layout.fillWidth: true | ||
| 247 | // we want to focus the controls in the settings page right away, don't focus the ScrollView | 232 | // we want to focus the controls in the settings page right away, don't focus the ScrollView | ||
| 248 | activeFocusOnTab: false | 233 | activeFocusOnTab: false | ||
| 234 | // Avoid scrollbar flashing on/off when decrease the window height, that is created by the content matching the scroll height. | ||||
| 235 | // Even if scrollbar does not appear in the UI, modifies the availableWidth causing other issues. | ||||
| 236 | QtControls.ScrollBar.vertical.policy: pageStack.maxHeight > pageStack.contentHeight ? QtControls.ScrollBar.AlwaysOff : QtControls.ScrollBar.AlwaysOn | ||||
| 249 | 237 | | |||
| 250 | property Item flickableItem: pageFlickable | 238 | property Item flickableItem: pageFlickable | ||
| 251 | // this horrible code below ensures the control with active focus stays visible in the window | 239 | // this horrible code below ensures the control with active focus stays visible in the window | ||
| 252 | // by scrolling the view up or down as needed when tabbing through the window | 240 | // by scrolling the view up or down as needed when tabbing through the window | ||
| 253 | Window.onActiveFocusItemChanged: { | 241 | Window.onActiveFocusItemChanged: { | ||
| 254 | var flickable = scroll.flickableItem; | 242 | var flickable = scroll.flickableItem; | ||
| 255 | 243 | | |||
| 256 | var item = Window.activeFocusItem; | 244 | var item = Window.activeFocusItem; | ||
| Show All 19 Lines | |||||
| 276 | // into view when it implicitly gains focus (like plasma-pa config dialog has). | 264 | // into view when it implicitly gains focus (like plasma-pa config dialog has). | ||
| 277 | } else if (yPos + Math.min(padding, item.height) > flickable.contentY + flickable.height) { | 265 | } else if (yPos + Math.min(padding, item.height) > flickable.contentY + flickable.height) { | ||
| 278 | flickable.contentY = Math.min(flickable.contentHeight - flickable.height, | 266 | flickable.contentY = Math.min(flickable.contentHeight - flickable.height, | ||
| 279 | yPos - flickable.height + item.height + padding); | 267 | yPos - flickable.height + item.height + padding); | ||
| 280 | } | 268 | } | ||
| 281 | } | 269 | } | ||
| 282 | Flickable { | 270 | Flickable { | ||
| 283 | id: pageFlickable | 271 | id: pageFlickable | ||
| 284 | anchors.fill: parent | 272 | | ||
| 273 | anchors { | ||||
| 274 | top: scroll.top | ||||
| 275 | bottom: scroll.bottom | ||||
| 276 | left: scroll.left | ||||
| 277 | } | ||||
| 278 | width: scroll.availableWidth | ||||
| 285 | contentHeight: pageColumn.height | 279 | contentHeight: pageColumn.height | ||
| 286 | contentWidth: width | 280 | contentWidth: width | ||
| 281 | | ||||
| 287 | Column { | 282 | Column { | ||
| 288 | id: pageColumn | 283 | id: pageColumn | ||
| 289 | spacing: units.largeSpacing / 2 | 284 | spacing: units.largeSpacing / 2 | ||
| 285 | anchors { | ||||
| 286 | left: parent.left | ||||
| 287 | right: parent.right | ||||
| 288 | leftMargin: units.smallSpacing * 2 | ||||
| 289 | rightMargin: units.smallSpacing * 2 | ||||
| 290 | } | ||||
| 290 | 291 | | |||
| 291 | Kirigami.Heading { | 292 | Kirigami.Heading { | ||
| 292 | id: pageTitle | 293 | id: pageTitle | ||
| 293 | width: scroll.width | 294 | width: pageColumn.width | ||
| 294 | topPadding: units.smallSpacing | 295 | topPadding: units.smallSpacing | ||
| 295 | level: 1 | 296 | level: 1 | ||
| 296 | text: pageStack.title | 297 | text: pageStack.title | ||
| 297 | } | 298 | } | ||
| 298 | 299 | | |||
| 299 | QtControls.StackView { | 300 | QtControls.StackView { | ||
| 300 | id: pageStack | 301 | id: pageStack | ||
| 301 | property string title: "" | 302 | property string title: "" | ||
| 302 | property bool invertAnimations: false | 303 | property bool invertAnimations: false | ||
| 303 | 304 | | |||
| 304 | height: Math.max((scroll.height - pageTitle.height - parent.spacing), (pageStack.currentItem ? (pageStack.currentItem.implicitHeight ? pageStack.currentItem.implicitHeight : pageStack.currentItem.childrenRect.height) : 0)) | 305 | property var maxHeight: scroll.availableHeight - pageTitle.height - parent.spacing | ||
| 305 | width: scroll.width | 306 | property var contentHeight: pageStack.currentItem ? (pageStack.currentItem.implicitHeight | ||
| 307 | ? pageStack.currentItem.implicitHeight | ||||
| 308 | : pageStack.currentItem.childrenRect.height) : 0 | ||||
| 309 | height: Math.max(maxHeight, contentHeight) | ||||
| 310 | width: pageColumn.width | ||||
| 306 | 311 | | |||
| 307 | property string sourceFile | 312 | property string sourceFile | ||
| 308 | 313 | | |||
| 309 | onSourceFileChanged: { | 314 | onSourceFileChanged: { | ||
| 310 | if (!sourceFile) { | 315 | if (!sourceFile) { | ||
| 311 | return; | 316 | return; | ||
| 312 | } | 317 | } | ||
| 313 | 318 | | |||
| Show All 38 Lines | 355 | ParallelAnimation { | |||
| 352 | NumberAnimation { | 357 | NumberAnimation { | ||
| 353 | property: "opacity" | 358 | property: "opacity" | ||
| 354 | from: 0 | 359 | from: 0 | ||
| 355 | to: 1 | 360 | to: 1 | ||
| 356 | duration: units.longDuration | 361 | duration: units.longDuration | ||
| 357 | easing.type: Easing.InOutQuad | 362 | easing.type: Easing.InOutQuad | ||
| 358 | } | 363 | } | ||
| 359 | XAnimator { | 364 | XAnimator { | ||
| 360 | from: pageStack.invertAnimations ? -scroll.width/3: scroll.width/3 | 365 | from: pageStack.invertAnimations ? -pageColumn.width/3: pageColumn.width/3 | ||
| 361 | to: 0 | 366 | to: 0 | ||
| 362 | duration: units.longDuration | 367 | duration: units.longDuration | ||
| 363 | easing.type: Easing.InOutQuad | 368 | easing.type: Easing.InOutQuad | ||
| 364 | } | 369 | } | ||
| 365 | } | 370 | } | ||
| 366 | } | 371 | } | ||
| 367 | replaceExit: Transition { | 372 | replaceExit: Transition { | ||
| 368 | ParallelAnimation { | 373 | ParallelAnimation { | ||
| 369 | OpacityAnimator { | 374 | OpacityAnimator { | ||
| 370 | from: 1 | 375 | from: 1 | ||
| 371 | to: 0 | 376 | to: 0 | ||
| 372 | duration: units.longDuration | 377 | duration: units.longDuration | ||
| 373 | easing.type: Easing.InOutQuad | 378 | easing.type: Easing.InOutQuad | ||
| 374 | } | 379 | } | ||
| 375 | XAnimator { | 380 | XAnimator { | ||
| 376 | from: 0 | 381 | from: 0 | ||
| 377 | to: pageStack.invertAnimations ? scroll.width/3 : -scroll.width/3 | 382 | to: pageStack.invertAnimations ? pageColumn.width/3 : -pageColumn.width/3 | ||
| 378 | duration: units.longDuration | 383 | duration: units.longDuration | ||
| 379 | easing.type: Easing.InOutQuad | 384 | easing.type: Easing.InOutQuad | ||
| 380 | } | 385 | } | ||
| 381 | } | 386 | } | ||
| 382 | } | 387 | } | ||
| 383 | } | 388 | } | ||
| 384 | } | 389 | } | ||
| 385 | } | 390 | } | ||
| 386 | } | 391 | } | ||
| 387 | } | | |||
| 388 | 392 | | |||
| 389 | QtControls.Action { | 393 | QtControls.Action { | ||
| 390 | id: acceptAction | 394 | id: acceptAction | ||
| 391 | onTriggered: { | 395 | onTriggered: { | ||
| 392 | applyAction.trigger(); | 396 | applyAction.trigger(); | ||
| 393 | configDialog.close(); | 397 | configDialog.close(); | ||
| 394 | } | 398 | } | ||
| 395 | shortcut: "Return" | 399 | shortcut: "Return" | ||
| Show All 11 Lines | |||||
| 407 | QtControls.Action { | 411 | QtControls.Action { | ||
| 408 | id: cancelAction | 412 | id: cancelAction | ||
| 409 | onTriggered: configDialog.close(); | 413 | onTriggered: configDialog.close(); | ||
| 410 | shortcut: "Escape" | 414 | shortcut: "Escape" | ||
| 411 | } | 415 | } | ||
| 412 | 416 | | |||
| 413 | RowLayout { | 417 | RowLayout { | ||
| 414 | id: buttonsRow | 418 | id: buttonsRow | ||
| 415 | Layout.alignment: Qt.AlignVCenter | Qt.AlignRight | 419 | Layout.alignment: Qt.AlignRight | ||
| 420 | Layout.rightMargin: units.smallSpacing * 2 | ||||
| 421 | Layout.leftMargin: units.smallSpacing * 2 | ||||
| 422 | | ||||
| 416 | QtControls.Button { | 423 | QtControls.Button { | ||
| 417 | icon.name: "dialog-ok" | 424 | icon.name: "dialog-ok" | ||
| 418 | text: i18nd("plasma_shell_org.kde.plasma.desktop", "OK") | 425 | text: i18nd("plasma_shell_org.kde.plasma.desktop", "OK") | ||
| 419 | onClicked: acceptAction.trigger() | 426 | onClicked: acceptAction.trigger() | ||
| 420 | } | 427 | } | ||
| 421 | QtControls.Button { | 428 | QtControls.Button { | ||
| 422 | id: applyButton | 429 | id: applyButton | ||
| 423 | enabled: false | 430 | enabled: false | ||
| 424 | icon.name: "dialog-ok-apply" | 431 | icon.name: "dialog-ok-apply" | ||
| 425 | text: i18nd("plasma_shell_org.kde.plasma.desktop", "Apply") | 432 | text: i18nd("plasma_shell_org.kde.plasma.desktop", "Apply") | ||
| 426 | visible: pageStack.currentItem && (!pageStack.currentItem.kcm || pageStack.currentItem.kcm.buttons & 4) // 4 = Apply button | 433 | visible: pageStack.currentItem && (!pageStack.currentItem.kcm || pageStack.currentItem.kcm.buttons & 4) // 4 = Apply button | ||
| 427 | onClicked: applyAction.trigger() | 434 | onClicked: applyAction.trigger() | ||
| 428 | } | 435 | } | ||
| 429 | QtControls.Button { | 436 | QtControls.Button { | ||
| 430 | icon.name: "dialog-cancel" | 437 | icon.name: "dialog-cancel" | ||
| 431 | text: i18nd("plasma_shell_org.kde.plasma.desktop", "Cancel") | 438 | text: i18nd("plasma_shell_org.kde.plasma.desktop", "Cancel") | ||
| 432 | onClicked: cancelAction.trigger() | 439 | onClicked: cancelAction.trigger() | ||
| 433 | } | 440 | } | ||
| 434 | } | 441 | } | ||
| 435 | } | 442 | } | ||
| 443 | } | ||||
| 436 | //END UI components | 444 | //END UI components | ||
| 437 | } | 445 | } | ||
Hmm, mking the separator always span the full width introduces a row of pixels on top of the sidebar that is slightly unsightly when the top category is focused: