diff --git a/ui/StatusQ/sandbox/Buttons.qml b/ui/StatusQ/sandbox/Buttons.qml index 7afe615c81..ece96f6f3c 100644 --- a/ui/StatusQ/sandbox/Buttons.qml +++ b/ui/StatusQ/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/ui/StatusQ/sandbox/main.qml b/ui/StatusQ/sandbox/main.qml index b6fb0b7853..ddb8f24125 100644 --- a/ui/StatusQ/sandbox/main.qml +++ b/ui/StatusQ/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/ui/StatusQ/sandbox/sandbox.pro b/ui/StatusQ/sandbox/sandbox.pro index 24764c3b8c..746501295c 100644 --- a/ui/StatusQ/sandbox/sandbox.pro +++ b/ui/StatusQ/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/ui/StatusQ/src/StatusQ/Controls/StatusPickerButton.qml b/ui/StatusQ/src/StatusQ/Controls/StatusPickerButton.qml new file mode 100644 index 0000000000..8bcf5a5670 --- /dev/null +++ b/ui/StatusQ/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/ui/StatusQ/src/StatusQ/Controls/qmldir b/ui/StatusQ/src/StatusQ/Controls/qmldir index f7e1510061..0445d125be 100644 --- a/ui/StatusQ/src/StatusQ/Controls/qmldir +++ b/ui/StatusQ/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