Members of the KDE Community are recommended to subscribe to the kde-community mailing list at https://mail.kde.org/mailman/listinfo/kde-community to allow them to participate in important discussions and receive other important announcements

Commit d6731530 authored by George Vogiatzis's avatar George Vogiatzis

Fixes for applet configuration layout.

Summary:
Fix applet configuration overlap with top line.
Change the margins to move scrollbar so that it touches the edge.
and use margins for content.
Set content to use available width.
Prevent vertical scrollbar from poping on/off internally.
Change the layout so that categories column can get the full height.
Remove 2 unused properties.
Fix bind loop for pageFlickable's width.
Fix title alignment for RTL.

Test Plan:
Open desktop and audio configurations and make windows small.
Select audio category and move content to the top. (If there is no
scrollbar, increase and decrease height to exploit bug.)

Before:
At the right side (the main) scrollbar will have a margin, and overlap
with content.
{F8129291}
Desktop categories stop above buttons cancel, ok.
{F8129294}
Main content, and category highlight are displayed on top of the line.
{F8127259, size=full}
After:
Scrollbar touch the edge, and the content has correct margin.
{F8129296, layout=inline} {F8129306, layout=inline}
Categories height is not limited.
{F8130962, layout=inline} {F8130963, layout=inline} {F8130965, layout=inline}
Main content ~~, and category highlight~~(restored, see photo above instead for highlight) touch the line below.
{F8127260, size=full}

Reviewers: #plasma, #vdg, filipf, ngraham

Reviewed By: #vdg, filipf, ngraham

Subscribers: ngraham, filipf, plasma-devel

Tags: #plasma

Differential Revision: https://phabricator.kde.org/D27608
parent bfcc6df3
......@@ -98,8 +98,6 @@ Rectangle {
pageStack.sourceFile = globalConfigModel.get(0).source
pageStack.title = globalConfigModel.get(0).name
}
// root.width = pageStackColumn.implicitWidth
// root.height = pageStackColumn.implicitHeight
}
//END connections
......@@ -108,7 +106,7 @@ Rectangle {
id: sidebar
visible: configDialog.configModel
anchors.left: root.left
width: categories.width
width: categoriesScroll.width
height: root.height
Kirigami.Theme.inherit: false
Kirigami.Theme.colorSet: Kirigami.Theme.View
......@@ -122,6 +120,7 @@ Rectangle {
}
Kirigami.Separator {
id: topSeparator
anchors.top: root.top
width: root.width
}
......@@ -142,31 +141,20 @@ Rectangle {
}
}
ColumnLayout {
id: pageStackColumn
RowLayout {
anchors {
fill: parent
rightMargin: units.smallSpacing * 2
leftMargin: configDialog.configModel ? 0 : units.smallSpacing * 2
bottomMargin: units.smallSpacing * 2
}
property int implicitWidth: Math.max(contentRow.implicitWidth, buttonsRow.implicitWidth) + 8
property int implicitHeight: contentRow.implicitHeight + buttonsRow.implicitHeight + 8
RowLayout {
id: contentRow
spacing: 0
Layout.fillWidth: true
Layout.fillHeight: true
Layout.preferredHeight: parent.height - buttonsRow.height
QtControls.ScrollView {
id: categoriesScroll
QtControls.ScrollBar.horizontal.policy: QtControls.ScrollBar.AlwaysOff
Layout.fillHeight: true
visible: true
Layout.maximumWidth: units.gridUnit * 7
Layout.preferredWidth: categories.implicitWidth
clip: true
Layout.preferredWidth: units.gridUnit * 7
contentWidth: -1
Keys.onUpPressed: {
var buttons = categories.children
......@@ -208,14 +196,10 @@ Rectangle {
}
}
// Encapsulate as ColumnLayout will keep overwriting its own implicitWidth
Item {
implicitWidth: categoriesScroll.Layout.maximumWidth
implicitHeight: categories.implicitHeight
ColumnLayout {
id: categories
spacing: 0
width: categoriesScroll.width
width: categoriesScroll.availableWidth
property Item currentItem: children[1]
......@@ -233,19 +217,23 @@ Rectangle {
}
}
}
}
Item { // spacer
visible: categoriesScroll.visible
width: units.smallSpacing * 2
}
// Configuration area and buttons.
ColumnLayout {
id: configColumn
Layout.topMargin: topSeparator.height
Layout.bottomMargin: units.smallSpacing * 2
// Configuration scroll area
QtControls.ScrollView {
id: scroll
Layout.fillHeight: true
Layout.fillWidth: true
// we want to focus the controls in the settings page right away, don't focus the ScrollView
activeFocusOnTab: false
// Avoid scrollbar flashing on/off when decrease the window height, that is created by the content matching the scroll height.
// Even if scrollbar does not appear in the UI, modifies the availableWidth causing other issues.
QtControls.ScrollBar.vertical.policy: pageStack.maxHeight > pageStack.contentHeight ? QtControls.ScrollBar.AlwaysOff : QtControls.ScrollBar.AlwaysOn
property Item flickableItem: pageFlickable
// this horrible code below ensures the control with active focus stays visible in the window
......@@ -281,16 +269,29 @@ Rectangle {
}
Flickable {
id: pageFlickable
anchors.fill: parent
anchors {
top: scroll.top
bottom: scroll.bottom
left: scroll.left
}
width: scroll.availableWidth
contentHeight: pageColumn.height
contentWidth: width
Column {
id: pageColumn
spacing: units.largeSpacing / 2
anchors {
left: parent.left
right: parent.right
leftMargin: units.smallSpacing * 2
rightMargin: units.smallSpacing * 2
}
Kirigami.Heading {
id: pageTitle
width: scroll.width
width: pageColumn.width
topPadding: units.smallSpacing
level: 1
text: pageStack.title
......@@ -301,8 +302,12 @@ Rectangle {
property string title: ""
property bool invertAnimations: false
height: Math.max((scroll.height - pageTitle.height - parent.spacing), (pageStack.currentItem ? (pageStack.currentItem.implicitHeight ? pageStack.currentItem.implicitHeight : pageStack.currentItem.childrenRect.height) : 0))
width: scroll.width
property var maxHeight: scroll.availableHeight - pageTitle.height - parent.spacing
property var contentHeight: pageStack.currentItem ? (pageStack.currentItem.implicitHeight
? pageStack.currentItem.implicitHeight
: pageStack.currentItem.childrenRect.height) : 0
height: Math.max(maxHeight, contentHeight)
width: pageColumn.width
property string sourceFile
......@@ -357,7 +362,7 @@ Rectangle {
easing.type: Easing.InOutQuad
}
XAnimator {
from: pageStack.invertAnimations ? -scroll.width/3: scroll.width/3
from: pageStack.invertAnimations ? -pageColumn.width/3: pageColumn.width/3
to: 0
duration: units.longDuration
easing.type: Easing.InOutQuad
......@@ -374,7 +379,7 @@ Rectangle {
}
XAnimator {
from: 0
to: pageStack.invertAnimations ? scroll.width/3 : -scroll.width/3
to: pageStack.invertAnimations ? pageColumn.width/3 : -pageColumn.width/3
duration: units.longDuration
easing.type: Easing.InOutQuad
}
......@@ -384,7 +389,6 @@ Rectangle {
}
}
}
}
QtControls.Action {
id: acceptAction
......@@ -412,7 +416,10 @@ Rectangle {
RowLayout {
id: buttonsRow
Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
Layout.alignment: Qt.AlignRight
Layout.rightMargin: units.smallSpacing * 2
Layout.leftMargin: units.smallSpacing * 2
QtControls.Button {
icon.name: "dialog-ok"
text: i18nd("plasma_shell_org.kde.plasma.desktop", "OK")
......@@ -433,5 +440,6 @@ Rectangle {
}
}
}
}
//END UI components
}
Markdown is supported
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