feat:Add buttons components

ui/StatusQ/sandbox/Buttons.qml

@@ -0,0 +1,239 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Controls 0.1
+import StatusQ.Core.Theme 0.1
+
+Grid {
+
+    columns: 3
+    columnSpacing: 38
+    rowSpacing: 10
+
+    horizontalItemAlignment: Grid.AlignHCenter
+
+    // 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: "info"
+    }
+
+    StatusRoundButton {
+        icon: "info"
+        enabled: false
+    }
+
+    StatusRoundButton {
+        icon: "info"
+        loading: true
+    }
+
+    // black
+
+    StatusRoundButton {
+        type: StatusRoundButton.Type.Secondary
+        icon: "info"
+    }
+
+    StatusRoundButton {
+        type: StatusRoundButton.Type.Secondary
+        icon: "info"
+        enabled: false
+    }
+
+    StatusRoundButton {
+        type: StatusRoundButton.Type.Secondary
+        icon: "info"
+        loading: true
+    }
+
+    // Rounded blue
+
+    StatusFlatRoundButton {
+        width: 44
+        height: 44
+
+        icon: "info"
+    }
+
+    StatusFlatRoundButton {
+        width: 44
+        height: 44
+        icon: "info"
+        enabled: false
+    }
+
+    StatusFlatRoundButton {
+        width: 44
+        height: 44
+        icon: "info"
+        loading: true
+    }
+
+    // Rounded white
+
+    StatusFlatRoundButton {
+        type: StatusFlatRoundButton.Type.Secondary
+        width: 44
+        height: 44
+
+        icon: "info"
+    }
+
+    StatusFlatRoundButton {
+        type: StatusFlatRoundButton.Type.Secondary
+        width: 44
+        height: 44
+        icon: "info"
+        enabled: false
+    }
+
+    StatusFlatRoundButton {
+        type: StatusFlatRoundButton.Type.Secondary
+        width: 44
+        height: 44
+        icon: "info"
+        loading: true
+    }
+
+    StatusFlatButton {
+        iconName: "info"
+        text: "Button"
+        size: StatusBaseButton.Size.Small
+    }
+    StatusFlatButton {
+        iconName: "info"
+        text: "Button"
+        enabled: false
+        size: StatusBaseButton.Size.Small
+    }
+
+    StatusFlatButton {
+        iconName: "info"
+        text: "Button"
+        loading: true
+        size: StatusBaseButton.Size.Small
+    }
+}

ui/StatusQ/sandbox/main.qml

@@ -7,19 +7,29 @@ import StatusQ.Core.Theme 0.1
 
 Window {
     id: rootWindow
-    width: 640
+    width: 1024
-    height: 480
+    height: 840
     visible: true
     title: qsTr("Status App Sandbox")
 
+    property ThemePalette lightTheme: StatusLightTheme {}
+    property ThemePalette darkTheme: StatusDarkTheme { }
+
     ButtonGroup {
         id: topicsGroup
         buttons: tabs.children
     }
 
+    ButtonGroup {
+        buttons: switchRow.children
+    }
+
     Flow {
         id: tabs
-        width: parent.width
+        anchors.left: parent.left
+        anchors.leftMargin: 100
+        anchors.right: parent.right
+
         Button {
             text: "Reload QML"
             onClicked: app.restartQml()
@@ -39,8 +49,16 @@ Window {
             checkable: true
             text: "Other"
         }
+
+        Button {
+            id: buttonsTab
+            checkable: true
+            text: "Buttons"
+        }
     }
 
+
+
     ScrollView {
         width: parent.width
         anchors.top: tabs.bottom
@@ -48,70 +66,62 @@ Window {
         contentHeight: rootWindow.height * rootWindow.factor
         contentWidth: rootWindow.width * rootWindow.factor
         clip: true
-        SplitView {
-            width: parent.width
-            height: rootWindow.height
-            handle: Item {}
 
+
+        Rectangle {
+            id: lightThemeBg
+
+            width: rootWindow.width
+            height: parent.height
+            color: Theme.palette.baseColor5
+            clip: true
             scale: rootWindow.factor
 
-            Rectangle {
+            Loader {
-                id: lightThemeBg
+                active: true
+                anchors.centerIn: parent
 
-                SplitView.minimumWidth: rootWindow.width / 2
+                sourceComponent: {
-                height: parent.height
+                    switch(topicsGroup.checkedButton) {
-                color: lightTheme.baseColor5
+                    case iconsTab:
-                clip: true
+                        return iconsComponent;
-
+                    case controlsTab:
-                Loader {
+                        return controlsComponent;
-                    active: true
+                    case otherTab:
-                    anchors.centerIn: parent
+                        return othersComponent;
-                    property var currentTheme: StatusLightTheme { id: lightTheme }
+                    case buttonsTab:
-
+                        return buttonsComponent;
-                    sourceComponent: {
+                    default:
-                        switch(topicsGroup.checkedButton) {
+                        return null;
-                        case iconsTab:
-                            return iconsComponent;
-                        case controlsTab:
-                            return controlsComponent;
-                        case otherTab:
-                            return othersComponent;
-                        default:
-                            return null;
-                        }
                     }
                 }
-
             }
+            Row {
+                id: switchRow
+                scale: 0.8
+                anchors.right: parent.right
+                anchors.top: parent.top
 
-            Rectangle {
+                Button {
-                id: darkThemeBg
+                    checkable: true
-
+                    checked: true
-                SplitView.fillWidth: true
+                    text: "Light Theme"
-                SplitView.minimumWidth: rootWindow.width / 2
+                    onCheckedChanged: {
-                height: parent.height
+                        if (checked) {
-                color: darkTheme.baseColor5
+                            Theme.setTheme(lightTheme)
-                clip: true
-
-                Loader {
-                    active: true
-                    anchors.centerIn: parent
-                    property var currentTheme:  StatusDarkTheme { id: darkTheme }
-
-                    sourceComponent: {
-                        switch(topicsGroup.checkedButton) {
-                        case iconsTab:
-                            return iconsComponent;
-                        case controlsTab:
-                            return controlsComponent;
-                        case otherTab:
-                            return othersComponent;
-                        default:
-                            return null;
                         }
                     }
                 }
 
+                Button {
+                    checkable: true
+                    text: "Dark Theme"
+                    onCheckedChanged: {
+                        if (checked) {
+                            Theme.setTheme(darkTheme)
+                        }
+                    }
+                }
             }
         }
     }
@@ -147,7 +157,7 @@ Window {
         id: iconsComponent
         Icons {
             anchors.centerIn: parent
-            iconColor: parent? parent.currentTheme.primaryColor1 : "#ffffff"
+            iconColor: Theme.palette.primaryColor1
         }
     }
 
@@ -155,7 +165,7 @@ Window {
         id: controlsComponent
         Controls {
             anchors.centerIn: parent
-            theme: parent.currentTheme
+            theme: Theme.palette
         }
     }
 
@@ -163,7 +173,14 @@ Window {
         id: othersComponent
         Others {
             anchors.centerIn: parent
-            theme: parent.currentTheme
+            theme: Theme.palette
+        }
+    }
+
+    Component {
+        id: buttonsComponent
+        Buttons {
+            anchors.centerIn: parent
         }
     }
 }

ui/StatusQ/sandbox/qml.qrc

@@ -4,5 +4,6 @@
         <file>Controls.qml</file>
         <file>Icons.qml</file>
         <file>Others.qml</file>
+        <file>Buttons.qml</file>
     </qresource>
 </RCC>

ui/StatusQ/sandbox/sandbox.pro

@@ -29,3 +29,8 @@ OTHER_FILES += $$files($$PWD/../src/*, true)
 HEADERS += \
     handler.h \
     sandboxapp.h
+
+DISTFILES += \
+    ../src/StatusQ/Controls/StatusBaseButton.qml \
+    ../src/StatusQ/Controls/StatusButton.qml \
+    ../src/StatusQ/Controls/StatusFlatRoundButton.qml

ui/StatusQ/src/StatusQ/Controls/StatusBaseButton.qml

@@ -0,0 +1,142 @@
+import QtQuick 2.14
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+
+Rectangle {
+    id: statusBaseButton
+
+    enum Size {
+        Small,
+        Large
+    }
+
+    enum Type {
+        Normal,
+        Danger
+    }
+
+    property alias iconName: icon.icon
+
+    property bool loading: false
+
+    property alias hovered: sensor.containsMouse
+
+    property int size: StatusBaseButton.Size.Large
+    property int type: StatusBaseButton.Type.Normal
+
+    property alias text: label.text
+    property alias font: label.font
+
+    property real defaultLeftPadding: size === StatusBaseButton.Size.Large ? 24 : 12
+    property real defaultRightPadding: size === StatusBaseButton.Size.Large ? 24 : 12
+    property real defaultTopPadding: size === StatusBaseButton.Size.Large ? 11 : 10
+    property real defaultBottomPadding: size === StatusBaseButton.Size.Large ? 11 : 10
+
+
+    property real leftPadding: defaultLeftPadding
+    property real rightPadding: defaultRightPadding
+    property real topPadding: defaultTopPadding
+    property real bottomPadding: defaultBottomPadding
+
+    property color normalColor
+    property color hoverColor
+    property color disaledColor
+
+    property color textColor
+    property color disabledTextColor
+
+    signal pressed(var mouse)
+    signal released(var mouse)
+    signal clicked(var mouse)
+    signal pressAndHold(var mouse)
+
+
+
+    /// Implementation
+
+    implicitWidth: sensor.width
+    implicitHeight: sensor.height
+
+    radius: 8
+
+    color: {
+        if (statusBaseButton.enabled) {
+            return sensor.containsMouse ? hoverColor
+                                        : normalColor
+        } else {
+            return disaledColor
+        }
+    }
+
+
+    MouseArea {
+        id: sensor
+        width: layout.width + statusBaseButton.leftPadding + statusBaseButton.rightPadding
+        height: layout.height + statusBaseButton.topPadding + statusBaseButton.bottomPadding
+
+        cursorShape: loading ? Qt.ArrowCursor
+                             : Qt.PointingHandCursor
+        hoverEnabled: !loading
+        enabled: !loading
+
+        Row {
+            id: layout
+            anchors.left: parent.left
+            anchors.leftMargin: statusBaseButton.leftPadding
+            anchors.verticalCenter: parent.verticalCenter
+            spacing: 4
+            StatusIcon {
+                id: icon
+                anchors.verticalCenter: parent.verticalCenter
+                visible: !loading && iconName !== ""
+                color: statusBaseButton.enabled ? textColor
+                                                : disabledTextColor
+            } // Icon
+            StatusBaseText {
+                id: label
+                visible: !loading
+                anchors.verticalCenter: parent.verticalCenter
+                font.pixelSize: size === StatusBaseButton.Size.Large ? 15 : 13 // by design
+
+                color: statusBaseButton.enabled ? textColor
+                                                : disabledTextColor
+            } // Text
+
+            Loader {
+                anchors.verticalCenter: parent.verticalCenter
+                active: loading
+                sourceComponent: StatusLoadingIndicator {
+                    color: statusBaseButton.enabled ? textColor
+                                                    : disabledTextColor
+                } // Indicator
+            } // Loader
+        } // Ro
+
+
+        onPressed: {
+            if (!loading) {
+                statusBaseButton.pressed(mouse)
+            }
+        }
+
+        onReleased: {
+            if (!loading) {
+                statusBaseButton.released(mouse)
+            }
+        }
+
+        onClicked: {
+            if (!loading) {
+                statusBaseButton.clicked(mouse)
+            }
+        }
+
+        onPressAndHold: {
+            if (!loading) {
+                statusBaseButton.pressAndHold(mouse)
+            }
+        }
+    } // Sensor
+
+}

ui/StatusQ/src/StatusQ/Controls/StatusButton.qml

@@ -0,0 +1,17 @@
+import QtQuick 2.14
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+StatusBaseButton {
+    id: statusButton
+
+    normalColor: type === StatusBaseButton.Type.Normal ? Theme.palette.primaryColor3
+                                                       : Theme.palette.dangerColor3
+    hoverColor:  type === StatusBaseButton.Type.Normal ? Theme.palette.primaryColor2
+                                                       : Theme.palette.dangerColor2
+    disaledColor: Theme.palette.baseColor2
+
+    textColor: type === StatusBaseButton.Type.Normal ? Theme.palette.primaryColor1
+                                                     : Theme.palette.dangerColor1
+    disabledTextColor: Theme.palette.baseColor1
+}

ui/StatusQ/src/StatusQ/Controls/StatusFlatButton.qml

@@ -0,0 +1,21 @@
+import QtQuick 2.14
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+StatusBaseButton {
+    id: statusFlatButton
+
+    normalColor: "transparent"
+    hoverColor:  type === StatusBaseButton.Type.Normal ? Theme.palette.primaryColor3
+                                                       : Theme.palette.dangerColor3
+    disaledColor: "transparent"
+
+    textColor: type === StatusBaseButton.Type.Normal ? Theme.palette.primaryColor1
+                                                     : Theme.palette.dangerColor1
+    disabledTextColor: Theme.palette.baseColor1
+
+    border.color: type === StatusBaseButton.Type.Normal || hovered ? "transparent"
+                                                          : Theme.palette.baseColor2
+    rightPadding: iconName !== "" ? 18 : defaultRightPadding
+    leftPadding: iconName !== "" ? 14 : defaultLeftPadding
+}

ui/StatusQ/src/StatusQ/Controls/StatusFlatRoundButton.qml

@@ -0,0 +1,138 @@
+import QtQuick 2.14
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+
+
+Rectangle {
+    id: statusFlatRoundButton
+
+    property alias icon: iconSettings.name
+
+    property bool loading: false
+
+    property int type: StatusFlatRoundButton.Type.Primary
+
+    signal pressed(var mouse)
+    signal released(var mouse)
+    signal clicked(var mouse)
+    signal pressAndHold(var mouse)
+
+    enum Type {
+        Primary,
+        Secondary
+    }
+
+
+
+    /// Implementation
+
+    QtObject {
+        id: iconSettings
+        property alias name: statusIcon.icon
+        property color color: {
+            switch(statusFlatRoundButton.type) {
+            case StatusFlatRoundButton.Type.Secondary:
+                return Theme.palette.directColor1;
+            case StatusFlatRoundButton.Type.Primary:
+                return Theme.palette.primaryColor1;
+            }
+        }
+
+        property color disabledColor: {
+            switch(statusFlatRoundButton.type) {
+            case StatusFlatRoundButton.Type.Secondary:
+                return Theme.palette.baseColor1;
+            case StatusFlatRoundButton.Type.Primary:
+                return Theme.palette.baseColor1;
+            }
+        }
+    }
+
+    QtObject {
+        id: backgroundSettings
+
+        property color color: {
+            switch(statusFlatRoundButton.type) {
+            case StatusFlatRoundButton.Type.Primary:
+            case StatusFlatRoundButton.Type.Secondary:
+                return "transparent";
+            }
+        }
+
+        property color hoverColor: {
+            switch(statusFlatRoundButton.type) {
+            case StatusFlatRoundButton.Type.Primary:
+                return Theme.palette.primaryColor2;
+            case StatusFlatRoundButton.Type.Secondary:
+                return "transparent";
+            }
+        }
+
+        property color disabledColor: {
+            switch(statusFlatRoundButton.type) {
+            case StatusFlatRoundButton.Type.Primary:
+            case StatusFlatRoundButton.Type.Secondary:
+                return "transparent";
+            }
+        }
+    }
+
+    implicitWidth: 44
+    implicitHeight: 44
+    radius: 8
+
+    color: {
+        if (statusFlatRoundButton.enabled) {
+            return sensor.containsMouse ? backgroundSettings.hoverColor
+                                        : backgroundSettings.color
+        } else {
+            return backgroundSettings.disabledColor
+        }
+    }
+    MouseArea {
+        id: sensor
+
+        anchors.fill: parent
+        cursorShape: loading ? Qt.ArrowCursor
+                             : Qt.PointingHandCursor
+        hoverEnabled: !loading
+        enabled: !loading
+
+
+        StatusIcon {
+            id: statusIcon
+            anchors.centerIn: parent
+            visible: !loading
+
+            width: statusFlatRoundButton.width -  20
+            height: statusFlatRoundButton.height - 20
+
+            color: {
+                if (statusFlatRoundButton.enabled) {
+                    return iconSettings.color
+                } else {
+                    return iconSettings.disabledColor
+                }
+            }
+        } // Icon
+        Loader {
+            active: loading
+            anchors.centerIn: parent
+            sourceComponent: StatusLoadingIndicator {
+                color: {
+                    if (statusFlatRoundButton.enabled) {
+                        return iconSettings.color
+                    } else {
+                        return iconSettings.disabledColor
+                    }
+                }
+            } // Indicator
+        } // Loader
+
+        onClicked: statusFlatRoundButton.clicked(mouse)
+        onPressed: statusFlatRoundButton.pressed(mouse)
+        onReleased: statusFlatRoundButton.released(mouse)
+        onPressAndHold: statusFlatRoundButton.pressAndHold(mouse)
+    } // Sensor
+} // Rectangle

ui/StatusQ/src/StatusQ/Controls/StatusRoundButton.qml

@@ -0,0 +1,140 @@
+import QtQuick 2.14
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+
+
+Rectangle {
+    id: statusRoundButton
+
+    property alias icon: iconSettings.name
+
+    property bool loading: false
+
+    property int type: StatusRoundButton.Type.Primary
+
+    signal pressed(var mouse)
+    signal released(var mouse)
+    signal clicked(var mouse)
+    signal pressAndHold(var mouse)
+
+    enum Type {
+        Primary,
+        Secondary
+    }
+
+
+
+    /// Implementation
+
+    QtObject {
+        id: iconSettings
+        property alias name: statusIcon.icon
+        property color color: {
+            switch(statusRoundButton.type) {
+            case StatusRoundButton.Type.Primary:
+                return Theme.palette.primaryColor1;
+            case StatusRoundButton.Type.Secondary:
+                return Theme.palette.indirectColor1;
+            }
+        }
+
+        property color disabledColor: {
+            switch(statusRoundButton.type) {
+            case StatusRoundButton.Type.Primary:
+                return Theme.palette.baseColor1;
+            case StatusRoundButton.Type.Secondary:
+                return Theme.palette.indirectColor1;
+            }
+        }
+    }
+
+    QtObject {
+        id: backgroundSettings
+
+        property color color: {
+            switch(statusRoundButton.type) {
+            case StatusRoundButton.Type.Primary:
+                return Theme.palette.primaryColor3;
+            case StatusRoundButton.Type.Secondary:
+                return Theme.palette.primaryColor1;
+            }
+        }
+
+        property color hoverColor: {
+            switch(statusRoundButton.type) {
+            case StatusRoundButton.Type.Primary:
+                return Theme.palette.primaryColor2;
+            case StatusRoundButton.Type.Secondary:
+                return Theme.palette.miscColor1;
+            }
+        }
+
+        property color disabledColor: {
+            switch(statusRoundButton.type) {
+            case StatusRoundButton.Type.Primary:
+                return Theme.palette.indirectColor1;
+            case StatusRoundButton.Type.Secondary:
+                return Theme.palette.baseColor1;
+            }
+        }
+    }
+
+    implicitWidth: 44
+    implicitHeight: 44
+    radius: width / 2;
+
+    color: {
+        if (statusRoundButton.enabled) {
+            return sensor.containsMouse ? backgroundSettings.hoverColor
+                                        : backgroundSettings.color
+        } else {
+            return backgroundSettings.disabledColor
+        }
+    }
+    MouseArea {
+        id: sensor
+
+        anchors.fill: parent
+        cursorShape: loading ? Qt.ArrowCursor
+                             : Qt.PointingHandCursor
+        hoverEnabled: !loading
+        enabled: !loading
+
+
+        StatusIcon {
+            id: statusIcon
+            anchors.centerIn: parent
+            visible: !loading
+
+            width: statusRoundButton.width -  20
+            height: statusRoundButton.height - 20
+
+            color: {
+                if (statusRoundButton.enabled) {
+                    return iconSettings.color
+                } else {
+                    return iconSettings.disabledColor
+                }
+            }
+        } // Icon
+        Loader {
+            active: loading
+            anchors.centerIn: parent
+            sourceComponent: StatusLoadingIndicator {
+                color: {
+                    if (statusRoundButton.enabled) {
+                        return iconSettings.color
+                    } else {
+                        return iconSettings.disabledColor
+                    }
+                }
+            } // Indicator
+        } // Loader
+
+        onClicked: statusRoundButton.clicked(mouse)
+        onPressed: statusRoundButton.pressed(mouse)
+        onReleased: statusRoundButton.released(mouse)
+        onPressAndHold: statusRoundButton.pressAndHold(mouse)
+    } // Sensor
+} // Rectangle

ui/StatusQ/src/StatusQ/Controls/qmldir

@@ -3,4 +3,9 @@ module StatusQ.Controls
 StatusIconTabButton 0.1 StatusIconTabButton.qml
 StatusNavBarTabButton 0.1 StatusNavBarTabButton.qml
 StatusToolTip 0.1 StatusToolTip.qml
+StatusBaseButton 0.1 StatusBaseButton.qml
+StatusButton 0.1 StatusButton.qml
+StatusFlatButton 0.1 StatusFlatButton.qml
+StatusRoundButton 0.1 StatusRoundButton.qml
+StatusFlatRoundButton 0.1 StatusFlatRoundButton.qml