Working on removing Material Design 2

src/main/resources/static/html/com/app/sample/type0201.html

@@ -139,6 +139,18 @@
             });
         }
     },
+    "e.gender.change" : {
+        target : "#search #gender",
+        handler : function(e) {
+            cont["e.btnSearch.click"].trigger("click");
+        }
+    },
+    "e.eyeColor.change" : {
+        target : "#search #eyeColor",
+        handler : function(e) {
+            cont["e.btnSearch.click"].trigger("click");
+        }
+    },
     "e.btnExcel.click" : function(e) {
         e.preventDefault();
 

src/main/resources/static/html/com/app/sample/type0301.html

@@ -123,6 +123,18 @@
                 });
             }
         },
+        "e.gender.change" : {
+            target : "#search #gender",
+            handler : function(e) {
+                cont["e.btnSearch.click"].trigger("click");
+            }
+        },
+        "e.eyeColor.change" : {
+            target : "#search #eyeColor",
+            handler : function(e) {
+                cont["e.btnSearch.click"].trigger("click");
+            }
+        },
         "e.btnExcel.click" : function(e) {
             e.preventDefault();
 

src/main/resources/static/html/com/app/sample/type0601.html

@@ -4,15 +4,35 @@
         min-height: 484px;
         border-radius: var(--njs-border-radius-l);
     }
+
+    .type0601 .icon {
+        padding: 0;
+        margin: 0;
+    }
+    .type0601 .icon a {
+        display: inline-block;
+        margin-top: 10px;
+    }
+    .type0601 .expand {
+        display: none;
+    }
+    .type0601 .collapse svg,
+    .type0601 .expand svg {
+        height: 24px;
+        width: 24px;
+        fill: var(--md-sys-color-secondary);
+    }
 </style>
 
 <article class="type0601">
     <div class="flex-horizental">
         <div style="max-width: 218px;">
             <div class="flex-horizental">
-                <div class="button-panel">
-                    <button id="btnClose">-</button>
-                    <button id="btnOpen">+</button>
+                <div class="button-panel icon">
+                    <a id="expandCollapse" href="#" data-opts='{ "size": "none", "color": "none" }'>
+                        <span class="collapse"><svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m2.009 12.002c0-5.517 4.48-9.997 9.998-9.997s9.998 4.48 9.998 9.997c0 5.518-4.48 9.998-9.998 9.998s-9.998-4.48-9.998-9.998zm1.5 0c0 4.69 3.808 8.498 8.498 8.498s8.498-3.808 8.498-8.498-3.808-8.497-8.498-8.497-8.498 3.807-8.498 8.497zm6.711-4.845c-.141-.108-.3-.157-.456-.157-.389 0-.755.306-.755.749v8.501c0 .445.367.75.755.75.157 0 .316-.05.457-.159 1.554-1.203 4.199-3.252 5.498-4.258.184-.142.29-.36.29-.592 0-.23-.107-.449-.291-.591zm.289 7.564v-5.446l3.523 2.718z" fill-rule="nonzero"/></svg></span>
+                        <span class="expand"><svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m11.998 2c5.517 0 9.997 4.48 9.997 9.998 0 5.517-4.48 9.997-9.997 9.997-5.518 0-9.998-4.48-9.998-9.997 0-5.518 4.48-9.998 9.998-9.998zm0 1.5c-4.69 0-8.498 3.808-8.498 8.498s3.808 8.497 8.498 8.497 8.497-3.807 8.497-8.497-3.807-8.498-8.497-8.498zm4.845 6.711c.108-.141.157-.3.157-.456 0-.389-.306-.755-.749-.755h-8.501c-.445 0-.75.367-.75.755 0 .157.05.316.159.457 1.203 1.554 3.252 4.199 4.258 5.498.142.184.36.29.592.29.23 0 .449-.107.591-.291zm-7.564.289h5.446l-2.718 3.522z" fill-rule="nonzero"/></svg></span>
+                    </a>
                 </div>
             </div>
             <div id="master"></div>
@@ -116,13 +136,20 @@
                 url : "sample/saveSampleList.json"
             });
         },
-        "e.btnOpen.click" : function(e) {
+        "e.expandCollapse.click" : function(e) {
             e.preventDefault();
-            cont["p.tree.master"].expand();
-        },
-        "e.btnClose.click" : function(e) {
-            e.preventDefault();
-            cont["p.tree.master"].collapse(true);
+            if (N(this).data("status") === "expand") {
+                N(".button-panel .expand", cont.view).hide();
+                N(".button-panel .collapse", cont.view).show();
+                cont["p.tree.master"].collapse(true);
+                N(this).data("status", "collapse");
+            } else {
+                N(".button-panel .expand", cont.view).show();
+                N(".button-panel .collapse", cont.view).hide();
+                cont["p.tree.master"].expand();
+                N(this).data("status", "expand");
+            }
+
         },
         "e.btnExcel.click" : function(e) {
             e.preventDefault();

src/main/resources/static/html/com/app/sample/type0701.html

@@ -8,9 +8,11 @@
             </ul>
         </div>
     </div>
+
     <div class="button-panel">
         <button id="btnSearch" href="#" data-opts='{ "color": "primary" }'>조회</button>
     </div>
+
     <div id="master">
         <a href="#"><span></span></a> <!-- 맨 앞으로 가기 버튼 -->
         <ul>
@@ -41,6 +43,18 @@
         "p.tab.master" : {
             tabScroll: true
         },
+        "e.gender.change" : {
+            target : "#search #gender",
+            handler : function(e) {
+                cont["e.btnSearch.click"].trigger("click");
+            }
+        },
+        "e.eyeColor.change" : {
+            target : "#search #eyeColor",
+            handler : function(e) {
+                cont["e.btnSearch.click"].trigger("click");
+            }
+        },
         "e.btnSearch.click" : function(e) {
             e.preventDefault();
             // 활성화된 탭 페이지에서 컨트롤러 가져오기