[Kimchi-devel] [PATCH] UI: Add Kimchi message widget for new kimchi UI

Wen Wang wenwang at linux.vnet.ibm.com
Mon Jan 19 10:51:11 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