Fix visual glitches and improve the layouts of component tests

This commit is contained in:
Noah Davis 2020-08-18 05:45:23 -04:00
parent 5ca28a123b
commit 13882a60e1
23 changed files with 454 additions and 302 deletions

View File

@ -1,37 +1,34 @@
import QtQuick 2.0
import QtQuick.Layouts 1.2
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 3.0 as PlasmaComponents
import org.kde.plasma.extras 2.0 as PlasmaExtras
PlasmaCore.ColorScope
{
id: root
width: 500
height: 300
property bool invertedColors: false
default property alias children: container.children
colorGroup: invertedColors ? PlasmaCore.Theme.ComplementaryColorGroup : PlasmaCore.Theme.NormalColorGroup
PlasmaComponents.Page {
id: mainPage
title: "Test"
width: Math.max(mainPage.contentWidth, mainPage.implicitHeaderWidth, mainPage.implicitFooterWidth)
+ leftPadding + rightPadding
height: mainPage.contentHeight + mainPage.implicitHeaderHeight + mainPage.implicitFooterHeight
+ topPadding + bottomPadding
Rectangle {
anchors.fill: parent
padding: PlasmaCore.Units.gridUnit
header: PlasmaComponents.ToolBar {
leftPadding: mainPage.padding
rightPadding: mainPage.padding
contentItem: PlasmaExtras.Heading {
text: mainPage.title
/* FIXME: this line is needed to prevent vertical pixel
* misalignment of controls, such as checkboxes.
* The cause of the problem is unknown.
*/
level: 2
}
}
background: Rectangle {
color: PlasmaCore.ColorScope.backgroundColor
}
PlasmaComponents.Label {
id: label
text: root.invertedColors ? "Invert" : "Normal"
MouseArea {
anchors.fill: parent
onClicked: root.invertedColors = !root.invertedColors
}
}
Item {
id: container
anchors.top: label.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
}
}

View File

@ -1,22 +1,23 @@
import QtQuick 2.0
import QtQuick.Layouts 1.12
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 2.0 as PlasmaComponents
ComponentBase {
Column {
anchors.fill: parent
anchors.margins: 20
spacing: 20
id: root
title: "Plasma Components 2 BusyIndicator"
contentItem: ColumnLayout {
spacing: PlasmaCore.Units.gridUnit
PlasmaComponents.Label {
width: parent.width
wrapMode: Text.WordWrap
text: "When checking and unchecking the checkbox, " +
"the busy indicator should resume where it has " +
"paused and not glitch around"
"paused and not glitch around."
}
Row {
spacing: 20
RowLayout {
spacing: PlasmaCore.Units.gridUnit
PlasmaComponents.BusyIndicator {
running: runningButton.checked
@ -25,8 +26,8 @@ ComponentBase {
PlasmaComponents.CheckBox {
id: runningButton
text: "Running"
checked: true
}
}
}
}

View File

@ -1,22 +1,23 @@
import QtQuick 2.0
import QtQuick.Layouts 1.12
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 3.0 as PlasmaComponents
ComponentBase {
Column {
anchors.fill: parent
anchors.margins: 20
spacing: 20
id: root
title: "Plasma Components 3 BusyIndicator"
contentItem: ColumnLayout {
spacing: PlasmaCore.Units.gridUnit
PlasmaComponents.Label {
width: parent.width
wrapMode: Text.WordWrap
text: "When checking and unchecking the checkbox, " +
"the busy indicator should resume where it has " +
"paused and not glitch around"
text: "The BusyIndicator should disappear when unchecked and restart when checked."
Layout.preferredWidth: Math.max(busyIndicatorLayout.width, root.implicitHeaderWidth)
}
Row {
spacing: 20
RowLayout {
id: busyIndicatorLayout
spacing: PlasmaCore.Units.gridUnit
PlasmaComponents.BusyIndicator {
running: runningButton.checked
@ -25,9 +26,8 @@ ComponentBase {
PlasmaComponents.CheckBox {
id: runningButton
text: "Running"
checked: true
}
}
}
}

View File

@ -1,34 +1,35 @@
import QtQuick 2.0
import org.kde.plasma.components 2.0 as PlasmaComponents
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.2
import QtQuick.Controls 1.2
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 2.0 as PlasmaComponents
ComponentBase {
Grid {
anchors.fill: parent
anchors.margins: 20
spacing: 20
id: root
title: "Plasma Components 2 Button"
contentItem: GridLayout {
rowSpacing: PlasmaCore.Units.smallSpacing
columnSpacing: PlasmaCore.Units.largeSpacing
columns: 2
Label {
PlasmaComponents.Label {
text: "icon + text"
}
PlasmaComponents.Button {
iconSource: "list-remove"
iconSource: "start-here-kde-plasma"
text: "test"
}
Label {
PlasmaComponents.Label {
text: "icon alone, should look small and square"
}
PlasmaComponents.Button {
iconSource: "list-remove"
iconSource: "start-here-kde-plasma"
}
Label {
PlasmaComponents.Label {
text: "text alone, should be about as wide as the text itself"
}
@ -36,7 +37,7 @@ ComponentBase {
text: "test"
}
Label {
PlasmaComponents.Label {
text: "This should look highlighted on load"
}
@ -46,26 +47,26 @@ ComponentBase {
}
Label {
PlasmaComponents.Label {
text: "long text, should expand to fit"
}
PlasmaComponents.Button {
iconSource: "list-remove"
iconSource: "start-here-kde-plasma"
text: "This is a really really really really long button"
}
Label {
PlasmaComponents.Label {
text: "long text but constrained, should be 150px and elided"
}
PlasmaComponents.Button {
iconSource: "list-remove"
iconSource: "start-here-kde-plasma"
text: "This is a really really really really long button"
width: 150
Layout.maximumWidth: 150
}
Label {
PlasmaComponents.Label {
text: "button with menu"
}
@ -99,7 +100,7 @@ ComponentBase {
}
}
Label {
PlasmaComponents.Label {
text: "button (with or without icon) and textfield should have the same height"
}
@ -115,7 +116,7 @@ ComponentBase {
}
}
Label {
PlasmaComponents.Label {
text: "minimum width property. Should be two letters wide"
}

View File

@ -1,13 +1,14 @@
import QtQuick 2.0
import org.kde.plasma.components 3.0 as PlasmaComponents
import QtQuick.Layouts 1.2
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 3.0 as PlasmaComponents
ComponentBase {
Grid {
anchors.fill: parent
anchors.margins: 20
spacing: 20
id: root
title: "PlasmaComponents 3 Button"
contentItem: GridLayout {
rowSpacing: PlasmaCore.Units.smallSpacing
columnSpacing: PlasmaCore.Units.largeSpacing
columns: 2
PlasmaComponents.Label {
@ -15,7 +16,7 @@ ComponentBase {
}
PlasmaComponents.Button {
icon.name: "list-remove"
icon.name: "start-here-kde-plasma"
text: "test"
}
@ -24,7 +25,7 @@ ComponentBase {
}
PlasmaComponents.Button {
icon.name: "list-remove"
icon.name: "start-here-kde-plasma"
}
PlasmaComponents.Label {
@ -49,7 +50,7 @@ ComponentBase {
}
PlasmaComponents.Button {
icon.name: "list-remove"
icon.name: "start-here-kde-plasma"
text: "This is a really really really really long button"
}
@ -58,9 +59,9 @@ ComponentBase {
}
PlasmaComponents.Button {
icon.name: "list-remove"
icon.name: "start-here-kde-plasma"
text: "This is a really really really really long button"
width: 150
Layout.maximumWidth: 150
}

View File

@ -1,24 +1,25 @@
import QtQuick 2.0
import org.kde.plasma.components 2.0 as PlasmaComponents
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.2
import QtQuick.Controls 1.2
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 2.0 as PlasmaComponents
ComponentBase {
Grid {
anchors.fill: parent
anchors.margins: 20
spacing: 4
id: root
title: "Plasma Components 2 CheckBox"
contentItem: GridLayout {
rowSpacing: PlasmaCore.Units.smallSpacing
columnSpacing: PlasmaCore.Units.largeSpacing
columns: 2
Label {
PlasmaComponents.Label {
text: "text"
}
PlasmaComponents.CheckBox {
text: "Some awesome checkbox"
}
Label {
PlasmaComponents.Label {
text: "focus"
}
PlasmaComponents.CheckBox {
@ -26,7 +27,7 @@ ComponentBase {
focus: true
}
Label {
PlasmaComponents.Label {
text: "checked"
}
PlasmaComponents.CheckBox {
@ -34,7 +35,7 @@ ComponentBase {
checkedState: Qt.Checked
}
Label {
PlasmaComponents.Label {
text: "tri-state"
}
PlasmaComponents.CheckBox {
@ -42,7 +43,7 @@ ComponentBase {
checkedState: Qt.PartiallyChecked
}
Label {
PlasmaComponents.Label {
text: "disabled"
}
PlasmaComponents.CheckBox {
@ -50,7 +51,7 @@ ComponentBase {
enabled: false
}
Label {
PlasmaComponents.Label {
text: "disabled and checked"
}
PlasmaComponents.CheckBox {

View File

@ -1,13 +1,14 @@
import QtQuick 2.0
import org.kde.plasma.components 3.0 as PlasmaComponents
import QtQuick.Layouts 1.2
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 3.0 as PlasmaComponents
ComponentBase {
Grid {
anchors.fill: parent
anchors.margins: 20
spacing: 4
id: root
title: "Plasma Components 3 CheckBox"
contentItem: GridLayout {
columnSpacing: PlasmaCore.Units.largeSpacing
rowSpacing: PlasmaCore.Units.smallSpacing
columns: 2
PlasmaComponents.Label {

View File

@ -1,13 +1,13 @@
import QtQuick 2.0
import org.kde.plasma.components 2.0
import QtQuick.Layouts 1.12
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 2.0
ComponentBase {
Flow {
anchors.fill: parent
anchors.margins: 20
spacing: 20
id: root
title: "Plasma Components 2 ComboBox"
contentItem: ColumnLayout {
spacing: PlasmaCore.Units.largeSpacing
ListModel {
id: demoModel
ListElement { text: "Banana"; color: "Yellow" }

View File

@ -1,12 +1,13 @@
import QtQuick 2.0
import QtQuick.Layouts 1.12
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 3.0
ComponentBase {
Flow {
anchors.fill: parent
anchors.margins: 20
spacing: 20
id: root
title: "Plasma Components 3 ComboBox"
contentItem: ColumnLayout {
spacing: PlasmaCore.Units.largeSpacing
ListModel {
id: demoModel
ListElement { text: "Banana"; color: "Yellow" }

View File

@ -1,12 +1,13 @@
import QtQuick 2.0
import QtQuick.Layouts 1.12
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 2.0 as PlasmaComponents
ComponentBase {
Flow {
anchors.fill: parent
anchors.margins: 20
spacing: 20
id: root
title: "Plasma Components 2 ComboBox"
contentItem: ColumnLayout {
spacing: PlasmaCore.Units.largeSpacing
PlasmaComponents.Button {
text: "Simple menu"
@ -66,8 +67,8 @@ ComponentBase {
}
}
Row {
spacing: units.smallSpacing
RowLayout {
spacing: PlasmaCore.Units.smallSpacing
PlasmaComponents.Button {
id: minMaxButton

View File

@ -1,18 +1,26 @@
import QtQuick 2.0
import QtQuick.Layouts 1.12
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 2.0 as PlasmaComponents
ComponentBase {
id: root
title: "Plasma Components 2 ProgressBar"
property int orientation: orientationCombo.model[orientationCombo.currentIndex].value
property int progressBarWidth: testProgressBar.width
Flow {
anchors.fill: parent
anchors.margins: 20
spacing: 20
PlasmaComponents.ProgressBar {
id: testProgressBar
visible: false
}
Column {
Text {
contentItem: GridLayout {
columns: 6
columnSpacing: PlasmaCore.Units.largeSpacing
rowSpacing: PlasmaCore.Units.largeSpacing
ColumnLayout {
PlasmaComponents.Label {
text: "0%"
}
PlasmaComponents.ProgressBar {
@ -23,8 +31,8 @@ ComponentBase {
}
}
Column {
Text {
ColumnLayout {
PlasmaComponents.Label {
text: "50%"
}
PlasmaComponents.ProgressBar {
@ -35,8 +43,8 @@ ComponentBase {
}
}
Column {
Text {
ColumnLayout {
PlasmaComponents.Label {
text: "100%"
}
PlasmaComponents.ProgressBar {
@ -47,22 +55,27 @@ ComponentBase {
}
}
Column {
Text {
text: "these main bars should look the same width"
ColumnLayout {
PlasmaComponents.Label {
id: progressBarAndSliderLabel
text: "The progress bar and slider grooves should have the same visual width."
wrapMode: Text.WordWrap
Layout.preferredWidth: progressBarWidth
}
Flow {
GridLayout {
id: progressBarAndSliderGrid
columns: orientation === Qt.Vertical ? 2 : 1
rows: orientation === Qt.Vertical ? 1 : 2
PlasmaComponents.ProgressBar {
width: orientation === Qt.Vertical ? undefined : 100
height: orientation === Qt.Vertical ? 100 : undefined
id: progressBar
minimumValue: 0
maximumValue: 100
value: 50
orientation: root.orientation
}
PlasmaComponents.Slider {
width: orientation === Qt.Vertical ? undefined : 100
height: orientation === Qt.Vertical ? 100 : undefined
width: progressBar.width
height: progressBar.height
minimumValue: 0
maximumValue: 100
value: 50
@ -71,9 +84,11 @@ ComponentBase {
}
}
Column {
Text {
text: "Make sure the bar does\nnot leak outside"
ColumnLayout {
PlasmaComponents.Label {
text: "Min: 0; Max: 200; Value: 1\nMake sure the bar does not leak outside."
wrapMode: Text.WordWrap
Layout.preferredWidth: progressBarWidth
}
PlasmaComponents.ProgressBar {
minimumValue: 0
@ -83,9 +98,11 @@ ComponentBase {
}
}
Column {
Text {
text: "should look like 100%"
ColumnLayout {
PlasmaComponents.Label {
text: "Min: 0; Max: 100; Value: 110\nThe progress bar should look like it is at 100%."
wrapMode: Text.WordWrap
Layout.preferredWidth: progressBarWidth
}
PlasmaComponents.ProgressBar {
minimumValue: 0
@ -95,9 +112,11 @@ ComponentBase {
}
}
Column {
Text {
text: "QA Style 50%"
ColumnLayout {
PlasmaComponents.Label {
text: "Min: -100; Max: 100; Value: 0\nThe progress bar should look like it is at 50%."
wrapMode: Text.WordWrap
Layout.preferredWidth: progressBarWidth
}
PlasmaComponents.ProgressBar {
minimumValue: -100
@ -107,9 +126,11 @@ ComponentBase {
}
}
Column {
Text {
text: "should look like 0%"
ColumnLayout {
PlasmaComponents.Label {
text: "Min: 0; Max: 100; Value: -10\nThe progress bar should look like it is at 0%."
wrapMode: Text.WordWrap
Layout.preferredWidth: progressBarWidth
}
PlasmaComponents.ProgressBar {
minimumValue: 0
@ -119,9 +140,11 @@ ComponentBase {
}
}
Column {
Text {
text: "should be a continuous movement,<br>from one end to the other and back"
ColumnLayout {
PlasmaComponents.Label {
text: "This should have a continuous movement from one end to the other and back."
wrapMode: Text.WordWrap
Layout.preferredWidth: progressBarWidth
}
PlasmaComponents.ProgressBar {
indeterminate: indeterminateCheckBox.checked
@ -130,9 +153,11 @@ ComponentBase {
}
}
Column {
Text {
text: "Checking and unchecking should not break the layout,<br>should look like 50% if unchecked"
ColumnLayout {
PlasmaComponents.Label {
text: "Checking and unchecking should not break the layout. The progress bar should look like it is at 50% if unchecked."
wrapMode: Text.WordWrap
Layout.preferredWidth: progressBarWidth
}
PlasmaComponents.CheckBox {
id: indeterminateCheckBox
@ -141,8 +166,8 @@ ComponentBase {
}
}
Column {
Text {
ColumnLayout {
PlasmaComponents.Label {
text: "Slider orientation"
}
PlasmaComponents.ComboBox {

View File

@ -1,17 +1,25 @@
import QtQuick 2.0
import QtQuick.Layouts 1.12
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 3.0 as PlasmaComponents
ComponentBase {
id: root
title: "Plasma Components 3 ProgressBar"
property int progressBarWidth: testProgressBar.width
Flow {
anchors.fill: parent
anchors.margins: 20
spacing: 20
PlasmaComponents.ProgressBar {
id: testProgressBar
visible: false
}
Column {
Text {
contentItem: GridLayout {
columns: 6
columnSpacing: PlasmaCore.Units.largeSpacing
rowSpacing: PlasmaCore.Units.largeSpacing
ColumnLayout {
PlasmaComponents.Label {
text: "0%"
}
PlasmaComponents.ProgressBar {
@ -21,8 +29,8 @@ ComponentBase {
}
}
Column {
Text {
ColumnLayout {
PlasmaComponents.Label {
text: "50%"
}
PlasmaComponents.ProgressBar {
@ -32,8 +40,8 @@ ComponentBase {
}
}
Column {
Text {
ColumnLayout {
PlasmaComponents.Label {
text: "100%"
}
PlasmaComponents.ProgressBar {
@ -43,9 +51,38 @@ ComponentBase {
}
}
Column {
Text {
text: "Make sure the bar does\nnot leak outside"
ColumnLayout {
PlasmaComponents.Label {
id: progressBarAndSliderLabel
text: "The progress bar and slider grooves should have the same visual width."
wrapMode: Text.WordWrap
Layout.preferredWidth: progressBarWidth
}
GridLayout {
id: progressBarAndSliderGrid
columns: 1
rows: 2
PlasmaComponents.ProgressBar {
id: progressBar
from: 0
to: 100
value: 50
}
PlasmaComponents.Slider {
Layout.preferredWidth: progressBar.width
Layout.preferredHeight: progressBar.height
from: 0
to: 100
value: 50
}
}
}
ColumnLayout {
PlasmaComponents.Label {
text: "Min: 0; Max: 200; Value: 1\nMake sure the bar does not leak outside."
wrapMode: Text.WordWrap
Layout.preferredWidth: progressBarWidth
}
PlasmaComponents.ProgressBar {
from: 0
@ -54,9 +91,11 @@ ComponentBase {
}
}
Column {
Text {
text: "should look like 100%"
ColumnLayout {
PlasmaComponents.Label {
text: "Min: 0; Max: 100; Value: 110\nThe progress bar should look like it is at 100%."
wrapMode: Text.WordWrap
Layout.preferredWidth: progressBarWidth
}
PlasmaComponents.ProgressBar {
from: 0
@ -65,9 +104,11 @@ ComponentBase {
}
}
Column {
Text {
text: "QA Style 50%"
ColumnLayout {
PlasmaComponents.Label {
text: "Min: -100; Max: 100; Value: 0\nThe progress bar should look like it is at 50%."
wrapMode: Text.WordWrap
Layout.preferredWidth: progressBarWidth
}
PlasmaComponents.ProgressBar {
from: -100
@ -76,9 +117,11 @@ ComponentBase {
}
}
Column {
Text {
text: "should look like 0%"
ColumnLayout {
PlasmaComponents.Label {
text: "Min: 0; Max: 100; Value: -10\nThe progress bar should look like it is at 0%."
wrapMode: Text.WordWrap
Layout.preferredWidth: progressBarWidth
}
PlasmaComponents.ProgressBar {
from: 0
@ -87,9 +130,11 @@ ComponentBase {
}
}
Column {
Text {
text: "should be a continuous movement,<br>from one end to the other and back"
ColumnLayout {
PlasmaComponents.Label {
text: "This should have a continuous movement from one end to the other and back."
wrapMode: Text.WordWrap
Layout.preferredWidth: progressBarWidth
}
PlasmaComponents.ProgressBar {
indeterminate: indeterminateCheckBox.checked
@ -97,9 +142,11 @@ ComponentBase {
}
}
Column {
Text {
text: "Checking and unchecking should not break the layout,<br>should look like 50% if unchecked"
ColumnLayout {
PlasmaComponents.Label {
text: "Checking and unchecking should not break the layout. The progress bar should look like it is at 50% if unchecked."
wrapMode: Text.WordWrap
Layout.preferredWidth: progressBarWidth
}
PlasmaComponents.CheckBox {
id: indeterminateCheckBox

View File

@ -1,14 +1,15 @@
import QtQuick 2.0
import org.kde.plasma.components 2.0 as PlasmaComponents
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.2
import QtQuick.Controls 1.2
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 2.0 as PlasmaComponents
ComponentBase {
Grid {
anchors.fill: parent
anchors.margins: 20
spacing: 4
id: root
title: "Plasma Components 2 RadioButton"
contentItem: GridLayout {
columnSpacing: PlasmaCore.Units.largeSpacing
rowSpacing: PlasmaCore.Units.smallSpacing
columns: 2
PlasmaComponents.Label {

View File

@ -1,13 +1,14 @@
import QtQuick 2.0
import org.kde.plasma.components 3.0 as PlasmaComponents
import QtQuick.Layouts 1.2
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 3.0 as PlasmaComponents
ComponentBase {
Grid {
anchors.fill: parent
anchors.margins: 20
spacing: 4
id: root
title: "Plasma Components 3 RadioButton"
contentItem: GridLayout {
columnSpacing: PlasmaCore.Units.largeSpacing
rowSpacing: PlasmaCore.Units.smallSpacing
columns: 2
PlasmaComponents.Label {

View File

@ -0,0 +1,61 @@
import QtQuick 2.0
import QtQuick.Layouts 1.12
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 2.0 as PlasmaComponents
// Run with qmlscene to use qqc2-desktop-style
ComponentBase {
id: root
title: "Plasma Components 2 Slider"
contentItem: GridLayout {
columnSpacing: PlasmaCore.Units.largeSpacing
rowSpacing: PlasmaCore.Units.largeSpacing
columns: 2
PlasmaComponents.Label {
text: "Horizontal slider"
}
PlasmaComponents.Slider {
id: horizontalSlider
minimumValue: minTextField.text
maximumValue: maxTextField.text
stepSize: stepSizeTextField.text
}
PlasmaComponents.Label {
text: "Vertical slider"
}
PlasmaComponents.Slider {
id: verticalSlider
minimumValue: minTextField.text
maximumValue: maxTextField.text
stepSize: stepSizeTextField.text
orientation: Qt.Vertical
}
PlasmaComponents.Label {
text: "from: "
}
PlasmaComponents.TextField {
id: minTextField
text: "0"
}
PlasmaComponents.Label {
text: "to: "
}
PlasmaComponents.TextField {
id: maxTextField
text: "100"
}
PlasmaComponents.Label {
text: "stepSize: "
}
PlasmaComponents.TextField {
id: stepSizeTextField
text: "1"
}
}
}

View File

@ -1,54 +1,69 @@
import QtQuick 2.0
import QtQuick.Layouts 1.3
import org.kde.kirigami 2.5 as Kirigami
import org.kde.plasma.components 3.0
import QtQuick.Controls 2.5 as QQC2
import org.kde.plasma.components 2.0 as PC2
import QtQuick.Layouts 1.12
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 3.0 as PlasmaComponents
// Run with qmlscene to use qqc2-desktop-style
Kirigami.ApplicationWindow {
pageStack.initialPage: Kirigami.Page {
Kirigami.FormLayout {
anchors.fill: parent
PC2.Slider {
Layout.fillWidth: true
Kirigami.FormData.label: "PC2 slider"
maximumValue: slider.to
stepSize: slider.stepSize
}
QQC2.Slider {
Layout.fillWidth: true
Kirigami.FormData.label: "QQC2 slider"
to: slider.to
stepSize: slider.stepSize
}
Slider {
id: slider
Kirigami.FormData.label: "PC3 slider"
to: max.text
stepSize: 1
clip: true
}
TextField {
id: max
Kirigami.FormData.label: "maximumValue: "
text: "100"
}
Label {
Kirigami.FormData.label: "value: "
text: slider.value
}
Slider {
Kirigami.FormData.label: "Choose step size: "
to: slider.to * 2
onMoved: slider.stepSize = value
}
Label {
Kirigami.FormData.label: "Step size: "
text: slider.stepSize
}
ComponentBase {
id: root
title: "Plasma Components 3 Slider"
contentItem: GridLayout {
columnSpacing: PlasmaCore.Units.largeSpacing
rowSpacing: PlasmaCore.Units.largeSpacing
columns: 2
PlasmaComponents.Label {
text: "Horizontal slider"
}
PlasmaComponents.Slider {
id: horizontalSlider
from: minSpinBox.value
to: maxSpinBox.value
stepSize: stepSizeSpinBox.value
}
PlasmaComponents.Label {
text: "Vertical slider"
}
PlasmaComponents.Slider {
id: verticalSlider
from: minSpinBox.value
to: maxSpinBox.value
stepSize: stepSizeSpinBox.value
orientation: Qt.Vertical
}
PlasmaComponents.Label {
text: "from: "
}
PlasmaComponents.SpinBox {
id: minSpinBox
value: 0
from: -999
to: 999
editable: true
}
PlasmaComponents.Label {
text: "to: "
}
PlasmaComponents.SpinBox {
id: maxSpinBox
value: 100
from: -999
to: 999
editable: true
}
PlasmaComponents.Label {
text: "stepSize: "
}
PlasmaComponents.SpinBox {
id: stepSizeSpinBox
value: 1
to: 999
editable: true
}
}
}

View File

@ -1,21 +1,20 @@
import QtQuick 2.0
import QtQuick.Layouts 1.12
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 3.0 as PlasmaComponents
ComponentBase {
PlasmaComponents.TabBar {
anchors.fill: parent
anchors.margins: 20
spacing: 20
id: root
title: "Plasma Components 3 TabBar with TabButtons"
contentItem: PlasmaComponents.TabBar {
implicitWidth: tabButton2.implicitWidth*4
PlasmaComponents.TabButton {
icon.name: "application-menu"
text: "Icon Only"
display: PlasmaComponents.TabButton.IconOnly
}
PlasmaComponents.TabButton {
id: tabButton2
icon.name: "application-menu"
text: "Text Beside Icon"
display: PlasmaComponents.TabButton.TextBesideIcon

View File

@ -1,18 +1,17 @@
import QtQuick 2.0
import org.kde.plasma.components 2.0 as PlasmaComponents
import QtQuick.Layouts 1.12
import QtQuick.Controls 1.3
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 2.0 as PlasmaComponents
ComponentBase {
id: root
title: "Plasma Components 2 TextArea"
property string longText: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at volutpat nibh, non elementum nulla. Nunc sem magna, semper sit amet sollicitudin et, vestibulum sed metus. Fusce tempor dolor purus, non posuere urna sodales in. Aenean eu erat ipsum. Fusce egestas pulvinar nisi. Mauris vel enim tincidunt, elementum diam sed, tincidunt nulla. Maecenas tempus vitae ligula et convallis. Nullam justo velit, dignissim a nisl at, blandit posuere leo. Maecenas ac scelerisque odio, eget placerat ipsum. Ut iaculis, tortor et ullamcorper fringilla, mauris neque dapibus arcu, eget suscipit libero libero ut nunc. Sed maximus enim a ligula facilisis, non efficitur dolor blandit. Curabitur venenatis mattis erat ac gravida."
Flow {
anchors.fill: parent
anchors.margins: 20
spacing: 20
contentItem: Flow {
spacing: PlasmaCore.Units.gridUnit
PlasmaComponents.TextArea {
placeholderText: "CHEESE"

View File

@ -1,16 +1,16 @@
import QtQuick 2.0
import QtQuick.Layouts 1.12
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 3.0 as PlasmaComponents
ComponentBase {
id: root
title: "Plasma Components 3 TextArea"
property string longText: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at volutpat nibh, non elementum nulla. Nunc sem magna, semper sit amet sollicitudin et, vestibulum sed metus. Fusce tempor dolor purus, non posuere urna sodales in. Aenean eu erat ipsum. Fusce egestas pulvinar nisi. Mauris vel enim tincidunt, elementum diam sed, tincidunt nulla. Maecenas tempus vitae ligula et convallis. Nullam justo velit, dignissim a nisl at, blandit posuere leo. Maecenas ac scelerisque odio, eget placerat ipsum. Ut iaculis, tortor et ullamcorper fringilla, mauris neque dapibus arcu, eget suscipit libero libero ut nunc. Sed maximus enim a ligula facilisis, non efficitur dolor blandit. Curabitur venenatis mattis erat ac gravida."
Flow {
anchors.fill: parent
anchors.margins: 20
spacing: 20
contentItem: Flow {
spacing: PlasmaCore.Units.gridUnit
PlasmaComponents.TextArea {
placeholderText: "CHEESE"

View File

@ -1,17 +1,16 @@
import QtQuick 2.0
import org.kde.plasma.components 2.0 as PlasmaComponents
import QtQuick.Layouts 1.12
import QtQuick.Controls 1.3
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 2.0 as PlasmaComponents
ComponentBase {
id: root
title: "Plasma Components 2 TextField"
property string longText: "This is a longer sentence"
Flow {
anchors.fill: parent
anchors.margins: 20
spacing: 20
contentItem: Flow {
spacing: PlasmaCore.Units.gridUnit
PlasmaComponents.TextField {
placeholderText: longText

View File

@ -1,15 +1,15 @@
import QtQuick 2.0
import QtQuick.Layouts 1.12
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 3.0 as PlasmaComponents
ComponentBase {
id: root
title: "Plasma Components 3 TextField"
property string longText: "This is a longer sentence"
Flow {
anchors.fill: parent
anchors.margins: 20
spacing: 20
contentItem: Flow {
spacing: PlasmaCore.Units.gridUnit
PlasmaComponents.TextField {
placeholderText: longText

View File

@ -1,20 +1,22 @@
import QtQuick 2.0
import QtQuick.Layouts 1.12
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 2.0 as PlasmaComponents
ComponentBase {
Flow {
anchors.fill: parent
anchors.margins: 20
spacing: 20
id: root
title: "Plasma Components 2 ToolButton"
contentItem: Flow {
spacing: PlasmaCore.Units.gridUnit
PlasmaComponents.ToolButton {
iconSource: "list-remove"
iconSource: "start-here-kde-plasma"
text: "test"
flat: true
}
PlasmaComponents.ToolButton {
iconSource: "list-remove"
iconSource: "start-here-kde-plasma"
flat: true
}
PlasmaComponents.ToolButton {
@ -22,12 +24,12 @@ ComponentBase {
flat: true
}
PlasmaComponents.ToolButton {
iconSource: "list-remove"
iconSource: "start-here-kde-plasma"
text: "test"
flat: false
}
PlasmaComponents.ToolButton {
iconSource: "list-remove"
iconSource: "start-here-kde-plasma"
flat: false
}
PlasmaComponents.ToolButton {

View File

@ -1,26 +1,25 @@
import QtQuick 2.0
import QtQuick.Layouts 1.4
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 3.0 as PlasmaComponents
ComponentBase {
ColumnLayout {
anchors.fill: parent
anchors.margins: 20
id: root
title: "Plasma Components 3 ToolButton"
contentItem: ColumnLayout {
Flow {
Layout.fillWidth: true
Layout.fillHeight: true
spacing: 20
spacing: PlasmaCore.Units.gridUnit
PlasmaComponents.ToolButton {
icon.name: "list-remove"
icon.name: "start-here-kde-plasma"
text: "test"
flat: true
}
PlasmaComponents.ToolButton {
icon.name: "list-remove"
icon.name: "start-here-kde-plasma"
flat: true
}
PlasmaComponents.ToolButton {
@ -28,12 +27,12 @@ ComponentBase {
flat: true
}
PlasmaComponents.ToolButton {
icon.name: "list-remove"
icon.name: "start-here-kde-plasma"
text: "test"
flat: false
}
PlasmaComponents.ToolButton {
icon.name: "list-remove"
icon.name: "start-here-kde-plasma"
flat: false
}
PlasmaComponents.ToolButton {
@ -68,16 +67,16 @@ ComponentBase {
text: "They should always be square:"
}
PlasmaComponents.ToolButton {
icon.name: "list-remove"
icon.name: "start-here-kde-plasma"
}
PlasmaComponents.ToolButton {
icon.name: "list-remove"
icon.name: "start-here-kde-plasma"
}
PlasmaComponents.ToolButton {
icon.name: "list-remove"
icon.name: "start-here-kde-plasma"
}
PlasmaComponents.ToolButton {
icon.name: "list-remove"
icon.name: "start-here-kde-plasma"
}
}
PlasmaComponents.Label {
@ -99,8 +98,8 @@ ComponentBase {
icon.name: "window-close"
Layout.fillWidth: true
Layout.fillHeight: true
icon.width: units.iconSizes.small
icon.height: units.iconSizes.small
icon.width: PlasmaCore.Units.iconSizes.small
icon.height: PlasmaCore.Units.iconSizes.small
text: "Text"
}
PlasmaComponents.ToolButton {