[Kimchi-devel] [PATCH V3] UI: Add widget messagebar with sample
Wen Wang
wenwang at linux.vnet.ibm.com
Wed Feb 11 02:10:00 UTC 2015
Sure, just use the widget to set the value again and you will get the
value set whenever you want.
On 2/10/2015 11:27 PM, Christy Perez wrote:
> This is a great addition. Can users easily set it if they want the time
> to be never?
>
> On 02/04/2015 05:10 AM, Wen Wang wrote:
>> V2 -> V3:
>> Rename the sample file and add the license.
>>
>> 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.html | 49 ++++++++++++++++++++++
>> 3 files changed, 184 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.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..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.
>> + });
>> +*/
>> +
>> +(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.html b/ui/js/widgets/samples/messagebar.html
>> new file mode 100644
>> index 0000000..b0aa600
>> --- /dev/null
>> +++ b/ui/js/widgets/samples/messagebar.html
>> @@ -0,0 +1,49 @@
>> +<!--
>> +/*
>> + * 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.
>> + */
>> +-->
>> +
>> +<!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>
>>
> _______________________________________________
> Kimchi-devel mailing list
> Kimchi-devel at ovirt.org
> http://lists.ovirt.org/mailman/listinfo/kimchi-devel
>
More information about the Kimchi-devel
mailing list