Add PC3 RoundButton test and add flat buttons to PC3 Button test

This commit is contained in:
Noah Davis 2020-08-20 21:06:34 -04:00
parent 89b7d0afb5
commit 8fe3f656e8
2 changed files with 501 additions and 102 deletions

View File

@ -2,131 +2,262 @@ 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
ComponentBase {
id: root
title: "PlasmaComponents 3 Button"
contentItem: GridLayout {
rowSpacing: PlasmaCore.Units.smallSpacing
columnSpacing: PlasmaCore.Units.largeSpacing
columns: 2
contentItem: ColumnLayout {
GridLayout {
rowSpacing: PlasmaCore.Units.smallSpacing
columnSpacing: PlasmaCore.Units.largeSpacing
columns: 2
PlasmaComponents.Label {
text: "icon + text"
}
PlasmaComponents.Label {
text: "icon + text"
}
PlasmaComponents.Button {
icon.name: "start-here-kde-plasma"
text: "test"
}
PlasmaComponents.Button {
icon.name: "start-here-kde-plasma"
text: "test"
}
PlasmaComponents.Label {
text: "icon alone, should look small and square"
}
PlasmaComponents.Label {
text: "icon alone, should look small and square"
}
PlasmaComponents.Button {
icon.name: "start-here-kde-plasma"
}
PlasmaComponents.Button {
icon.name: "start-here-kde-plasma"
}
PlasmaComponents.Label {
text: "text alone, should be about as wide as the text itself"
}
PlasmaComponents.Label {
text: "text alone, should be about as wide as the text itself"
}
PlasmaComponents.Button {
text: "test"
}
PlasmaComponents.Label {
text: "This should look highlighted on load"
}
PlasmaComponents.Button {
text: "test"
focus: true
}
PlasmaComponents.Label {
text: "long text, should expand to fit"
}
PlasmaComponents.Button {
icon.name: "start-here-kde-plasma"
text: "This is a really really really really long button"
}
PlasmaComponents.Label {
text: "long text but constrained, should be 150px and elided"
}
PlasmaComponents.Button {
icon.name: "start-here-kde-plasma"
text: "This is a really really really really long button"
Layout.maximumWidth: 150
}
PlasmaComponents.Label {
text: "button (with or without icon) and textfield should have the same height"
}
RowLayout {
PlasmaComponents.Button {
text: "test"
}
PlasmaComponents.Label {
text: "This should look highlighted on load"
}
PlasmaComponents.Button {
icon.name: "application-menu"
text: "test"
focus: true
}
PlasmaComponents.TextField {
}
}
PlasmaComponents.Label {
text: "minimum width property. Should be two letters wide"
}
PlasmaComponents.Label {
text: "long text, should expand to fit"
}
RowLayout {
PlasmaComponents.Button {
text: "AA"
implicitWidth: Layout.minimumWidth
icon.name: "start-here-kde-plasma"
text: "This is a really really really really long button"
}
PlasmaComponents.Button {
icon.name: "application-menu"
text: "AA"
implicitWidth: Layout.minimumWidth
}
PlasmaComponents.Button {
icon.name: "application-menu"
implicitWidth: Layout.minimumWidth
}
}
PlasmaComponents.Label {
text: "Display property"
}
RowLayout {
PlasmaComponents.Button {
icon.name: "application-menu"
text: "Icon Only"
display: PlasmaComponents.Button.IconOnly
PlasmaComponents.Label {
text: "long text but constrained, should be 150px and elided"
}
PlasmaComponents.Button {
icon.name: "application-menu"
text: "Text Beside Icon"
display: PlasmaComponents.Button.TextBesideIcon
}
PlasmaComponents.Button {
icon.name: "application-menu"
text: "Text Under Icon"
display: PlasmaComponents.Button.TextUnderIcon
}
PlasmaComponents.Button {
icon.name: "application-menu"
text: "Text Only"
display: PlasmaComponents.Button.TextOnly
}
}
PlasmaComponents.Button {
icon.name: "start-here-kde-plasma"
text: "This is a really really really really long button"
Layout.maximumWidth: 150
}
PlasmaComponents.Label {
text: "button (with or without icon) and textfield should have the same height"
}
RowLayout {
PlasmaComponents.Button {
text: "test"
}
PlasmaComponents.Button {
icon.name: "application-menu"
text: "test"
}
PlasmaComponents.TextField {
}
}
PlasmaComponents.Label {
text: "minimum width property. Should be two letters wide"
}
RowLayout {
PlasmaComponents.Button {
text: "AA"
implicitWidth: Layout.minimumWidth
}
PlasmaComponents.Button {
icon.name: "application-menu"
text: "AA"
implicitWidth: Layout.minimumWidth
}
PlasmaComponents.Button {
icon.name: "application-menu"
implicitWidth: Layout.minimumWidth
}
}
PlasmaComponents.Label {
text: "Display property"
}
RowLayout {
PlasmaComponents.Button {
icon.name: "application-menu"
text: "Icon Only"
display: PlasmaComponents.Button.IconOnly
}
PlasmaComponents.Button {
icon.name: "application-menu"
text: "Text Beside Icon"
display: PlasmaComponents.Button.TextBesideIcon
}
PlasmaComponents.Button {
icon.name: "application-menu"
text: "Text Under Icon"
display: PlasmaComponents.Button.TextUnderIcon
}
PlasmaComponents.Button {
icon.name: "application-menu"
text: "Text Only"
display: PlasmaComponents.Button.TextOnly
}
}
}
PlasmaExtras.Heading {
text: "Flat Buttons"
}
GridLayout {
rowSpacing: PlasmaCore.Units.smallSpacing
columnSpacing: PlasmaCore.Units.largeSpacing
columns: 2
PlasmaComponents.Label {
text: "icon + text"
}
PlasmaComponents.Button {
icon.name: "start-here-kde-plasma"
text: "test"
flat: true
}
PlasmaComponents.Label {
text: "icon alone, should look small and square"
}
PlasmaComponents.Button {
icon.name: "start-here-kde-plasma"
flat: true
}
PlasmaComponents.Label {
text: "text alone, should be about as wide as the text itself"
}
PlasmaComponents.Button {
text: "test"
flat: true
}
PlasmaComponents.Label {
text: "long text, should expand to fit"
}
PlasmaComponents.Button {
icon.name: "start-here-kde-plasma"
text: "This is a really really really really long button"
flat: true
}
PlasmaComponents.Label {
text: "long text but constrained, should be 150px and elided"
}
PlasmaComponents.Button {
icon.name: "start-here-kde-plasma"
text: "This is a really really really really long button"
Layout.maximumWidth: 150
flat: true
}
PlasmaComponents.Label {
text: "button (with or without icon) and textfield should have the same height"
}
RowLayout {
PlasmaComponents.Button {
text: "test"
flat: true
}
PlasmaComponents.Button {
icon.name: "application-menu"
text: "test"
flat: true
}
PlasmaComponents.TextField {
}
}
PlasmaComponents.Label {
text: "minimum width property. Should be two letters wide"
}
RowLayout {
PlasmaComponents.Button {
text: "AA"
implicitWidth: Layout.minimumWidth
flat: true
}
PlasmaComponents.Button {
icon.name: "application-menu"
text: "AA"
implicitWidth: Layout.minimumWidth
flat: true
}
PlasmaComponents.Button {
icon.name: "application-menu"
implicitWidth: Layout.minimumWidth
flat: true
}
}
PlasmaComponents.Label {
text: "Display property"
}
RowLayout {
PlasmaComponents.Button {
icon.name: "application-menu"
text: "Icon Only"
display: PlasmaComponents.Button.IconOnly
flat: true
}
PlasmaComponents.Button {
icon.name: "application-menu"
text: "Text Beside Icon"
display: PlasmaComponents.Button.TextBesideIcon
flat: true
}
PlasmaComponents.Button {
icon.name: "application-menu"
text: "Text Under Icon"
display: PlasmaComponents.Button.TextUnderIcon
flat: true
}
PlasmaComponents.Button {
icon.name: "application-menu"
text: "Text Only"
display: PlasmaComponents.Button.TextOnly
flat: true
}
}
}
}
}

View File

@ -0,0 +1,268 @@
/*
* SPDX-FileCopyrightText: 2020 Noah Davis <noahadvs@gmail.com>
* SPDX-License-Identifier: LGPL-2.1-only OR LGPL-3.0-only OR LicenseRef-KDE-Accepted-LGPL
*/
import QtQuick 2.12
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.extras 2.0 as PlasmaExtras
ComponentBase {
id: root
title: "Plasma Components 3 RoundButton"
contentItem: ColumnLayout {
GridLayout {
rowSpacing: PlasmaCore.Units.smallSpacing
columnSpacing: PlasmaCore.Units.largeSpacing
columns: 2
PlasmaComponents.Label {
text: "icon + text"
}
PlasmaComponents.RoundButton {
icon.name: "start-here-kde-plasma"
text: "test"
}
PlasmaComponents.Label {
text: "icon alone, should look small and square"
}
PlasmaComponents.RoundButton {
icon.name: "start-here-kde-plasma"
}
PlasmaComponents.Label {
text: "text alone, should be about as wide as the text itself"
}
PlasmaComponents.RoundButton {
text: "test"
}
PlasmaComponents.Label {
text: "This should look highlighted on load"
}
PlasmaComponents.RoundButton {
text: "test"
focus: true
}
PlasmaComponents.Label {
text: "long text, should expand to fit"
}
PlasmaComponents.RoundButton {
icon.name: "start-here-kde-plasma"
text: "This is a really really really really long button"
}
PlasmaComponents.Label {
text: "long text but constrained, should be 150px and elided"
}
PlasmaComponents.RoundButton {
icon.name: "start-here-kde-plasma"
text: "This is a really really really really long button"
Layout.maximumWidth: 150
}
PlasmaComponents.Label {
text: "button (with or without icon) and textfield should have the same height"
}
RowLayout {
PlasmaComponents.RoundButton {
text: "test"
}
PlasmaComponents.RoundButton {
icon.name: "application-menu"
text: "test"
}
PlasmaComponents.TextField {
}
}
PlasmaComponents.Label {
text: "minimum width property. Should be two letters wide"
}
RowLayout {
PlasmaComponents.RoundButton {
text: "AA"
implicitWidth: Layout.minimumWidth
}
PlasmaComponents.RoundButton {
icon.name: "application-menu"
text: "AA"
implicitWidth: Layout.minimumWidth
}
PlasmaComponents.RoundButton {
icon.name: "application-menu"
implicitWidth: Layout.minimumWidth
}
}
PlasmaComponents.Label {
text: "Display property"
}
RowLayout {
PlasmaComponents.RoundButton {
icon.name: "application-menu"
text: "Icon Only"
display: PlasmaComponents.RoundButton.IconOnly
}
PlasmaComponents.RoundButton {
icon.name: "application-menu"
text: "Text Beside Icon"
display: PlasmaComponents.RoundButton.TextBesideIcon
}
PlasmaComponents.RoundButton {
icon.name: "application-menu"
text: "Text Under Icon"
display: PlasmaComponents.RoundButton.TextUnderIcon
}
PlasmaComponents.RoundButton {
icon.name: "application-menu"
text: "Text Only"
display: PlasmaComponents.RoundButton.TextOnly
}
}
}
PlasmaExtras.Heading {
text: "Flat Buttons"
}
GridLayout {
rowSpacing: PlasmaCore.Units.smallSpacing
columnSpacing: PlasmaCore.Units.largeSpacing
columns: 2
PlasmaComponents.Label {
text: "icon + text"
}
PlasmaComponents.RoundButton {
icon.name: "start-here-kde-plasma"
text: "test"
flat: true
}
PlasmaComponents.Label {
text: "icon alone, should look small and square"
}
PlasmaComponents.RoundButton {
icon.name: "start-here-kde-plasma"
flat: true
}
PlasmaComponents.Label {
text: "text alone, should be about as wide as the text itself"
}
PlasmaComponents.RoundButton {
text: "test"
flat: true
}
PlasmaComponents.Label {
text: "long text, should expand to fit"
}
PlasmaComponents.RoundButton {
icon.name: "start-here-kde-plasma"
text: "This is a really really really really long button"
flat: true
}
PlasmaComponents.Label {
text: "long text but constrained, should be 150px and elided"
}
PlasmaComponents.RoundButton {
icon.name: "start-here-kde-plasma"
text: "This is a really really really really long button"
Layout.maximumWidth: 150
flat: true
}
PlasmaComponents.Label {
text: "button (with or without icon) and textfield should have the same height"
}
RowLayout {
PlasmaComponents.RoundButton {
text: "test"
flat: true
}
PlasmaComponents.RoundButton {
icon.name: "application-menu"
text: "test"
flat: true
}
PlasmaComponents.TextField {
}
}
PlasmaComponents.Label {
text: "minimum width property. Should be two letters wide"
}
RowLayout {
PlasmaComponents.RoundButton {
text: "AA"
implicitWidth: Layout.minimumWidth
flat: true
}
PlasmaComponents.RoundButton {
icon.name: "application-menu"
text: "AA"
implicitWidth: Layout.minimumWidth
flat: true
}
PlasmaComponents.RoundButton {
icon.name: "application-menu"
implicitWidth: Layout.minimumWidth
flat: true
}
}
PlasmaComponents.Label {
text: "Display property"
}
RowLayout {
PlasmaComponents.RoundButton {
icon.name: "application-menu"
text: "Icon Only"
display: PlasmaComponents.RoundButton.IconOnly
flat: true
}
PlasmaComponents.RoundButton {
icon.name: "application-menu"
text: "Text Beside Icon"
display: PlasmaComponents.RoundButton.TextBesideIcon
flat: true
}
PlasmaComponents.RoundButton {
icon.name: "application-menu"
text: "Text Under Icon"
display: PlasmaComponents.RoundButton.TextUnderIcon
flat: true
}
PlasmaComponents.RoundButton {
icon.name: "application-menu"
text: "Text Only"
display: PlasmaComponents.RoundButton.TextOnly
flat: true
}
}
}
}
}