mifr/subsurface
1
0
Fork 0
mirror of https://github.com/subsurface/subsurface.git synced 2025-02-19 22:16:15 +00:00
Code Issues Projects Releases Packages Wiki Activity

QML UI: replace theme checkboxes with switches

Browse source 
Replace the theme checkboxes on the settings page
so that we get a unified UI.
These switches are linked and as such can only be activated
deactivation occurs when the user selects another theme.

Signed-off-by: Joakim Bygdell <j.bygdell@gmail.com>
This commit is contained in:
Joakim Bygdell 2017-07-23 12:44:52 +02:00 • committed by Dirk Hohndel
parent d51fe03bd9
commit b9e90441ca
1 changed files with 63 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

120
mobile-widgets/qml/Settings.qml
View file

@ -46,7 +46,7 @@ Kirigami.ScrollablePage {
text: qsTr("Blue") text: qsTr("Blue")
color: subsurfaceTheme.textColor color: subsurfaceTheme.textColor
rightPadding: Kirigami.Units.gridUnit rightPadding: Kirigami.Units.gridUnit
Layout.preferredWidth: gridWidth * 0.2 Layout.preferredWidth: gridWidth * 0.15
} }
Row { Row {
Layout.preferredWidth: gridWidth * 0.6 Layout.preferredWidth: gridWidth * 0.6
@ -82,45 +82,47 @@ Kirigami.ScrollablePage {
} }
} }
} }
RadioButton { Switch {
id: bluebutton id: blueButton
Layout.preferredWidth: gridWidth * 0.125 Layout.preferredWidth: gridWidth * 0.25
Layout.alignment: Qt.AlignRight
checked: subsurfaceTheme.currentTheme === "Blue" checked: subsurfaceTheme.currentTheme === "Blue"
enabled: subsurfaceTheme.currentTheme !== "Blue"
onClicked: { onClicked: {
blueTheme() blueTheme()
manager.theme = subsurfaceTheme.currentTheme manager.theme = subsurfaceTheme.currentTheme
manager.savePreferences() manager.savePreferences()
} }
indicator: Rectangle { indicator: Rectangle {
implicitWidth: 20 implicitWidth: Kirigami.Units.largeSpacing * 3
implicitHeight: 20 implicitHeight: Kirigami.Units.largeSpacing
x: bluebutton.leftPadding x: blueButton.leftPadding
y: parent.height / 2 - height / 2 y: parent.height / 2 - height / 2
radius: 4 radius: Kirigami.Units.largeSpacing * 0.5
border.color: bluebutton.down ? subsurfaceTheme.primaryColor : subsurfaceTheme.darkerPrimaryColor color: blueButton.checked ?
color: subsurfaceTheme.backgroundColor subsurfaceTheme.lightPrimaryColor : subsurfaceTheme.backgroundColor
border.color: subsurfaceTheme.darkerPrimaryColor
Rectangle { Rectangle {
width: 12 x: blueButton.checked ? parent.width - width : 0
height: 12 y: parent.height / 2 - height / 2
x: 4 width: Kirigami.Units.largeSpacing * 1.5
y: 4 height: Kirigami.Units.largeSpacing * 1.5
radius: 3 radius: height / 2
color: bluebutton.down ? subsurfaceTheme.primaryColor : subsurfaceTheme.darkerPrimaryColor color: blueButton.down || blueButton.checked ?
visible: bluebutton.checked subsurfaceTheme.primaryColor : subsurfaceTheme.lightPrimaryColor
border.color: subsurfaceTheme.darkerPrimaryColor
} }
} }
} }
Kirigami.Label { Kirigami.Label {
id: pinkLabel
text: qsTr("Pink") text: qsTr("Pink")
color: subsurfaceTheme.textColor
rightPadding: Kirigami.Units.gridUnit rightPadding: Kirigami.Units.gridUnit
Layout.preferredWidth: gridWidth * 0.125 Layout.preferredWidth: gridWidth * 0.15
} }
Row { Row {
Layout.preferredWidth: settingsPage.col2Width + settingsPage.col3Width Layout.preferredWidth: gridWidth * 0.6
Rectangle { Rectangle {
id: pinkRect id: pinkRect
color: subsurfaceTheme.pinkBackgroundColor color: subsurfaceTheme.pinkBackgroundColor
@ -154,33 +156,35 @@ Kirigami.ScrollablePage {
} }
} }
RadioButton { Switch {
id: pinkbutton id: pinkButton
Layout.preferredWidth: gridWidth * 0.25
checked: subsurfaceTheme.currentTheme === "Pink" checked: subsurfaceTheme.currentTheme === "Pink"
Layout.preferredWidth: gridWidth * 0.125 enabled: subsurfaceTheme.currentTheme !== "Pink"
Layout.alignment: Qt.AlignRight
onClicked: { onClicked: {
pinkTheme() pinkTheme()
manager.theme = subsurfaceTheme.currentTheme manager.theme = subsurfaceTheme.currentTheme
manager.savePreferences() manager.savePreferences()
} }
indicator: Rectangle { indicator: Rectangle {
implicitWidth: 20 implicitWidth: Kirigami.Units.largeSpacing * 3
implicitHeight: 20 implicitHeight: Kirigami.Units.largeSpacing
x: pinkbutton.leftPadding x: pinkButton.leftPadding
y: parent.height / 2 - height / 2 y: parent.height / 2 - height / 2
radius: 4 radius: Kirigami.Units.largeSpacing * 0.5
border.color: pinkbutton.down ? subsurfaceTheme.primaryColor : subsurfaceTheme.darkerPrimaryColor color: pinkButton.checked ?
color: subsurfaceTheme.backgroundColor subsurfaceTheme.lightPrimaryColor : subsurfaceTheme.backgroundColor
border.color: subsurfaceTheme.darkerPrimaryColor
Rectangle { Rectangle {
width: 12 x: pinkButton.checked ? parent.width - width : 0
height: 12 y: parent.height / 2 - height / 2
x: 4 width: Kirigami.Units.largeSpacing * 1.5
y: 4 height: Kirigami.Units.largeSpacing * 1.5
radius: 3 radius: height / 2
color: pinkbutton.down ? subsurfaceTheme.primaryColor : subsurfaceTheme.darkerPrimaryColor color: pinkButton.down || pinkButton.checked ?
visible: pinkbutton.checked subsurfaceTheme.primaryColor : subsurfaceTheme.lightPrimaryColor
border.color: subsurfaceTheme.darkerPrimaryColor
} }
} }
} }
@ -189,10 +193,10 @@ Kirigami.ScrollablePage {
text: qsTr("Dark") text: qsTr("Dark")
color: subsurfaceTheme.textColor color: subsurfaceTheme.textColor
rightPadding: Kirigami.Units.gridUnit rightPadding: Kirigami.Units.gridUnit
Layout.preferredWidth: gridWidth * 0.125 Layout.preferredWidth: gridWidth * 0.15
} }
Row { Row {
Layout.preferredWidth: settingsPage.col2Width + settingsPage.col3Width Layout.preferredWidth: gridWidth * 0.6
Rectangle { Rectangle {
id: blackRect id: blackRect
color: subsurfaceTheme.darkBackgroundColor color: subsurfaceTheme.darkBackgroundColor
@ -225,33 +229,35 @@ Kirigami.ScrollablePage {
} }
} }
} }
RadioButton { Switch {
id: darkbutton id: darkButton
Layout.preferredWidth: gridWidth * 0.25
checked: subsurfaceTheme.currentTheme === "Dark" checked: subsurfaceTheme.currentTheme === "Dark"
Layout.preferredWidth: gridWidth * 0.125 enabled: subsurfaceTheme.currentTheme !== "Dark"
Layout.alignment: Qt.AlignRight
onClicked: { onClicked: {
darkTheme() darkTheme()
manager.theme = subsurfaceTheme.currentTheme manager.theme = subsurfaceTheme.currentTheme
manager.savePreferences() manager.savePreferences()
} }
indicator: Rectangle { indicator: Rectangle {
implicitWidth: 20 implicitWidth: Kirigami.Units.largeSpacing * 3
implicitHeight: 20 implicitHeight: Kirigami.Units.largeSpacing
x: darkbutton.leftPadding x: darkButton.leftPadding
y: parent.height / 2 - height / 2 y: parent.height / 2 - height / 2
radius: 4 radius: Kirigami.Units.largeSpacing * 0.5
border.color: darkbutton.down ? subsurfaceTheme.primaryColor : subsurfaceTheme.darkerPrimaryColor color: darkButton.checked ?
color: subsurfaceTheme.backgroundColor subsurfaceTheme.lightPrimaryColor : subsurfaceTheme.backgroundColor
border.color: subsurfaceTheme.darkerPrimaryColor
Rectangle { Rectangle {
width: 12 x: darkButton.checked ? parent.width - width : 0
height: 12 y: parent.height / 2 - height / 2
x: 4 width: Kirigami.Units.largeSpacing * 1.5
y: 4 height: Kirigami.Units.largeSpacing * 1.5
radius: 3 radius: height / 2
color: darkbutton.down ? subsurfaceTheme.primaryColor : subsurfaceTheme.darkerPrimaryColor color: darkButton.down || darkButton.checked ?
visible: darkbutton.checked subsurfaceTheme.primaryColor : subsurfaceTheme.lightPrimaryColor
border.color: subsurfaceTheme.darkerPrimaryColor
} }
} }
} }