Even applying the icon library first I am not able to get the icon in the message bar. Tested on Firefox 35 On 16/01/2015 04:16, Wen Wang wrote: > V1 -> V2: > Add a parameter "dismissTime" that allow delay time as well as "never" > for the dismiss time. > > Signed-off-by: Wen Wang<wenwang(a)linux.vnet.ibm.com> > --- > 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 You can name it just as messagebar-flat.html as it is already in the /samples dir > 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 > + * > + *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 { > + 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 > + * > + *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. > + */ > + > +/* > +* 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. Is the amount of time in milliseconds?

> + }); > +*/ > + > +(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>

On 20/01/2015 03:55, Wen Wang wrote: > Hi Aline, > > 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? As discussed in the last scrum meeting, we will keep doing the sample files to run them locally (from the widgets/samples directory) > > Like this messagebar widget, I have tested in kimchi that it works fine: > > 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. > > P.S. one in-line comment below. > > On 1/19/2015 10:19 PM, Aline Manera wrote: >> >> Even applying the icon library first I am not able to get the icon >> in the message bar. >> >> >> >> Tested on Firefox 35 >> >> On 16/01/2015 04:16, Wen Wang wrote: >>> V1 -> V2: >>> Add a parameter "dismissTime" that allow delay time as well as "never" >>> for the dismiss time. >>> >>> Signed-off-by: Wen Wang&lt;wenwang(a)linux.vnet.ibm.com&gt; >>> --- >>> 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 >> >> You can name it just as messagebar-flat.html as it is already in the >> /samples dir >> >>> 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 >>> + * >>> + *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 { >>> + 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 >>> + * >>> + *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. >>> + */ >>> + >>> +/* >>> +* 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. >> >> Is the amount of time in milliseconds? > Yes, it's milliseconds. >> >>> + }); >>> +*/ >>> + >>> +(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> >> >