chore(IssuePill): add a Primary type
- wrap the icon in a Loader and make it configurable - add a storybook page with controls allowing to explore the various types and config options
This commit is contained in:
Lukáš Tinkl
Lukáš Tinkl
parent
3f8dfee3cd
commit
0c37700d52
|
|
@ -0,0 +1,105 @@
|
|||
import QtQuick 2.15
|
||||
import QtQuick.Layouts 1.15
|
||||
import QtQuick.Controls 2.15
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
import AppLayouts.Communities.controls 1.0
|
||||
|
||||
import Storybook 1.0
|
||||
|
||||
SplitView {
|
||||
orientation: Qt.Horizontal
|
||||
|
||||
Logs { id: logs }
|
||||
|
||||
Pane {
|
||||
SplitView.fillWidth: true
|
||||
SplitView.fillHeight: true
|
||||
|
||||
background: Rectangle {
|
||||
color: Theme.palette.baseColor4
|
||||
}
|
||||
|
||||
IssuePill {
|
||||
width: ctrlWidth.value || implicitWidth
|
||||
anchors.centerIn: parent
|
||||
type: ctrlType.currentIndex
|
||||
count: ctrlCount.value
|
||||
icon: ctrlIcon.text
|
||||
|
||||
Binding on text {
|
||||
value: ctrlText.text
|
||||
when: ctrlCustomText.checked && !!ctrlText.text
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
LogsAndControlsPanel {
|
||||
SplitView.fillHeight: true
|
||||
SplitView.preferredWidth: 300
|
||||
|
||||
logsView.logText: logs.logText
|
||||
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
|
||||
RowLayout {
|
||||
Layout.fillWidth: true
|
||||
Label { text: "Type:" }
|
||||
ComboBox {
|
||||
Layout.fillWidth: true
|
||||
id: ctrlType
|
||||
model: ["Warning", "Error", "Primary"]
|
||||
}
|
||||
}
|
||||
RowLayout {
|
||||
Layout.fillWidth: true
|
||||
Label { text: "Count:" }
|
||||
Slider {
|
||||
id: ctrlCount
|
||||
from: 0
|
||||
to: 100
|
||||
value: 5
|
||||
}
|
||||
}
|
||||
RowLayout {
|
||||
Layout.fillWidth: true
|
||||
Label { text: "Icon:" }
|
||||
TextField {
|
||||
id: ctrlIcon
|
||||
text: "warning"
|
||||
}
|
||||
}
|
||||
RowLayout {
|
||||
Layout.fillWidth: true
|
||||
CheckBox {
|
||||
id: ctrlCustomText
|
||||
text: "Custom text:"
|
||||
onToggled: if (checked) ctrlText.forceActiveFocus()
|
||||
}
|
||||
TextField {
|
||||
Layout.fillWidth: true
|
||||
id: ctrlText
|
||||
enabled: ctrlCustomText.checked
|
||||
}
|
||||
}
|
||||
RowLayout {
|
||||
Layout.fillWidth: true
|
||||
Label { text: "Width:" }
|
||||
SpinBox {
|
||||
id: ctrlWidth
|
||||
from: 0
|
||||
to: 400
|
||||
value: 0 // 0 == implicitWidth
|
||||
stepSize: 20
|
||||
textFromValue: function(value, locale) { return value === 0 ? "Implicit" : value }
|
||||
}
|
||||
}
|
||||
Item { Layout.fillHeight: true }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// category: Controls
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import QtQuick 2.14
|
||||
import QtQuick.Controls 2.14
|
||||
import QtQuick.Layouts 1.14
|
||||
import QtQuick 2.15
|
||||
import QtQuick.Controls 2.15
|
||||
import QtQuick.Layouts 1.15
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
|
@ -10,40 +10,66 @@ Control {
|
|||
|
||||
enum Type {
|
||||
Warning,
|
||||
Error
|
||||
Error,
|
||||
Primary
|
||||
}
|
||||
property int type: IssuePill.Type.Warning
|
||||
|
||||
property int count
|
||||
property string text: root.type === IssuePill.Type.Warning ? qsTr("%n warning(s)", "", root.count)
|
||||
: qsTr("%n error(s)", "", root.count)
|
||||
property string text: {
|
||||
switch(type) {
|
||||
case IssuePill.Type.Warning:
|
||||
return qsTr("%n warning(s)", "", root.count)
|
||||
case IssuePill.Type.Error:
|
||||
return qsTr("%n error(s)", "", root.count)
|
||||
case IssuePill.Type.Primary:
|
||||
default:
|
||||
return qsTr("%n message(s)", "", root.count)
|
||||
}
|
||||
}
|
||||
|
||||
property alias bgCornerRadius: background.radius
|
||||
property string icon: "warning"
|
||||
|
||||
font.family: Theme.palette.baseFont.name
|
||||
font.pixelSize: 12
|
||||
|
||||
horizontalPadding: 8
|
||||
verticalPadding: 4
|
||||
|
||||
QtObject {
|
||||
id: d
|
||||
readonly property color baseColor: root.type === IssuePill.Type.Warning ? Theme.palette.pinColor1
|
||||
: Theme.palette.dangerColor1
|
||||
readonly property color baseColor: {
|
||||
switch(type) {
|
||||
case IssuePill.Type.Warning:
|
||||
return Theme.palette.pinColor1
|
||||
case IssuePill.Type.Error:
|
||||
return Theme.palette.dangerColor1
|
||||
case IssuePill.Type.Primary:
|
||||
default:
|
||||
return Theme.palette.primaryColor1
|
||||
}
|
||||
}
|
||||
|
||||
property Component iconLoaderComponent: Component {
|
||||
StatusIcon {
|
||||
width: 20
|
||||
height: 20
|
||||
icon: root.icon
|
||||
color: root.baseColor
|
||||
}
|
||||
}
|
||||
|
||||
background: Rectangle {
|
||||
id: background
|
||||
radius: 100
|
||||
color: Theme.palette.alphaColor(d.baseColor, 0.03)
|
||||
color: Theme.palette.alphaColor(root.baseColor, 0.03)
|
||||
border.width: 1
|
||||
border.color: Theme.palette.alphaColor(d.baseColor, 0.3)
|
||||
border.color: Theme.palette.alphaColor(root.baseColor, 0.3)
|
||||
}
|
||||
|
||||
contentItem: RowLayout {
|
||||
spacing: 4
|
||||
StatusIcon {
|
||||
Layout.preferredWidth: 20
|
||||
Layout.preferredHeight: 20
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
icon: "warning"
|
||||
color: d.baseColor
|
||||
Loader {
|
||||
sourceComponent: root.iconLoaderComponent
|
||||
}
|
||||
StatusBaseText {
|
||||
Layout.fillWidth: true
|
||||
|
|
@ -51,8 +77,9 @@ Control {
|
|||
Layout.alignment: Qt.AlignVCenter
|
||||
verticalAlignment: Qt.AlignVCenter
|
||||
text: root.text
|
||||
color: d.baseColor
|
||||
font.pixelSize: 12
|
||||
font.family: root.font.family
|
||||
font.pixelSize: root.font.pixelSize
|
||||
color: root.baseColor
|
||||
wrapMode: Text.WordWrap
|
||||
maximumLineCount: 3
|
||||
elide: Text.ElideRight
|
||||
|
|
|
|||
Loading…
Reference in New Issue