From 66b8e8bcf83b5324005260a24f3a64e4839e503e Mon Sep 17 00:00:00 2001
From: q4speed <kun@fit2cloud.com>
Date: Mon, 26 Feb 2018 16:31:51 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E9=9A=90=E8=97=8F=E6=A0=91?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/assets/templates/assets/asset_list.html  |  28 +-
 .../perms/asset_permission_list.html          |  28 +-
 apps/static/css/jumpserver.css                | 281 ++++++++++--------
 3 files changed, 213 insertions(+), 124 deletions(-)

diff --git a/apps/assets/templates/assets/asset_list.html b/apps/assets/templates/assets/asset_list.html
index 493a7e64b..03211aba9 100644
--- a/apps/assets/templates/assets/asset_list.html
+++ b/apps/assets/templates/assets/asset_list.html
@@ -35,7 +35,7 @@
 {% block content %}
 <div class="wrapper wrapper-content">
    <div class="row">
-       <div class="col-lg-3">
+       <div class="col-lg-3" id="split-left">
            <div class="ibox float-e-margins">
                <div class="ibox-content mailbox-content" style="padding-top: 0">
                    <div class="file-manager ">
@@ -47,7 +47,12 @@
                </div>
            </div>
        </div>
-       <div class="col-lg-9 animated fadeInRight">
+       <div class="col-lg-9 animated fadeInRight" id="split-right">
+           <div class="tree-toggle">
+               <div class="btn btn-sm btn-primary tree-toggle-btn" onclick="toggle()">
+                   <i class="fa fa-angle-left fa-2x" id="toggle-icon"></i>
+               </div>
+           </div>
                <div class="mail-box-header">
                    <div class="uc pull-left m-r-5"><a class="btn btn-sm btn-primary btn-create-asset"> {% trans "Create asset" %} </a></div>
                     <div class="html5buttons">
@@ -68,7 +73,7 @@
                            {% endfor %}
                        </ul>
                    </div>
-                   <table class="table table-striped table-bordered table-hover " id="asset_list_table" >
+                   <table class="table table-striped table-bordered table-hover " id="asset_list_table" style="width: 100%">
                        <thead>
                            <tr>
                                <th class="text-center"><input type="checkbox" class="ipt_check_all"></th>
@@ -122,7 +127,7 @@
 
 {% block custom_foot_js %}
 <script>
-var zTree, rMenu, asset_table;
+var zTree, rMenu, asset_table, show = 0;
 function initTable() {
     var options = {
         ele: $('#asset_list_table'),
@@ -339,6 +344,21 @@ function initTree() {
     });
 }
 
+function toggle() {
+    if (show === 0) {
+        $("#split-left").hide(500, function () {
+            $("#split-right").attr("class", "col-lg-12");
+            $("#toggle-icon").attr("class", "fa fa-angle-right fa-2x");
+            show = 1;
+        });
+    } else {
+        $("#split-right").attr("class", "col-lg-9");
+        $("#toggle-icon").attr("class", "fa fa-angle-left fa-2x");
+        $("#split-left").show(500);
+        show = 0;
+    }
+}
+
 $(document).ready(function(){
     initTable();
     initTree();
diff --git a/apps/perms/templates/perms/asset_permission_list.html b/apps/perms/templates/perms/asset_permission_list.html
index 9226e8938..2a9b428ff 100644
--- a/apps/perms/templates/perms/asset_permission_list.html
+++ b/apps/perms/templates/perms/asset_permission_list.html
@@ -35,7 +35,7 @@
 {% block content %}
 <div class="wrapper wrapper-content">
    <div class="row">
-       <div class="col-lg-3">
+       <div class="col-lg-3" id="split-left">
            <div class="ibox float-e-margins">
                <div class="ibox-content mailbox-content" style="padding-top: 0">
                    <div class="file-manager ">
@@ -46,14 +46,19 @@
                </div>
            </div>
        </div>
-       <div class="col-lg-9 animated fadeInRight">
+       <div class="col-lg-9 animated fadeInRight" id="split-right">
+           <div class="tree-toggle">
+               <div class="btn btn-sm btn-primary tree-toggle-btn" onclick="toggle()">
+                   <i class="fa fa-angle-left fa-2x" id="toggle-icon"></i>
+               </div>
+           </div>
           <div class="mail-box-header">
               <div class="uc pull-left m-r-5">
                    <a class="btn btn-sm btn-primary btn-create-permission">
                        {% trans "Create permission" %}
                    </a>
               </div>
-              <table class="table table-striped table-bordered table-hover" id="permission_list_table" >
+              <table class="table table-striped table-bordered table-hover" id="permission_list_table" style="width: 100%">
                   <thead>
                   <tr>
                     <th class="text-center">
@@ -79,7 +84,7 @@
 {% block custom_foot_js %}
 
 <script>
-var zTree, rMenu, table;
+var zTree, rMenu, table, show = 0;
 function initTable() {
     var options = {
         ele: $('#permission_list_table'),
@@ -191,6 +196,21 @@ function initTree() {
     });
 }
 
+function toggle() {
+    if (show === 0) {
+        $("#split-left").hide(500, function () {
+            $("#split-right").attr("class", "col-lg-12");
+            $("#toggle-icon").attr("class", "fa fa-angle-right fa-2x");
+            show = 1;
+        });
+    } else {
+        $("#split-right").attr("class", "col-lg-9");
+        $("#toggle-icon").attr("class", "fa fa-angle-left fa-2x");
+        $("#split-left").show(500);
+        show = 0;
+    }
+}
+
 $(document).ready(function(){
     initTable();
     initTree();
diff --git a/apps/static/css/jumpserver.css b/apps/static/css/jumpserver.css
index a29dfb257..947fae9a2 100644
--- a/apps/static/css/jumpserver.css
+++ b/apps/static/css/jumpserver.css
@@ -3,258 +3,295 @@
 }
 
 .form-group.required .control-label:after {
-  content: " *";
-  color: red;
+    content: " *";
+    color: red;
 }
 
-.n-invalid {border: 1px solid #f00;}
-
+.n-invalid {
+    border: 1px solid #f00;
+}
 
 .primary-panel .ibox-title {
-  color: #ffffff;
-  background-color: #1AB394;
+    color: #ffffff;
+    background-color: #1AB394;
 }
 
 .primary-panel .ibox-content {
-  border: 1px solid #1AB394;
+    border: 1px solid #1AB394;
 }
 
 .info-panel .ibox-title {
-  color: #ffffff;
-  background-color: #23c6c8;
+    color: #ffffff;
+    background-color: #23c6c8;
 }
 
 .info-panel .ibox-content {
-  border: 1px solid #23c6c8;;
+    border: 1px solid #23c6c8;;
 }
 
-
 th a {
-  color: #676a6c;
+    color: #676a6c;
 }
 
 .select2-container--default .select2-results__option--highlighted[aria-selected] {
-   background-color: #d2d2d2 !important;
-   color: #333 !important;
- }
+    background-color: #d2d2d2 !important;
+    color: #333 !important;
+}
 
 .select2-selection--single,
 .select2-selection--multiple {
-   border: 1px solid #e5e6e7 !important;
-   cursor: text !important;
- }
+    border: 1px solid #e5e6e7 !important;
+    cursor: text !important;
+}
 
 .select2-container--forcus {
-   border: 1px solid #1AB394 !important;
- }
+    border: 1px solid #1AB394 !important;
+}
 
 .select2-selection__choice,
 .chosen-container-multi .chosen-choices li.search-choice {
-  background: #f1f1f1 !important;
-  border: 1px solid #e5e6e7 !important;
-  /*border: 1px solid #ededed;*/
-  border-radius: 2px !important;
-  box-shadow: none !important;
-  color: #333333 !important;
-  cursor: default !important;
-  line-height: 13px !important;
-  /*margin: 3px 0 3px 5px !important;*/
-  padding: 3px 20px 3px 5px !important;
-  position: relative !important;
- }
+    background: #f1f1f1 !important;
+    border: 1px solid #e5e6e7 !important;
+    /*border: 1px solid #ededed;*/
+    border-radius: 2px !important;
+    box-shadow: none !important;
+    color: #333333 !important;
+    cursor: default !important;
+    line-height: 13px !important;
+    /*margin: 3px 0 3px 5px !important;*/
+    padding: 3px 20px 3px 5px !important;
+    position: relative !important;
+}
 
 .select2-container--default.select2-container--focus .select2-selection--multiple {
-   border: 1px solid #1ab394 !important;
-   box-shadow: 0 0 5px rgba(0, 0, 0, 0.3) !important;
+    border: 1px solid #1ab394 !important;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3) !important;
 }
 
 .passwordBox2 {
-  max-width: 660px;
-  margin: 0 auto;
-  padding: 100px 20px 20px 20px;
+    max-width: 660px;
+    margin: 0 auto;
+    padding: 100px 20px 20px 20px;
 }
 
 .no-borders-tr td {
-  border-top: none !important;
+    border-top: none !important;
 }
 
 table.dataTable tbody > tr.selected, table.dataTable tbody > tr > .selected {
     background-color: #1ab394 !important;
 }
+
 table.dataTable tbody tr.selected a,
 table.dataTable tbody th.selected a,
 table.dataTable tbody td.selected a,
 table.dataTable tbody tr.selected td i.text-navy,
 table.dataTable tbody th.selected td i.text-navy,
-table.dataTable tbody td.selected td i.text-navy
-{
+table.dataTable tbody td.selected td i.text-navy {
     color: white !important;
 }
 
 .m-0 {
-  margin: 0px !important;
+    margin: 0px !important;
 }
+
 .m-t-0 {
-  margin-top: 0px !important;
+    margin-top: 0px !important;
 }
+
 .m-b-0 {
-  margin-bottom: 0px !important;
+    margin-bottom: 0px !important;
 }
+
 .m-l-0 {
-  margin-left: 0px !important;
+    margin-left: 0px !important;
 }
+
 .m-r-0 {
-  margin-right: 0px !important;
+    margin-right: 0px !important;
 }
+
 .m-5 {
-  margin: 5px !important;
+    margin: 5px !important;
 }
+
 .m-t-5 {
-  margin-top: 5px !important;
+    margin-top: 5px !important;
 }
+
 .m-b-5 {
-  margin-bottom: 5px !important;
+    margin-bottom: 5px !important;
 }
+
 .m-l-5 {
-  margin-left: 5px !important;
+    margin-left: 5px !important;
 }
+
 .m-r-5 {
-  margin-right: 5px !important;
+    margin-right: 5px !important;
 }
+
 .m-10 {
-  margin: 10px !important;
+    margin: 10px !important;
 }
+
 .m-t-10 {
-  margin-top: 10px !important;
+    margin-top: 10px !important;
 }
+
 .m-b-10 {
-  margin-bottom: 10px !important;
+    margin-bottom: 10px !important;
 }
+
 .m-l-10 {
-  margin-left: 10px !important;
+    margin-left: 10px !important;
 }
+
 .m-r-10 {
-  margin-right: 10px !important;
+    margin-right: 10px !important;
 }
+
 .m-15 {
-  margin: 15px !important;
+    margin: 15px !important;
 }
+
 .m-t-15 {
-  margin-top: 15px !important;
+    margin-top: 15px !important;
 }
+
 .m-b-15 {
-  margin-bottom: 15px !important;
+    margin-bottom: 15px !important;
 }
+
 .m-l-15 {
-  margin-left: 15px !important;
+    margin-left: 15px !important;
 }
+
 .m-r-15 {
-  margin-right: 15px !important;
+    margin-right: 15px !important;
 }
+
 .m-20 {
-  margin: 20px !important;
+    margin: 20px !important;
 }
+
 .m-t-20 {
-  margin-top: 20px !important;
+    margin-top: 20px !important;
 }
+
 .m-b-20 {
-  margin-bottom: 20px !important;
+    margin-bottom: 20px !important;
 }
+
 .m-l-20 {
-  margin-left: 20px !important;
+    margin-left: 20px !important;
 }
+
 .m-r-20 {
-  margin-right: 20px !important;
+    margin-right: 20px !important;
 }
+
 .m-25 {
-  margin: 25px !important;
+    margin: 25px !important;
 }
+
 .m-t-25 {
-  margin-top: 25px !important;
+    margin-top: 25px !important;
 }
+
 .m-b-25 {
-  margin-bottom: 25px !important;
+    margin-bottom: 25px !important;
 }
+
 .m-l-25 {
-  margin-left: 25px !important;
+    margin-left: 25px !important;
 }
+
 .m-r-25 {
-  margin-right: 25px !important;
+    margin-right: 25px !important;
 }
+
 .m-30 {
-  margin: 30px !important;
+    margin: 30px !important;
 }
+
 .m-t-30 {
-  margin-top: 30px !important;
+    margin-top: 30px !important;
 }
+
 .m-b-30 {
-  margin-bottom: 30px !important;
+    margin-bottom: 30px !important;
 }
+
 .m-l-30 {
-  margin-left: 30px !important;
+    margin-left: 30px !important;
 }
+
 .m-r-30 {
-  margin-right: 30px !important;
+    margin-right: 30px !important;
 }
 
 .ydxbd {
-	font-size: 12px;
-	width: 100%;
-	overflow: hidden;
-	padding-top: 15px;
-	margin-bottom: 15px;
-	display: block;
-	background: #f4f4f4;
-	padding-left: 10px;
-	padding-bottom: 15px;
+    font-size: 12px;
+    width: 100%;
+    overflow: hidden;
+    padding-top: 15px;
+    margin-bottom: 15px;
+    display: block;
+    background: #f4f4f4;
+    padding-left: 10px;
+    padding-bottom: 15px;
 }
+
 .mar {
     margin-left: 2px;
     line-height: 0px;
 }
+
 .mar-j {
     margin-left: 3px;
     margin-right: 3px;
 }
 
-.form-asset-on p{
-    margin-bottom:0px;
+.form-asset-on p {
+    margin-bottom: 0px;
 }
 
-.form-asset-on button{
+.form-asset-on button {
     background: #f1f1f1;
     margin-right: 2px;
 }
 
-.form-asset-on{
+.form-asset-on {
     border: 1px solid #e5e6e7;
-    padding-top:5px;
+    padding-top: 5px;
     padding-bottom: 0px;
     padding-left: 5px;
     padding-right: 5px;
-    min-height:34px;
+    min-height: 34px;
     height: 100%;
 }
 
 .mgl-5 {
-	margin-left: 5px;
-	font-size: 12px;
+    margin-left: 5px;
+    font-size: 12px;
 }
+
 .c02 {
-	color: #999;
+    color: #999;
 }
 
 .tagBtnList {
-	font-size: 12px;
-	line-height: 32px;
-	margin: -5px 0 0 0;
-	padding-left: 0px;
+    font-size: 12px;
+    line-height: 32px;
+    margin: -5px 0 0 0;
+    padding-left: 0px;
 }
 
 .tagBtn2 {
-	margin: 0 5px 5px 0;
-	font-size: 12px;
-	vertical-align: middle;
+    margin: 0 5px 5px 0;
+    font-size: 12px;
+    vertical-align: middle;
 }
 
 div.dataTables_wrapper div.dataTables_filter,
@@ -267,18 +304,18 @@ div.dataTables_wrapper div.dataTables_filter {
 }
 
 .simple-tag {
-  background-color: #f3f3f4;
-  border: 1px solid #e7eaec;
-  border-radius: 2px;
-  color: inherit;
-  display: inline-block;
-  font-size: 10px;
-  margin-right: 5px;
-  margin-top: 5px;
-  padding: 5px 12px;
-}
-
-#op.col-md-6{
+    background-color: #f3f3f4;
+    border: 1px solid #e7eaec;
+    border-radius: 2px;
+    color: inherit;
+    display: inline-block;
+    font-size: 10px;
+    margin-right: 5px;
+    margin-top: 5px;
+    padding: 5px 12px;
+}
+
+#op.col-md-6 {
     padding-left: 0;
 }
 
@@ -286,7 +323,7 @@ div.dataTables_wrapper div.dataTables_filter {
     padding-left: 10px;
     font-size: 12px;
     line-height: 18px;
-    margin-bottom:0;
+    margin-bottom: 0;
     margin-left: 10px;
     margin-right: 10px
 }
@@ -349,7 +386,7 @@ div.dataTables_wrapper div.dataTables_filter {
     border-radius: 5px 5px 0 0;
 }
 
-.popover{
+.popover {
     padding: 9px 14px;
     position: absolute;
     top: 0;
@@ -357,7 +394,7 @@ div.dataTables_wrapper div.dataTables_filter {
     z-index: 1060;
     display: none;
     max-width: 276px;
-    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
@@ -374,7 +411,19 @@ div.dataTables_wrapper div.dataTables_filter {
     background-clip: padding-box;
     border: 1px solid #ccc;
     border-radius: 6px;
-    box-shadow: 0 5px 10px rgba(0,0,0,.2);
+    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
     line-break: auto;
 }
 
+.tree-toggle {
+    position: absolute;
+    left: 0;
+    top: 1px;
+    height: 100%;
+}
+
+.tree-toggle-btn {
+    width: 12px;
+    text-align: center;
+    padding: 5px 0;
+}