This is a great addition. Can users easily set it if they want the time to be never? On 02/04/2015 05:10 AM, Wen Wang wrote: > V2 -> V3: > Rename the sample file and add the license. > > 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&gt; > --- > ui/css/theme-default/messagebar-flat.css | 64 ++++++++++++++++++++++++++++ > ui/js/widgets/messagebar-flat.js | 71 ++++++++++++++++++++++++++++++++ > ui/js/widgets/samples/messagebar.html | 49 ++++++++++++++++++++++ > 3 files changed, 184 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.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..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. > + }); > +*/ > + > +(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.html b/ui/js/widgets/samples/messagebar.html > new file mode 100644 > index 0000000..b0aa600 > --- /dev/null > +++ b/ui/js/widgets/samples/messagebar.html > @@ -0,0 +1,49 @@ > +<!-- > +/* > + * 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. > + */ > +--> > + > +<!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> > _______________________________________________ Kimchi-devel mailing list Kimchi-devel(a)ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel