feature: add fixedHeader settings

PanJiaChen · Mar 21, 2019 · d919acf · d919acf · yashanet · Mar 21, 2019
1 parent 3594052
commit d919acf
Show file tree

Hide file tree

Showing 7 changed files with 113 additions and 58 deletions.
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
@@ -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>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
@@ -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>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
@@ -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>
 
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
@@ -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 {

diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
@@ -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

diff --git a/src/settings.js b/src/settings.js
@@ -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.

diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
@@ -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 = {