On 19/01/2015 08:51, Wen Wang wrote:

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

Please, add a sample so we can test and see it working

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