feat(StatusQ.Controls): Introduce `StatusPasswordStrengthIndicator`

Create a password strength indicator component with the corresponding variation.

Create a base StatusProgressBar component.

Add new miscColor12.

Closes #528

sandbox/controls/Controls.qml

@@ -196,4 +196,11 @@ GridLayout {
         type: StatusBanner.Type.Danger
         statusText: "Banner"
     }
+
+    StatusProgressBar {
+        id: progressBar        
+        text: "Weak"
+        value: 0.5
+        fillColor : Theme.palette.pinColor1
+    }
 }

sandbox/main.qml

@@ -201,6 +201,11 @@ StatusWindow {
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.page(title);
                         }
+                        StatusNavigationListItem {
+                            title: "StatusPasswordStrengthIndicator"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
+                        }
                         StatusListSectionHeadline { text: "StatusQ.Components" }
                         StatusNavigationListItem { 
                             title: "StatusAddress"

sandbox/pages/StatusPasswordStrengthIndicatorPage.qml

@@ -0,0 +1,38 @@
+import QtQuick.Layouts 1.14
+import StatusQ.Controls 0.1
+
+GridLayout {
+    columns: 1
+    columnSpacing: 5
+    rowSpacing: 5
+
+    StatusPasswordStrengthIndicator {
+        id: veryweakPw
+        strength: StatusPasswordStrengthIndicator.Strength.VeryWeak
+        value: 0.75
+    }
+
+    StatusPasswordStrengthIndicator {
+        id: weakPw
+        strength: StatusPasswordStrengthIndicator.Strength.Weak
+        value: 0.5
+    }
+
+    StatusPasswordStrengthIndicator {
+        id: sosoPw
+        strength: StatusPasswordStrengthIndicator.Strength.SoSo
+        value: 0.25
+    }
+
+    StatusPasswordStrengthIndicator {
+        id: goodPw
+        strength: StatusPasswordStrengthIndicator.Strength.Good
+        value: 1
+    }
+
+    StatusPasswordStrengthIndicator {
+        id: greatPw
+        strength: StatusPasswordStrengthIndicator.Strength.Great
+        value: 0.3
+    }
+}

sandbox/qml.qrc

@@ -1,8 +1,6 @@
 <RCC>
     <qresource prefix="/">
         <file>main.qml</file>
-        <file>DemoApp.qml</file>
-        <file>ThemeSwitch.qml</file>
         <file>pages/StatusAccountSelectorPage.qml</file>
         <file>pages/StatusAddressPage.qml</file>
         <file>pages/StatusAssetSelectorPage.qml</file>
@@ -18,6 +16,7 @@
         <file>pages/StatusTabSwitchPage.qml</file>
         <file>pages/StatusWalletColorButtonPage.qml</file>
         <file>pages/StatusWalletColorSelectPage.qml</file>
+		<file>pages/StatusPasswordStrengthIndicatorPage.qml</file>
         <file>controls/Buttons.qml</file>
         <file>controls/Controls.qml</file>
         <file>controls/Icons.qml</file>

src/StatusQ/Controls/StatusPasswordStrengthIndicator.qml

@@ -0,0 +1,54 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+
+import StatusQ.Core.Theme 0.1
+import StatusQ.Core 0.1
+
+StatusProgressBar {
+    id: control
+
+    property var strength
+    property string labelVeryWeak: "Very weak"
+    property string labelWeak: "Weak"
+    property string labelSoso: "So-so"
+    property string labelGood: "Good"
+    property string labelGreat: "Great"
+
+    enum Strength {
+        VeryWeak, // 0
+        Weak, // 1
+        SoSo, // 2
+        Good, // 3
+        Great // 4
+    }
+
+    // Behavior:
+    states: [
+        // Strength states definition:
+        State {
+            when: control.strength === StatusPasswordStrengthIndicator.Strength.VeryWeak
+            PropertyChanges { target: control; fillColor : Theme.palette.dangerColor1}
+            PropertyChanges { target: control; text: labelVeryWeak}
+        },
+        State {
+            when: control.strength === StatusPasswordStrengthIndicator.Strength.Weak
+            PropertyChanges { target: control; fillColor : Theme.palette.pinColor1}
+            PropertyChanges { target: control; text: labelWeak}
+        },
+        State {
+            when: control.strength === StatusPasswordStrengthIndicator.Strength.SoSo
+            PropertyChanges { target: control; fillColor : Theme.palette.miscColor7}
+            PropertyChanges { target: control; text: labelSoso}
+        },
+        State {
+            when: control.strength === StatusPasswordStrengthIndicator.Strength.Good
+            PropertyChanges { target: control; fillColor : Theme.palette.miscColor12}
+            PropertyChanges { target: control; text: labelGood}
+        },
+        State {
+            when: control.strength === StatusPasswordStrengthIndicator.Strength.Great
+            PropertyChanges { target: control; fillColor : Theme.palette.successColor1}
+            PropertyChanges { target: control; text: labelGreat}
+        }
+    ]
+}

src/StatusQ/Controls/StatusProgressBar.qml

@@ -0,0 +1,42 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+
+import StatusQ.Core.Theme 0.1
+import StatusQ.Core 0.1
+
+ProgressBar {
+    id: control
+
+    property string text
+    property color fillColor
+    property color backgroundColor: Theme.palette.directColor8
+
+    width: 416
+    height: 16
+    clip: true
+
+    background: Rectangle {
+        implicitWidth: parent.width
+        implicitHeight: parent.height
+        color: control.backgroundColor
+        radius: 5
+    }
+    contentItem: Item {
+        implicitHeight: parent.height
+
+        Rectangle {
+            id: bar
+            width: control.visualPosition * parent.width
+            height: parent.height
+            color: control.fillColor
+            radius: 5
+
+            StatusBaseText {
+                anchors.centerIn: parent
+                text: control.text
+                font.pixelSize: 12
+                color: Theme.palette.indirectColor1
+            }
+        }
+    }
+}

src/StatusQ/Controls/qmldir

@@ -24,6 +24,8 @@ StatusSelect 0.1 StatusSelect.qml
 StatusBaseInput 0.1 StatusBaseInput.qml
 StatusInput 0.1 StatusInput.qml
 StatusPickerButton 0.1 StatusPickerButton.qml
+StatusProgressBar 0.1 StatusProgressBar.qml
+StatusPasswordStrengthIndicator 0.1 StatusPasswordStrengthIndicator.qml
 StatusSwitchTabButton 0.1 StatusSwitchTabButton.qml
 StatusSwitchTabBar 0.1 StatusSwitchTabBar.qml
 StatusSelectableText 0.1 StatusSelectableText.qml

src/StatusQ/Core/Theme/StatusColors.qml

@@ -31,6 +31,8 @@ QtObject {
         'green2': '#7CDA00',
         'green3': '#60C370',
         'green4': '#93DB33',
+        'green5': '#9EA85D',
+        'green6': '#AFB551',
 
         'grey': '#F0F2F5',
         'grey2': '#F6F8FA',

src/StatusQ/Core/Theme/StatusDarkTheme.qml

@@ -145,6 +145,7 @@ ThemePalette {
     miscColor9: getColor('moss2')
     miscColor10: getColor('brown3')
     miscColor11: getColor('yellow2')
+    miscColor12: getColor('green6')
 
     accountColors: [
         getColor('blue5'),

src/StatusQ/Core/Theme/StatusLightTheme.qml

@@ -143,6 +143,7 @@ ThemePalette {
     miscColor9: getColor('moss')
     miscColor10: getColor('brown')
     miscColor11: getColor('brown2')
+    miscColor12: getColor('green5')
 
     accountColors: [
         getColor('blue'),

src/StatusQ/Core/Theme/ThemePalette.qml

@@ -88,6 +88,7 @@ QtObject {
     property color miscColor9
     property color miscColor10
     property color miscColor11
+    property color miscColor12
 
     property var accountColors: []
 

statusq.qrc

@@ -316,5 +316,7 @@
         <file>src/assets/img/icons/tiny/tribute-to-talk.svg</file>
         <file>src/assets/img/icons/tiny/warning.svg</file>
         <file>src/StatusQ/Controls/StatusBanner.qml</file>
+        <file>src/StatusQ/Controls/StatusProgressBar.qml</file>
+        <file>src/StatusQ/Controls/StatusPasswordStrengthIndicator.qml</file>
     </qresource>
 </RCC>