status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
This commit is contained in:
Noelia 2022-01-18 19:06:00 +01:00 committed by Michał Cieślak
parent bd41957c80
commit d1525b0b53
12 changed files with 157 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
ui/StatusQ/sandbox/controls/Controls.qml
View File

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

5
ui/StatusQ/sandbox/main.qml
View File

@ -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"

38
ui/StatusQ/sandbox/pages/StatusPasswordStrengthIndicatorPage.qml Normal file
View File

@ -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
}
}

5
ui/StatusQ/sandbox/qml.qrc
View File

@ -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>
@ -33,4 +32,4 @@
<file>demoapp/data/Models.qml</file>
<file>demoapp/data/qmldir</file>
</qresource>
</RCC>
</RCC>

54
ui/StatusQ/src/StatusQ/Controls/StatusPasswordStrengthIndicator.qml Normal file
View File

@ -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}
}
]
}

42
ui/StatusQ/src/StatusQ/Controls/StatusProgressBar.qml Normal file
View File

@ -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
}
}
}
}

2
ui/StatusQ/src/StatusQ/Controls/qmldir
View File

@ -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

2
ui/StatusQ/src/StatusQ/Core/Theme/StatusColors.qml
View File

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

1
ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml
View File

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

1
ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml
View File

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

1
ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml
View File

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

2
ui/StatusQ/statusq.qrc
View File

@ -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>