Re: [Kimchi-devel] [PATCH] UI: Add messagebar widget

Sorry to mention that we have to apply YuXin's patch of icons to see the close button: [Kimchi-devel] [PATCH] UI: Add Web Font Icon Library New Kimchi UI is based on new icons of fontello and all we need is included in that patch

Best Regards. 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(a)linux.vnet.ibm.com&gt; >> --- >> 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> >