<html>
<head>
<meta content="text/html; charset=windows-1252"
http-equiv="Content-Type">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<br>
<div class="moz-cite-prefix">On 20/01/2015 03:55, Wen Wang wrote:<br>
</div>
<blockquote cite="mid:54BDEDE9.7000905@linux.vnet.ibm.com"
type="cite">
<meta content="text/html; charset=windows-1252"
http-equiv="Content-Type">
Hi Aline,<br>
<br>
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?<br>
</blockquote>
<br>
As discussed in the last scrum meeting, we will keep doing the
sample files to run them locally (from the widgets/samples
directory)<br>
<br>
<blockquote cite="mid:54BDEDE9.7000905@linux.vnet.ibm.com"
type="cite"> <br>
Like this messagebar widget, I have tested in kimchi that it works
fine:<br>
<img src="cid:part1.07060700.05060101@linux.vnet.ibm.com" alt=""><br>
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.<br>
<br>
P.S. one in-line comment below.<br>
<br>
<div class="moz-cite-prefix">On 1/19/2015 10:19 PM, Aline Manera
wrote:<br>
</div>
<blockquote cite="mid:54BD126C.1070804@linux.vnet.ibm.com"
type="cite">
<meta content="text/html; charset=windows-1252"
http-equiv="Content-Type">
<br>
Even applying the icon library first I am not able to get the
icon in the message bar.<br>
<br>
<img src="cid:part2.03040302.00070203@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 moz-do-not-send="true" 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 moz-do-not-send="true" 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 moz-do-not-send="true" 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>
</blockquote>
Yes, it's milliseconds.<br>
<blockquote cite="mid:54BD126C.1070804@linux.vnet.ibm.com"
type="cite"> <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>
</blockquote>
<br>
</blockquote>
<br>
</body>
</html>