9:41 p.m.
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(a)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>
