[Kimchi-devel] [PATCH V2 1/2] UI; Add widget of dialog
Wen Wang
wenwang at linux.vnet.ibm.com
Thu Feb 5 06:46:32 UTC 2015
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
--
2.1.0
More information about the Kimchi-devel
mailing list