<html>
<head>
<meta content="text/html; charset=windows-1252"
http-equiv="Content-Type">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<br>
Even applying the icon library first I am not able to get the icon
in the message bar.<br>
<br>
<img src="cid:part1.00040003.01080409@linux.vnet.ibm.com" alt=""><br>
<br>
Tested on Firefox 35<br>
<br>
<div class="moz-cite-prefix">On 16/01/2015 04:16, Wen Wang wrote:<br>
</div>
<blockquote
cite="mid:1421388988-30124-1-git-send-email-wenwang@linux.vnet.ibm.com"
type="cite">
<pre wrap="">V1 -> V2:
Add a parameter "dismissTime" that allow delay time as well as "never"
for the dismiss time.
Signed-off-by: Wen Wang <a class="moz-txt-link-rfc2396E" href="mailto:wenwang@linux.vnet.ibm.com"><wenwang@linux.vnet.ibm.com></a>
---
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</pre>
</blockquote>
<br>
You can name it just as messagebar-flat.html as it is already in the
/samples dir<br>
<br>
<blockquote
cite="mid:1421388988-30124-1-git-send-email-wenwang@linux.vnet.ibm.com"
type="cite">
<pre wrap="">
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
+ *
+ * <a class="moz-txt-link-freetext" href="http://www.apache.org/licenses/LICENSE-2.0">http://www.apache.org/licenses/LICENSE-2.0</a>
+ *
+ * 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
+ *
+ * <a class="moz-txt-link-freetext" href="http://www.apache.org/licenses/LICENSE-2.0">http://www.apache.org/licenses/LICENSE-2.0</a>
+ *
+ * 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.</pre>
</blockquote>
<br>
Is the amount of time in milliseconds?<br>
<br>
<blockquote
cite="mid:1421388988-30124-1-git-send-email-wenwang@linux.vnet.ibm.com"
type="cite">
<pre wrap="">
+ });
+*/
+
+(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>
</pre>
</blockquote>
<br>
</body>
</html>