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 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

Signed-off-by: Wen Wang <wenwang@linux.vnet.ibm.com> --- ui/css/theme-default/list-flat.css | 83 ++++++++++++++++++++++++++++++++++++++ ui/js/widgets/list-flat.js | 76 ++++++++++++++++++++++++++++++++++ 2 files changed, 159 insertions(+) create mode 100644 ui/css/theme-default/list-flat.css create mode 100644 ui/js/widgets/list-flat.js diff --git a/ui/css/theme-default/list-flat.css b/ui/css/theme-default/list-flat.css new file mode 100644 index 0000000..ba0439d --- /dev/null +++ b/ui/css/theme-default/list-flat.css @@ -0,0 +1,83 @@ +/* + * 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. + */ + +.list-titlef { + height: 30px; + line-height: 30px; + width: 25%; + border-bottom: 1px solid #DEDEDE; + color: #626262; + font-size: 17px; + padding: 10px 0; + background: white; +} + +.list-content { + height: 300px; + width: 25%; +} + +.list-item { + border-bottom: 1px solid #F5F5F5; + height: 40px; +} + +.list-item-odd { + background: #FFFFFF; +} + +.list-item-even { + background: #FCFCFC; +} + +.list-item:hover { + background: #DDDDDD; +} + +.list-inline { + display: inline-block; +} + +.list-item-icon { + line-height: 20px; + vertical-align: 35%; +} + +.list-item-info { + position: relative; + margin-left: 10px; + margin-right: 10px; +} + +.list-item-name { + font-size: 14px; + line-height: 14px; + padding: 9px 0 0; +} + +.list-item-button { + position: relative; + width: 150px; + padding: 5px; + float: right; +} + +.list-item-detail { + font-size: 11px; + color: #CDCDCD; +} \ No newline at end of file diff --git a/ui/js/widgets/list-flat.js b/ui/js/widgets/list-flat.js new file mode 100644 index 0000000..f76eec6 --- /dev/null +++ b/ui/js/widgets/list-flat.js @@ -0,0 +1,76 @@ +/* + * 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: + // $(".test-bar").listFlat({ + // title: "Hello World" //Set title. + // }); + // $(".test-bar").listFlat("addItem", "Hello", "2015", "icon-user", "button1"); + // //Add one item of the list, parameters are: name, info, icon and button-id + + + (function($) { + + $.widget("kimchi.listFlat", { + + options: { + title: null + }, + + _create: function() { + var that = this; + var listTitle = that.options.title; + var titleTrim = listTitle.replace(/\s*/g, ""); + var html = ""; + html += "<div class='list-titlef'>" + listTitle + "</div>" + + "<div class='list-content' id='list" + titleTrim + "'></div>"; + $(html).appendTo(that.element); + }, + + _getTitle: function() { + return this.options.title; + }, + + addItem: function(name, detail, icon, id) { + var title = this._getTitle().replace(/\s/g, ""); + var usedIcon = icon || ""; + var html = ""; + html += "<div class='list-item'>" + + "<span class='list-inline list-item-icon " + usedIcon + "'></span>" + + "<span class='list-inline list-item-info'>"+ + "<div class='list-item-name'>" + name + "</div>" + + "<div class='list-item-detail'>" + detail + "</div>" + + "</span>" + + "<span class='list-inline list-item-button' id='" + id + "'></span>" + + "</div>"; + $(html).appendTo($("#list" + title)); + $.each($(".list-item"), function(index, data) { + if(index%2 >0) { + $(this).addClass("list-item-even"); + } else { + $(this).addClass("list-item-odd"); + } + }) + console.log("title"); + }, + + _destory: function() { + this.element.remove(); + } + }); + })(jQuery); \ No newline at end of file -- 2.1.0

Signed-off-by: Wen Wang <wenwang@linux.vnet.ibm.com> --- ui/css/theme-default/button-flat.css | 135 +++++++++++ ui/js/widgets/button-flat.js | 419 +++++++++++++++++++++++++++++++++++ 2 files changed, 554 insertions(+) create mode 100755 ui/css/theme-default/button-flat.css create mode 100755 ui/js/widgets/button-flat.js diff --git a/ui/css/theme-default/button-flat.css b/ui/css/theme-default/button-flat.css new file mode 100755 index 0000000..082c412 --- /dev/null +++ b/ui/css/theme-default/button-flat.css @@ -0,0 +1,135 @@ +/* + * 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. + */ + +.ui-button { + display: inline-block; + position: relative; + color: #FFFFFF; + padding: 0; + line-height: normal; + margin-right: .1em; + cursor: pointer; + vertical-align: middle; + text-align: center; + border-radius: 3px; + border: 1px none; + background: #4e4d4f; + font-weight: normal; + overflow: visible; /* removes extra width in IE */ +} +.ui-button:hover{ + background: #000000; + font-weight: normal; +} +.ui-button:active { + background: #4e4d4f; +} +.ui-button, +.ui-button:link, +.ui-button:visited, +.ui-button:hover, +.ui-button:active { + text-decoration: none; +} + +/* to make room for the icon, a width needs to be set here */ +.ui-button-icon-only { + width: 2.2em; +} +/* button elements seem to need a little more width */ +button.ui-button-icon-only { + width: 2.4em; +} +.ui-button-icons-only { + width: 3.4em; +} +button.ui-button-icons-only { + width: 3.7em; +} + +/* button text element */ +.ui-button .ui-button-text { + display: block; + line-height: normal; +} +.ui-button-text-only .ui-button-text { + padding: .4em 1em; +} +.ui-button-icon-only .ui-button-text, +.ui-button-icons-only .ui-button-text { + padding: .4em; + text-indent: -9999999px; +} +.ui-button-text-icon-primary .ui-button-text, +.ui-button-text-icons .ui-button-text { + padding: .4em 1em .4em 2.1em; +} +.ui-button-text-icon-secondary .ui-button-text, +.ui-button-text-icons .ui-button-text { + padding: .4em 2.1em .4em 1em; +} +.ui-button-text-icons .ui-button-text { + padding-left: 2.1em; + padding-right: 2.1em; +} +/* no icon support for input elements, provide padding by default */ +input.ui-button { + padding: .4em 1em; +} + +/* button icon element(s) */ +.ui-button-icon-only .ui-icon, +.ui-button-text-icon-primary .ui-icon, +.ui-button-text-icon-secondary .ui-icon, +.ui-button-text-icons .ui-icon, +.ui-button-icons-only .ui-icon { + position: absolute; + top: 50%; + margin-top: -8px; +} +.ui-button-icon-only .ui-icon { + left: 50%; + margin-left: -8px; +} +.ui-button-text-icon-primary .ui-button-icon-primary, +.ui-button-text-icons .ui-button-icon-primary, +.ui-button-icons-only .ui-button-icon-primary { + left: .5em; +} +.ui-button-text-icon-secondary .ui-button-icon-secondary, +.ui-button-text-icons .ui-button-icon-secondary, +.ui-button-icons-only .ui-button-icon-secondary { + right: .5em; +} + +/* button sets */ +.ui-buttonset { + margin-right: 7px; +} +.ui-buttonset .ui-button { + margin-left: 0; + margin-right: -.3em; +} + +/* workarounds */ +/* reset extra padding in Firefox, see h5bp.com/l */ +input.ui-button::-moz-focus-inner, +button.ui-button::-moz-focus-inner { + border: 0; + padding: 0; +} diff --git a/ui/js/widgets/button-flat.js b/ui/js/widgets/button-flat.js new file mode 100755 index 0000000..38f8056 --- /dev/null +++ b/ui/js/widgets/button-flat.js @@ -0,0 +1,419 @@ +/* + * 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. + */ + +(function( factory ) { + if ( typeof define === "function" && define.amd ) { + + // AMD. Register as an anonymous module. + define([ + "jquery", + "./core", + "./widget" + ], factory ); + } else { + + // Browser globals + factory( jQuery ); + } +}(function( $ ) { + +var lastActive, + baseClasses = "ui-button ui-widget", + typeClasses = "ui-button-icons-only ui-button-icon-only ui-button-text-icons ui-button-text-icon-primary ui-button-text-icon-secondary ui-button-text-only", + formResetHandler = function() { + var form = $( this ); + setTimeout(function() { + form.find( ":ui-button" ).button( "refresh" ); + }, 1 ); + }, + radioGroup = function( radio ) { + var name = radio.name, + form = radio.form, + radios = $( [] ); + if ( name ) { + name = name.replace( /'/g, "\\'" ); + if ( form ) { + radios = $( form ).find( "[name='" + name + "'][type=radio]" ); + } else { + radios = $( "[name='" + name + "'][type=radio]", radio.ownerDocument ) + .filter(function() { + return !this.form; + }); + } + } + return radios; + }; + +$.widget( "kimchi.buttonFlat", { + version: "@VERSION", + defaultElement: "<button>", + options: { + disabled: null, + text: true, + label: null, + icons: { + primary: null, + secondary: null + } + }, + _create: function() { + this.element.closest( "form" ) + .unbind( "reset" + this.eventNamespace ) + .bind( "reset" + this.eventNamespace, formResetHandler ); + + if ( typeof this.options.disabled !== "boolean" ) { + this.options.disabled = !!this.element.prop( "disabled" ); + } else { + this.element.prop( "disabled", this.options.disabled ); + } + + this._determineButtonType(); + this.hasTitle = !!this.buttonElement.attr( "title" ); + + var that = this, + options = this.options, + toggleButton = this.type === "checkbox" || this.type === "radio", + activeClass = !toggleButton ? "ui-state-active" : ""; + + if ( options.label === null ) { + options.label = (this.type === "input" ? this.buttonElement.val() : this.buttonElement.html()); + } + + this._hoverable( this.buttonElement ); + + this.buttonElement + .addClass( baseClasses ) + .attr( "role", "button" ) + .bind( "mouseenter" + this.eventNamespace, function() { + if ( options.disabled ) { + return; + } + if ( this === lastActive ) { + $( this ).addClass( "ui-state-active" ); + } + }) + .bind( "mouseleave" + this.eventNamespace, function() { + if ( options.disabled ) { + return; + } + $( this ).removeClass( activeClass ); + }) + .bind( "click" + this.eventNamespace, function( event ) { + if ( options.disabled ) { + event.preventDefault(); + event.stopImmediatePropagation(); + } + }); + + // Can't use _focusable() because the element that receives focus + // and the element that gets the ui-state-focus class are different + this._on({ + focus: function() { + this.buttonElement.addClass( "ui-state-focus" ); + }, + blur: function() { + this.buttonElement.removeClass( "ui-state-focus" ); + } + }); + + if ( toggleButton ) { + this.element.bind( "change" + this.eventNamespace, function() { + that.refresh(); + }); + } + + if ( this.type === "checkbox" ) { + this.buttonElement.bind( "click" + this.eventNamespace, function() { + if ( options.disabled ) { + return false; + } + }); + } else if ( this.type === "radio" ) { + this.buttonElement.bind( "click" + this.eventNamespace, function() { + if ( options.disabled ) { + return false; + } + $( this ).addClass( "ui-state-active" ); + that.buttonElement.attr( "aria-pressed", "true" ); + + var radio = that.element[ 0 ]; + radioGroup( radio ) + .not( radio ) + .map(function() { + return $( this ).button( "widget" )[ 0 ]; + }) + .removeClass( "ui-state-active" ) + .attr( "aria-pressed", "false" ); + }); + } else { + this.buttonElement + .bind( "mousedown" + this.eventNamespace, function() { + if ( options.disabled ) { + return false; + } + $( this ).addClass( "ui-state-active" ); + lastActive = this; + that.document.one( "mouseup", function() { + lastActive = null; + }); + }) + .bind( "mouseup" + this.eventNamespace, function() { + if ( options.disabled ) { + return false; + } + $( this ).removeClass( "ui-state-active" ); + }) + .bind( "keydown" + this.eventNamespace, function(event) { + if ( options.disabled ) { + return false; + } + if ( event.keyCode === $.ui.keyCode.SPACE || event.keyCode === $.ui.keyCode.ENTER ) { + $( this ).addClass( "ui-state-active" ); + } + }) + // see #8559, we bind to blur here in case the button element loses + // focus between keydown and keyup, it would be left in an "active" state + .bind( "keyup" + this.eventNamespace + " blur" + this.eventNamespace, function() { + $( this ).removeClass( "ui-state-active" ); + }); + + if ( this.buttonElement.is("a") ) { + this.buttonElement.keyup(function(event) { + if ( event.keyCode === $.ui.keyCode.SPACE ) { + // TODO pass through original event correctly (just as 2nd argument doesn't work) + $( this ).click(); + } + }); + } + } + + this._setOption( "disabled", options.disabled ); + this._resetButton(); + }, + + _determineButtonType: function() { + var ancestor, labelSelector, checked; + + if ( this.element.is("[type=checkbox]") ) { + this.type = "checkbox"; + } else if ( this.element.is("[type=radio]") ) { + this.type = "radio"; + } else if ( this.element.is("input") ) { + this.type = "input"; + } else { + this.type = "button"; + } + + if ( this.type === "checkbox" || this.type === "radio" ) { + // we don't search against the document in case the element + // is disconnected from the DOM + ancestor = this.element.parents().last(); + labelSelector = "label[for='" + this.element.attr("id") + "']"; + this.buttonElement = ancestor.find( labelSelector ); + if ( !this.buttonElement.length ) { + ancestor = ancestor.length ? ancestor.siblings() : this.element.siblings(); + this.buttonElement = ancestor.filter( labelSelector ); + if ( !this.buttonElement.length ) { + this.buttonElement = ancestor.find( labelSelector ); + } + } + this.element.addClass( "ui-helper-hidden-accessible" ); + + checked = this.element.is( ":checked" ); + if ( checked ) { + this.buttonElement.addClass( "ui-state-active" ); + } + this.buttonElement.prop( "aria-pressed", checked ); + } else { + this.buttonElement = this.element; + } + }, + + widget: function() { + return this.buttonElement; + }, + + _destroy: function() { + this.element + .removeClass( "ui-helper-hidden-accessible" ); + this.buttonElement + .removeClass( baseClasses + " ui-state-active " + typeClasses ) + .removeAttr( "role" ) + .removeAttr( "aria-pressed" ) + .html( this.buttonElement.find(".ui-button-text").html() ); + + if ( !this.hasTitle ) { + this.buttonElement.removeAttr( "title" ); + } + }, + + _setOption: function( key, value ) { + this._super( key, value ); + if ( key === "disabled" ) { + this.widget().toggleClass( "ui-state-disabled", !!value ); + this.element.prop( "disabled", !!value ); + if ( value ) { + if ( this.type === "checkbox" || this.type === "radio" ) { + this.buttonElement.removeClass( "ui-state-focus" ); + } else { + this.buttonElement.removeClass( "ui-state-focus ui-state-active" ); + } + } + return; + } + this._resetButton(); + }, + + refresh: function() { + //See #8237 & #8828 + var isDisabled = this.element.is( "input, button" ) ? this.element.is( ":disabled" ) : this.element.hasClass( "ui-button-disabled" ); + + if ( isDisabled !== this.options.disabled ) { + this._setOption( "disabled", isDisabled ); + } + if ( this.type === "radio" ) { + radioGroup( this.element[0] ).each(function() { + if ( $( this ).is( ":checked" ) ) { + $( this ).button( "widget" ) + .addClass( "ui-state-active" ) + .attr( "aria-pressed", "true" ); + } else { + $( this ).button( "widget" ) + .removeClass( "ui-state-active" ) + .attr( "aria-pressed", "false" ); + } + }); + } else if ( this.type === "checkbox" ) { + if ( this.element.is( ":checked" ) ) { + this.buttonElement + .addClass( "ui-state-active" ) + .attr( "aria-pressed", "true" ); + } else { + this.buttonElement + .removeClass( "ui-state-active" ) + .attr( "aria-pressed", "false" ); + } + } + }, + + _resetButton: function() { + if ( this.type === "input" ) { + if ( this.options.label ) { + this.element.val( this.options.label ); + } + return; + } + var buttonElement = this.buttonElement.removeClass( typeClasses ), + buttonText = $( "<span></span>", this.document[0] ) + .addClass( "ui-button-text" ) + .html( this.options.label ) + .appendTo( buttonElement.empty() ) + .text(), + icons = this.options.icons, + multipleIcons = icons.primary && icons.secondary, + buttonClasses = []; + + if ( icons.primary || icons.secondary ) { + if ( this.options.text ) { + buttonClasses.push( "ui-button-text-icon" + ( multipleIcons ? "s" : ( icons.primary ? "-primary" : "-secondary" ) ) ); + } + + if ( icons.primary ) { + buttonElement.prepend( "<span class='ui-button-icon-primary ui-icon " + icons.primary + "'></span>" ); + } + + if ( icons.secondary ) { + buttonElement.append( "<span class='ui-button-icon-secondary ui-icon " + icons.secondary + "'></span>" ); + } + + if ( !this.options.text ) { + buttonClasses.push( multipleIcons ? "ui-button-icons-only" : "ui-button-icon-only" ); + + if ( !this.hasTitle ) { + buttonElement.attr( "title", $.trim( buttonText ) ); + } + } + } else { + buttonClasses.push( "ui-button-text-only" ); + } + buttonElement.addClass( buttonClasses.join( " " ) ); + } +}); + +$.widget( "ui.buttonset", { + version: "@VERSION", + options: { + items: "button, input[type=button], input[type=submit], input[type=reset], input[type=checkbox], input[type=radio], a, :data(ui-button)" + }, + + _create: function() { + this.element.addClass( "ui-buttonset" ); + }, + + _init: function() { + this.refresh(); + }, + + _setOption: function( key, value ) { + if ( key === "disabled" ) { + this.buttons.button( "option", key, value ); + } + + this._super( key, value ); + }, + + refresh: function() { + var rtl = this.element.css( "direction" ) === "rtl", + allButtons = this.element.find( this.options.items ), + existingButtons = allButtons.filter( ":ui-button" ); + + // Initialize new buttons + allButtons.not( ":ui-button" ).button(); + + // Refresh existing buttons + existingButtons.button( "refresh" ); + + this.buttons = allButtons + .map(function() { + return $( this ).button( "widget" )[ 0 ]; + }) + .removeClass( "ui-corner-all ui-corner-left ui-corner-right" ) + .filter( ":first" ) + .addClass( rtl ? "ui-corner-right" : "ui-corner-left" ) + .end() + .filter( ":last" ) + .addClass( rtl ? "ui-corner-left" : "ui-corner-right" ) + .end() + .end(); + }, + + _destroy: function() { + this.element.removeClass( "ui-buttonset" ); + this.buttons + .map(function() { + return $( this ).button( "widget" )[ 0 ]; + }) + .removeClass( "ui-corner-left ui-corner-right" ) + .end() + .button( "destroy" ); + } +}); + +return $.ui.button; + +})); -- 2.1.0

Signed-off-by: Wen Wang <wenwang@linux.vnet.ibm.com> --- ui/css/theme-default/textbox-flat.css | 22 ++++++++++++++++++++ ui/js/widgets/textbox-flat.js | 39 +++++++++++++++++++++++++++++++++++ 2 files changed, 61 insertions(+) create mode 100644 ui/css/theme-default/textbox-flat.css create mode 100644 ui/js/widgets/textbox-flat.js diff --git a/ui/css/theme-default/textbox-flat.css b/ui/css/theme-default/textbox-flat.css new file mode 100644 index 0000000..39d5ffb --- /dev/null +++ b/ui/css/theme-default/textbox-flat.css @@ -0,0 +1,22 @@ +/* + * 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. + */ + + .textbox-container { + border: 1px solid #CCC; + border-radius: 3px; + } \ No newline at end of file diff --git a/ui/js/widgets/textbox-flat.js b/ui/js/widgets/textbox-flat.js new file mode 100644 index 0000000..80192ef --- /dev/null +++ b/ui/js/widgets/textbox-flat.js @@ -0,0 +1,39 @@ +/* + * 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").textboxFlat({ +// hint: "hint" +// }); + + (function($) { + $.widget("kimchi.textboxFlat", { + optons: { + hint: "" + }, + + _create: function() { + this.element.addClass("textbox-container"); + this.element.attr("placeholder", this.options.hint); + }, + + destroy:function() { + this.element.remove(); + } + }); + })(jQuery); \ No newline at end of file -- 2.1.0

Signed-off-by: Wen Wang <wenwang@linux.vnet.ibm.com> --- ui/css/theme-default/checkbox-flat.css | 25 ++++++++++ ui/js/widgets/checkbox-flat.js | 86 ++++++++++++++++++++++++++++++++++ 2 files changed, 111 insertions(+) create mode 100644 ui/css/theme-default/checkbox-flat.css create mode 100644 ui/js/widgets/checkbox-flat.js diff --git a/ui/css/theme-default/checkbox-flat.css b/ui/css/theme-default/checkbox-flat.css new file mode 100644 index 0000000..b8712b3 --- /dev/null +++ b/ui/css/theme-default/checkbox-flat.css @@ -0,0 +1,25 @@ +/* + * 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. + */ + + .checkbox-item { + cursor: pointer; + } + + .checkbox-inline { + display: inline-block; + } \ No newline at end of file diff --git a/ui/js/widgets/checkbox-flat.js b/ui/js/widgets/checkbox-flat.js new file mode 100644 index 0000000..877a52d --- /dev/null +++ b/ui/js/widgets/checkbox-flat.js @@ -0,0 +1,86 @@ +/* + * 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").checkboxFlat({ +// id: "t", //Checkbox base id. +// name: "test", //Checkbox name. +// content: ["apple", "banana", "orange", "cherry"], //Contents of the checkbox set. +// checked: [1,3] //Set the checked item, which starts with number 1. +// }); +// $(".selector").click(function() { +// console.log($(".selector").checkboxFlat("value")); //Get value of the checked checkbox. +// }); + + (function($) { + $.widget("kimchi.checkboxFlat", { + options: { + id: "", + name: "", + content: [], + checked: [] + }, + + _create: function() { + var that = this; + var idBase = that.options.id; + var name = that.options.name; + var checked = that.options.checked; + var content = that.options.content; + var html = ""; + for (var i=1;i<content.length+1;i++) { + if($.inArray(i,checked) < 0) { + html += "<div class='checkbox-item checkbox-inline icon-check-empty-1' id='" + idBase + i + "' name='" + name + "'></div>" + + "<label class='checkbox-label checkbox-inline' for='" + idBase + i + "'>" + content[i-1] + "</label>"; + } else { + html += "<div class='checkbox-item checkbox-inline icon-ok-squared' id='" + idBase + i + "' name='" + name + "'></div>" + + "<label class='checkbox-label checkbox-inline' for='" + idBase + i + "'>" + content[i-1] + "</label>"; + } + } + $(html).appendTo(that.element); + $(".checkbox-item").on("click", function() { + var tickID = $(this).attr("id"); + var tick = tickID.substring(idBase.length,tickID.length); + if($(this).hasClass("icon-check-empty-1")) { + $(this).removeClass("icon-check-empty-1"); + $(this).addClass("icon-ok-squared"); + checked.push(Number(tick)); + } else { + $(this).removeClass("icon-ok-squared"); + $(this).addClass("icon-check-empty-1"); + checked.splice($.inArray(Number(tick),checked),1); + } + }); + }, + + value: function() { + var value = new Array(); + var vContent = this.options.content; + var vChencked = this.options.checked; + for(var i=0;i<vChencked.length;i++) { + value.push(vContent[vChencked[i]-1]); + } + return value; + }, + + _destroy: function() { + this.element.remove(); + } + }); + })(jQuery); \ No newline at end of file -- 2.1.0

Signed-off-by: Wen Wang <wenwang@linux.vnet.ibm.com> --- ...u-button-radio-checkbox-text-select-sample.html | 83 ++++++++++++++++++++++ 1 file changed, 83 insertions(+) create mode 100644 ui/js/widgets/samples/menu-button-radio-checkbox-text-select-sample.html diff --git a/ui/js/widgets/samples/menu-button-radio-checkbox-text-select-sample.html b/ui/js/widgets/samples/menu-button-radio-checkbox-text-select-sample.html new file mode 100644 index 0000000..4ec6105 --- /dev/null +++ b/ui/js/widgets/samples/menu-button-radio-checkbox-text-select-sample.html @@ -0,0 +1,83 @@ +<!--Sample code of menu/button/radio/checkbox/text/select--> +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title>Demo</title> + <script src="../../../libs/jquery-1.10.0.min.js"></script> + <script src="../../../libs/jquery-ui.min.js"></script> + <script src="../menu-flat.js"></script> + <script src="../button-flat.js"></script> + <script src="../radio-flat.js"></script> + <script src="../checkbox-flat.js"></script> + <script src="../textbox-flat.js"></script> + <script src="../selectmenu-flat.js"></script> + <link rel="stylesheet" href="../../../libs/themes/base/jquery-ui.min.css"> + <link rel="stylesheet" href="../../../css/theme-default/menu-flat.css"> + <link rel="stylesheet" href="../../../css/theme-default/button-flat.css"> + <link rel="stylesheet" href="../../../css/theme-default/radio-flat.css"> + <link rel="stylesheet" href="../../../css/theme-default/checkbox-flat.css"> + <link rel="stylesheet" href="../../../css/theme-default/textbox-flat.css"> + <link rel="stylesheet" href="../../../css/theme-default/selectmenu-flat.css"> + <link rel="stylesheet" href="../../../css/fontello/css/animation.css"> + <link rel="stylesheet" href="../../../css/fontello/css/fontello.css"> + </head> + <body> + <div id="menu"></div> + <div style="height:50px"><div id="select"></div></div> + <div class="radio-demo"></div> + <div class="checkbox-demo"></div> + <input class="text-demo"> + <button class="button-demo">submit</button> + <script> + $(document).ready(function() { + $("#menu").menuFlat({ + content: [1,2,3,4,5,6], //Set content of the menu. + icon: "icon-edit-alt", //Set icon of the menu button. + listIconList: ["icon-edit-alt","icon-edit-alt","icon-edit-alt","icon-edit-alt","icon-edit-alt","icon-user"] + //Set icons of the menu list. + // name is optional which set the name of the menu list. + }); + $("#menu0").on("click", function() { + alert("hello"); + }); + $("#menu1").on("click", function() { + console.log("hello"); + }); + $("#select").selectmenuFlat({ + content: [1,2,3,4,5,6], //Set content of the select menu + selected: 2 // set the selected option, starts from "1" + }); + $("#select").selectmenuFlat("value", "4"); //Set value. + var t = $("#select").selectmenuFlat("value"); //Get value + console.log(t); + $(".radio-demo").radioFlat({ + id: "t", //Base id of the radio set. + name: "test", //name of the radio. + whichChecked: 2, //First selected position, starts from 1. + content: ["apple", "banana", "orange", "cherry"] //set the content array. + }); + $(".radio-demo").click(function() { + console.log($(".radio-demo").radioFlat("value")); //this is how to get the value of selected radio value + }); + $(".checkbox-demo").checkboxFlat({ + id: "t", //Checkbox base id. + name: "test", //Checkbox name. + content: ["apple", "banana", "orange", "cherry"], //Contents of the checkbox set. + checked: [1,3] //Set the checked item, which starts with number 1. + }); + $(".checkbox-demo").click(function() { + console.log($(".selector").checkboxFlat("value")); //Get value of the checked checkbox. + }); + $(".text-demo").textboxFlat({ + hint: "hint" + }); + $(".text-demo").css({ + "height": "30px", + "width": "200px" + }); + $(".button-demo").buttonFlat(); + }); + </script> + </body> +</html> \ No newline at end of file -- 2.1.0