status-im
/
status-qml
mirror of
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(StatusBanner): introduce type variants for different banner styles 

* feat(sandbox/controls): Added StatusBanner component in controls view

In order to test StatusBanner.qml ui component it has been added into the Sandbox app as another Control.

* chore(sandbox/controls): Refactor `StatusBanner' component

Create enum to allow selecting StatusBanner type (`Info`, `Danger`, `Success`, `Warning`).

Add new success color with some opacity in ThemePalette.

* chore(Controls/StatusBanner): Use states instead of function

To have a cleaner code, it has been added states to manage type property changes.

* chore(Controls/StatusBanner): Remove unnecessary stuff

Remove unnecessary name property.
Remove successColor3 property.
This commit is contained in:
Noelia 2022-01-14 20:18:57 +01:00 committed by GitHub
parent 14ab4ce52d
commit 35d12f444d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 59 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
sandbox/Controls.qml
View File

@ -188,4 +188,12 @@ GridLayout {
to: 100
value: 40
}
StatusBanner {
id: banner
width: 360
topPadding: 20
type: StatusBanner.Type.Danger
statusText: "Banner"
}
}

60
src/StatusQ/Controls/StatusBanner.qml
View File

@ -1,31 +1,45 @@
import QtQuick 2.14
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
Column {
id: statusBanner
width: parent.width
property color backgroundColor
property color bordersColor
property color fontColor
property string statusText
property int type: StatusBanner.Type.Info
property int textPixels: 15
property int statusBannerHeight: 38
// "private" properties
QtObject {
id: d
property color backgroundColor
property color bordersColor
property color fontColor
}
enum Type {
Info, // 0
Danger, // 1
Success, // 2
Warning // 3
}
// Component definition
Rectangle {
id: topDiv
color: statusBanner.bordersColor
color: d.bordersColor
height: 1
width: parent.width
}
// Status banner content:
Rectangle {
id: statusBox
id: box
width: parent.width
height: statusBanner.statusBannerHeight
color: statusBanner.backgroundColor
color: d.backgroundColor
StatusBaseText {
id: statusTxt
@ -34,14 +48,42 @@ Column {
verticalAlignment: Text.AlignVCenter
font.pixelSize: statusBanner.textPixels
text: statusBanner.statusText
color: statusBanner.fontColor
color: d.fontColor
}
}
Rectangle {
id: bottomDiv
color: statusBanner.bordersColor
color: d.bordersColor
height: 1
width: parent.width
}
// Behavior
states: [
State {
when: statusBanner.type === StatusBanner.Type.Info
PropertyChanges { target: d; backgroundColor: Theme.palette.primaryColor3}
PropertyChanges { target: d; bordersColor: Theme.palette.primaryColor2}
PropertyChanges { target: d; fontColor: Theme.palette.primaryColor1}
},
State {
when: statusBanner.type === StatusBanner.Type.Danger
PropertyChanges { target: d; backgroundColor: Theme.palette.dangerColor3}
PropertyChanges { target: d; bordersColor: Theme.palette.dangerColor2}
PropertyChanges { target: d; fontColor: Theme.palette.dangerColor1}
},
State {
when: statusBanner.type === StatusBanner.Type.Success
PropertyChanges { target: d; backgroundColor: Theme.palette.successColor2}
PropertyChanges { target: d; bordersColor: Theme.palette.successColor2}
PropertyChanges { target: d; fontColor: Theme.palette.successColor1}
},
State {
when: statusBanner.type === StatusBanner.Type.Warning
PropertyChanges { target: d; backgroundColor: Theme.palette.pinColor3}
PropertyChanges { target: d; bordersColor: Theme.palette.pinColor2}
PropertyChanges { target: d; fontColor: Theme.palette.pinColor1}
}
]
}