[Kimchi-devel] [PATCH V2] UI: Add widget messagebar with sample
Aline Manera
alinefm at linux.vnet.ibm.com
Tue Jan 27 12:33:23 UTC 2015
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/20150127/f8510e3b/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/20150127/f8510e3b/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/20150127/f8510e3b/attachment.jpe>
More information about the Kimchi-devel
mailing list