导航菜单UI调整、动画效果

frontend/saas-web/app/view/core/form/FormPanel.scss

@@ -1,17 +1,19 @@
 .x-core-form {
+    padding: 10px;
 
     .x-tb {
-        color: #AEB1B5;
+        color: #A2A2A2;
+        // letter-spacing: 0.72px;
+        // text-align: left;
+        font-size: 16px;
     }
     .x-no {
-        font-size: 18px;
     }
     .x-code {
-        font-size: 16px;
     }
     .x-codeeditor {
         top: 0px !important;
-        left: 43px !important;
+        left: 39px !important;
 
         .x-form-trigger-wrap {
             border-top: none;
@@ -36,6 +38,10 @@
             color: #52C41A;
         }
 
+        .fa-edit {
+            color: #A2A2A2;
+        }
+
         &:hover {
             .fa-edit {
                 color: black;

frontend/saas-web/app/view/main/Main.js

@@ -30,8 +30,10 @@ Ext.define('saas.view.main.Main', {
                     xtype: 'component',
                     reference: 'mainLogo',
                     cls: 'main-logo-wrap',
-                    html: '<div class="main-logo"><img src="resources/images/default/logo-default.png">优企云服</div>',
-                    width: 160
+                    html: '<div class="main-logo"><img src="resources/images/default/logo-default.png"/><div class="logo-text">优企云服</div></div>',
+                    bind: {
+                        width: '{navWidth}'
+                    }
                 },
                 {
                     margin: '0 0 0 8',

frontend/saas-web/app/view/main/Main.scss

@@ -41,9 +41,19 @@ $treelist-nav-ui: (
     padding-left: 10px;
 }
 
+.main-right-tabpanel {
+    
+    .x-panel-bodyWrap {
+
+        #main-tab-panel-body {
+            background: #EEF4F9;
+        }
+    }
+}
+
 .main-logo-wrap {
     background-color: $base-color;
-    height: 65px;
+    height: 70px;
 
     font-size: 16px;
     font-weight: $font-weight-bold;
@@ -51,14 +61,23 @@ $treelist-nav-ui: (
     margin-left: 17px;
 
     .main-logo {
-        line-height: 65px;
+        background: #34BAF6;
 
         img {
-            margin-left: 15px;
-            margin-right: 15px;
-            top: 10px;
+            width: 64px;
+            top: 0px;
+            left: 20px;
             position: relative;
         }
+
+        .logo-text {
+            font-size: 18px;
+            color: #FFFFFF;
+            text-align: left;
+            top: 23px;
+            position: absolute;
+            right: 28px;
+        }
     }
 }
 

frontend/saas-web/app/view/main/MainContainerWrap.js

@@ -15,7 +15,9 @@ Ext.define('saas.view.main.MainContainerWrap', {
         {
             xtype: 'main-navigation',
             region: 'west',
-            width: 160,
+            bind: {
+                width: '{navWidth}'
+            }
         },
         {
             xtype: 'tabpanel',
@@ -27,7 +29,7 @@ Ext.define('saas.view.main.MainContainerWrap', {
             itemId: 'contentPanel',
             defaults: {
                 closable: true,
-                margin: 10
+                margin: 20
             },
             plugins: [new Ext.ux.TabCloseMenu({
                 closeTabText: '关闭当前页',

frontend/saas-web/app/view/main/MainController.js

@@ -30,19 +30,76 @@ Ext.define('saas.view.main.MainController', {
 
     onToggleNavigationSize: function () {
         var me = this,
+        viewModel = me.getViewModel(),
         refs = me.getReferences(),
         navigationList = refs.navigationTreeList,
         navCollapsed = !navigationList.navCollapsed,
-        new_width = navCollapsed ? 64 : 160,
+        new_width = navCollapsed ? viewModel.get('smallNavWidth') : viewModel.get('navWidth'),
+        newLogoImgStyle = navCollapsed ? {
+            width: 50,
+            top: 7,
+            left: 6
+        } : {
+            width: 64,
+            top: 0,
+            left: 20
+        },
+        newLogoTextStyle = navCollapsed ? {
+            10: {
+                opacity: 0.7
+            },
+            30: {
+                opacity: 0
+            },
+            100: {
+                opacity: 0
+            }
+        } : {
+            25: {
+                opacity: 0 
+            },
+            50: {
+                opacity: 1
+            }
+        },
+        newNavIconStyle = navCollapsed ? {
+            marginLeft: 6,
+            fontSize: 28
+        } : {
+            marginLeft: 24,
+            fontSize: 24
+        },
+        newNavTextStyle = navCollapsed ? {
+            opacity: 0
+        } : {
+            opacity: 1
+        },
         ope = navCollapsed ? 'addCls' : 'removeCls';
         
-        refs.mainLogo.animate({dynamic: true, to: {width: new_width}});
-        navigationList.body.animate({dynamic: true, to: {width: new_width}});
-        navigationList.animate({dynamic: true, to: {width: new_width}});
+        var mainLogo = refs.mainLogo;
+        var logoImg = mainLogo.el.dom.getElementsByTagName('img')[0];
+        var logoText = mainLogo.el.dom.getElementsByClassName('logo-text')[0];
+        var navItems = navigationList.el.dom.getElementsByClassName('x-navitem');
+
+        mainLogo.animate({dynamic: true, duration: 500, to: {width: new_width}});
+        Ext.fly(logoImg).animate({dynamic: true, duration: 500, to: newLogoImgStyle});
+        Ext.fly(logoText).animate({dynamic: true, duration: 500, keyframes: newLogoTextStyle});
+        navigationList.body.animate({dynamic: true, duration: 500, to: {width: new_width}});
+        navigationList.animate({dynamic: true, duration: 500, to: {width: new_width}});
+
+        for(var i = 0; i < navItems.length; i++) {
+            var item = navItems[i];
+            var icon = item.getElementsByClassName('nav-inner-icon')[0];
+            var text = item.getElementsByClassName('nav-inner-text')[0];
+
+            Ext.fly(icon).animate({dynamic: true, duration: 500, to: newNavIconStyle});
+            Ext.fly(text).animate({dynamic: true, duration: 500, to: newNavTextStyle});
+        }
 
         navigationList.el[ope]('nav-collapsed');
 
         navigationList.navCollapsed = navCollapsed;
+
     },
 
     selectCompany: function(item) {

frontend/saas-web/app/view/main/MainModel.js

@@ -7,5 +7,7 @@ Ext.define('saas.view.main.MainModel', {
     alias: 'viewmodel.main',
 
     data: {
+        navWidth: 185,
+        smallNavWidth: 64,
     }
 });

frontend/saas-web/app/view/main/Navigation.scss

@@ -1,3 +1,6 @@
+$nav-font-size: 16px;
+$nav-font-color: #FFFFFF;
+
 .x-navpanel {
     overflow: visible;
 
@@ -14,7 +17,7 @@
             overflow: visible;
     
             .x-autocontainer-outerCt {
-                background-color: #3C4A57;
+                background-color: #484A69;
     
                 .x-autocontainer-innerCt {
     
@@ -34,45 +37,58 @@
                             outline: none !important;
                             
                             .x-navitem-body {
-                                background-color: #3C4A57;
+                                background: #505275;
     
                                 .nav-inner-wrap {
-                                    position: relative;
                                     position: relative;
                                     overflow: hidden;
                                     list-style: none;
-                                    max-height: 64px;
+                                    max-height: 60px;
                                     padding: 0 10px;
     
                                     .nav-inner-icon {
-                                        color: #adb3b8;
-                                        font-size: 18px;
+                                        opacity: 0.4;
+
+                                        color: $nav-font-color;
+                                        font-size: 24px;
                                         text-align: center;
-                                        background-repeat: no-repeat;
-                                        background-position: 0 center;
-                                        margin-left: 10px;
+                                        margin-left: 24px;
                                         display: inline;
+                                        margin-right: 30px;
     
                                         &:before {
-                                            line-height: 64px;
+                                            line-height: 60px;
                                         }
                                     }
     
                                     .nav-inner-text {
-                                        cursor: default;
-                                        color: #adb3b8;
-                                        margin-left: 20px;
-                                        margin-right: 24px;
-                                        font-size: 14px;
-                                        line-height: 64px;
+                                        font-size: $nav-font-size;
+                                        color: $nav-font-color;
+                                        letter-spacing: 0.64px;
+                                        text-align: left;
+                                        opacity: 0.46;
                                         display: inline;
+                                        line-height: 60px;
+
                                     }
                                 }
                             }
                         }
                         .x-navitem-over {
                             .x-navitem-body {
-                                background-color: #475360;
+                                background: #474968;
+                                box-shadow: inset 0 1px 4px 0 rgba(0,0,0,0.50);
+
+                                .nav-inner-wrap {
+
+                                    .nav-inner-icon {
+                                        opacity: 1;
+                                    }
+
+                                    .nav-inner-text {
+                                        opacity: 1;
+                                    }
+                                }
                             }
                         }
                     }

frontend/saas-web/app/view/money/payBalance/FormPanelController.js

@@ -164,7 +164,7 @@ Ext.define('saas.view.money.payBalance.FormPanelController', {
                 beforerender: function (f) {
                     Ext.apply(f, {
                         dataUrl: '/api/document/bankinformation/list',
-                        // addXtype: 'document-banksubledger-formpanel',
+                        addXtype: 'other-bankinformation',
                         addTitle: '账户资料',
                         dbfinds: [{
                             from: 'id',

frontend/saas-web/packages/font-saas/sass/etc/icons.scss

@@ -1,5 +1,7 @@
 .sa-purchase:before { content: "\e613"; }
 
+.sa-weibiaoti1:before { content: "\e669"; }
+
 .sa-document:before { content: "\e654"; }
 
 .sa-switch-on:before { content: "\e622"; }
@@ -12,4 +14,6 @@
 
 .sa-setting:before { content: "\e64b"; }
 
+.sa-saas:before { content: "\e769"; }
+
 .sa-money:before { content: "\e6fa"; }

frontend/saas-web/packages/font-saas/sass/src/all.scss

@@ -11,8 +11,6 @@ $ext-font-path: get-resource-path('fonts');
 
 .x-sa:before {
   font-family:"font-saas" !important;
-  font-size:16px;
-  font-style:normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

frontend/saas-web/resources/json/navigation.json

@@ -1,6 +1,6 @@
 [{
     "text": "采购",
-    "iconCls": "x-fa fa-shopping-basket",
+    "iconCls": "x-sa sa-purchase",
     "items": [{
         "text": "制单",
         "items": [{
@@ -123,7 +123,7 @@
     }]
 }, {
     "text": "资金",
-    "iconCls": "x-fa fa-money",
+    "iconCls": "x-sa sa-money",
     "items": [{
         "text": "制单",
         "items": [{