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

[Aline Manera]

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 at 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>