From 626695da25d86878336d4056d568c2bbb1b4bd8c Mon Sep 17 00:00:00 2001 From: Noelia Date: Tue, 18 Jan 2022 19:06:00 +0100 Subject: [PATCH] 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 | 7 +++ sandbox/main.qml | 5 ++ .../StatusPasswordStrengthIndicatorPage.qml | 38 +++++++++++++ sandbox/qml.qrc | 5 +- .../StatusPasswordStrengthIndicator.qml | 54 +++++++++++++++++++ src/StatusQ/Controls/StatusProgressBar.qml | 42 +++++++++++++++ src/StatusQ/Controls/qmldir | 2 + src/StatusQ/Core/Theme/StatusColors.qml | 2 + src/StatusQ/Core/Theme/StatusDarkTheme.qml | 1 + src/StatusQ/Core/Theme/StatusLightTheme.qml | 1 + src/StatusQ/Core/Theme/ThemePalette.qml | 1 + statusq.qrc | 2 + 12 files changed, 157 insertions(+), 3 deletions(-) create mode 100644 sandbox/pages/StatusPasswordStrengthIndicatorPage.qml create mode 100644 src/StatusQ/Controls/StatusPasswordStrengthIndicator.qml create mode 100644 src/StatusQ/Controls/StatusProgressBar.qml 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