[Kimchi-devel] [PATCH V3] UI: Adding new widget of menu to kimchi new UI
Wen Wang
wenwang at linux.vnet.ibm.com
Fri Jan 30 09:40:25 UTC 2015
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 at linux.vnet.ibm.com>
---
ui/css/theme-default/menu-flat.css | 90 +++++++++++++++++++++++++++++
ui/js/widgets/menu-flat.js | 114 +++++++++++++++++++++++++++++++++++++
2 files changed, 204 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..194c4c7
--- /dev/null
+++ b/ui/css/theme-default/menu-flat.css
@@ -0,0 +1,90 @@
+/*
+ * 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: 99%;
+ top: 35px;
+ padding-left: 0;
+ cursor: pointer;
+ background: #3A393B;
+ padding: 0;
+ 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
More information about the Kimchi-devel
mailing list