QML UI: make the theme settings not overflow page width

As per title.

Signed-off-by: Joakim Bygdell <j.bygdell@gmail.com>
This commit is contained in:
Joakim Bygdell 2017-07-22 11:54:21 +02:00 committed by Dirk Hohndel
parent f96dacc94d
commit a80394d5b6

View file

@ -46,20 +46,21 @@ Kirigami.ScrollablePage {
Layout.bottomMargin: Kirigami.Units.largeSpacing / 2 Layout.bottomMargin: Kirigami.Units.largeSpacing / 2
Layout.columnSpan: 4 Layout.columnSpan: 4
} }
Label { Kirigami.Label {
text: qsTr("Blue") text: qsTr("Blue")
color: subsurfaceTheme.textColor color: subsurfaceTheme.textColor
rightPadding: Kirigami.Units.gridUnit rightPadding: Kirigami.Units.gridUnit
Layout.preferredWidth: settingsPage.col1Width Layout.preferredWidth: settingsPage.col1Width * 0.8
} }
Row { Row {
Layout.columnSpan: 2 Layout.columnSpan: 2
Layout.preferredWidth: settingsPage.col2Width + settingsPage.col3Width Layout.preferredWidth: gridwidth * 0.6
// Layout.alignment: Qt.AlignLeft
Rectangle { Rectangle {
id: blueRect id: blueRect
color: subsurfaceTheme.blueBackgroundColor color: subsurfaceTheme.blueBackgroundColor
border.color: "black" border.color: "black"
width: sampleRegularBlue.width + 2 * Kirigami.Units.gridUnit width: sampleRegularBlue.width + Kirigami.Units.gridUnit
height: Kirigami.Units.gridUnit * 2 height: Kirigami.Units.gridUnit * 2
Text { Text {
id: sampleRegularBlue id: sampleRegularBlue
@ -74,7 +75,7 @@ Kirigami.ScrollablePage {
Rectangle { Rectangle {
color: subsurfaceTheme.bluePrimaryColor color: subsurfaceTheme.bluePrimaryColor
border.color: "black" border.color: "black"
width: sampleHighlightBlue.width + 2 * Kirigami.Units.gridUnit width: sampleHighlightBlue.width + Kirigami.Units.gridUnit
height: Kirigami.Units.gridUnit * 2 height: Kirigami.Units.gridUnit * 2
Text { Text {
id: sampleHighlightBlue id: sampleHighlightBlue
@ -89,7 +90,8 @@ Kirigami.ScrollablePage {
} }
RadioButton { RadioButton {
id: bluebutton id: bluebutton
Layout.preferredWidth: settingsPage.col4Width Layout.preferredWidth: settingsPage.col4Width * 0.5
Layout.alignment: Qt.AlignRight
checked: subsurfaceTheme.currentTheme === "Blue" checked: subsurfaceTheme.currentTheme === "Blue"
onClicked: { onClicked: {
blueTheme() blueTheme()
@ -117,11 +119,11 @@ Kirigami.ScrollablePage {
} }
} }
Label { Kirigami.Label {
text: qsTr("Pink") text: qsTr("Pink")
color: subsurfaceTheme.textColor color: subsurfaceTheme.textColor
rightPadding: Kirigami.Units.gridUnit rightPadding: Kirigami.Units.gridUnit
Layout.preferredWidth: settingsPage.col1Width Layout.preferredWidth: settingsPage.col1Width * 0.5
} }
Row { Row {
Layout.columnSpan: 2 Layout.columnSpan: 2
@ -130,7 +132,7 @@ Kirigami.ScrollablePage {
id: pinkRect id: pinkRect
color: subsurfaceTheme.pinkBackgroundColor color: subsurfaceTheme.pinkBackgroundColor
border.color: "black" border.color: "black"
width: sampleRegularPink.width + 2 * Kirigami.Units.gridUnit width: sampleRegularPink.width + Kirigami.Units.gridUnit
height: Kirigami.Units.gridUnit * 2 height: Kirigami.Units.gridUnit * 2
Text { Text {
id: sampleRegularPink id: sampleRegularPink
@ -145,7 +147,7 @@ Kirigami.ScrollablePage {
Rectangle { Rectangle {
color: subsurfaceTheme.pinkPrimaryColor color: subsurfaceTheme.pinkPrimaryColor
border.color: "black" border.color: "black"
width: sampleHighlightPink.width + 2 * Kirigami.Units.gridUnit width: sampleHighlightPink.width + Kirigami.Units.gridUnit
height: Kirigami.Units.gridUnit * 2 height: Kirigami.Units.gridUnit * 2
Text { Text {
id: sampleHighlightPink id: sampleHighlightPink
@ -158,10 +160,12 @@ Kirigami.ScrollablePage {
} }
} }
} }
RadioButton { RadioButton {
id: pinkbutton id: pinkbutton
checked: subsurfaceTheme.currentTheme === "Pink" checked: subsurfaceTheme.currentTheme === "Pink"
Layout.preferredWidth: settingsPage.col4Width Layout.preferredWidth: settingsPage.col4Width * 0.5
Layout.alignment: Qt.AlignRight
onClicked: { onClicked: {
pinkTheme() pinkTheme()
manager.theme = subsurfaceTheme.currentTheme manager.theme = subsurfaceTheme.currentTheme
@ -188,11 +192,11 @@ Kirigami.ScrollablePage {
} }
} }
Label { Kirigami.Label {
text: qsTr("Dark") text: qsTr("Dark")
color: subsurfaceTheme.textColor color: subsurfaceTheme.textColor
rightPadding: Kirigami.Units.gridUnit rightPadding: Kirigami.Units.gridUnit
Layout.preferredWidth: settingsPage.col1Width Layout.preferredWidth: settingsPage.col1Width * 0.5
} }
Row { Row {
Layout.columnSpan: 2 Layout.columnSpan: 2
@ -201,7 +205,7 @@ Kirigami.ScrollablePage {
id: blackRect id: blackRect
color: subsurfaceTheme.darkBackgroundColor color: subsurfaceTheme.darkBackgroundColor
border.color: "black" border.color: "black"
width: sampleRegularDark.width + 2 * Kirigami.Units.gridUnit width: sampleRegularDark.width + Kirigami.Units.gridUnit
height: Kirigami.Units.gridUnit * 2 height: Kirigami.Units.gridUnit * 2
Text { Text {
id: sampleRegularDark id: sampleRegularDark
@ -216,7 +220,7 @@ Kirigami.ScrollablePage {
Rectangle { Rectangle {
color: subsurfaceTheme.darkPrimaryColor color: subsurfaceTheme.darkPrimaryColor
border.color: "black" border.color: "black"
width: sampleHighlightDark.width + 2 * Kirigami.Units.gridUnit width: sampleHighlightDark.width + Kirigami.Units.gridUnit
height: Kirigami.Units.gridUnit * 2 height: Kirigami.Units.gridUnit * 2
Text { Text {
id: sampleHighlightDark id: sampleHighlightDark
@ -232,7 +236,8 @@ Kirigami.ScrollablePage {
RadioButton { RadioButton {
id: darkbutton id: darkbutton
checked: subsurfaceTheme.currentTheme === "Dark" checked: subsurfaceTheme.currentTheme === "Dark"
Layout.preferredWidth: settingsPage.col4Width Layout.preferredWidth: settingsPage.col4Width * 0.5
Layout.alignment: Qt.AlignRight
onClicked: { onClicked: {
darkTheme() darkTheme()
manager.theme = subsurfaceTheme.currentTheme manager.theme = subsurfaceTheme.currentTheme