Finish NotifyBanner

Added optional parameters to NotifyBanner
Created NotifyBanner cocumentation

NotifyBanner/components/NotifyBanner.qml

@@ -37,10 +37,19 @@ MouseArea {
   visible: showBanner
 
   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;
-    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;
     timeout.start();
   }
@@ -49,7 +58,6 @@ MouseArea {
     id: timeout
     interval: 3000
     onTriggered: {
-      interval = 3000
       showBanner = false
     }
   }
@@ -57,7 +65,7 @@ MouseArea {
   Rectangle {
     id: banner
     anchors.fill: parent
-    color: Theme.secondaryHighlightColor
+    color: bgColor
 
     Text {
       id: notifyText
@@ -68,7 +76,7 @@ MouseArea {
 
 
       font.pixelSize: Theme.fontSizeSmall
-      color: Theme.primaryColor
+      color: fgColor
       wrapMode: Text.Wrap
       elide: Text.ElideRight
       maximumLineCount: 3
@@ -78,6 +86,5 @@ MouseArea {
   onClicked: {
     showBanner = false
     timeout.stop()
-    timeout.interval = 3000
   }
 }

NotifyBanner/docs/NotifyBanner.md

@@ -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"});