[Kimchi-devel] [PATCH] [Wok 2/3] Implement wok.notification widget

[Aline Manera]

On 04/04/2016 01:33 PM, Lucio Correia wrote:
> On 04-04-2016 13:10, Aline Manera wrote:
>>
>>
>> On 03/31/2016 06:02 PM, Lucio Correia wrote:
>>> This is an adapted version of wok.message that removes the
>>> the notification when user clicks on close button.
>>>
>>> Signed-off-by: Lucio Correia <luciojhc at linux.vnet.ibm.com>
>>> ---
>>>   ui/js/src/wok.notification.js | 36 
>>> ++++++++++++++++++++++++++++++++++++
>>>   1 file changed, 36 insertions(+)
>>>   create mode 100644 ui/js/src/wok.notification.js
>>>
>>> diff --git a/ui/js/src/wok.notification.js
>>> b/ui/js/src/wok.notification.js
>>> new file mode 100644
>>> index 0000000..b79f5f3
>>> --- /dev/null
>>> +++ b/ui/js/src/wok.notification.js
>>> @@ -0,0 +1,36 @@
>>> +/*
>>> + * Project Wok
>>> + *
>>> + * Copyright IBM Corp, 2015-2016
>>> + *
>>> + * Code derived from Project Kimchi
>>> + *
>>> + * 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.
>>> + */
>>> +
>>
>>> +wok.notification = function(msg, node) {
>>> +    "use strict";
>>> +    var container = node || $('#alert-fields');
>>> +    if ($(container).size() < 1) {
>>> +        container = $('<div
>>> id="alert-fields"/>').appendTo($('#alert-container'));
>>> +    }
>>> +    var message = '<div role="alert" class="alert alert-warning
>>> alert-dismissible fade in" style="display: none;">';
>>> +    message += '<button type="button" class="close"
>>> data-dismiss="alert" aria-label="Close"
>>> onclick="wok.removeNotification(&#39;' + msg.code + '&#39;)"><span
>>> aria-hidden="true"><i class="fa fa-times-circle"></i></span></button>';
>>> +    message += msg.message;
>>> +    message += '</div>';
>>> +    var $message = $(message);
>>> +    $(container).show();
>>> +    $(container).append($message);
>>> +    $message.alert();
>>> +    $message.fadeIn(100);
>>> +};
>>
>> This is very similar to what we have in wok.message.js
>> Why not use wok.message to do this work instead of duplicating code?
>>
>

> Wok.message would need some adaptations that would make it too complex:
> - wok.notification receives msg dict as parameter, not only msg text, 
> because we need to call wok.removeNotification on the code of msg.
> - wok.removeNotification must be called when user clicks on close 
> button, otherwise the notification will be erased only when wok reboots
>
> That's why I've chosen to create a notification specific widget.

OK. I saw the differences but we have enough time to do the right thing =)
We can also help to Samuel, Peter or Socorro on that if you are not 
comfortable with the UI code.