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