Commit ad8f253d authored by Nate Graham's avatar Nate Graham 🔩

[FifteenPuzzle] Port configuration window to QQC2 and Kirigami.FormLayout and improve UI

Summary:
- Port to QQC2 and Kirigami+FormLayout
- Use radio buttons to choose color vs image
- Disable inactive controls appropriately

Test Plan:
{F6791372}

Everything still works.

Reviewers: #vdg, #plasma, GB_2, filipf

Reviewed By: #vdg, GB_2, filipf

Subscribers: GB_2, filipf, plasma-devel

Tags: #plasma

Maniphest Tasks: T10586

Differential Revision: https://phabricator.kde.org/D20747
parent a745a249
......@@ -21,13 +21,14 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>
*/
import QtQuick 2.0
import QtQuick.Controls 1.2 as QtControls
import QtQuick.Layouts 1.0 as QtLayouts
import QtQuick 2.5
import QtQuick.Controls 2.5 as QtControls
import QtQuick.Layouts 1.1
import QtQuick.Dialogs 1.2 as QtDialogs
import org.kde.kquickcontrols 2.0 as KQC
import org.kde.kirigami 2.8 as Kirigami
QtLayouts.ColumnLayout {
Kirigami.FormLayout {
id: appearancePage
property alias cfg_boardSize: sizeSpinBox.value
......@@ -35,84 +36,113 @@ QtLayouts.ColumnLayout {
property alias cfg_numberColor: numberColorPicker.color
property alias cfg_showNumerals: showNumeralsCheckBox.checked
property alias cfg_useImage: useImageCheckBox.checked
property alias cfg_useImage: imageBackgroundRadioButton.checked
property alias cfg_imagePath: imagePathTextField.text
QtLayouts.GridLayout {
columns: 2
QtControls.ButtonGroup {
id: radioGroup
}
QtControls.Label {
text: i18nc("@label:spinbox", "Size:")
QtLayouts.Layout.alignment: Qt.AlignRight
}
// Need to manually set checked state for the color button based on the
// other onebecause it's not aliased to a saved property
Component.onCompleted: {
colorBackgroundRadioButton.checked = !imageBackgroundRadioButton.checked;
}
QtControls.SpinBox {
id: sizeSpinBox
}
QtControls.SpinBox {
id: sizeSpinBox
Kirigami.FormData.label: i18nc("@label:spinbox", "Grid size:")
}
Item {
Kirigami.FormData.isSection: true
}
QtControls.Label {
text: i18nc("@label:chooser", "Piece color:")
QtLayouts.Layout.alignment: Qt.AlignRight
// Color background
RowLayout {
Kirigami.FormData.label: i18n("Background:")
QtControls.RadioButton {
id: colorBackgroundRadioButton
QtControls.ButtonGroup.group: radioGroup
text: i18n("Color:")
}
KQC.ColorButton {
id: pieceColorPicker
enabled: colorBackgroundRadioButton.checked
}
}
QtControls.Label {
text: i18nc("@label:chooser", "Number color:")
QtLayouts.Layout.alignment: Qt.AlignRight
}
// Image background
RowLayout {
QtControls.RadioButton {
id: imageBackgroundRadioButton
QtControls.ButtonGroup.group: radioGroup
KQC.ColorButton {
id: numberColorPicker
text: i18n("Image:")
}
QtControls.CheckBox {
id: useImageCheckBox
text: i18nc("@option:check", "Use custom image")
QtLayouts.Layout.alignment: Qt.AlignRight
Kirigami.ActionTextField {
id: imagePathTextField
enabled: imageBackgroundRadioButton.checked
Layout.fillWidth: true
placeholderText: i18nc("@info:placeholder", "Path to custom image...")
rightActions: [
Kirigami.Action {
iconName: "edit-clear"
visible: imagePathTextField.text.length !== 0
onTriggered: imagePathTextField.text = "";
}
]
}
QtLayouts.RowLayout {
QtControls.TextField {
id: imagePathTextField
QtLayouts.Layout.fillWidth: true
placeholderText: i18nc("@info:placeholder", "Path to custom image")
onTextChanged: useImageCheckBox.checked = true
}
QtControls.Button {
enabled: imageBackgroundRadioButton.checked
QtControls.Button {
iconName: "document-open"
tooltip: i18nc("@info:tooltip", "Browse...")
icon.name: "document-open"
onClicked: imagePicker.open()
QtControls.ToolTip.visible: hovered
QtControls.ToolTip.delay: 100
QtControls.ToolTip.text: i18nc("@info:tooltip", "Choose image...")
QtDialogs.FileDialog {
id: imagePicker
onClicked: imagePicker.open()
title: i18nc("@title:window", "Choose an Image")
QtDialogs.FileDialog {
id: imagePicker
folder: shortcuts.pictures
title: i18nc("@title:window", "Choose an Image")
// TODO ask QImageReader for supported formats
nameFilters: [ i18n("Image Files (*.png *.jpg *.jpeg *.bmp *.svg *.svgz)") ]
folder: shortcuts.pictures
onFileUrlChanged: {
imagePathTextField.text = fileUrl.toString().replace("file://", "")
}
// TODO ask QImageReader for supported formats
nameFilters: [ i18n("Image Files (*.png *.jpg *.jpeg *.bmp *.svg *.svgz)") ]
onFileUrlChanged: {
imagePathTextField.text = fileUrl.toString().replace("file://", "")
}
}
}
}
Item {
Kirigami.FormData.isSection: true
}
RowLayout {
Kirigami.FormData.label: i18n("Tiles:")
QtControls.CheckBox {
id: showNumeralsCheckBox
QtLayouts.Layout.columnSpan: 2
text: i18nc("@option:check", "Show numerals")
text: i18n("Colored numbers:")
}
}
Item { // tighten layout
QtLayouts.Layout.fillHeight: true
KQC.ColorButton {
id: numberColorPicker
enabled: showNumeralsCheckBox.checked
}
}
}
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