<html>
<head>
<meta content="text/html; charset=windows-1252"
http-equiv="Content-Type">
</head>
<body bgcolor="#FFFFFF" text="#000000">
That's something I can do. I think adding one parameter can make it
work. <br>
<br>
"dismissTime" which will allow three kinds of values: 1)a number
means the time that the message dismiss(3 seconds by default).
2)"never" that allows to set it never disappear unless user click
the "close" button.<br>
(BTW: There might be something wrong with the demo of the close
button and it works fine in kimchi.)<br>
<br>
There is the use of this widget in kimchi:<br>
<img src="cid:part1.01040500.05000202@linux.vnet.ibm.com" alt=""><br>
<div class="moz-cite-prefix">On 1/15/2015 8:26 PM, Aline Manera
wrote:<br>
</div>
<blockquote cite="mid:54B7B1F4.8090907@linux.vnet.ibm.com"
type="cite">
<br>
Thanks for the sample! It is really good to know how the widget
will work =)
<br>
<br>
About the widget itself: it looks very nice but I have a comment
to do.
<br>
We've already had some comments regarding the message appears just
for some seconds which can not be fully visible to the user.
<br>
So I'd like to know if is possible to add a dismiss icon for the
notification and only hide it when the user select to dismiss.
Otherwise, the message will be always there.
<br>
<br>
More comments below.
<br>
<br>
On 14/01/2015 07:51, Wen Wang wrote:
<br>
<blockquote type="cite">1) Add sample for widget
<br>
2) Add messagebar as widget
<br>
<br>
Signed-off-by: Wen Wang <a class="moz-txt-link-rfc2396E" href="mailto:wenwang@linux.vnet.ibm.com"><wenwang@linux.vnet.ibm.com></a>
<br>
---
<br>
ui/css/theme-default/messagebar-flat.css | 63
+++++++++++++++++++++++++++++
<br>
ui/js/widgets/messagebar-flat.js | 65
++++++++++++++++++++++++++++++
<br>
ui/js/widgets/samples/messagebar-flat.html | 29 +++++++++++++
<br>
3 files changed, 157 insertions(+)
<br>
create mode 100644 ui/css/theme-default/messagebar-flat.css
<br>
create mode 100644 ui/js/widgets/messagebar-flat.js
<br>
create mode 100644 ui/js/widgets/samples/messagebar-flat.html
<br>
<br>
diff --git a/ui/css/theme-default/messagebar-flat.css
b/ui/css/theme-default/messagebar-flat.css
<br>
new file mode 100644
<br>
index 0000000..86605cd
<br>
--- /dev/null
<br>
+++ b/ui/css/theme-default/messagebar-flat.css
<br>
@@ -0,0 +1,63 @@
<br>
+/*
<br>
+ * Project Kimchi
<br>
+ *
<br>
+ * Copyright IBM, Corp. 2015
<br>
+ *
<br>
+ * Licensed under the Apache License, Version 2.0 (the
"License");
<br>
+ * you may not use this file except in compliance with the
License.
<br>
+ * You may obtain a copy of the License at
<br>
+ *
<br>
+ * <a class="moz-txt-link-freetext" href="http://www.apache.org/licenses/LICENSE-2.0">http://www.apache.org/licenses/LICENSE-2.0</a>
<br>
+ *
<br>
+ * Unless required by applicable law or agreed to in writing,
software
<br>
+ * distributed under the License is distributed on an "AS IS"
BASIS,
<br>
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
or implied.
<br>
+ * See the License for the specific language governing
permissions and
<br>
+ * limitations under the License.
<br>
+ */
<br>
+.messagebar {
<br>
+ height: 30px;
<br>
+}
<br>
+
<br>
+.messagebar .messagebar-text {
<br>
+ padding-left: 5px;
<br>
+ text-align: left;
<br>
+ vertical-align: 50%;
<br>
+}
<br>
+
<br>
+.messagebar .messageHead {
<br>
+ display: inline-block;
<br>
+ width: 5px;
<br>
+ height: 30px;
<br>
+}
<br>
+
<br>
+.messagebar-close {
<br>
+ padding-top: 6px;
<br>
+ padding-right: 10px;
<br>
+ cursor: pointer;
<br>
+ float: right;
<br>
+}
<br>
+
<br>
+.green {
<br>
+ background-color: #DAE6CB;
<br>
+}
<br>
+
<br>
+.dark-green {
<br>
+ background-color: #89C53A;
<br>
+}
<br>
+
<br>
+.yellow {
<br>
+ background-color: #F1E3C2;
<br>
+}
<br>
+
<br>
+.dark-yellow {
<br>
+ background-color: #FDB60D;
<br>
+}
<br>
+
<br>
+.red {
<br>
+ background-color: #EAC3C7;
<br>
+}
<br>
+
<br>
+.dark-red {
<br>
+ background-color: #D81227;
<br>
+}
<br>
\ No newline at end of file
<br>
diff --git a/ui/js/widgets/messagebar-flat.js
b/ui/js/widgets/messagebar-flat.js
<br>
new file mode 100644
<br>
index 0000000..d72682d
<br>
--- /dev/null
<br>
+++ b/ui/js/widgets/messagebar-flat.js
<br>
@@ -0,0 +1,65 @@
<br>
+/*
<br>
+ * Project Kimchi
<br>
+ *
<br>
+ * Copyright IBM, Corp. 2015
<br>
+ *
<br>
+ * Licensed under the Apache License, Version 2.0 (the
"License");
<br>
+ * you may not use this file except in compliance with the
License.
<br>
+ * You may obtain a copy of the License at
<br>
+ *
<br>
+ * <a class="moz-txt-link-freetext" href="http://www.apache.org/licenses/LICENSE-2.0">http://www.apache.org/licenses/LICENSE-2.0</a>
<br>
+ *
<br>
+ * Unless required by applicable law or agreed to in writing,
software
<br>
+ * distributed under the License is distributed on an "AS IS"
BASIS,
<br>
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
or implied.
<br>
+ * See the License for the specific language governing
permissions and
<br>
+ * limitations under the License.
<br>
+ */
<br>
+
<br>
</blockquote>
<br>
<blockquote type="cite">+ /*
<br>
+
<br>
+ $(".selector").messagebarFlat({
<br>
+ content: "This is a test", //text that is going to be
shown to user
<br>
+ color: "red" //color that we pre-defined, current are
"red", "yellow" and "green"
<br>
+ });
<br>
+
<br>
+ */
<br>
</blockquote>
<br>
As it is commented out I think we can remove it.
<br>
<br>
<blockquote type="cite">+(function($) {
<br>
+ $.widget("kimchi.messagebarFlat", {
<br>
+ options : {
<br>
+ content : null,
<br>
+ color : "red",
<br>
+ },
<br>
+
<br>
+ _create: function() {
<br>
+ var now = this._getTime();
<br>
+ var that = this;
<br>
+ $("<div class='messagebar'><span
class='messageHead'></span>" +
<br>
+ "<span class='messagebar-text'> " +
this.options.content +": " + now +
"</span></div>")
<br>
+ .addClass(this.options.color)
<br>
+ .appendTo(that.element);
<br>
+ $(".messageHead").addClass("dark-" +
this.options.color);
<br>
+ $("<span class='messagebar-close
icon-cancel-circled'></span>").on("click", function() {
<br>
+ that.destroy();
<br>
+ }).appendTo($(".messagebar"));
<br>
+ setTimeout(function() {
<br>
+ that.destroy()
<br>
+ }, 3000);
<br>
+ },
<br>
+
<br>
+ _getTime: function() {
<br>
+ var CT = new Date();
<br>
+ var currentDate = CT.getDate() + "/" +
CT.getMonth()+1 + "/" +CT.getFullYear();
<br>
+ var currentTime = CT.getHours() + ":" +
CT.getMinutes() + ":" + CT.getSeconds();
<br>
+ var now = currentDate + " " + currentTime;
<br>
+ return now;
<br>
+ },
<br>
+
<br>
+ destroy: function() {
<br>
+ var that = this;
<br>
+ that.element.fadeOut("normal", function() {
<br>
+ that.element.remove();
<br>
+ });
<br>
+ }
<br>
+ });
<br>
+})(jQuery);
<br>
\ No newline at end of file
<br>
diff --git a/ui/js/widgets/samples/messagebar-flat.html
b/ui/js/widgets/samples/messagebar-flat.html
<br>
new file mode 100644
<br>
index 0000000..1b1ce0b
<br>
--- /dev/null
<br>
+++ b/ui/js/widgets/samples/messagebar-flat.html
<br>
@@ -0,0 +1,29 @@
<br>
+<!--Sample code -->
<br>
+<!DOCTYPE html>
<br>
+<html>
<br>
+ <head>
<br>
+ <meta charset="UTF-8">
<br>
+ <title>Kimchi</title>
<br>
+ <meta http-equiv="X-UA-Compatible"
content="IE=edge"/>
<br>
+ <meta name="viewport" content="width=device-width,
initial-scale=1.0, user-scalable=yes" />
<br>
+ <link rel="stylesheet"
href="../../../libs/themes/base/jquery-ui.min.css">
<br>
+ <link rel="stylesheet"
href="../../../css/fontello/css/fontello.css">
<br>
+ <link rel="stylesheet"
href="../../../css/fontello/css/animation.css">
<br>
+ <link rel="stylesheet"
href="../../../css/theme-default/messagebar-flat.css">
<br>
+ <script
src="../../../libs/jquery-1.10.0.min.js"></script>
<br>
+ <script
src="../../../libs/jquery-ui.min.js"></script>
<br>
+ <script
src="../messagebar-flat.js"></script>
<br>
+ </head>
<br>
+ <body>
<br>
+ <div class="message"></div>
<br>
+ <script>
<br>
+ $(document).ready(function() {
<br>
+ $(".message").messagebarFlat({
<br>
+ content: "This is a test",
<br>
+ color: "red"
<br>
+ });
<br>
+ });
<br>
+ </script>
<br>
+ </body>
<br>
+
<br>
+</html>
<br>
</blockquote>
<br>
</blockquote>
<br>
</body>
</html>