Finish NotifyBanner

Added optional parameters to NotifyBanner
Created NotifyBanner cocumentation
This commit is contained in:
seiichiro 2014-02-23 10:24:26 +01:00
parent b83fa71964
commit cb00680f6c
3 changed files with 86 additions and 6 deletions

View file

@ -37,10 +37,19 @@ MouseArea {
visible: showBanner visible: showBanner
property bool showBanner: false property bool showBanner: false
property color bgColor: Theme.secondaryHighlightColor
property color fgColor: Theme.primaryColor
function show(text, time) { function show(text, params) {
// Do nothing if no text was given
if (text === undefined) return false;
// Set values from parameters
notifyText.text = text; notifyText.text = text;
timeout.interval = time; timeout.interval = (params !== undefined && "time" in params && params.time !== undefined) ? params.time : 3000;
bgColor = (params !== undefined && params.bgColor !== undefined) ? params.bgColor : Theme.secondaryHighlightColor
fgColor = (params !== undefined && params.fgColor !== undefined) ? params.fgColor : Theme.primaryColor
showBanner = true; showBanner = true;
timeout.start(); timeout.start();
} }
@ -49,7 +58,6 @@ MouseArea {
id: timeout id: timeout
interval: 3000 interval: 3000
onTriggered: { onTriggered: {
interval = 3000
showBanner = false showBanner = false
} }
} }
@ -57,7 +65,7 @@ MouseArea {
Rectangle { Rectangle {
id: banner id: banner
anchors.fill: parent anchors.fill: parent
color: Theme.secondaryHighlightColor color: bgColor
Text { Text {
id: notifyText id: notifyText
@ -68,7 +76,7 @@ MouseArea {
font.pixelSize: Theme.fontSizeSmall font.pixelSize: Theme.fontSizeSmall
color: Theme.primaryColor color: fgColor
wrapMode: Text.Wrap wrapMode: Text.Wrap
elide: Text.ElideRight elide: Text.ElideRight
maximumLineCount: 3 maximumLineCount: 3
@ -78,6 +86,5 @@ MouseArea {
onClicked: { onClicked: {
showBanner = false showBanner = false
timeout.stop() timeout.stop()
timeout.interval = 3000
} }
} }

View file

@ -0,0 +1,73 @@
# NotifyBanner
## General
The NotifyBanner component is used to show Messages like Errors to the User. It shows a banner at the top of the screen.
## Functions and Parameters
### NotifyBanner.show(text, params);
This operation shows the banner.
#### Parameters
##### text
This parameter is required. It should receive a string with the Message to be shown.
##### params
This parameter is optional. It receives a JS-Object with parameters for colors and timeout:
{
// Set the color of the Text
fgColor: "red",
// Set the color of the Background
bgcolor: "yellow",
// Set the timeout in ms
time: 4000
}
You can specify any combination of the three parameters. Every parameter not specified will use these default values:
* time: 3000
* fgColor: Theme.primaryColor
* bgColor: Theme.secondaryHighlightColor
## Usage
First include the NotifyBanner.qml in your project, then import it in the main QML-File. A Directory layout may look like this:
my-project
|--qml
|--componenets
| |-NotifyBanner.qml
|--main.qml
In main.qml import the components directory and create the global notify element:
import QtQuick 2.0
import Sailfish.Silica 1.0
import "pages"
import "components"
ApplicationWindow {
id: appWin
NotifyBanner { id: notify }
initialPage: Component { MainPage { } }
cover: Qt.resolvedUrl("cover/CoverPage.qml")
}
Now you can use it throughout your project like this:
// Basic usage with default values
notify.show("An Error occured");
// Advanced Options
notify.show("Here is a message", {time: 4000, fgColor: "black", bgColor: "yellow"});

View file