[Kimchi-devel] [PATCH V4] UI: Adding new widget of menu to kimchi new UI

V3 -> V4: Fix margin errors V2 -> V3: Fix margin errors V1 -> V2: 1) Fix the bug of multiple menu opened in the same time. 2) Make menu appear in the top level. Signed-off-by: Wen Wang <wenwang(a)linux.vnet.ibm.com&gt; --- ui/css/theme-default/menu-flat.css | 89 +++++++++++++++++++++++++++++ ui/js/widgets/menu-flat.js | 114 +++++++++++++++++++++++++++++++++++++ 2 files changed, 203 insertions(+) create mode 100644 ui/css/theme-default/menu-flat.css create mode 100644 ui/js/widgets/menu-flat.js diff --git a/ui/css/theme-default/menu-flat.css b/ui/css/theme-default/menu-flat.css new file mode 100644 index 0000000..385a312 --- /dev/null +++ b/ui/css/theme-default/menu-flat.css @@ -0,0 +1,89 @@ +/* + * 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. + */ + +.menu-content { + position: relative; + height: 35px; + width: 170px; +} + +.menu-box { + width: 100%; + height: 30px; + border-radius: 3px 3px 0 3px; + cursor: pointer; + vertical-align: middle; + background: #4E4D4F; + color: #EDEDED; + float: right; + position: relative; + padding-bottom: 5px; +} + +.menu-label { + position: relative; +} + +.menu-icon-front, +.list-icon-front { + position: relative; + font-size: 17px; + line-height: 32px; + padding-right: 10px; + padding-left: 5px; + color: #EDEDED; +} + +.menu-icon { + position: relative; + float: right; + line-height: 35px; + padding-right: 10px; + padding-left: 10px; + color: #CFCFCF; + font-size: 10px; + border-top-right-radius: 3px; +} + +.menu-container { + border: 1px solid #999999; + width: 100px; +} + +.menu-list { + position: absolute; + z-index: 3; + float: right; + width: 100%; + top: 35px; + padding-left: 0; + cursor: pointer; + background: #3A393B; + margin: 0; +} + +.menu-list li { + list-style: none; + position: relative; + color: #EDEDED; + border-top: 1px groove black; +} + +.menu-list li:first-child { + border: none; +} diff --git a/ui/js/widgets/menu-flat.js b/ui/js/widgets/menu-flat.js new file mode 100644 index 0000000..8d1a546 --- /dev/null +++ b/ui/js/widgets/menu-flat.js @@ -0,0 +1,114 @@ +/* + * 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").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. + // }); + // $("#test-bar0").on("click", function() { + // alert("hello"); + // }); + // $("#test-bar1").on("click", function() { + // console.log("hello"); + // }); + + + (function( $ ) { + $.widget("kimchi.menuFlat", { + + options: { + content: null, + name: null, + parentid: null, + icon: null, + listIconList: null + }, + + _create: function() { + var that = this; + var name = that.options.name || $(this.element).attr("id"); + var value = that.options.content; + var icon = that.options.icon || ""; + var parentid = $(this.element).attr("id"); + $("#" + parentid).addClass("menu-content"); + that.options.parentid = parentid; + var html = "<div class='menu-box' id='manu-" + name + "'>" + + "<span class='menu-icon-front " + icon + "'></span>" + + "<span class='menu-label'>"+ name + "</span>" + + "<span class='menu-icon icon-down-open'></span>" + + "</div>"; + $(html).appendTo(that.element); + html = that._setValue(value); + $(html).appendTo(that.element); + $(".menu-box", "#" + parentid).on("click", that._toggleOpt); + $(".menu-opt", "#" + parentid).on("click", that._toggleOpt); + $(document).mouseup(function(e) { + var container = $(".menu-opt"); + if(!container.is(e.target) && container.has(e.target).length === 0 && $(".menu-icon").hasClass("icon-up-open")) { + $(".menu-list", "#" + parentid).prop("style", "display:none"); + $(".menu-icon", "#" + parentid).removeClass("icon-up-open"); + $(".menu-icon", "#" + parentid).addClass("icon-down-open").css({ + "background": "#4E4D4F" + }); + } + }); + }, + + _setValue: function(value) { + var that = this; + var name = that.options.name; + var html = "<ul class='menu-list' name='" + name + "' style='display:none'>"; + var name = this.options.name || $(this.element).attr("id"); + $.each(value, function(index, data) { + that.options.content[index] = data.toString(); + var liIcon = that.options.listIconList[index] || ""; + html += "<li id='" + name + index + "' class='menu-opt'>" + + "<span class='list-icon-front " + liIcon + "'></span>" + + "<span>" + data + "</span>" + + "</li>"; + }); + html += "</ul>" + return html; + }, + + _toggleOpt: function() { + var thisButton = $(this).parent().attr("id") || $(this).parent().parent().attr("id"); + if($(".menu-icon", "#" + thisButton).hasClass("icon-down-open")) { + $(".menu-list", "#" + thisButton).prop("style", "display"); + $(".menu-icon", "#" + thisButton).removeClass("icon-down-open"); + $(".menu-icon", "#" + thisButton).addClass("icon-up-open").css({ + "background": "#3A393B" + }); + } else { + $(".menu-list", "#" + thisButton).prop("style", "display:none"); + $(".menu-icon", "#" + thisButton).removeClass("icon-up-open"); + $(".menu-icon", "#" + thisButton).addClass("icon-down-open").css({ + "background": "#4E4D4F" + }); + } + }, + + _destroy: function() { + this.element.remove(); + } + }); + })(jQuery); \ No newline at end of file -- 2.1.0