[PATCH V3] UI: Adding new widget of menu to kimchi new UI

30 Jan 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@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

    

Wen Wang

tags

participants (1)