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 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
ComponentBase { ComponentBase {
id: root id: root
title: "PlasmaComponents 3 Button" title: "PlasmaComponents 3 Button"
contentItem: GridLayout { contentItem: ColumnLayout {
rowSpacing: PlasmaCore.Units.smallSpacing GridLayout {
columnSpacing: PlasmaCore.Units.largeSpacing rowSpacing: PlasmaCore.Units.smallSpacing
columns: 2 columnSpacing: PlasmaCore.Units.largeSpacing
columns: 2
PlasmaComponents.Label { PlasmaComponents.Label {
text: "icon + text" text: "icon + text"
} }
PlasmaComponents.Button { PlasmaComponents.Button {
icon.name: "start-here-kde-plasma" icon.name: "start-here-kde-plasma"
text: "test" text: "test"
} }
PlasmaComponents.Label { PlasmaComponents.Label {
text: "icon alone, should look small and square" text: "icon alone, should look small and square"
} }
PlasmaComponents.Button { PlasmaComponents.Button {
icon.name: "start-here-kde-plasma" icon.name: "start-here-kde-plasma"
} }
PlasmaComponents.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"
} }
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 { PlasmaComponents.Button {
text: "test" text: "test"
} }
PlasmaComponents.Label {
text: "This should look highlighted on load"
}
PlasmaComponents.Button { PlasmaComponents.Button {
icon.name: "application-menu"
text: "test" text: "test"
focus: true
} }
PlasmaComponents.TextField {
}
}
PlasmaComponents.Label { PlasmaComponents.Label {
text: "minimum width property. Should be two letters wide" text: "long text, should expand to fit"
} }
RowLayout {
PlasmaComponents.Button { PlasmaComponents.Button {
text: "AA" icon.name: "start-here-kde-plasma"
implicitWidth: Layout.minimumWidth 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 { PlasmaComponents.Label {
text: "Display property" text: "long text but constrained, should be 150px and elided"
}
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
}
}
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
}
}
}
}
}