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

[Aline Manera]

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