279 lines
9.6 KiB
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: QClipboardProxy.copyTextToClipboard(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: QClipboardProxy.copyTextToClipboard(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
|