[Kimchi-devel] [PATCH 01/11] UI: Add Kimchi message widget for new kimchi UI
Wen Wang
wenwang at linux.vnet.ibm.com
Thu Feb 12 02:59:05 UTC 2015
Signed-off-by: Wen Wang <wenwang at linux.vnet.ibm.com>
---
ui/css/theme-default/message-flat.css | 87 +++++++++++++++++++++++++++++++
ui/js/widgets/message-flat.js | 97 +++++++++++++++++++++++++++++++++++
2 files changed, 184 insertions(+)
create mode 100644 ui/css/theme-default/message-flat.css
create mode 100644 ui/js/widgets/message-flat.js
diff --git a/ui/css/theme-default/message-flat.css b/ui/css/theme-default/message-flat.css
new file mode 100644
index 0000000..8281bff
--- /dev/null
+++ b/ui/css/theme-default/message-flat.css
@@ -0,0 +1,87 @@
+/*
+* 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.
+*/
+
+.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;
+ width: 502px;
+ height: 202px;
+ border-radius: 5px;
+}
+
+.message-dialog {
+ border: 3px solid #999999;
+ height: 198px;
+ width: 498px;
+ background: white;
+}
+
+.message-dialog .message-inline {
+ display: inline-block;
+}
+
+.message-dialog .message-type-icon {
+ position: absolute;
+ margin: 20px 20px;
+ color: #008ABF;
+ font-size: 50px;
+}
+
+.message-dialog .message-main {
+ position: relative;
+ margin: 30px 0 0 110px;
+ width: 350px;
+}
+
+.message-dialog .message-confirm-info {
+ margin: 20px 0 0 110px;
+ width: 350px;
+}
+
+.message-dialog .message-footer {
+ position: absolute;
+ left: 3px;
+ right: 1px;
+ bottom: 1px;
+ height: 50px;
+ background-color: #008ABF;
+}
+
+.message-dialog .message-footer .message-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;
+}
+
+.message-dialog .message-footer .message-button:hover{
+ background-color: #EEEEEE;
+ cursor: pointer;
+}
\ No newline at end of file
diff --git a/ui/js/widgets/message-flat.js b/ui/js/widgets/message-flat.js
new file mode 100644
index 0000000..1ab6aa3
--- /dev/null
+++ b/ui/js/widgets/message-flat.js
@@ -0,0 +1,97 @@
+/*
+* 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").messageFlat({
+* contentMain: "This is a test", //Content you are going to add
+* contentConfirm: "Sure?" //Content that inform user whether they want to continue.
+* //Default value is: "Are you sure you want to go on?"
+* confirm: function() {
+* //Function after confirm
+* }
+* });
+*/
+
+(function( $ ) {
+ $.widget("kimchi.messageFlat", {
+ options: {
+ autoOpen: true,
+ contentMain: null,
+ contentConfirm: "Are you sure you want to go on?",
+ confirm: null
+ },
+
+ _create: function() {
+ var that = this;
+ var msg = that.options.contentMain;
+ var cfm = that.options.contentConfirm;
+ $(".body").addClass("style:'opacity:0.5'");
+ that._open();
+ $(".message-type-icon").addClass("icon-help-circled-1");
+ $(".message-dialog .message-content .message-main").text(msg);
+ $(".message-dialog .message-confirm-info").text(cfm);
+ $(".message-dialog .message-cancel").on("click", that.destroy);
+ $(".message-dialog .message-okay").on("click", function() {
+ that._trigger("confirm");
+ that.destroy();
+ });
+ },
+
+ _open: function() {
+ var html =
+ "<div id='overlay'></div>" +
+ "<div class='border-grey'>" +
+ "<div class='message-dialog'>" +
+ "<div class='message-content'>" +
+ "<div class='message-inline message-type-icon'></div>" +
+ "<div class='message-inline message-main'></div>" +
+ "</div>" +
+ "<div class='message-confirm-info'></div>" +
+ "<div class='message-footer'>" +
+ "<div class='message-button message-okay'>Ok</div>" +
+ "<div class='message-button message-cancel'>Cancel</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";
+ console.log(topOffset);
+ $("#overlay").css({
+ "opacity": "0.5",
+ "Left": pageLeft,
+ "Top": pageTop,
+ "background-color": "white",
+ "width": pageWidth,
+ "height": pageHeight,
+ "margin-top": topOffset,
+ "overflow": "hidden"
+ });
+ }
+ },
+
+ destroy: function() {
+ $(".border-grey").remove();
+ $("#overlay").remove();
+ }
+ });
+})(jQuery);
\ No newline at end of file
--
2.1.0
More information about the Kimchi-devel
mailing list