zhouchijian
/
fe-drone-ci
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feature: add fixedHeader settings

This commit is contained in:
Pan 2019-03-21 16:38:41 +08:00
parent 3594052c90
commit d919acf64b
7 changed files with 113 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
src/components/RightPanel/index.vue
View File

@ -74,57 +74,60 @@ export default {
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
.rightPanel-background {
opacity: 0;
transition: opacity .3s cubic-bezier(.7,.3,.1,1);
background: rgba(0, 0, 0, .2);
width: 0;
height: 0;
position: fixed;
z-index: -1;
}
.rightPanel-background {
opacity: 0;
transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
background: rgba(0, 0, 0, .2);
width: 0;
height: 0;
top: 0;
left: 0;
position: fixed;
z-index: -1;
}
.rightPanel {
background: #fff;
z-index: 3000;
position: fixed;
height: 100vh;
width: 100%;
max-width: 260px;
top: 0px;
.rightPanel {
background: #fff;
z-index: 3000;
position: fixed;
height: 100vh;
width: 100%;
max-width: 260px;
top: 0px;
left: 0px;
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
transition: all .25s cubic-bezier(.7,.3,.1,1);
transform: translate(100%);
z-index: 40000;
left: auto;
right: 0px;
}
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
transition: all .25s cubic-bezier(.7, .3, .1, 1);
transform: translate(100%);
z-index: 40000;
left: auto;
right: 0px;
}
.show {
.show {
transition: all .3s cubic-bezier(.7,.3,.1,1);
.rightPanel-background {
z-index: 20000;
opacity: 1;
width: 100%;
height: 100%;
}
transition: all .3s cubic-bezier(.7, .3, .1, 1);
.rightPanel {
transform: translate(0);
}
}
.rightPanel-background {
z-index: 20000;
opacity: 1;
width: 100%;
height: 100%;
}
.handle-button {
position: absolute;
left: -48px;
border-radius: 6px 0 0 6px !important;
width: 48px;
height: 48px;
pointer-events: auto;
z-index: 0;
font-size: 24px;
text-align: center;
}
.rightPanel {
transform: translate(0);
}
}
.handle-button {
position: absolute;
left: -48px;
border-radius: 6px 0 0 6px !important;
width: 48px;
height: 48px;
pointer-events: auto;
z-index: 0;
font-size: 24px;
text-align: center;
}
</style>

22
src/layout/Layout.vue
View File

@ -3,8 +3,10 @@
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
<sidebar class="sidebar-container" />
<div :class="{hasTagsView:needTagsView}" class="main-container">
<navbar />
<tags-view v-if="needTagsView" />
<div :class="{'fixed-header':fixedHeader}">
<navbar />
<tags-view v-if="needTagsView" />
</div>
<app-main />
<right-panel v-if="showSettings">
<settings />
@ -35,7 +37,8 @@ export default {
sidebar: state => state.app.sidebar,
device: state => state.app.device,
showSettings: state => state.settings.showSettings,
needTagsView: state => state.settings.tagsView
needTagsView: state => state.settings.tagsView,
fixedHeader: state => state.settings.fixedHeader
}),
classObj() {
return {
@ -56,6 +59,8 @@ export default {
<style rel="stylesheet/scss" lang="scss" scoped>
@import "~@/styles/mixin.scss";
@import "~@/styles/variables.scss";
.app-wrapper {
@include clearfix;
position: relative;
@ -75,4 +80,15 @@ export default {
position: absolute;
z-index: 999;
}
.fixed-header{
position: fixed;
top: 0;
right: 0;
z-index: 9;
width: calc(100% - #{$sideBarWidth});
transition: width 0.28s;
}
.hideSidebar .fixed-header{
width: calc(100% - 54px)
}
</style>

18
src/layout/components/AppMain.vue
View File

@ -22,7 +22,7 @@ export default {
}
</script>
<style scoped>
<style rel="stylesheet/scss" lang="scss" scoped>
.app-main {
/*50= navbar 50 */
min-height: calc(100vh - 50px);
@ -31,9 +31,19 @@ export default {
overflow: hidden;
}
.hasTagsView .app-main {
/*84 = navbar + tags-view = 50 + 34 */
min-height: calc(100vh - 84px);
.fixed-header+.app-main {
margin-top: 50px;
}
.hasTagsView {
.app-main {
/*84 = navbar + tags-view = 50 + 34 */
min-height: calc(100vh - 84px);
}
.fixed-header+.app-main {
margin-top: 80px;
}
}
</style>

2
src/layout/components/Navbar.vue
View File

@ -95,6 +95,8 @@ export default {
.navbar {
height: 50px;
overflow: hidden;
position: relative;
background: #fff;
box-shadow: 0 1px 4px rgba(0,21,41,.08);
.hamburger-container {

21
src/layout/components/Settings/index.vue
View File

@ -5,15 +5,21 @@
系统布局配置
</h3>
<div class="drawer-item">
<span>主题色</span>
<theme-picker style="float: right;height: 26px;margin: -3px 5px 0 0;" />
</div>
<div class="drawer-item">
<span>开启 Tags-View</span>
<el-switch v-model="tagsView" class="drawer-switch" />
</div>
<div class="drawer-item">
<span>主题色</span>
<theme-picker style="float: right;height: 26px;margin: -3px 5px 0 0;" />
<span>固定 Header</span>
<el-switch v-model="fixedHeader" class="drawer-switch" />
</div>
</div>
</div>
</template>
@ -29,6 +35,17 @@ export default {
}
},
computed: {
fixedHeader: {
get() {
return this.$store.state.settings.fixedHeader
},
set(val) {
this.$store.dispatch('settings/changeSetting', {
key: 'fixedHeader',
value: val
})
}
},
tagsView: {
get() {
return this.$store.state.settings.tagsView

6
src/settings.js
View File

@ -13,6 +13,12 @@ export default {
*/
tagsView: true,
/**
* @type {boolean} true | false
* @description Whether fix the header
*/
fixedHeader: true,
/**
* @type {string | array} 'production' | ['production','development']
* @description Need show err logs component.

5
src/store/modules/settings.js
View File

@ -1,9 +1,10 @@
import defaultSettings from '@/settings'
const { showSettings, tagsView } = defaultSettings
const { showSettings, tagsView, fixedHeader } = defaultSettings
const state = {
showSettings: showSettings,
tagsView: tagsView
tagsView: tagsView,
fixedHeader: fixedHeader
}
const mutations = {