That's something I can do. I think adding one parameter can make it
work.
"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.
(BTW: There might be something wrong with the demo of the close
button and it works fine in kimchi.)
There is the use of this widget in kimchi:
On 1/15/2015 8:26 PM, Aline Manera
wrote:
Thanks for the sample! It is really good to know how the widget
will work =)
About the widget itself: it looks very nice but I have a comment
to do.
We've already had some comments regarding the message appears just
for some seconds which can not be fully visible to the user.
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.
More comments below.
On 14/01/2015 07:51, Wen Wang wrote:
1) Add sample for widget
2) Add messagebar as widget
Signed-off-by: Wen Wang <wenwang@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"
+ });
+
+ */
As it is commented out I think we can remove it.
+(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>