status-desktop/storybook/pages/ColorsPage.qml

279 lines
9.6 KiB
QML

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import StatusQ 0.1
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import Storybook 1.0
import SortFilterProxyModel 0.2
SplitView {
id: root
orientation: Qt.Vertical
component ColorRectangle: Rectangle {
id: colorRectangle
property alias text: textLabel.text
implicitWidth: 120
implicitHeight: 60
Column {
anchors.centerIn: parent
Row {
spacing: 4
anchors.horizontalCenter: parent.horizontalCenter
Text {
id: textLabel
}
ToolButton {
focusPolicy: Qt.NoFocus
anchors.verticalCenter: parent.verticalCenter
width: 16
height: 16
padding: 0
text: "📋"
font.pixelSize: 10
onClicked: ClipboardUtils.setText(textLabel.text)
ToolTip.text: "Copy color name"
ToolTip.visible: hovered
}
}
Row {
spacing: 4
anchors.horizontalCenter: parent.horizontalCenter
Text {
id: colorLabel
color: textLabel.color
text: colorRectangle.color.toString()
}
ToolButton {
focusPolicy: Qt.NoFocus
anchors.verticalCenter: parent.verticalCenter
width: 16
height: 16
padding: 0
text: "📋"
font.pixelSize: 10
onClicked: ClipboardUtils.setText(colorLabel.text)
ToolTip.text: "Copy color value"
ToolTip.visible: hovered
}
}
}
}
component ColorFlow: ColumnLayout {
id: colorFlow
property string title
property var model
ListModel {
id: listModel
Component.onCompleted: {
append(Object.entries(colorFlow.model))
}
}
Label {
Layout.topMargin: 8
//visible: colorRepeater.count
font.weight: Font.Medium
text: "%1 (%2)".arg(colorFlow.title).arg(colorRepeater.count)
}
Flow {
Layout.preferredWidth: scrollview.availableWidth
spacing: 5
Repeater {
id: colorRepeater
model: SortFilterProxyModel {
sourceModel: listModel
proxyRoles: [
ExpressionRole {
name: "name"
expression: model[0]
},
ExpressionRole {
name: "color"
expression: model[1]
}
]
filters: FastExpressionFilter {
expression: {
searchField.searchText
return (!!model.name && model.name.toLowerCase().includes(searchField.searchText)) ||
(!!model.color && model.color.toLowerCase().includes(searchField.searchText))
}
enabled: searchField.searchText !== ""
expectedRoles: ["name", "color"]
}
}
delegate: ColorRectangle {
text: model.name
color: model.color
}
}
}
}
Component.onCompleted: searchField.forceActiveFocus()
ScrollView {
id: scrollview
contentWidth: availableWidth
SplitView.fillHeight: true
padding: 8
ColumnLayout {
spacing: 0
RowLayout {
Label {
text: "Search"
font.weight: Font.Medium
}
TextField {
readonly property string searchText: text.toLowerCase()
id: searchField
}
ToolButton {
focusPolicy: Qt.NoFocus
text: "❌"
enabled: searchField.searchText !== ""
onClicked: searchField.clear()
}
}
ColorFlow {
title: "Base"
model: {
"baseColor1": Theme.palette.baseColor1.toString(),
"baseColor2": Theme.palette.baseColor2.toString(),
"baseColor3": Theme.palette.baseColor3.toString(),
"baseColor4": Theme.palette.baseColor4.toString(),
"baseColor5": Theme.palette.baseColor5.toString()
}
}
ColorFlow {
title: "Primary"
model: {
"primaryColor1": Theme.palette.primaryColor1.toString(),
"primaryColor2": Theme.palette.primaryColor2.toString(),
"primaryColor3": Theme.palette.primaryColor3.toString()
}
}
ColorFlow {
title: "Danger"
model: {
"dangerColor1": Theme.palette.dangerColor1.toString(),
"dangerColor2": Theme.palette.dangerColor2.toString(),
"dangerColor3": Theme.palette.dangerColor3.toString()
}
}
ColorFlow {
title: "Warning"
model: {
"warningColor1": Theme.palette.warningColor1.toString(),
"warningColor2": Theme.palette.warningColor2.toString(),
"warningColor3": Theme.palette.warningColor3.toString()
}
}
ColorFlow {
title: "Success"
model: {
"successColor1": Theme.palette.successColor1.toString(),
"successColor2": Theme.palette.successColor2.toString(),
"successColor3": Theme.palette.successColor3.toString()
}
}
ColorFlow {
title: "Direct"
model: {
"directColor1": Theme.palette.directColor1.toString(),
"directColor2": Theme.palette.directColor2.toString(),
"directColor3": Theme.palette.directColor3.toString(),
"directColor4": Theme.palette.directColor4.toString(),
"directColor5": Theme.palette.directColor5.toString(),
"directColor6": Theme.palette.directColor6.toString(),
"directColor7": Theme.palette.directColor7.toString(),
"directColor8": Theme.palette.directColor8.toString(),
"directColor9": Theme.palette.directColor9.toString()
}
}
ColorFlow {
title: "Indirect"
model: {
"indirectColor1": Theme.palette.indirectColor1.toString(),
"indirectColor2": Theme.palette.indirectColor2.toString(),
"indirectColor3": Theme.palette.indirectColor3.toString(),
"indirectColor4": Theme.palette.indirectColor4.toString()
}
}
ColorFlow {
title: "Mention"
model: {
"mentionColor1": Theme.palette.mentionColor1.toString(),
"mentionColor2": Theme.palette.mentionColor2.toString(),
"mentionColor3": Theme.palette.mentionColor3.toString(),
"mentionColor4": Theme.palette.mentionColor4.toString()
}
}
ColorFlow {
title: "Pin"
model: {
"pinColor1": Theme.palette.pinColor1.toString(),
"pinColor2": Theme.palette.pinColor2.toString(),
"pinColor3": Theme.palette.pinColor3.toString()
}
}
ColorFlow {
title: "Misc"
model: {
"miscColor1": Theme.palette.miscColor1.toString(),
"miscColor2": Theme.palette.miscColor2.toString(),
"miscColor3": Theme.palette.miscColor3.toString(),
"miscColor4": Theme.palette.miscColor4.toString(),
"miscColor5": Theme.palette.miscColor5.toString(),
"miscColor6": Theme.palette.miscColor6.toString(),
"miscColor7": Theme.palette.miscColor7.toString(),
"miscColor8": Theme.palette.miscColor8.toString(),
"miscColor9": Theme.palette.miscColor9.toString(),
"miscColor10": Theme.palette.miscColor10.toString(),
"miscColor11": Theme.palette.miscColor11.toString(),
"miscColor12": Theme.palette.miscColor12.toString()
}
}
ColorFlow {
title: "User customization"
model: Theme.palette.userCustomizationColors
}
ColorFlow {
title: "Identicon ring colors"
model: Theme.palette.identiconRingColors
}
ColorFlow {
title: "Status colors"
model: StatusColors.colors
}
}
}
}
// category: Core