[Kimchi-devel] [PATCH] UI: Add messagebar widget
Wen Wang
wenwang at linux.vnet.ibm.com
Fri Jan 16 02:41:05 UTC 2015
That's something I can do. I think adding one parameter can make it work.
"dismissTime" which will allow three kinds of values: 1)a number means
the time that the message dismiss(3 seconds by default). 2)"never" that
allows to set it never disappear unless user click the "close" button.
(BTW: There might be something wrong with the demo of the close button
and it works fine in kimchi.)
There is the use of this widget in kimchi:
On 1/15/2015 8:26 PM, Aline Manera wrote:
>
> Thanks for the sample! It is really good to know how the widget will
> work =)
>
> About the widget itself: it looks very nice but I have a comment to do.
> We've already had some comments regarding the message appears just for
> some seconds which can not be fully visible to the user.
> So I'd like to know if is possible to add a dismiss icon for the
> notification and only hide it when the user select to dismiss.
> Otherwise, the message will be always there.
>
> More comments below.
>
> On 14/01/2015 07:51, Wen Wang wrote:
>> 1) Add sample for widget
>> 2) Add messagebar as widget
>>
>> Signed-off-by: Wen Wang <wenwang at linux.vnet.ibm.com>
>> ---
>> ui/css/theme-default/messagebar-flat.css | 63
>> +++++++++++++++++++++++++++++
>> ui/js/widgets/messagebar-flat.js | 65
>> ++++++++++++++++++++++++++++++
>> ui/js/widgets/samples/messagebar-flat.html | 29 +++++++++++++
>> 3 files changed, 157 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.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..86605cd
>> --- /dev/null
>> +++ b/ui/css/theme-default/messagebar-flat.css
>> @@ -0,0 +1,63 @@
>> +/*
>> + * 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 {
>> + padding-left: 5px;
>> + text-align: left;
>> + vertical-align: 50%;
>> +}
>> +
>> +.messagebar .messageHead {
>> + display: inline-block;
>> + width: 5px;
>> + height: 30px;
>> +}
>> +
>> +.messagebar-close {
>> + padding-top: 6px;
>> + padding-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..d72682d
>> --- /dev/null
>> +++ b/ui/js/widgets/messagebar-flat.js
>> @@ -0,0 +1,65 @@
>> +/*
>> + * 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.
>> + */
>> +
>
>> + /*
>> +
>> + $(".selector").messagebarFlat({
>> + content: "This is a test", //text that is going to be shown
>> to user
>> + color: "red" //color that we pre-defined, current are
>> "red", "yellow" and "green"
>> + });
>> +
>> + */
>
> As it is commented out I think we can remove it.
>
>> +(function($) {
>> + $.widget("kimchi.messagebarFlat", {
>> + options : {
>> + content : null,
>> + color : "red",
>> + },
>> +
>> + _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"));
>> + setTimeout(function() {
>> + that.destroy()
>> + }, 3000);
>> + },
>> +
>> + _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.html
>> b/ui/js/widgets/samples/messagebar-flat.html
>> new file mode 100644
>> index 0000000..1b1ce0b
>> --- /dev/null
>> +++ b/ui/js/widgets/samples/messagebar-flat.html
>> @@ -0,0 +1,29 @@
>> +<!--Sample code -->
>> +<!DOCTYPE html>
>> +<html>
>> + <head>
>> + <meta charset="UTF-8">
>> + <title>Kimchi</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="../../../libs/themes/base/jquery-ui.min.css">
>> + <link rel="stylesheet"
>> href="../../../css/fontello/css/fontello.css">
>> + <link rel="stylesheet"
>> href="../../../css/fontello/css/animation.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"
>> + });
>> + });
>> + </script>
>> + </body>
>> +
>> +</html>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20150116/4d0e110b/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: ggdifddf.png
Type: image/png
Size: 83649 bytes
Desc: not available
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20150116/4d0e110b/attachment.png>
More information about the Kimchi-devel
mailing list