Sample is included in this patch.

Best Regards

Wang Wen

On 1/27/2015 8:33 PM, Aline Manera wrote:

On 20/01/2015 03:55, Wen Wang wrote:
Hi Aline,

Since time is limited and after discussing with YuXin, we suggest we create the widget without the samples. In the js files of the widget, thoroughly usage of each widgets will be included and we can provide the sample snapshots with the widgets working in our current kimchi whit a reply of the patch mail if needed. I wonder is that is okay?

As discussed in the last scrum meeting, we will keep doing the sample files to run them locally (from the widgets/samples directory)


Like this messagebar widget, I have tested in kimchi that it works fine:

with some reasons that it won't show properly within the sample folder. I think working widgets have a higher priority than the samples. We suggest providing the snapshots like this one in the future widgets if needed instead of the samples.

P.S. one in-line comment below.

On 1/19/2015 10:19 PM, Aline Manera wrote:

Even applying the icon library first I am not able to get the icon in the message bar.



Tested on Firefox 35

On 16/01/2015 04:16, Wen Wang wrote:
V1 -> V2:
Add a parameter "dismissTime" that allow delay time as well as "never"
for the dismiss time.

Signed-off-by: Wen Wang <wenwang@linux.vnet.ibm.com>
---
 ui/css/theme-default/messagebar-flat.css          | 64 ++++++++++++++++++++
 ui/js/widgets/messagebar-flat.js                  | 71 +++++++++++++++++++++++
 ui/js/widgets/samples/messagebar-flat-sample.html | 34 +++++++++++
 3 files changed, 169 insertions(+)
 create mode 100644 ui/css/theme-default/messagebar-flat.css
 create mode 100644 ui/js/widgets/messagebar-flat.js
 create mode 100644 ui/js/widgets/samples/messagebar-flat-sample.html

You can name it just as messagebar-flat.html as it is already in the /samples dir

diff --git a/ui/css/theme-default/messagebar-flat.css b/ui/css/theme-default/messagebar-flat.css
new file mode 100644
index 0000000..d5efc8e
--- /dev/null
+++ b/ui/css/theme-default/messagebar-flat.css
@@ -0,0 +1,64 @@
+/*
+ * Project Kimchi
+ *
+ * Copyright IBM, Corp. 2015
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.messagebar {
+    height: 30px;
+}
+
+.messagebar .messagebar-text {
+    text-align: left;
+    vertical-align: 50%;
+}
+
+.messagebar .messageHead {
+    display: inline-block;
+    width: 5px;
+    height: 30px;
+}
+
+.messagebar-close {
+    line-height: 30px;
+    vertical-align: middle;
+    margin-right: 10px;
+    cursor: pointer;
+    float: right;
+}
+
+.green {
+    background-color: #DAE6CB;
+}
+
+.dark-green {
+    background-color: #89C53A;
+}
+
+.yellow {
+    background-color: #F1E3C2;
+}
+
+.dark-yellow {
+    background-color: #FDB60D;
+}
+
+.red {
+    background-color: #EAC3C7;
+}
+
+.dark-red {
+    background-color: #D81227;
+}
\ No newline at end of file
diff --git a/ui/js/widgets/messagebar-flat.js b/ui/js/widgets/messagebar-flat.js
new file mode 100644
index 0000000..203d194
--- /dev/null
+++ b/ui/js/widgets/messagebar-flat.js
@@ -0,0 +1,71 @@
+/*
+ * Project Kimchi
+ *
+ * Copyright IBM, Corp. 2015
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+* Usage:
+        $(selector).messagebarFlat({
+            content: "Test",  //message you want to show in the messagebar
+            color: "red",  //Three color supported: "red", "yellow" and "green",
+            dismissTime: 3000  //when set to "never", the messagebar will never disappear.
+                               // Or setting it to numbers for the dismiss time you want to delay.

Is the amount of time in milliseconds?
Yes, it's milliseconds.

+        });
+*/
+
+(function($) {
+    $.widget("kimchi.messagebarFlat", {
+        options : {
+            content : null,
+            color : "red",
+            dismissTime: 3000
+        },
+
+        _create: function() {
+            var now = this._getTime();
+            var that = this;
+            $("<div class='messagebar'><span class='messageHead'></span>" +
+                "<span class='messagebar-text'> " + this.options.content +":     " + now + "</span></div>")
+                .addClass(this.options.color)
+                .appendTo(that.element);
+            $(".messageHead").addClass("dark-" + this.options.color);
+            $("<span class='messagebar-close icon-cancel-circled'></span>").on("click", function() {
+                that.destroy();
+            }).appendTo($(".messagebar"));
+            var dismissDelay = this.options.dismissTime;
+            if (dismissDelay != "never") {
+                setTimeout(function() {
+                    that.destroy()
+                }, dismissDelay);
+            }
+        },
+
+        _getTime: function() {
+            var CT = new Date();
+            var currentDate = CT.getDate() + "/" + CT.getMonth()+1 + "/" +CT.getFullYear();
+            var currentTime = CT.getHours() + ":" + CT.getMinutes() + ":" + CT.getSeconds();
+            var now = currentDate + "       " + currentTime;
+            return now;
+        },
+
+        destroy: function() {
+            var that = this;
+            that.element.fadeOut("normal", function() {
+                that.element.remove();
+            });
+        }
+    });
+})(jQuery);
\ No newline at end of file
diff --git a/ui/js/widgets/samples/messagebar-flat-sample.html b/ui/js/widgets/samples/messagebar-flat-sample.html
new file mode 100644
index 0000000..5ab4c73
--- /dev/null
+++ b/ui/js/widgets/samples/messagebar-flat-sample.html
@@ -0,0 +1,34 @@
+<!-- For the record if the icon didn't show properly, please copy the whole folder:
+ui/css/fontello/ under current directory and set the link of the css related
+to fontello to proper value. -->
+
+<!--Sample code -->
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <title>Sample of messagebar</title>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+        <link rel="stylesheet" href="../../../css/fontello/css/fontello.css">
+        <link rel="stylesheet" href="../../../css/fontello/css/animation.css">
+        <link rel="stylesheet" href="../../../libs/themes/base/jquery-ui.min.css">
+        <link rel="stylesheet" href="../../../css/theme-default/messagebar-flat.css">
+        <script src="../../../libs/jquery-1.10.0.min.js"></script>
+        <script src="../../../libs/jquery-ui.min.js"></script>
+        <script src="../messagebar-flat.js"></script>
+    </head>
+    <body>
+        <div class="message"></div>
+        <script>
+            $(document).ready(function() {
+                $(".message").messagebarFlat({
+                    content: "This is a test",
+                    color: "red",
+                    dismissTime: 1000
+                });
+            });
+        </script>
+    </body>
+
+</html>