Skip to content

Commit 70b46a3

Browse files
devmonster-techdevmonster-tech
committed
sitenav and transition
1 parent a41e25d commit 70b46a3

File tree

8 files changed

+119
-39
lines changed

8 files changed

+119
-39
lines changed

‎frontend/src/admin.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import VueAsyncData from 'vue-async-data'
44
import App from './components/Admin/App.vue'
55
import Router from './components/Admin/router.js'
66
import './components/resources.js'
7+
import store from './components/Admin/Vuex/Store'
78

89
Vue.use(VueAsyncData)
910
Vue.config.debug = true
@@ -18,6 +19,7 @@ var application = Vue.extend({
1819
onPageTitleChanged: function (title) {
1920
this.pageTitle = title
2021
}
21-
}
22+
},
23+
store: store
2224
})
2325
Router.start(application, 'html')

‎frontend/src/assets/page-transition.scss

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,20 @@
44
}
55

66
.page-enter {
7-
animation: page-in .5s;
7+
animation: page-in .3s;
8+
position: absolute;
89
}
910

1011
.page-leave {
11-
animation: page-out .5s;
12+
animation: page-out .3s;
13+
position: absolute;
14+
}
15+
16+
.pusher {
17+
.page-transition {
18+
&.full-page {
19+
}
20+
}
1221
}
1322

1423
@keyframes page-in {

‎frontend/src/components/Admin/App.vue

Lines changed: 27 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@
44
</div>
55
<div v-else>
66
<div class="ui top attached demo menu" id="top-menu-bar" v-if="topMenuVisible">
7-
<a class="item" v-on:click="toggleSidebar(event)"><i class="sidebar icon"></i></a>
7+
<a class="item" v-on:click="toggleSiteNav(event)"><i class="sidebar icon"></i></a>
88
</div>
99
</div>
1010
<div class="ui bottom attached segment pushable" id="main-pusher">
1111
<site-nav></site-nav>
12-
<div class="pusher">
12+
<div class="pusher" v-bind:class="{'has-sitenav':siteNavVisible}">
1313
<router-view></router-view>
1414
</div>
1515
</div>
@@ -23,6 +23,8 @@
2323
import CurrentUserProvider from 'extensions/CurrentUserProvider'
2424
import PackageInstaller from 'extensions/PackageInstaller'
2525
import packages from 'src/packages/index.js'
26+
import { toggleSiteNavVisible } from 'components/Admin/Vuex/Actions'
27+
import { getSiteNavVisible } from 'components/Admin/Vuex/Getters'
2628
2729
export default {
2830
data: function () {
@@ -32,6 +34,15 @@
3234
loading: true
3335
}
3436
},
37+
vuex: {
38+
actions: {
39+
toggleSiteNav: toggleSiteNavVisible
40+
},
41+
getters: {
42+
// note that you're passing the function itself, and not the value 'getCount()'
43+
siteNavVisible: getSiteNavVisible
44+
}
45+
},
3546
events: {
3647
onCurrentUserChanged: function (user) {
3748
if (!user) {
@@ -78,11 +89,7 @@
7889
Router.go('/login')
7990
}.bind(this))
8091
},
81-
methods: {
82-
toggleSidebar: function (event) {
83-
this.$broadcast('onToggleSidebar')
84-
}
85-
}
92+
methods: {}
8693
}
8794
</script>
8895

@@ -92,5 +99,18 @@
9299
@import "../../assets/page-transition.scss";
93100
@import "../../assets/custom.scss";
94101
102+
#main-pusher {
103+
margin-bottom: 0;
104+
height: calc(100% - 42px);
105+
}
95106
107+
.pusher {
108+
&.has-sitenav {
109+
> .container {
110+
}
111+
}
112+
> .container {
113+
padding: 0 40px 0 10px;
114+
}
115+
}
96116
</style>

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

Lines changed: 32 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<template>
2-
<!-- Sidebar Menu -->
2+
<!-- Sitenav Menu -->
33
<div class="ui visible labeled accordion icon left inline vertical sidebar menu"
44
id="SiteNav"
5-
v-if="visible" transition="sidenav">
5+
v-if="siteNavVisible" transition="sitenav">
66
<div class="ui container">
77
<a class="item self-configuration" title="个人设置">
88
<img class="ui medium circular image" src="/static/images/avatar1.jpg"></a>
@@ -41,22 +41,29 @@
4141
import $ from 'jquery'
4242
import CurrentUserProvider from 'extensions/CurrentUserProvider'
4343
import AdminNavigatorsProvider from 'extensions/AdminNavigatorsProvider.vue'
44+
import store from 'components/Admin/Vuex/Store'
45+
import { getSiteNavVisible } from 'components/Admin/Vuex/Getters'
4446
4547
export default {
4648
attached: function () {
4749
},
50+
vuex: {
51+
getters: {
52+
// note that you're passing the function itself, and not the value 'getCount()'
53+
siteNavVisible: getSiteNavVisible
54+
}
55+
},
4856
data: function () {
4957
CurrentUserProvider.getCurrentUser().then(function (loadedUser) {
5058
this.user = loadedUser
5159
}.bind(this))
5260
return {
5361
user: null,
54-
visible: false,
5562
navigators: AdminNavigatorsProvider.getNavigators()
5663
}
5764
},
5865
watch: {
59-
'visible': function (val, oldVal) {
66+
'siteNavVisible': function (val, oldVal) {
6067
if (val === true) {
6168
$('#SiteNav').accordion('refresh')
6269
}
@@ -71,23 +78,20 @@
7178
onCurrentUserChanged: function (user) {
7279
if (user) {
7380
this.user = user
74-
this.visible = true
81+
store.dispatch('TOGGLE_SITENAV_VISIBLE', true)
7582
}
7683
else {
7784
this.user = {name: null}
78-
this.visible = false
85+
store.dispatch('TOGGLE_SITENAV_VISIBLE', false)
7986
}
8087
},
8188
onNavigatorsChanged: function (navigators) {
8289
this.navigators = navigators
83-
},
84-
onToggleSidebar: function () {
85-
this.visible = !this.visible
8690
}
8791
},
8892
methods: {
8993
logout: function (event) {
90-
this.visible = false
94+
store.dispatch('TOGGLE_SITENAV_VISIBLE', false)
9195
CurrentUserProvider.logout()
9296
}
9397
},
@@ -99,23 +103,25 @@
99103

100104
<style lang="scss" scoped>
101105
#SiteNav {
102-
width: 250px;
103-
}
106+
/* 必需 */
107+
&.sitenav-transition {
108+
transition: all .3s ease;
109+
width: 250px;
110+
height: auto;
111+
overflow: hidden;
112+
}
104113
105-
/* 必需 */
106-
.sidenav-transition {
107-
transition: all .3s ease;
108-
height: 30px;
109-
padding: 10px;
110-
background-color: #eee;
111-
overflow: hidden;
112-
}
114+
/* .expand-enter 定义进入的开始状态 */
115+
/* .expand-leave 定义离开的结束状态 */
116+
&.sitenav-enter, &.sitenav-leave {
117+
width: 0px;
118+
height: auto;
119+
opacity: 0;
120+
}
113121
114-
/* .expand-enter 定义进入的开始状态 */
115-
/* .expand-leave 定义离开的结束状态 */
116-
.sidenav-enter, .sidenav-leave {
117-
height: 0;
118-
padding: 0 10px;
119-
opacity: 0;
122+
.content.active {
123+
z-index: 1;
124+
}
120125
}
126+
121127
</style>

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
// An action will receive the store as the first argument.
2+
// Since we are only interested in the dispatch (and optionally the state)
3+
// we can pull those two parameters using the ES6 destructuring feature
4+
export const toggleSiteNavVisible = function ({dispatch, state}) {
5+
dispatch('TOGGLE_SITENAV_VISIBLE')
6+
}

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
// This getter is a function which just returns the count
2+
// With ES6 you can also write it as:
3+
// export const getCount = state => state.count
4+
5+
export function getSiteNavVisible (state) {
6+
return state.siteNavVisible
7+
}

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import Vue from 'vue'
2+
import Vuex from 'vuex'
3+
4+
Vue.use(Vuex)
5+
6+
// Create an object to hold the initial state when
7+
// the app starts up
8+
const state = {
9+
siteNavVisible: false
10+
}
11+
12+
// Create an object storing various mutations. We will write the mutation
13+
const mutations = {
14+
// TODO: set up our mutations
15+
TOGGLE_SITENAV_VISIBLE: function (state, amount) {
16+
if (amount === undefined) {
17+
state.siteNavVisible = !state.siteNavVisible
18+
}
19+
else {
20+
state.siteNavVisible = amount
21+
}
22+
}
23+
}
24+
25+
// Combine the initial state and the mutations to create a Vuex store.
26+
// This store can be linked to our app.
27+
export default new Vuex.Store({
28+
state,
29+
mutations
30+
})

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template xmlns:v-bind="http://www.w3.org/1999/xhtml">
2-
<!-- Sidebar Menu -->
2+
<!-- SiteNav Menu -->
33
<div class="ui vertical sidebar menu">
4-
<a class="item sidebar-close-item"><i class="chevron left icon"></i> 关闭菜单</a>
4+
<a class="item sitenav-close-item"><i class="chevron left icon"></i> 关闭菜单</a>
55
<a class="item"
66
v-bind:class="{'active': $route.path=='/'}"
77
v-link="{path:'/'}">首页</a>
@@ -60,7 +60,7 @@
6060
6161
export default {
6262
attached: function () {
63-
$('.ui.sidebar').sidebar('attach events', '.toc.item,.ui.sidebar>.sidebar-close-item')
63+
$('.ui.sidebar').sidebar('attach events', '.toc.item,.ui.sidebar>.sitenav-close-item')
6464
$('#SiteNavUserMenu').dropdown()
6565
},
6666
data: function () {

0 commit comments

Comments
 (0)