diff --git a/sandbox/controls/Controls.qml b/sandbox/controls/Controls.qml
index d604db38..7c58a71d 100644
--- a/sandbox/controls/Controls.qml
+++ b/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
+ }
}
diff --git a/sandbox/main.qml b/sandbox/main.qml
index d59793a7..384f85b7 100644
--- a/sandbox/main.qml
+++ b/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"
diff --git a/sandbox/pages/StatusPasswordStrengthIndicatorPage.qml b/sandbox/pages/StatusPasswordStrengthIndicatorPage.qml
new file mode 100644
index 00000000..40acd14c
--- /dev/null
+++ b/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
+ }
+}
diff --git a/sandbox/qml.qrc b/sandbox/qml.qrc
index 59404dab..b3133d1c 100644
--- a/sandbox/qml.qrc
+++ b/sandbox/qml.qrc
@@ -1,8 +1,6 @@
main.qml
- DemoApp.qml
- ThemeSwitch.qml
pages/StatusAccountSelectorPage.qml
pages/StatusAddressPage.qml
pages/StatusAssetSelectorPage.qml
@@ -18,6 +16,7 @@
pages/StatusTabSwitchPage.qml
pages/StatusWalletColorButtonPage.qml
pages/StatusWalletColorSelectPage.qml
+ pages/StatusPasswordStrengthIndicatorPage.qml
controls/Buttons.qml
controls/Controls.qml
controls/Icons.qml
@@ -33,4 +32,4 @@
demoapp/data/Models.qml
demoapp/data/qmldir
-
+
\ No newline at end of file
diff --git a/src/StatusQ/Controls/StatusPasswordStrengthIndicator.qml b/src/StatusQ/Controls/StatusPasswordStrengthIndicator.qml
new file mode 100644
index 00000000..ffb23a12
--- /dev/null
+++ b/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}
+ }
+ ]
+}
diff --git a/src/StatusQ/Controls/StatusProgressBar.qml b/src/StatusQ/Controls/StatusProgressBar.qml
new file mode 100644
index 00000000..31877fa3
--- /dev/null
+++ b/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
+ }
+ }
+ }
+}
diff --git a/src/StatusQ/Controls/qmldir b/src/StatusQ/Controls/qmldir
index eda3b64d..4cd3e2b2 100644
--- a/src/StatusQ/Controls/qmldir
+++ b/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
diff --git a/src/StatusQ/Core/Theme/StatusColors.qml b/src/StatusQ/Core/Theme/StatusColors.qml
index 571605cc..66c3feb7 100644
--- a/src/StatusQ/Core/Theme/StatusColors.qml
+++ b/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',
diff --git a/src/StatusQ/Core/Theme/StatusDarkTheme.qml b/src/StatusQ/Core/Theme/StatusDarkTheme.qml
index 3671a47a..94b374d4 100644
--- a/src/StatusQ/Core/Theme/StatusDarkTheme.qml
+++ b/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'),
diff --git a/src/StatusQ/Core/Theme/StatusLightTheme.qml b/src/StatusQ/Core/Theme/StatusLightTheme.qml
index 3d17232b..f873fcdb 100644
--- a/src/StatusQ/Core/Theme/StatusLightTheme.qml
+++ b/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'),
diff --git a/src/StatusQ/Core/Theme/ThemePalette.qml b/src/StatusQ/Core/Theme/ThemePalette.qml
index b4eda4dd..64493e2a 100644
--- a/src/StatusQ/Core/Theme/ThemePalette.qml
+++ b/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: []
diff --git a/statusq.qrc b/statusq.qrc
index fa180456..c4ce56e1 100644
--- a/statusq.qrc
+++ b/statusq.qrc
@@ -316,5 +316,7 @@
src/assets/img/icons/tiny/tribute-to-talk.svg
src/assets/img/icons/tiny/warning.svg
src/StatusQ/Controls/StatusBanner.qml
+ src/StatusQ/Controls/StatusProgressBar.qml
+ src/StatusQ/Controls/StatusPasswordStrengthIndicator.qml