compelte menu at version 0.1.5

Author: chestnutchen

CHANGELOG.md

@@ -1,3 +1,6 @@
+* 0.1.5
+    - 去除滚动条和箭头按钮，增加菜单栏
+
 * 0.1.4
     - 修复物料模式下的bug
     - 增加表单/物料间切换的按钮

sdk.crx

@@ -102,36 +102,76 @@ body {
   margin: 0;
   padding: 0;
 }
+.main {
+  position: relative;
+  -webkit-transition: top .3s;
+  top: 0;
+}
 .menu {
   display: none;
   position: fixed;
   top: 10px;
-  right: -225px;
-  height: 25px;
-  width: 225px;
-  padding-left: 45px;
-  background: url(../images/menu.png) no-repeat scroll 0 0;
-  cursor: pointer;
+  right: -256px;
+  width: 300px;
   -webkit-transition: all .3s;
+  z-index: 10;
 }
 .menu:hover {
-  right: 10px;
+  right: 0;
+}
+.menu .arrow {
+  width: 45px;
+  height: 34px;
+  float: left;
+  background: url(../images/menu.png) no-repeat scroll 10px 5px #eeeeee;
+  box-shadow: 0px 0 4px 0 #cccccc;
+  cursor: pointer;
 }
 .menu ul {
+  float: left;
   margin: 0;
   padding: 0;
   list-style: none;
   background-color: #eeeeee;
+  box-shadow: 0px 0 4px 0 #cccccc;
+  cursor: pointer;
+  opacity: 0.88;
 }
 .menu ul li {
-  padding: 0 10px;
+  position: relative;
+  width: 205px;
+  padding: 10px 10px 10px 40px;
   text-align: center;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.menu ul li:first-of-type {
+  border-left: 3px solid #eee;
+  margin-left: -3px;
+}
+.menu ul li:hover {
+  background-color: #dddddd;
+}
+.menu ul li.current {
+  background-color: #f7f7dd;
+  color: black;
+}
+.menu ul li img {
+  max-height: 25px;
+  max-width: 25px;
+  position: absolute;
+  top: 0;
+  left: 10px;
+  bottom: 0;
+  right: 0;
+  margin: auto 0;
 }
 .sdk-fieldset,
 .material-fieldset {
+  height: 580px;
   padding: 0;
   margin: 0;
-  margin-bottom: 5px;
   border: none;
 }
 .text-separate {

sdk/css/tool.css

@@ -119,40 +119,86 @@ body {
     }
 }
 
+.main {
+    position: relative;
+    -webkit-transition: top .3s;
+    top: 0;
+}
+
 .menu {
     display: none;
     position: fixed;
     top: 10px;
-    right: -225px;
-    height: 25px;
-    width: 225px;
-    padding-left: 45px;
-    background: url(../images/menu.png) no-repeat scroll 0 0;
-    cursor: pointer;
+    right: -256px;
+    width: 300px;
     -webkit-transition: all .3s;
+    z-index: 10;
 
     &:hover {
-        right: 10px;
+        right: 0;
+    }
+
+    .arrow {
+        width: 45px;
+        height: 34px;
+        float: left;
+        background: url(../images/menu.png) no-repeat scroll 10px 5px #eeeeee;
+        box-shadow: 0px 0 4px 0 #cccccc;
+        cursor: pointer;
     }
 
     ul {
+        float: left;
         margin: 0;
         padding: 0;
         list-style: none;
         background-color: #eeeeee;
+        box-shadow: 0px 0 4px 0 #cccccc;
+        cursor: pointer;
+        opacity: 0.88;
 
         li {
-            padding: 0 10px;
+            position: relative;
+            width: 205px;
+            padding: 10px 10px 10px 40px;
             text-align: center;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+
+            &:first-of-type {
+                border-left: 3px solid #eee;
+                margin-left: -3px;
+            }
+
+            &:hover {
+                background-color: #dddddd;
+            }
+
+            &.current {
+                background-color: #f7f7dd;
+                color: black;
+            }
+
+            img {
+                max-height: 25px;
+                max-width: 25px;
+                position: absolute;
+                top: 0;
+                left: 10px;
+                bottom: 0;
+                right: 0;
+                margin: auto 0;
+            }
         }
     }
 }
 
 .sdk-fieldset,
 .material-fieldset {
+    height: 580px;
     padding: 0;
     margin: 0;
-    margin-bottom: 5px;
     border: none;
 }
 

sdk/css/tool.less

@@ -1,3 +1,10 @@
+/**
+ * legoSdkTool
+ * @file tool.js
+ * @author chestnut
+ * @description 弹窗页的逻辑
+ */
+
 var popup = {};
 var MESSAGE = {};
 
@@ -166,15 +173,29 @@ function Popup() {
         );
     };
 
+    function _bindEvents() {
+        $('#menu').on('click', 'li', function (e) {
+            var li = $(e.currentTarget);
+            var index = li.attr('index');
+            $('#main').css('top', -581 * index + 'px');
+            $('#menu li.current').removeClass('current');
+            li.addClass('current');
+        });
+    }
+
     this._initMenu = function (datasource) {
         var tmpl = '';
         $.each(datasource, function (index, impl) {
+            var className = index === 0 ? 'class="current"' : '';
+            var img = impl.screenshot ? '<img src="' + impl.screenshot + '" />' : '';
             tmpl += ''
-                + '<li index=' + index + '>'
+                + '<li index="' + index + '" ' + className + '>'
+                    + img
                     + (impl.templateName || impl.mcid)
                 + '</li>';
         });
         $('#menu ul').html(tmpl).parent().show();
+        _bindEvents();
     };
 
     this.init = function () {
@@ -394,8 +415,8 @@ function sdkPopup() {
         else {
             $('#main').hide();
             $('#sdkNotFound').show();
-            Helper.waiting(false);
         }
+        Helper.waiting(false);
     };
 }
 

sdk/images/menu.png

@@ -1,6 +1,6 @@
 {
     "name": "SDK TOOL",
-    "version": "0.1.4",
+    "version": "0.1.5",
     "icons": {
         "128": "images/icon.png"
     },

sdk/js/tool.js

@@ -1,6 +1,6 @@
 <?xml version='1.0' encoding='UTF-8'?>
 <gupdate xmlns='http://www.google.com/update2/response' protocol='2.0'>
   <app appid='kiapedlmjgmhomenpmjfnieiialeikkf'>
-    <updatecheck codebase='https://github.com/chestnutchen/legoSdkTool/raw/master/sdk.crx' version='0.1.4' />
+    <updatecheck codebase='https://github.com/chestnutchen/legoSdkTool/raw/master/sdk.crx' version='0.1.5' />
   </app>
 </gupdate>