sitenav and transition

frontend/src/admin.js

@@ -4,6 +4,7 @@ import VueAsyncData from 'vue-async-data'
 import App from './components/Admin/App.vue'
 import Router from './components/Admin/router.js'
 import './components/resources.js'
+import store from './components/Admin/Vuex/Store'
 
 Vue.use(VueAsyncData)
 Vue.config.debug = true
@@ -18,6 +19,7 @@ var application = Vue.extend({
     onPageTitleChanged: function (title) {
       this.pageTitle = title
     }
-  }
+  },
+  store: store
 })
 Router.start(application, 'html')

frontend/src/assets/page-transition.scss

@@ -4,11 +4,20 @@
 }
 
 .page-enter {
-  animation: page-in .5s;
+  animation: page-in .3s;
+  position: absolute;
 }
 
 .page-leave {
-  animation: page-out .5s;
+  animation: page-out .3s;
+  position: absolute;
+}
+
+.pusher {
+  .page-transition {
+    &.full-page {
+    }
+  }
 }
 
 @keyframes page-in {

frontend/src/components/Admin/App.vue

@@ -4,12 +4,12 @@
   </div>
   <div v-else>
     <div class="ui top attached demo menu" id="top-menu-bar" v-if="topMenuVisible">
-      <a class="item" v-on:click="toggleSidebar(event)"><i class="sidebar icon"></i></a>
+      <a class="item" v-on:click="toggleSiteNav(event)"><i class="sidebar icon"></i></a>
     </div>
   </div>
   <div class="ui bottom attached segment pushable" id="main-pusher">
     <site-nav></site-nav>
-    <div class="pusher">
+    <div class="pusher" v-bind:class="{'has-sitenav':siteNavVisible}">
       <router-view></router-view>
     </div>
   </div>
@@ -23,6 +23,8 @@
   import CurrentUserProvider from 'extensions/CurrentUserProvider'
   import PackageInstaller from 'extensions/PackageInstaller'
   import packages from 'src/packages/index.js'
+  import { toggleSiteNavVisible } from 'components/Admin/Vuex/Actions'
+  import { getSiteNavVisible } from 'components/Admin/Vuex/Getters'
 
   export default {
     data: function () {
@@ -32,6 +34,15 @@
         loading: true
       }
     },
+    vuex: {
+      actions: {
+        toggleSiteNav: toggleSiteNavVisible
+      },
+      getters: {
+        // note that you're passing the function itself, and not the value 'getCount()'
+        siteNavVisible: getSiteNavVisible
+      }
+    },
     events: {
       onCurrentUserChanged: function (user) {
         if (!user) {
@@ -78,11 +89,7 @@
         Router.go('/login')
       }.bind(this))
     },
-    methods: {
-      toggleSidebar: function (event) {
-        this.$broadcast('onToggleSidebar')
-      }
-    }
+    methods: {}
   }
 </script>
 
@@ -92,5 +99,18 @@
   @import "../../assets/page-transition.scss";
   @import "../../assets/custom.scss";
 
+  #main-pusher {
+    margin-bottom: 0;
+    height: calc(100% - 42px);
+  }
 
+  .pusher {
+    &.has-sitenav {
+      > .container {
+      }
+    }
+    > .container {
+      padding: 0 40px 0 10px;
+    }
+  }
 </style>

frontend/src/components/Admin/Common/SiteNav.vue

@@ -1,8 +1,8 @@
 <template>
-  <!-- Sidebar Menu -->
+  <!-- Sitenav Menu -->
   <div class="ui visible labeled accordion icon left inline vertical sidebar menu"
        id="SiteNav"
-       v-if="visible" transition="sidenav">
+       v-if="siteNavVisible" transition="sitenav">
     <div class="ui container">
       <a class="item self-configuration" title="个人设置">
         <img class="ui medium circular image" src="/static/images/avatar1.jpg"></a>
@@ -41,22 +41,29 @@
   import $ from 'jquery'
   import CurrentUserProvider from 'extensions/CurrentUserProvider'
   import AdminNavigatorsProvider from 'extensions/AdminNavigatorsProvider.vue'
+  import store from 'components/Admin/Vuex/Store'
+  import { getSiteNavVisible } from 'components/Admin/Vuex/Getters'
 
   export default {
     attached: function () {
     },
+    vuex: {
+      getters: {
+        // note that you're passing the function itself, and not the value 'getCount()'
+        siteNavVisible: getSiteNavVisible
+      }
+    },
     data: function () {
       CurrentUserProvider.getCurrentUser().then(function (loadedUser) {
         this.user = loadedUser
       }.bind(this))
       return {
         user: null,
-        visible: false,
         navigators: AdminNavigatorsProvider.getNavigators()
       }
     },
     watch: {
-      'visible': function (val, oldVal) {
+      'siteNavVisible': function (val, oldVal) {
         if (val === true) {
           $('#SiteNav').accordion('refresh')
         }
@@ -71,23 +78,20 @@
       onCurrentUserChanged: function (user) {
         if (user) {
           this.user = user
-          this.visible = true
+          store.dispatch('TOGGLE_SITENAV_VISIBLE', true)
         }
         else {
           this.user = {name: null}
-          this.visible = false
+          store.dispatch('TOGGLE_SITENAV_VISIBLE', false)
         }
       },
       onNavigatorsChanged: function (navigators) {
         this.navigators = navigators
-      },
-      onToggleSidebar: function () {
-        this.visible = !this.visible
       }
     },
     methods: {
       logout: function (event) {
-        this.visible = false
+        store.dispatch('TOGGLE_SITENAV_VISIBLE', false)
         CurrentUserProvider.logout()
       }
     },
@@ -99,23 +103,25 @@
 
 <style lang="scss" scoped>
   #SiteNav {
-    width: 250px;
-  }
+    /* 必需 */
+    &.sitenav-transition {
+      transition: all .3s ease;
+      width: 250px;
+      height: auto;
+      overflow: hidden;
+    }
 
-  /* 必需 */
-  .sidenav-transition {
-    transition: all .3s ease;
-    height: 30px;
-    padding: 10px;
-    background-color: #eee;
-    overflow: hidden;
-  }
+    /* .expand-enter 定义进入的开始状态 */
+    /* .expand-leave 定义离开的结束状态 */
+    &.sitenav-enter, &.sitenav-leave {
+      width: 0px;
+      height: auto;
+      opacity: 0;
+    }
 
-  /* .expand-enter 定义进入的开始状态 */
-  /* .expand-leave 定义离开的结束状态 */
-  .sidenav-enter, .sidenav-leave {
-    height: 0;
-    padding: 0 10px;
-    opacity: 0;
+    .content.active {
+      z-index: 1;
+    }
   }
+
 </style>

frontend/src/components/Admin/Vuex/Actions.js

@@ -0,0 +1,6 @@
+// An action will receive the store as the first argument.
+// Since we are only interested in the dispatch (and optionally the state)
+// we can pull those two parameters using the ES6 destructuring feature
+export const toggleSiteNavVisible = function ({dispatch, state}) {
+  dispatch('TOGGLE_SITENAV_VISIBLE')
+}

frontend/src/components/Admin/Vuex/Getters.js

@@ -0,0 +1,7 @@
+// This getter is a function which just returns the count
+// With ES6 you can also write it as:
+// export const getCount = state => state.count
+
+export function getSiteNavVisible (state) {
+  return state.siteNavVisible
+}

frontend/src/components/Admin/Vuex/Store.js

@@ -0,0 +1,30 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+// Create an object to hold the initial state when
+// the app starts up
+const state = {
+  siteNavVisible: false
+}
+
+// Create an object storing various mutations. We will write the mutation
+const mutations = {
+  // TODO: set up our mutations
+  TOGGLE_SITENAV_VISIBLE: function (state, amount) {
+    if (amount === undefined) {
+      state.siteNavVisible = !state.siteNavVisible
+    }
+    else {
+      state.siteNavVisible = amount
+    }
+  }
+}
+
+// Combine the initial state and the mutations to create a Vuex store.
+// This store can be linked to our app.
+export default new Vuex.Store({
+  state,
+  mutations
+})

frontend/src/components/Index/Common/SiteNav.vue

@@ -1,7 +1,7 @@
 <template xmlns:v-bind="http://www.w3.org/1999/xhtml">
-  <!-- Sidebar Menu -->
+  <!-- SiteNav Menu -->
   <div class="ui vertical sidebar menu">
-    <a class="item sidebar-close-item"><i class="chevron left icon"></i> 关闭菜单</a>
+    <a class="item sitenav-close-item"><i class="chevron left icon"></i> 关闭菜单</a>
     <a class="item"
        v-bind:class="{'active': $route.path=='/'}"
        v-link="{path:'/'}">首页</a>
@@ -60,7 +60,7 @@
 
   export default {
     attached: function () {
-      $('.ui.sidebar').sidebar('attach events', '.toc.item,.ui.sidebar>.sidebar-close-item')
+      $('.ui.sidebar').sidebar('attach events', '.toc.item,.ui.sidebar>.sitenav-close-item')
       $('#SiteNavUserMenu').dropdown()
     },
     data: function () {