[Kimchi-devel] [PATCH] UI: Add messagebar widget

[Wen Wang]

1) Add sample for widget
2) Add messagebar as widget

Signed-off-by: Wen Wang <wenwang at linux.vnet.ibm.com>
---
 ui/css/theme-default/messagebar-flat.css   | 63 +++++++++++++++++++++++++++++
 ui/js/widgets/messagebar-flat.js           | 65 ++++++++++++++++++++++++++++++
 ui/js/widgets/samples/messagebar-flat.html | 29 +++++++++++++
 3 files changed, 157 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.html

diff --git a/ui/css/theme-default/messagebar-flat.css b/ui/css/theme-default/messagebar-flat.css
new file mode 100644
index 0000000..86605cd
--- /dev/null
+++ b/ui/css/theme-default/messagebar-flat.css
@@ -0,0 +1,63 @@
+/*
+ * 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 {
+    padding-left: 5px;
+    text-align: left;
+    vertical-align: 50%;
+}
+
+.messagebar .messageHead {
+    display: inline-block;
+    width: 5px;
+    height: 30px;
+}
+
+.messagebar-close {
+    padding-top: 6px;
+    padding-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..d72682d
--- /dev/null
+++ b/ui/js/widgets/messagebar-flat.js
@@ -0,0 +1,65 @@
+/*
+ * 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.
+ */
+
+ /*
+
+    $(".selector").messagebarFlat({
+        content: "This is a test",  //text that is going to be shown to user
+        color: "red"  //color that we pre-defined, current are "red", "yellow" and "green"
+    });
+
+ */
+(function($) {
+    $.widget("kimchi.messagebarFlat", {
+        options : {
+            content : null,
+            color : "red",
+        }, 
+
+        _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"));
+            setTimeout(function() {
+                that.destroy()
+            }, 3000);
+        },
+
+        _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.html b/ui/js/widgets/samples/messagebar-flat.html
new file mode 100644
index 0000000..1b1ce0b
--- /dev/null
+++ b/ui/js/widgets/samples/messagebar-flat.html
@@ -0,0 +1,29 @@
+<!--Sample code -->
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <title>Kimchi</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="../../../libs/themes/base/jquery-ui.min.css">
+        <link rel="stylesheet" href="../../../css/fontello/css/fontello.css">
+        <link rel="stylesheet" href="../../../css/fontello/css/animation.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"
+                });
+            });
+        </script>
+    </body>
+
+</html>
-- 
2.1.0