[PATCH] UI: Add messagebar widget
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
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@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" + }); + + */
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>
That's something I can do. I think adding one parameter can make it work. "dismissTime" which will allow three kinds of values: 1)a number means the time that the message dismiss(3 seconds by default). 2)"never" that allows to set it never disappear unless user click the "close" button. (BTW: There might be something wrong with the demo of the close button and it works fine in kimchi.) There is the use of this widget in kimchi: 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@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" + }); + + */
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>
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@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" + }); + + */
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>
On 16/01/2015 01:17, Wen Wang wrote:
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
Thanks for mention that. I will apply the icon library patch first.
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@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" + }); + + */
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>
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@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
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); + },
Also maybe put the date and time in the begging is more common [15/01/2014 08:00:00AM] Message here.
+ + _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>
participants (2)
-
Aline Manera -
Wen Wang