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 | ||
| 249 | 234 | | |||
| 250 | property Item flickableItem: pageFlickable | 235 | property Item flickableItem: pageFlickable | ||
| Show All 25 Lines | 238 | Window.onActiveFocusItemChanged: { | |||
| 276 | // into view when it implicitly gains focus (like plasma-pa config dialog has). | 261 | // 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) { | 262 | } else if (yPos + Math.min(padding, item.height) > flickable.contentY + flickable.height) { | ||
| 278 | flickable.contentY = Math.min(flickable.contentHeight - flickable.height, | 263 | flickable.contentY = Math.min(flickable.contentHeight - flickable.height, | ||
| 279 | yPos - flickable.height + item.height + padding); | 264 | yPos - flickable.height + item.height + padding); | ||
| 280 | } | 265 | } | ||
| 281 | } | 266 | } | ||
| 282 | Flickable { | 267 | Flickable { | ||
| 283 | id: pageFlickable | 268 | id: pageFlickable | ||
| 284 | anchors.fill: parent | 269 | anchors { | ||
| 270 | top:parent.top | ||||
| 271 | bottom:parent.bottom | ||||
| 272 | // Always anchor left to avoid use availableWidth when layout is mirroring. Something makes it jumping around, the width of the vertical scroll bar. | ||||
| 273 | left: parent.left | ||||
| 274 | right: LayoutMirroring.enabled ? parent.right : undefined | ||||
| 275 | leftMargin: LayoutMirroring.enabled ? 0 : units.smallSpacing * 2 | ||||
| 276 | rightMargin: LayoutMirroring.enabled ? units.smallSpacing * 2 : 0 | ||||
| 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 | width: parent.width - units.smallSpacing * 2 | ||||
| 290 | 286 | | |||
| 291 | Kirigami.Heading { | 287 | Kirigami.Heading { | ||
| 292 | id: pageTitle | 288 | id: pageTitle | ||
| 293 | width: scroll.width | 289 | width: pageColumn.width | ||
| 294 | topPadding: units.smallSpacing | 290 | topPadding: units.smallSpacing | ||
| 295 | level: 1 | 291 | level: 1 | ||
| 296 | text: pageStack.title | 292 | text: pageStack.title | ||
| 297 | } | 293 | } | ||
| 298 | 294 | | |||
| 299 | QtControls.StackView { | 295 | QtControls.StackView { | ||
| 300 | id: pageStack | 296 | id: pageStack | ||
| 301 | property string title: "" | 297 | property string title: "" | ||
| 302 | property bool invertAnimations: false | 298 | property bool invertAnimations: false | ||
| 303 | 299 | | |||
| 304 | height: Math.max((scroll.height - pageTitle.height - parent.spacing), (pageStack.currentItem ? (pageStack.currentItem.implicitHeight ? pageStack.currentItem.implicitHeight : pageStack.currentItem.childrenRect.height) : 0)) | 300 | height: Math.max((scroll.height - pageTitle.height - parent.spacing), (pageStack.currentItem ? (pageStack.currentItem.implicitHeight ? pageStack.currentItem.implicitHeight : pageStack.currentItem.childrenRect.height) : 0)) | ||
| 305 | width: scroll.width | 301 | width: pageColumn.width | ||
| 306 | 302 | | |||
| 307 | property string sourceFile | 303 | property string sourceFile | ||
| 308 | 304 | | |||
| 309 | onSourceFileChanged: { | 305 | onSourceFileChanged: { | ||
| 310 | if (!sourceFile) { | 306 | if (!sourceFile) { | ||
| 311 | return; | 307 | return; | ||
| 312 | } | 308 | } | ||
| 313 | 309 | | |||
| Show All 38 Lines | 346 | ParallelAnimation { | |||
| 352 | NumberAnimation { | 348 | NumberAnimation { | ||
| 353 | property: "opacity" | 349 | property: "opacity" | ||
| 354 | from: 0 | 350 | from: 0 | ||
| 355 | to: 1 | 351 | to: 1 | ||
| 356 | duration: units.longDuration | 352 | duration: units.longDuration | ||
| 357 | easing.type: Easing.InOutQuad | 353 | easing.type: Easing.InOutQuad | ||
| 358 | } | 354 | } | ||
| 359 | XAnimator { | 355 | XAnimator { | ||
| 360 | from: pageStack.invertAnimations ? -scroll.width/3: scroll.width/3 | 356 | from: pageStack.invertAnimations ? -pageColumn.width/3: pageColumn.width/3 | ||
| 361 | to: 0 | 357 | to: 0 | ||
| 362 | duration: units.longDuration | 358 | duration: units.longDuration | ||
| 363 | easing.type: Easing.InOutQuad | 359 | easing.type: Easing.InOutQuad | ||
| 364 | } | 360 | } | ||
| 365 | } | 361 | } | ||
| 366 | } | 362 | } | ||
| 367 | replaceExit: Transition { | 363 | replaceExit: Transition { | ||
| 368 | ParallelAnimation { | 364 | ParallelAnimation { | ||
| 369 | OpacityAnimator { | 365 | OpacityAnimator { | ||
| 370 | from: 1 | 366 | from: 1 | ||
| 371 | to: 0 | 367 | to: 0 | ||
| 372 | duration: units.longDuration | 368 | duration: units.longDuration | ||
| 373 | easing.type: Easing.InOutQuad | 369 | easing.type: Easing.InOutQuad | ||
| 374 | } | 370 | } | ||
| 375 | XAnimator { | 371 | XAnimator { | ||
| 376 | from: 0 | 372 | from: 0 | ||
| 377 | to: pageStack.invertAnimations ? scroll.width/3 : -scroll.width/3 | 373 | to: pageStack.invertAnimations ? pageColumn.width/3 : -pageColumn.width/3 | ||
| 378 | duration: units.longDuration | 374 | duration: units.longDuration | ||
| 379 | easing.type: Easing.InOutQuad | 375 | easing.type: Easing.InOutQuad | ||
| 380 | } | 376 | } | ||
| 381 | } | 377 | } | ||
| 382 | } | 378 | } | ||
| 383 | } | 379 | } | ||
| 384 | } | 380 | } | ||
| 385 | } | 381 | } | ||
| 386 | } | 382 | } | ||
| 387 | } | | |||
| 388 | 383 | | |||
| 389 | QtControls.Action { | 384 | QtControls.Action { | ||
| 390 | id: acceptAction | 385 | id: acceptAction | ||
| 391 | onTriggered: { | 386 | onTriggered: { | ||
| 392 | applyAction.trigger(); | 387 | applyAction.trigger(); | ||
| 393 | configDialog.close(); | 388 | configDialog.close(); | ||
| 394 | } | 389 | } | ||
| 395 | shortcut: "Return" | 390 | shortcut: "Return" | ||
| Show All 11 Lines | |||||
| 407 | QtControls.Action { | 402 | QtControls.Action { | ||
| 408 | id: cancelAction | 403 | id: cancelAction | ||
| 409 | onTriggered: configDialog.close(); | 404 | onTriggered: configDialog.close(); | ||
| 410 | shortcut: "Escape" | 405 | shortcut: "Escape" | ||
| 411 | } | 406 | } | ||
| 412 | 407 | | |||
| 413 | RowLayout { | 408 | RowLayout { | ||
| 414 | id: buttonsRow | 409 | id: buttonsRow | ||
| 415 | Layout.alignment: Qt.AlignVCenter | Qt.AlignRight | 410 | Layout.alignment: Qt.AlignRight | ||
| 411 | Layout.rightMargin: units.smallSpacing * 2 | ||||
| 412 | | ||||
| 416 | QtControls.Button { | 413 | QtControls.Button { | ||
| 417 | icon.name: "dialog-ok" | 414 | icon.name: "dialog-ok" | ||
| 418 | text: i18nd("plasma_shell_org.kde.plasma.desktop", "OK") | 415 | text: i18nd("plasma_shell_org.kde.plasma.desktop", "OK") | ||
| 419 | onClicked: acceptAction.trigger() | 416 | onClicked: acceptAction.trigger() | ||
| 420 | } | 417 | } | ||
| 421 | QtControls.Button { | 418 | QtControls.Button { | ||
| 422 | id: applyButton | 419 | id: applyButton | ||
| 423 | enabled: false | 420 | enabled: false | ||
| 424 | icon.name: "dialog-ok-apply" | 421 | icon.name: "dialog-ok-apply" | ||
| 425 | text: i18nd("plasma_shell_org.kde.plasma.desktop", "Apply") | 422 | text: i18nd("plasma_shell_org.kde.plasma.desktop", "Apply") | ||
| 426 | visible: pageStack.currentItem && (!pageStack.currentItem.kcm || pageStack.currentItem.kcm.buttons & 4) // 4 = Apply button | 423 | visible: pageStack.currentItem && (!pageStack.currentItem.kcm || pageStack.currentItem.kcm.buttons & 4) // 4 = Apply button | ||
| 427 | onClicked: applyAction.trigger() | 424 | onClicked: applyAction.trigger() | ||
| 428 | } | 425 | } | ||
| 429 | QtControls.Button { | 426 | QtControls.Button { | ||
| 430 | icon.name: "dialog-cancel" | 427 | icon.name: "dialog-cancel" | ||
| 431 | text: i18nd("plasma_shell_org.kde.plasma.desktop", "Cancel") | 428 | text: i18nd("plasma_shell_org.kde.plasma.desktop", "Cancel") | ||
| 432 | onClicked: cancelAction.trigger() | 429 | onClicked: cancelAction.trigger() | ||
| 433 | } | 430 | } | ||
| 434 | } | 431 | } | ||
| 435 | } | 432 | } | ||
| 433 | } | ||||
| 436 | //END UI components | 434 | //END UI components | ||
| 437 | } | 435 | } | ||
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: