[Kimchi-devel] [PATCH V2] UI: Add widget messagebar with sample
Aline Manera
alinefm at linux.vnet.ibm.com
Mon Jan 19 14:19:24 UTC 2015
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?
> + });
> +*/
> +
> +(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/20150119/7cf79fee/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: aifjgjbd.
Type: image/jpeg
Size: 10100 bytes
Desc: not available
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20150119/7cf79fee/attachment.jpe>
More information about the Kimchi-devel
mailing list