alecs/plasma-framework
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix visual glitches and improve the layouts of component tests

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
tests/components/ComponentBase.qml
View File

@ -1,37 +1,34 @@
import QtQuick 2.0 import QtQuick 2.0
import QtQuick.Layouts 1.2 import QtQuick.Layouts 1.2
import org.kde.plasma.core 2.0 as PlasmaCore import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 3.0 as PlasmaComponents import org.kde.plasma.components 3.0 as PlasmaComponents
import org.kde.plasma.extras 2.0 as PlasmaExtras
PlasmaCore.ColorScope PlasmaComponents.Page {
{ id: mainPage
id: root title: "Test"
width: 500 width: Math.max(mainPage.contentWidth, mainPage.implicitHeaderWidth, mainPage.implicitFooterWidth)
height: 300 + leftPadding + rightPadding
property bool invertedColors: false height: mainPage.contentHeight + mainPage.implicitHeaderHeight + mainPage.implicitFooterHeight
default property alias children: container.children + topPadding + bottomPadding
colorGroup: invertedColors ? PlasmaCore.Theme.ComplementaryColorGroup : PlasmaCore.Theme.NormalColorGroup
Rectangle { padding: PlasmaCore.Units.gridUnit
anchors.fill: parent
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 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
}
} }

19
tests/components/busyindicator.qml
View File

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

24
tests/components/busyindicator3.qml
View File

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

43
tests/components/button.qml
View File

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

23
tests/components/button3.qml
View File

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

27
tests/components/checkbox.qml
View File

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

13
tests/components/checkbox3.qml
View File

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

12
tests/components/combobox.qml
View File

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

11
tests/components/combobox3.qml
View File

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

15
tests/components/menu.qml
View File

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

103
tests/components/progressbar.qml
View File

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

105
tests/components/progressbar3.qml
View File

@ -1,17 +1,25 @@
import QtQuick 2.0 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 import org.kde.plasma.components 3.0 as PlasmaComponents
ComponentBase { ComponentBase {
id: root id: root
title: "Plasma Components 3 ProgressBar"
property int progressBarWidth: testProgressBar.width
Flow { PlasmaComponents.ProgressBar {
anchors.fill: parent id: testProgressBar
anchors.margins: 20 visible: false
spacing: 20 }
Column { contentItem: GridLayout {
Text { columns: 6
columnSpacing: PlasmaCore.Units.largeSpacing
rowSpacing: PlasmaCore.Units.largeSpacing
ColumnLayout {
PlasmaComponents.Label {
text: "0%" text: "0%"
} }
PlasmaComponents.ProgressBar { PlasmaComponents.ProgressBar {
@ -21,8 +29,8 @@ ComponentBase {
} }
} }
Column { ColumnLayout {
Text { PlasmaComponents.Label {
text: "50%" text: "50%"
} }
PlasmaComponents.ProgressBar { PlasmaComponents.ProgressBar {
@ -32,8 +40,8 @@ ComponentBase {
} }
} }
Column { ColumnLayout {
Text { PlasmaComponents.Label {
text: "100%" text: "100%"
} }
PlasmaComponents.ProgressBar { PlasmaComponents.ProgressBar {
@ -43,9 +51,38 @@ ComponentBase {
} }
} }
Column { ColumnLayout {
Text { PlasmaComponents.Label {
text: "Make sure the bar does\nnot leak outside" 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 { PlasmaComponents.ProgressBar {
from: 0 from: 0
@ -54,9 +91,11 @@ ComponentBase {
} }
} }
Column { ColumnLayout {
Text { PlasmaComponents.Label {
text: "should look like 100%" 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 { PlasmaComponents.ProgressBar {
from: 0 from: 0
@ -65,9 +104,11 @@ ComponentBase {
} }
} }
Column { ColumnLayout {
Text { PlasmaComponents.Label {
text: "QA Style 50%" 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 { PlasmaComponents.ProgressBar {
from: -100 from: -100
@ -76,9 +117,11 @@ ComponentBase {
} }
} }
Column { ColumnLayout {
Text { PlasmaComponents.Label {
text: "should look like 0%" 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 { PlasmaComponents.ProgressBar {
from: 0 from: 0
@ -87,9 +130,11 @@ ComponentBase {
} }
} }
Column { ColumnLayout {
Text { PlasmaComponents.Label {
text: "should be a continuous movement,<br>from one end to the other and back" text: "This should have a continuous movement from one end to the other and back."
wrapMode: Text.WordWrap
Layout.preferredWidth: progressBarWidth
} }
PlasmaComponents.ProgressBar { PlasmaComponents.ProgressBar {
indeterminate: indeterminateCheckBox.checked indeterminate: indeterminateCheckBox.checked
@ -97,9 +142,11 @@ ComponentBase {
} }
} }
Column { ColumnLayout {
Text { PlasmaComponents.Label {
text: "Checking and unchecking should not break the layout,<br>should look like 50% if unchecked" 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 { PlasmaComponents.CheckBox {
id: indeterminateCheckBox id: indeterminateCheckBox

15
tests/components/radiobutton.qml
View File

@ -1,14 +1,15 @@
import QtQuick 2.0 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.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 { ComponentBase {
Grid { id: root
anchors.fill: parent title: "Plasma Components 2 RadioButton"
anchors.margins: 20 contentItem: GridLayout {
spacing: 4 columnSpacing: PlasmaCore.Units.largeSpacing
rowSpacing: PlasmaCore.Units.smallSpacing
columns: 2 columns: 2
PlasmaComponents.Label { PlasmaComponents.Label {

13
tests/components/radiobutton3.qml
View File

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

61
tests/components/slider.qml Normal file
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"
}
}
}

109
tests/components/slider3.qml
View File

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

13
tests/components/tabbar3.qml
View File

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

13
tests/components/textarea.qml
View File

@ -1,18 +1,17 @@
import QtQuick 2.0 import QtQuick 2.0
import QtQuick.Layouts 1.12
import org.kde.plasma.components 2.0 as PlasmaComponents
import QtQuick.Controls 1.3 import QtQuick.Controls 1.3
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 2.0 as PlasmaComponents
ComponentBase { ComponentBase {
id: root 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." 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 { contentItem: Flow {
anchors.fill: parent spacing: PlasmaCore.Units.gridUnit
anchors.margins: 20
spacing: 20
PlasmaComponents.TextArea { PlasmaComponents.TextArea {
placeholderText: "CHEESE" placeholderText: "CHEESE"

10
tests/components/textarea3.qml
View File

@ -1,16 +1,16 @@
import QtQuick 2.0 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 import org.kde.plasma.components 3.0 as PlasmaComponents
ComponentBase { ComponentBase {
id: root 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." 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 { contentItem: Flow {
anchors.fill: parent spacing: PlasmaCore.Units.gridUnit
anchors.margins: 20
spacing: 20
PlasmaComponents.TextArea { PlasmaComponents.TextArea {
placeholderText: "CHEESE" placeholderText: "CHEESE"

13
tests/components/textfield.qml
View File

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

10
tests/components/textfield3.qml
View File

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

20
tests/components/toolbutton.qml
View File

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

31
tests/components/toolbutton3.qml
View File

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