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

Thu Jan 15 12:48:47 UTC 2015

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