Signed-off-by: Wen Wang <wenwang@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 -- 2.1.0