[Kimchi-devel] [PATCH] UI; Add widget of dialog

[Aline Manera]

Please, add a sample so we can test it.

On 20/01/2015 07:13, Wen Wang wrote:
> Signed-off-by: Wen Wang <wenwang at linux.vnet.ibm.com>
> ---
>   ui/css/theme-default/dialog-flat.css |  67 +++++++++++++++++++
>   ui/js/widgets/dialog-flat.js         | 120 +++++++++++++++++++++++++++++++++++
>   2 files changed, 187 insertions(+)
>   create mode 100644 ui/css/theme-default/dialog-flat.css
>   create mode 100644 ui/js/widgets/dialog-flat.js
>
> diff --git a/ui/css/theme-default/dialog-flat.css b/ui/css/theme-default/dialog-flat.css
> new file mode 100644
> index 0000000..fafe5b0
> --- /dev/null
> +++ b/ui/css/theme-default/dialog-flat.css
> @@ -0,0 +1,67 @@
> +/*
> +* 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.
> +*/
> +
> +.dialog-border-grey {
> +    background-clip: border-box;
> +    border: 6px solid rgba(170,170,170,0.3);
> +    position: absolute;
> +    left: 0;
> +    right: 0;
> +    top: 0;
> +    bottom: 0;
> +    margin: auto;
> +    border-radius: 5px;
> +}
> +
> +.dialog-container {
> +    border: 3px solid #999999;
> +    background: white;
> +}
> +
> +.dialog-container .dialog-title {
> +    height: 60px;
> +    padding: 20px 0 20px 20px;
> +    float: left;
> +}
> +
> +.dialog-container .dialog-body {
> +    position: relative;
> +}
> +
> +.dialog-container .dialog-footer {
> +    height: 50px;
> +    background-color: #008ABF;
> +}
> +
> +.dialog-container .dialog-footer .dialog-button {
> +    display: inline-block;
> +    background-color: white;
> +    width: 75px;
> +    height: 30px;
> +    line-height: 30px;
> +    position: relative;
> +    margin-left: 10px;
> +    margin-top: 10px;
> +    text-align: center;
> +    vertical-align: middle;
> +}
> +
> +.dialog-container .dialog-footer .dialog-button:hover{
> +    background-color: #EEEEEE;
> +    cursor: pointer;
> +}
> \ No newline at end of file
> diff --git a/ui/js/widgets/dialog-flat.js b/ui/js/widgets/dialog-flat.js
> new file mode 100644
> index 0000000..44f5432
> --- /dev/null
> +++ b/ui/js/widgets/dialog-flat.js
> @@ -0,0 +1,120 @@
> +/*
> + * 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.
> + */
> +
> +/* How to use:
> + *      $(".selector").dialogFlat({
> + *          title: "Demo",  //Title of the dialog.
> + *          confirmText: "Ok",  //Text of the confirm button, "Ok" is the default value.
> + *          cancelText: "Cancel",  //Text of the cancel button.
> + *          width: "300",  //Width of the dialog, "px" is the default unit.
> + *          height: "500",  //Height of the dialog, "px" is the default unit.
> + *          confirmFunc: function() {
> + *              //Function after confirm
> + *          }
> + *      });
> + */
> +
> +(function( $ ) {
> +    $.widget("kimchi.dialogFlat", {
> +        options: {
> +            title: "",
> +            autoOpen: true,
> +            confirmText: "Ok",
> +            cancelText: "Cancel",
> +            confirmFunc: null,
> +            height: "150",
> +            width: "150"
> +        },
> +
> +        _create: function() {
> +            var that = this;
> +            var w = that.options.width;
> +            var h = that.options.height;
> +            $(".body").addClass("style:'opacity:0.5'");
> +            that._open();
> +            that._setSize(w, h);
> +            $(".dialog-container .dialog-cancel").on("click", that._destroy);
> +            $(".dialog-container .dialog-okay").on("click", function() {
> +                that._trigger("confirmFunc");
> +                that._destroy();
> +            });
> +        },
> +
> +        _open: function() {
> +            var cfmTxt = this.options.confirmText;
> +            var celTxt = this.options.cancelText;
> +            var titleTxt = this.options.title;
> +            var html =
> +            "<div id='dialog-overlay'></div>" +
> +            "<div class='dialog-border-grey'>" +
> +                "<div class='dialog-container'>" +
> +                    "<div class='dialog-title h1 dark-gray'>" + titleTxt + "</div>" +
> +                    "<div class='dialog-body'>dafafdafdas</div>" +
> +                    "<div class='dialog-footer'>" +
> +                        "<div class='dialog-button dialog-okay'>" + cfmTxt + "</div>" +
> +                        "<div class='dialog-button dialog-cancel'>" + celTxt + "</div>" +
> +                    "</div>" +
> +                "</div>" +
> +            "</div>";
> +            if (this.options.autoOpen) {
> +                $(html).appendTo($("body"));
> +                var pageWidth = window.screen.width;
> +                var pageHeight = window.screen.height;
> +                var pageLeft = document.screenLeft
> +                var pageTop = document.screenTop;
> +                var topOffset = "-" + pageHeight + "px";
> +                $("#dialog-overlay").css({
> +                    "opacity": "0.5",
> +                    "Left": pageLeft,
> +                    "Top": pageTop,
> +                    "background-color": "white",
> +                    "width": pageWidth,
> +                    "height": pageHeight,
> +                    "margin-top": topOffset,
> +                    "overflow": "hidden"
> +                });
> +            }
> +        },
> +
> +        _setSize: function(width, height) {
> +            var wid = width + "px";
> +            var hei = height + "px";
> +            var cHeight = (height - 4) + "px";
> +            var bHeight = (height - 54) + "px";
> +            var tWidth = (width - 25) + "px";
> +            $(".dialog-border-grey").css({
> +                "width": wid,
> +                "height": hei
> +            });
> +            $(".dialog-container").css({
> +                "height": cHeight
> +            });
> +            $(".dialog-container .dialog-body").css({
> +                "height": bHeight
> +            });
> +            $(".dialog-container .dialog-title").css({
> +                "width": tWidth
> +            });
> +        },
> +
> +        _destroy: function() {
> +            $(".dialog-border-grey").remove();
> +            $("#dialog-overlay").remove();
> +        }
> +    });
> +})(jQuery);
> \ No newline at end of file