WIP SAVEPOINT

ui/app/AppLayouts/Profile/Sections/AdvancedContainer.qml

@@ -97,6 +97,31 @@ Item {
             text: qsTrId("under-development-nnote--you-will-be-logged-out-and-all-installed-nsticker-packs-will-be-removed-and-will-nneed-to-be-reinstalled--purchased-sticker-npacks-will-not-need-to-be-re-purchased-")
         }
     }
+
+    RowLayout {
+        id: uiCatalong
+        anchors.top: networkTabSettings.bottom
+        anchors.topMargin: 20
+        anchors.left: parent.left
+        anchors.leftMargin: 24
+        Component.onCompleted: {
+            uiComponentBtn.enabled = false
+        }
+
+        StyledText {
+            text: qsTr("UI Components")
+        }
+        Switch {
+            checked: uiComponentBtn.enabled
+            onCheckedChanged: function(value) {
+                uiComponentBtn.enabled = this.checked
+            }
+        }
+        StyledText {
+            text: qsTr("Developer setting")
+        }
+    }
+
 }
 
 /*##^##

ui/app/AppLayouts/UIComponents/UIComponents.qml

@@ -0,0 +1,110 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import QtQuick.Layouts 1.13
+import "../../../imports"
+import "../../../shared"
+import "../../../shared/status"
+
+
+Item {
+    id: uiComponentCatalog
+    Layout.fillHeight: true
+    Layout.fillWidth: true
+
+    ColumnLayout {
+        id: buttons
+        spacing: 6
+
+        RowLayout {
+            Text {
+                text: "Buttons"
+            }
+        }
+
+        RowLayout {
+            StButton {
+                text: "Primary Large Button"
+            }
+
+            StButton {
+                text: "Secondary Large Button"
+                type: "secondary"
+            }
+
+            StButton {
+                text: "Primary Small Button"
+                size: "small"
+            }
+
+            StButton {
+                text: "Secondary Small Button"
+                type: "secondary"
+                size: "small"
+            }
+
+            StRoundButton {
+                text: "\u2713"    
+            }
+        }
+
+        RowLayout {
+            StButton {
+                text: "Primary Large Button"
+                enabled: false
+            }
+
+            StButton {
+                text: "Secondary Large Button"
+                type: "secondary"
+                enabled: false
+            }
+
+            StButton {
+                text: "Primary Small Button"
+                enabled: false
+                size: "small"
+            }
+
+            StButton {
+                text: "Secondary Small Button"
+                type: "secondary"
+                enabled: false
+                size: "small"
+            }
+
+            StRoundButton {
+                
+            }
+        }
+
+        RowLayout {
+            StButton {
+                text: "Primary Large Button"
+                state: "pending"
+            }
+
+            StButton {
+                text: "Secondary Large Button"
+                type: "secondary"
+                state: "pending"
+            }
+
+            StButton {
+                text: "Primary Large Button"
+                state: "pending"
+                size: "small"
+            }
+
+            StButton {
+                text: "Secondary Large Button"
+                type: "secondary"
+                state: "pending"
+                size: "small"
+            }
+
+            StRoundButton {
+                
+            }
+        }
+    }
+}

ui/app/AppLayouts/qmldir

@@ -2,3 +2,4 @@ ChatLayout 1.0 Chat/ChatLayout.qml
 NodeLayout 1.0 Node/NodeLayout.qml
 ProfileLayout 1.0 Profile/ProfileLayout.qml
 WalletLayout 1.0 Wallet/WalletLayout.qml
+UIComponents 1.0 UIComponents/UIComponents.qml

ui/app/AppMain.qml

@@ -154,6 +154,33 @@ RowLayout {
                 source: parent.checked ? "img/nodeActive.svg" : "img/node.svg"
             }
         }
+
+        TabButton {
+            id: uiComponentBtn
+            enabled: isExperimental === "1"
+            visible: this.enabled
+            width: 40
+            height: this.enabled ? 40 : 0
+            text: ""
+            anchors.topMargin: this.enabled ? 50 : 0
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.top: nodeBtn.top
+            background: Rectangle {
+                color: Style.current.secondaryBackground
+                opacity: parent.checked ? 1 : 0
+                radius: 50
+            }
+
+            SVGImage {
+                id: image5
+                height: 24
+                width: 24
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.horizontalCenter: parent.horizontalCenter
+                fillMode: Image.PreserveAspectFit
+                source: parent.checked ? "img/nodeActive.svg" : "img/node.svg"
+            }
+        }
     }
 
     StackLayout {
@@ -192,6 +219,12 @@ RowLayout {
             Layout.alignment: Qt.AlignLeft | Qt.AlignTop
             Layout.fillHeight: true
         }
+
+        UIComponents {
+            Layout.fillWidth: true
+            Layout.alignment: Qt.AlignLeft | Qt.AlignTop
+            Layout.fillHeight: true
+        }
     }
 }
 

ui/imports/Themes/DarkTheme.qml

@@ -40,4 +40,9 @@ Theme {
     property color primaryMenuItemHover: blue
     property color primaryMenuItemTextHover: almostBlack
     property color backgroundTertiary: tenPercentBlue
+
+    property color buttonForegroundColor: blue
+    property color buttonBackgroundColor: secondaryBackground
+    property color roundedButtonForegroundColor: white
+    property color roundedButtonBackgroundColor: secondaryBackground
 }

ui/imports/Themes/LightTheme.qml

@@ -39,4 +39,11 @@ Theme {
     property color primaryMenuItemHover: blue
     property color primaryMenuItemTextHover: white
     property color backgroundTertiary: tenPercentBlue
+
+    property color buttonForegroundColor: blue
+    property color buttonBackgroundColor: secondaryBackground
+    property color buttonDisabledForegroundColor: darkGrey
+    property color buttonDisabledBackgroundColor: grey
+    property color roundedButtonForegroundColor: white
+    property color roundedButtonBackgroundColor: secondaryBackground
 }

ui/imports/Themes/Theme.qml

@@ -33,6 +33,13 @@ QtObject {
     property color secondaryBackground
     property color modalBackground
 
+    property color buttonForegroundColor
+    property color buttonBackgroundColor
+    property color buttonDisabledForegroundColor
+    property color buttonDisabledBackgroundColor
+    property color roundedButtonForegroundColor
+    property color roundedButtonBackgroundColor
+
     property int xlPadding: 32
     property int bigPadding: 24
     property int padding: 16

ui/shared/status/StButton.qml

@@ -0,0 +1,64 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import QtQml 2.14
+import "../../imports"
+import "../../shared"
+
+Button {
+    property string type: "primary"
+    property string size: "large"
+    property string state: "default"    
+
+    id: control
+    font.pixelSize: size === "small" ? 13 : 15
+    font.weight: Font.Medium
+    implicitHeight: size === "small" ? 38 : 44
+    implicitWidth: buttonLabel.implicitWidth + 2 * Style.current.padding
+    enabled: state === "default"
+
+    contentItem: Item {
+        anchors.fill: parent
+        Text {
+            id: buttonLabel
+            text: control.text
+            font: control.font
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            anchors.fill: parent
+            color: !enabled ? Style.current.buttonDisabledForegroundColor : Style.current.buttonForegroundColor
+            visible: !loadingIndicator.visible
+        }
+
+        LoadingImage {
+            id: loadingIndicator
+            visible: control.state === "pending"
+            height: loadingIndicator.visible ? 
+                                    control.size === "large" ?
+                                    23 : 17 
+                                    : 0
+            width: loadingIndicator.height
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.verticalCenter: parent.verticalCenter
+        }
+    }
+
+    background: Rectangle {
+        radius: Style.current.radius
+        anchors.fill: parent
+        color: {
+            if (type === "secondary") {
+                return hovered ? Style.current.buttonBackgroundColor : "transparent"
+            }
+            return !enabled ? Style.current.buttonDisabledBackgroundColor :
+                      hovered ? Qt.darker(Style.current.buttonBackgroundColor, 1.1) :
+                      Style.current.buttonBackgroundColor 
+        }
+    }
+
+    MouseArea {
+        cursorShape: Qt.PointingHandCursor
+        anchors.fill: parent
+        onPressed: mouse.accepted = false
+    }
+}
+

ui/shared/status/StRoundButton.qml

@@ -0,0 +1,35 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import QtQml 2.14
+import "../../imports"
+import "../../shared"
+
+RoundButton {
+    property string type: "primary"
+    property string state: "default"
+    font.pixelSize: 15
+    font.weight: Font.Medium
+
+    enabled: state === "default"
+
+    id: control
+    height: 44
+    width: 44
+
+    /* background: Rectangle { */
+    /*     color: Style.current.roundedButtonBackgroundColor */
+    /*     radius: parent.width / 2 */
+    /* } */
+
+    /* contentItem: Item { */
+    /*     anchors.fill: parent */
+    /*     LoadingImage { */
+    /*         id: loadingIndicator */
+    /*         visible: control.state === "pending" */
+    /*         height: loadingIndicator.visible ? 23 : 0 */
+    /*         width: loadingIndicator.height */
+    /*         anchors.horizontalCenter: parent.horizontalCenter */
+    /*         anchors.verticalCenter: parent.verticalCenter */
+    /*     } */
+    /* } */
+}

ui/shared/status/qmldir

@@ -0,0 +1,2 @@
+StButton 1.0 StButton.qml
+StRoundButton 1.0 StRoundButton.qml