status-desktop/libs/StatusQ/qml/Status/Controls/StatusBanner.qml

139 lines
4.0 KiB
QML
Raw Normal View History

import QtQuick
import Status.Core
import Status.Core.Theme
/*!
\qmltype StatusBanner
\inherits Column
\inqmlmodule StatusQ.Controls
\since StatusQ.Controls 0.1
\brief It displays a banner with a custom text, size and type. Inherits \l{https://doc.qt.io/qt-5/qml-qtquick-column.html}{Column}.
The \c StatusBanner displays a banner with a custom text, size and type (Info, Danger, Success or Warning).
Example of how the control looks like:
\image status_banner.png
Example of how to use it:
\qml
StatusBanner {
width: parent.width
visible: popup.userIsBlocked
type: StatusBanner.Type.Danger
statusText: qsTr("Blocked")
}
\endqml
For a list of components available see StatusQ.
*/
Column {
id: statusBanner
/*!
\qmlproperty string StatusBanner::statusText
This property holds the text the banner will display.
*/
property string statusText
/*!
\qmlproperty string StatusBanner::type
This property holds type of banner. Possible values are:
\qml
enum Type {
Info, // 0
Danger, // 1
Success, // 2
Warning // 3
}
\endqml
*/
property int type: StatusBanner.Type.Info
/*!
\qmlproperty string StatusBanner::textPixels
This property holds the pixels size of the text inside the banner.
*/
property int textPixels: 15
/*!
\qmlproperty string StatusBanner::statusBannerHeight
This property holds the height of the banner rectangle.
*/
property int statusBannerHeight: 38
// "private" properties
QtObject {
id: d
property color backgroundColor
property color bordersColor
property color fontColor
}
// TODO: move it to C++
enum Type {
Info, // 0
Danger, // 1
Success, // 2
Warning // 3
}
// Component definition
Rectangle {
id: topDiv
color: d.bordersColor
height: 1
width: parent.width
}
Rectangle {
id: box
width: parent.width
height: statusBanner.statusBannerHeight
color: d.backgroundColor
StatusBaseText {
id: statusTxt
anchors.fill: parent
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
font.pixelSize: statusBanner.textPixels
text: statusBanner.statusText
color: d.fontColor
}
}
Rectangle {
id: bottomDiv
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}
}
]
}