From 51a345866a9b31577e76aa97112990d9501844d3 Mon Sep 17 00:00:00 2001 From: Alexandra Betouni Date: Thu, 8 Jul 2021 14:42:08 +0300 Subject: [PATCH] [#202] Added Picker button Adding picker button * As an example it opens Qt's ColorDialog, as soon as a color is selected there, the button is colored with that. Final color picker to be implemented in a seperate task. Also minor improvements in main.qml and sandbox.pro Closes #202 --- sandbox/Buttons.qml | 474 ++++++++++---------- sandbox/main.qml | 6 +- sandbox/sandbox.pro | 11 +- src/StatusQ/Controls/StatusPickerButton.qml | 59 +++ src/StatusQ/Controls/qmldir | 1 + 5 files changed, 312 insertions(+), 239 deletions(-) create mode 100644 src/StatusQ/Controls/StatusPickerButton.qml diff --git a/sandbox/Buttons.qml b/sandbox/Buttons.qml index 7afe615c..ece96f6f 100644 --- a/sandbox/Buttons.qml +++ b/sandbox/Buttons.qml @@ -1,239 +1,261 @@ import QtQuick 2.14 import QtQuick.Layouts 1.14 +import QtQuick.Dialogs 1.3 import StatusQ.Controls 0.1 import StatusQ.Core.Theme 0.1 -Grid { - columns: 3 - columnSpacing: 38 - rowSpacing: 10 +Column { + spacing: 10 + Grid { + id: buttonGridWidth + columns: 3 + columnSpacing: 38 + rowSpacing: 10 - horizontalItemAlignment: Grid.AlignHCenter + horizontalItemAlignment: Grid.AlignHCenter - // Large - StatusButton { - text: "Button" + // Large + StatusButton { + text: "Button" + } + + StatusButton { + text: "Button" + enabled: false + } + + StatusButton { + text: "Button" + loading: true + } + + StatusButton { + text: "Button" + type: StatusBaseButton.Type.Danger + } + + StatusButton { + text: "Button" + type: StatusBaseButton.Type.Danger + enabled: false + } + + StatusButton { + text: "Button" + loading: true + type: StatusBaseButton.Type.Danger + } + + StatusFlatButton { + text: "Button" + } + + StatusFlatButton { + text: "Button" + enabled: false + + } + + StatusFlatButton { + text: "Button" + loading: true + } + + StatusFlatButton { + text: "Button" + type: StatusBaseButton.Type.Danger + } + + StatusFlatButton { + text: "Button" + type: StatusBaseButton.Type.Danger + enabled: false + } + + StatusFlatButton { + text: "Button" + type: StatusBaseButton.Type.Danger + loading: true + } + + // Small + StatusButton { + text: "Button" + size: StatusBaseButton.Size.Small + } + + StatusButton { + text: "Button" + enabled: false + size: StatusBaseButton.Size.Small + } + + StatusButton { + text: "Button" + size: StatusBaseButton.Size.Small + loading: true + } + + StatusButton { + text: "Button" + type: StatusBaseButton.Type.Danger + size: StatusBaseButton.Size.Small + } + + StatusButton { + text: "Button" + type: StatusBaseButton.Type.Danger + size: StatusBaseButton.Size.Small + enabled: false + } + + StatusButton { + text: "Button" + type: StatusBaseButton.Type.Danger + size: StatusBaseButton.Size.Small + loading: true + } + + StatusFlatButton { + text: "Button" + size: StatusBaseButton.Size.Small + } + + StatusFlatButton { + text: "Button" + enabled: false + size: StatusBaseButton.Size.Small + } + + StatusFlatButton { + text: "Button" + enabled: false + size: StatusBaseButton.Size.Small + loading: true + } + + // Icon buttons + + // blue + + StatusRoundButton { + icon.name: "info" + } + + StatusRoundButton { + icon.name: "info" + enabled: false + } + + StatusRoundButton { + icon.name: "info" + loading: true + } + + // black + + StatusRoundButton { + type: StatusRoundButton.Type.Secondary + icon.name: "info" + } + + StatusRoundButton { + type: StatusRoundButton.Type.Secondary + icon.name: "info" + enabled: false + } + + StatusRoundButton { + type: StatusRoundButton.Type.Secondary + icon.name: "info" + loading: true + } + + // Rounded blue + + StatusFlatRoundButton { + width: 44 + height: 44 + + icon.name: "info" + } + + StatusFlatRoundButton { + width: 44 + height: 44 + icon.name: "info" + enabled: false + } + + StatusFlatRoundButton { + width: 44 + height: 44 + icon.name: "info" + loading: true + } + + // Rounded white + + StatusFlatRoundButton { + type: StatusFlatRoundButton.Type.Secondary + width: 44 + height: 44 + + icon.name: "info" + } + + StatusFlatRoundButton { + type: StatusFlatRoundButton.Type.Secondary + width: 44 + height: 44 + icon.name: "info" + enabled: false + } + + StatusFlatRoundButton { + type: StatusFlatRoundButton.Type.Secondary + width: 44 + height: 44 + icon.name: "info" + loading: true + } + + StatusFlatButton { + icon.name: "info" + text: "Button" + size: StatusBaseButton.Size.Small + } + StatusFlatButton { + icon.name: "info" + text: "Button" + enabled: false + size: StatusBaseButton.Size.Small + } + + StatusFlatButton { + icon.name: "info" + text: "Button" + loading: true + size: StatusBaseButton.Size.Small + } } - StatusButton { - text: "Button" - enabled: false - } - - StatusButton { - text: "Button" - loading: true - } - - StatusButton { - text: "Button" - type: StatusBaseButton.Type.Danger - } - - StatusButton { - text: "Button" - type: StatusBaseButton.Type.Danger - enabled: false - } - - StatusButton { - text: "Button" - loading: true - type: StatusBaseButton.Type.Danger - } - - StatusFlatButton { - text: "Button" - } - - StatusFlatButton { - text: "Button" - enabled: false - - } - - StatusFlatButton { - text: "Button" - loading: true - } - - StatusFlatButton { - text: "Button" - type: StatusBaseButton.Type.Danger - } - - StatusFlatButton { - text: "Button" - type: StatusBaseButton.Type.Danger - enabled: false - } - - StatusFlatButton { - text: "Button" - type: StatusBaseButton.Type.Danger - loading: true - } - - // Small - StatusButton { - text: "Button" - size: StatusBaseButton.Size.Small - } - - StatusButton { - text: "Button" - enabled: false - size: StatusBaseButton.Size.Small - } - - StatusButton { - text: "Button" - size: StatusBaseButton.Size.Small - loading: true - } - - StatusButton { - text: "Button" - type: StatusBaseButton.Type.Danger - size: StatusBaseButton.Size.Small - } - - StatusButton { - text: "Button" - type: StatusBaseButton.Type.Danger - size: StatusBaseButton.Size.Small - enabled: false - } - - StatusButton { - text: "Button" - type: StatusBaseButton.Type.Danger - size: StatusBaseButton.Size.Small - loading: true - } - - StatusFlatButton { - text: "Button" - size: StatusBaseButton.Size.Small - } - - StatusFlatButton { - text: "Button" - enabled: false - size: StatusBaseButton.Size.Small - } - - StatusFlatButton { - text: "Button" - enabled: false - size: StatusBaseButton.Size.Small - loading: true - } - - // Icon buttons - - // blue - - StatusRoundButton { - icon.name: "info" - } - - StatusRoundButton { - icon.name: "info" - enabled: false - } - - StatusRoundButton { - icon.name: "info" - loading: true - } - - // black - - StatusRoundButton { - type: StatusRoundButton.Type.Secondary - icon.name: "info" - } - - StatusRoundButton { - type: StatusRoundButton.Type.Secondary - icon.name: "info" - enabled: false - } - - StatusRoundButton { - type: StatusRoundButton.Type.Secondary - icon.name: "info" - loading: true - } - - // Rounded blue - - StatusFlatRoundButton { - width: 44 - height: 44 - - icon.name: "info" - } - - StatusFlatRoundButton { - width: 44 - height: 44 - icon.name: "info" - enabled: false - } - - StatusFlatRoundButton { - width: 44 - height: 44 - icon.name: "info" - loading: true - } - - // Rounded white - - StatusFlatRoundButton { - type: StatusFlatRoundButton.Type.Secondary - width: 44 - height: 44 - - icon.name: "info" - } - - StatusFlatRoundButton { - type: StatusFlatRoundButton.Type.Secondary - width: 44 - height: 44 - icon.name: "info" - enabled: false - } - - StatusFlatRoundButton { - type: StatusFlatRoundButton.Type.Secondary - width: 44 - height: 44 - icon.name: "info" - loading: true - } - - StatusFlatButton { - icon.name: "info" - text: "Button" - size: StatusBaseButton.Size.Small - } - StatusFlatButton { - icon.name: "info" - text: "Button" - enabled: false - size: StatusBaseButton.Size.Small - } - - StatusFlatButton { - icon.name: "info" - text: "Button" - loading: true - size: StatusBaseButton.Size.Small + StatusPickerButton { + width: buttonGridWidth.width + bgColor: colorDialog.colorSelected ? colorDialog.color : Theme.palette.baseColor2 + contentColor: colorDialog.colorSelected ? Theme.palette.indirectColor1 : Theme.palette.baseColor1 + text: colorDialog.colorSelected ? colorDialog.color.toString().toUpperCase() : "Pick a color" + onClicked: { + colorDialog.open(); + } + ColorDialog { + id: colorDialog + property bool colorSelected: false + onAccepted: { + colorSelected = true; + } + } } } diff --git a/sandbox/main.qml b/sandbox/main.qml index b6fb0b78..ddb8f241 100644 --- a/sandbox/main.qml +++ b/sandbox/main.qml @@ -178,12 +178,10 @@ StatusWindow { rightPanel: Item { id: rightPanel anchors.fill: parent - ScrollView { - width: parent.width - height: parent.height + anchors.fill: parent contentHeight: (pageWrapper.height + pageWrapper.anchors.topMargin) * rootWindow.factor - contentWidth: pageWrapper.width * rootWindow.factor + contentWidth: (pageWrapper.width * rootWindow.factor) clip: true Item { diff --git a/sandbox/sandbox.pro b/sandbox/sandbox.pro index 24764c3b..74650129 100644 --- a/sandbox/sandbox.pro +++ b/sandbox/sandbox.pro @@ -53,15 +53,8 @@ HEADERS += \ sandboxapp.h \ statuswindow.h -DISTFILES += \ - ../src/StatusQ/Components/StatusMacWindowButtons.qml \ - ../src/StatusQ/Controls/StatusBaseButton.qml \ - ../src/StatusQ/Controls/StatusButton.qml \ - ../src/StatusQ/Controls/StatusCheckBox.qml \ - ../src/StatusQ/Controls/StatusFlatRoundButton.qml \ - ../src/StatusQ/Controls/StatusRadioButton.qml \ - ../src/StatusQ/Controls/StatusSlider.qml \ - ../src/StatusQ/Controls/StatusSwitch.qml +OTHER_FILES += $$files($$PWD/../*.qml, true) +OTHER_FILES += $$files($$PWD/*.qml, true) android { diff --git a/src/StatusQ/Controls/StatusPickerButton.qml b/src/StatusQ/Controls/StatusPickerButton.qml new file mode 100644 index 00000000..8bcf5a56 --- /dev/null +++ b/src/StatusQ/Controls/StatusPickerButton.qml @@ -0,0 +1,59 @@ +import QtQuick 2.14 +import QtQuick.Controls 2.12 + +import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 + +Button { + id: root + implicitWidth: 446 + implicitHeight: 44 + + property color bgColor: Theme.palette.baseColor2 + property color contentColor: Theme.palette.baseColor1 + signal clicked() + + background: Item { + anchors.fill: parent + Rectangle { + id: background + anchors.fill: parent + radius: 8 + color: root.bgColor + } + StatusIcon { + id: nextIcon + anchors.right: parent.right + anchors.rightMargin: 8 + anchors.verticalCenter: parent.verticalCenter + icon: "next" + color: !Qt.colorEqual(root.contentColor, Theme.palette.baseColor1) + ? root.contentColor : Theme.palette.directColor1 + } + } + + contentItem: Item { + anchors.fill: parent + StatusBaseText { + id: textLabel + anchors { + fill: parent + leftMargin: 16 + } + verticalAlignment: Text.AlignVCenter + font.pixelSize: 15 + color: root.contentColor + text: root.text + } + } + + MouseArea { + id: mouseArea + anchors.fill: parent + hoverEnabled: true + cursorShape: Qt.PointingHandCursor + onClicked: { + root.clicked(); + } + } +} diff --git a/src/StatusQ/Controls/qmldir b/src/StatusQ/Controls/qmldir index f7e15100..0445d125 100644 --- a/src/StatusQ/Controls/qmldir +++ b/src/StatusQ/Controls/qmldir @@ -15,3 +15,4 @@ StatusRadioButton 0.1 StatusRadioButton.qml StatusCheckBox 0.1 StatusCheckBox.qml StatusSlider 0.1 StatusSlider.qml StatusBaseInput 0.1 StatusBaseInput.qml +StatusPickerButton 0.1 StatusPickerButton.qml