Commit 02b1b690 authored by Marco Martin's avatar Marco Martin
Browse files

condense selection controls

checkboxes, radiobuttons and switches
parent 660296a9
......@@ -30,7 +30,7 @@ Kirigami.ScrollablePage {
color: Kirigami.Theme.backgroundColor
}
title: "Gallery"
title: qsTr("Kirigami Gallery")
//flickable: mainListView
actions {
......@@ -67,12 +67,12 @@ Kirigami.ScrollablePage {
model: ListModel {
ListElement {
text: "Button"
text: qsTr("Buttons")
component: "Button"
}
ListElement {
text: "CheckBox"
component: "CheckBox"
text: qsTr("Selection Controls")
component: "SelectionControls"
}
ListElement {
text: "Radio Button"
......@@ -86,10 +86,6 @@ Kirigami.ScrollablePage {
text: "Slider"
component: "Slider"
}
ListElement {
text: "Switch"
component: "Switch"
}
ListElement {
text: "Tab Bar"
component: "TabBar"
......
/*
* Copyright 2015 Marco Martin <mart@kde.org>
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU Library General Public License as
* published by the Free Software Foundation; either version 2 or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Library General Public License for more details
*
* You should have received a copy of the GNU Library General Public
* License along with this program; if not, write to the
* Free Software Foundation, Inc.,
* 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import QtQuick 2.0
import QtQuick.Controls 2.0 as Controls
import QtQuick.Layouts 1.2
import org.kde.kirigami 2.4
ScrollablePage {
id: page
actions {
main: Action {
iconName: sheet.sheetOpen ? "dialog-cancel" : "document-edit"
text: "Main Action Text"
checked: sheet.sheetOpen
checkable: true
onCheckedChanged: sheet.sheetOpen = checked;
}
contextualActions: [
Action {
text:"Action 1"
onTriggered: showPassiveNotification("Action 1 clicked")
},
Action {
text:"Action 2"
onTriggered: showPassiveNotification("Action 2 clicked")
}
]
}
Layout.fillWidth: true
title: "Checkboxes"
OverlaySheet {
id: sheet
Controls.Label {
property int implicitWidth: Units.gridUnit * 45
wrapMode: Text.WordWrap
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id risus id augue euismod accumsan. Nunc vestibulum placerat bibendum. Morbi commodo auctor varius. Donec molestie euismod ultrices. Sed facilisis augue nec eros auctor, vitae mattis quam rhoncus. Nam ut erat diam. Curabitur iaculis accumsan magna, eget fermentum massa scelerisque eu. Cras elementum erat non erat euismod accumsan. Vestibulum ac mi sed dui finibus pulvinar. Vivamus dictum, leo sed lobortis porttitor, nisl magna faucibus orci, sit amet euismod arcu elit eget est. Duis et vehicula nibh. In arcu sapien, laoreet sit amet porttitor non, rhoncus vel magna. Suspendisse imperdiet consectetur est nec ornare. Pellentesque bibendum sapien at erat efficitur vehicula. Morbi sed porta nibh. Vestibulum ut urna ut dolor sagittis mattis."
}
}
ColumnLayout {
//This OverlaySheet is put in the "wrong place", but will be automatically reparented
// to "page"
Item {
Layout.fillWidth: true
Layout.minimumHeight: Units.gridUnit * 10
GridLayout {
id: grid
anchors.centerIn: parent
columns: 3
rows: 3
rowSpacing: Units.smallSpacing
Item {
width: 1
height: 1
}
Controls.Label {
text: "Normal"
}
Controls.Label {
text: "Disabled"
enabled: false
}
Controls.Label {
text: "On"
}
Controls.CheckBox {
text: "On"
checked: true
}
Controls.CheckBox {
text: "On"
checked: true
enabled: false
}
Controls.Label {
text: "Off"
}
Controls.CheckBox {
text: "Off"
checked: false
}
Controls.CheckBox {
text: "Off"
checked: false
enabled: false
}
}
Controls.CheckBox {
anchors {
top: grid.bottom
left: grid.left
}
text: "Tristate"
checked: true
tristate: true
}
}
}
}
/*
* Copyright 2015 Marco Martin <mart@kde.org>
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU Library General Public License as
* published by the Free Software Foundation; either version 2 or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Library General Public License for more details
*
* You should have received a copy of the GNU Library General Public
* License along with this program; if not, write to the
* Free Software Foundation, Inc.,
* 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import QtQuick 2.0
import QtQuick.Controls 2.0 as Controls
import QtQuick.Layouts 1.2
import org.kde.kirigami 2.4
ScrollablePage {
id: page
Layout.fillWidth: true
title: "Radio buttons"
actions {
main: Action {
iconName: "document-edit"
text: "Main Action Text"
onTriggered: {
showPassiveNotification("Action button in buttons page clicked");
}
}
left: Action {
iconName: "folder-sync"
text: "Left Action Text"
onTriggered: {
showPassiveNotification("Left action triggered")
}
}
}
Controls.ButtonGroup {
buttons: column1.children
}
ColumnLayout {
width: page.width
Item {
Layout.fillWidth: true
Layout.minimumHeight: Units.gridUnit * 10
RowLayout {
anchors.centerIn: parent
ColumnLayout {
Layout.fillHeight: true
Item {
width: 1
height: 1
Layout.fillHeight: true
}
Controls.Label {
text: "On"
Layout.preferredHeight: radio1.height
}
Controls.Label {
text: "Off"
Layout.preferredHeight: radio1.height
}
}
ColumnLayout {
id: column1
Controls.Label {
text: "Normal"
}
Controls.RadioButton {
id: radio1
text: "On"
checked: true
}
Controls.RadioButton {
text: "Off"
checked: false
}
}
ColumnLayout {
id: column2
enabled: false
Controls.Label {
text: "Disabled"
}
Controls.RadioButton {
text: "On"
checked: true
}
Controls.RadioButton {
text: "Off"
checked: false
}
}
}
}
}
}
/*
* Copyright 2015 Marco Martin <mart@kde.org>
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU Library General Public License as
* published by the Free Software Foundation; either version 2 or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Library General Public License for more details
*
* You should have received a copy of the GNU Library General Public
* License along with this program; if not, write to the
* Free Software Foundation, Inc.,
* 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import QtQuick 2.0
import QtQuick.Controls 2.0 as Controls
import QtQuick.Layouts 1.2
import org.kde.kirigami 2.4 as Kirigami
import "components"
Kirigami.ScrollablePage {
id: page
actions.main: Kirigami.Action {
iconName: "documentinfo"
text: qsTr("Info")
checkable: true
onCheckedChanged: sheet.sheetOpen = checked;
shortcut: "Alt+I"
}
Layout.fillWidth: true
title: qsTr("Selection Controls")
InfoSheet {
id: sheet
title: qsTr("Selection Controls")
higUrl: "https://hig.kde.org/components/index.html#selection"
sourceUrl: "https://cgit.kde.org/kirigami.git/tree/examples/gallerydata/contents/ui/gallery/SelectionControlsGallery.qml"
text: qsTr("<p>Selection controls allow users to complete tasks that involve a choice or a selection.</p> <p>Depending from The kind of choice that has to be made, the best control to use may be a Checkbox, a RadioButton, or a Switch.</p>
<ul><li>Use checkboxes for non-exclusive options that have clear alternatives. Mutually exclusive options should use a set of radio buttons or a combo box.</li>
<li>Use radio buttons for a few mutually exclusive options. If there are more than five options (or if there is not enough space to arrange four or five options), use a combo box or list instead.</li>
<li>Use switches on Mobile, when immediately activating or deactivating something (ok/Apply buttons not needed).</li>
</ul>")
}
Kirigami.FormLayout {
Item {
Kirigami.FormData.label: qsTr("Checkboxes")
Kirigami.FormData.isSection: true
}
Controls.CheckBox {
text: qsTr("Item selected")
checked: true
}
Controls.CheckBox {
text: qsTr("Item not selected")
checked: false
}
Kirigami.Separator {
Kirigami.FormData.isSection: true
Kirigami.FormData.label: qsTr("Radio buttons")
}
Controls.RadioButton {
text: qsTr("Item selected")
checked: true
}
Controls.RadioButton {
text: qsTr("Item not selected")
checked: false
}
Kirigami.Separator {
Kirigami.FormData.isSection: true
Kirigami.FormData.label: qsTr("Switches")
}
Controls.Switch {
text: qsTr("Item selected")
checked: true
}
Controls.Switch {
text: qsTr("Item not selected")
checked: false
}
}
}
/*
* Copyright 2015 Marco Martin <mart@kde.org>
* Copyright 2018 Marco Martin <mart@kde.org>
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU Library General Public License as
......@@ -17,64 +17,44 @@
* 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import QtQuick 2.0
import QtQuick 2.6
import QtQuick.Controls 2.0 as Controls
import QtQuick.Layouts 1.2
import org.kde.kirigami 2.4
import org.kde.kirigami 2.4 as Kirigami
ScrollablePage {
id: page
Layout.fillWidth: true
title: "Switches"
Kirigami.OverlaySheet {
id: root
property Kirigami.Page page
property url higUrl
property url sourceUrl
property alias title: titleLabel.text
property alias text: mainText.text
ColumnLayout {
width: page.width
onSheetOpenChanged: page.actions.main.checked = sheetOpen
header: Kirigami.Heading {
id: titleLabel
Layout.fillWidth: true
}
footer: RowLayout {
Item {
Layout.fillWidth: true
Layout.minimumHeight: Units.gridUnit * 10
GridLayout {
anchors.centerIn: parent
columns: 3
rows: 3
rowSpacing: Units.smallSpacing
Item {
width: 1
height: 1
}
Controls.Label {
text: "Normal"
}
Controls.Label {
text: "Disabled"
enabled: false
}
Controls.Label {
text: "On"
}
Controls.Switch {
checked: true
text: "On"
}
Controls.Switch {
checked: true
enabled: false
text: "On"
}
Controls.Label {
text: "Off"
}
Controls.Switch {
checked: false
text: "Off"
}
Controls.Switch {
checked: false
enabled: false
text: "Off"
}
}
}
Controls.ToolButton {
text: qsTr("HIG...")
enabled: higUrl != ""
onClicked: Qt.openUrlExternally(higUrl)
}
Controls.ToolButton {
text: qsTr("Source code...")
enabled: sourceUrl != ""
onClicked: Qt.openUrlExternally(sourceUrl)
}
}
Controls.Label {
id: mainText
property int implicitWidth: Kirigami.Units.gridUnit * 25
wrapMode: Text.WordWrap
}
}
......@@ -2,17 +2,16 @@
<qresource prefix="/">
<file alias="contents/ui/MainPage.qml">./data/contents/ui/MainPage.qml</file>
<file alias="contents/ui/banner.jpg">./data/contents/ui/banner.jpg</file>
<file alias="contents/ui/gallery/components/InfoSheet.qml">./data/contents/ui/gallery/components/InfoSheet.qml</file>
<file alias="contents/ui/gallery/NonScrollableGallery.qml">./data/contents/ui/gallery/NonScrollableGallery.qml</file>
<file alias="contents/ui/gallery/RadioButtonGallery.qml">./data/contents/ui/gallery/RadioButtonGallery.qml</file>
<file alias="contents/ui/gallery/ButtonGallery.qml">./data/contents/ui/gallery/ButtonGallery.qml</file>
<file alias="contents/ui/gallery/ProgressBarGallery.qml">./data/contents/ui/gallery/ProgressBarGallery.qml</file>
<file alias="contents/ui/gallery/CheckBoxGallery.qml">./data/contents/ui/gallery/CheckBoxGallery.qml</file>
<file alias="contents/ui/gallery/SelectionControlsGallery.qml">./data/contents/ui/gallery/SelectionControlsGallery.qml</file>
<file alias="contents/ui/gallery/SliderGallery.qml">./data/contents/ui/gallery/SliderGallery.qml</file>
<file alias="contents/ui/gallery/MultipleColumnsGallery.qml">./data/contents/ui/gallery/MultipleColumnsGallery.qml</file>
<file alias="contents/ui/gallery/MiscGallery.qml">./data/contents/ui/gallery/MiscGallery.qml</file>
<file alias="contents/ui/gallery/ListViewGallery.qml">./data/contents/ui/gallery/ListViewGallery.qml</file>
<file alias="contents/ui/gallery/ListViewHeaderItemsGallery.qml">./data/contents/ui/gallery/ListViewHeaderItemsGallery.qml</file>
<file alias="contents/ui/gallery/SwitchGallery.qml">./data/contents/ui/gallery/SwitchGallery.qml</file>
<file alias="contents/ui/gallery/TabBarGallery.qml">./data/contents/ui/gallery/TabBarGallery.qml</file>
<file alias="contents/ui/gallery/TextFieldGallery.qml">./data/contents/ui/gallery/TextFieldGallery.qml</file>
<file alias="contents/ui/gallery/ColorsGallery.qml">./data/contents/ui/gallery/ColorsGallery.qml</file>
......
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