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

[Wen Wang]

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