From cb00680f6c80f34cc5cf3d65c05bcfe12c5b01ad Mon Sep 17 00:00:00 2001
From: Stefan Brand <seiichiro@seiichiro0185.org>
Date: Sun, 23 Feb 2014 10:24:26 +0100
Subject: [PATCH] Finish NotifyBanner

Added optional parameters to NotifyBanner
Created NotifyBanner cocumentation
---
 .../components}/NotifyBanner.qml              | 19 +++--
 NotifyBanner/docs/NotifyBanner.md             | 73 +++++++++++++++++++
 docs/NotifyBanner.md                          |  0
 3 files changed, 86 insertions(+), 6 deletions(-)
 rename {components => NotifyBanner/components}/NotifyBanner.qml (79%)
 create mode 100644 NotifyBanner/docs/NotifyBanner.md
 delete mode 100644 docs/NotifyBanner.md

diff --git a/components/NotifyBanner.qml b/NotifyBanner/components/NotifyBanner.qml
similarity index 79%
rename from components/NotifyBanner.qml
rename to NotifyBanner/components/NotifyBanner.qml
index 4f15db2..8143e0b 100644
--- a/components/NotifyBanner.qml
+++ b/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
   }
 }
diff --git a/NotifyBanner/docs/NotifyBanner.md b/NotifyBanner/docs/NotifyBanner.md
new file mode 100644
index 0000000..6df500a
--- /dev/null
+++ b/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"});
diff --git a/docs/NotifyBanner.md b/docs/NotifyBanner.md
deleted file mode 100644
index e69de29..0000000