[Kimchi-devel] [PATCH V2] UI: Add widget messagebar with sample
Wen Wang
wenwang at linux.vnet.ibm.com
Tue Jan 20 05:55:53 UTC 2015
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?
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/20150120/41543ae2/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: eihffidf.png
Type: image/png
Size: 144557 bytes
Desc: not available
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20150120/41543ae2/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/20150120/41543ae2/attachment.jpe>
More information about the Kimchi-devel
mailing list