[Kimchi-devel] [PATCH V2] UI: Add widget messagebar with sample
Wen Wang
wenwang at linux.vnet.ibm.com
Fri Jan 30 08:14:05 UTC 2015
Sample is included in this patch.
Best Regards
Wang Wen
On 1/27/2015 8:33 PM, Aline Manera wrote:
>
> On 20/01/2015 03:55, Wen Wang wrote:
>> Hi Aline,
>>
>> Since time is limited and after discussing with YuXin, we suggest we
>> create the widget without the samples. In the js files of the widget,
>> thoroughly usage of each widgets will be included and we can provide
>> the sample snapshots with the widgets working in our current kimchi
>> whit a reply of the patch mail if needed. I wonder is that is okay?
>
> As discussed in the last scrum meeting, we will keep doing the sample
> files to run them locally (from the widgets/samples directory)
>
>>
>> Like this messagebar widget, I have tested in kimchi that it works fine:
>>
>> with some reasons that it won't show properly within the sample
>> folder. I think working widgets have a higher priority than the
>> samples. We suggest providing the snapshots like this one in the
>> future widgets if needed instead of the samples.
>>
>> P.S. one in-line comment below.
>>
>> On 1/19/2015 10:19 PM, Aline Manera wrote:
>>>
>>> Even applying the icon library first I am not able to get the icon
>>> in the message bar.
>>>
>>>
>>>
>>> Tested on Firefox 35
>>>
>>> On 16/01/2015 04:16, Wen Wang wrote:
>>>> V1 -> V2:
>>>> Add a parameter "dismissTime" that allow delay time as well as "never"
>>>> for the dismiss time.
>>>>
>>>> Signed-off-by: Wen Wang<wenwang at linux.vnet.ibm.com>
>>>> ---
>>>> ui/css/theme-default/messagebar-flat.css | 64 ++++++++++++++++++++
>>>> ui/js/widgets/messagebar-flat.js | 71 +++++++++++++++++++++++
>>>> ui/js/widgets/samples/messagebar-flat-sample.html | 34 +++++++++++
>>>> 3 files changed, 169 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-sample.html
>>>
>>> You can name it just as messagebar-flat.html as it is already in the
>>> /samples dir
>>>
>>>> diff --git a/ui/css/theme-default/messagebar-flat.css b/ui/css/theme-default/messagebar-flat.css
>>>> new file mode 100644
>>>> index 0000000..d5efc8e
>>>> --- /dev/null
>>>> +++ b/ui/css/theme-default/messagebar-flat.css
>>>> @@ -0,0 +1,64 @@
>>>> +/*
>>>> + * 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 {
>>>> + text-align: left;
>>>> + vertical-align: 50%;
>>>> +}
>>>> +
>>>> +.messagebar .messageHead {
>>>> + display: inline-block;
>>>> + width: 5px;
>>>> + height: 30px;
>>>> +}
>>>> +
>>>> +.messagebar-close {
>>>> + line-height: 30px;
>>>> + vertical-align: middle;
>>>> + margin-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..203d194
>>>> --- /dev/null
>>>> +++ b/ui/js/widgets/messagebar-flat.js
>>>> @@ -0,0 +1,71 @@
>>>> +/*
>>>> + * 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.
>>>> + */
>>>> +
>>>> +/*
>>>> +* Usage:
>>>> + $(selector).messagebarFlat({
>>>> + content: "Test", //message you want to show in the messagebar
>>>> + color: "red", //Three color supported: "red", "yellow" and "green",
>>>> + dismissTime: 3000 //when set to "never", the messagebar will never disappear.
>>>> + // Or setting it to numbers for the dismiss time you want to delay.
>>>
>>> Is the amount of time in milliseconds?
>> Yes, it's milliseconds.
>>>
>>>> + });
>>>> +*/
>>>> +
>>>> +(function($) {
>>>> + $.widget("kimchi.messagebarFlat", {
>>>> + options : {
>>>> + content : null,
>>>> + color : "red",
>>>> + dismissTime: 3000
>>>> + },
>>>> +
>>>> + _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"));
>>>> + var dismissDelay = this.options.dismissTime;
>>>> + if (dismissDelay != "never") {
>>>> + setTimeout(function() {
>>>> + that.destroy()
>>>> + }, dismissDelay);
>>>> + }
>>>> + },
>>>> +
>>>> + _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-sample.html b/ui/js/widgets/samples/messagebar-flat-sample.html
>>>> new file mode 100644
>>>> index 0000000..5ab4c73
>>>> --- /dev/null
>>>> +++ b/ui/js/widgets/samples/messagebar-flat-sample.html
>>>> @@ -0,0 +1,34 @@
>>>> +<!-- For the record if the icon didn't show properly, please copy the whole folder:
>>>> +ui/css/fontello/ under current directory and set the link of the css related
>>>> +to fontello to proper value. -->
>>>> +
>>>> +<!--Sample code -->
>>>> +<!DOCTYPE html>
>>>> +<html>
>>>> + <head>
>>>> + <meta charset="UTF-8">
>>>> + <title>Sample of messagebar</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="../../../css/fontello/css/fontello.css">
>>>> + <link rel="stylesheet" href="../../../css/fontello/css/animation.css">
>>>> + <link rel="stylesheet" href="../../../libs/themes/base/jquery-ui.min.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",
>>>> + dismissTime: 1000
>>>> + });
>>>> + });
>>>> + </script>
>>>> + </body>
>>>> +
>>>> +</html>
>>>
>>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20150130/6b95e874/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: not available
Type: image/png
Size: 144557 bytes
Desc: not available
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20150130/6b95e874/attachment.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: not available
Type: image/jpeg
Size: 10100 bytes
Desc: not available
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20150130/6b95e874/attachment.jpe>
More information about the Kimchi-devel
mailing list