Merge pull request #23 from TankNee/rebuild/develop

202001002
TankNee · Oct 2, 2020 · 683f312 · 683f312
2 parents c469bbe + 5cc16af
commit 683f312
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 18 deletions.
diff --git a/src/components/NoteOutline.vue b/src/components/NoteOutline.vue
@@ -8,7 +8,7 @@
     overlay
     elevated
     side="right"
-    class="transparent"
+    class="bg-blur"
   >
     <q-scroll-area
       :thumb-style="thumbStyle"
@@ -18,22 +18,21 @@
       <q-tree
         :nodes="contentsList"
         node-key="key"
+        default-expand-all
         selected-color="primary"
-        class="non-selectable"
+        class="non-selectable z-max"
         :selected.sync="selected"
         :expanded.sync="expanded"
         @update:selected="v => {
             nodeClickHandler(v)
           }"
-        default-expand-all
-        no-connectors
       />
 <!--      <q-icon name="close" class="absolute-bottom" size="24px" color="#26A69A" />-->
     </q-scroll-area>
     <q-icon
       name="close"
-      :class="`absolute-bottom-right fab-icon cursor-pointer material-icons-round neeto-icon${$q.dark.isActive ? '-dark' : ''}`"
-      @click="$refs.drawer.hide()"
+      :class="`absolute-bottom-right fab-icon cursor-pointer material-icons-round neeto-icon${$q.dark.isActive ? '-dark' : ''} z-max`"
+      @click="hide"
       size="24px"
       color="#26A69A"
       v-ripple
@@ -49,18 +48,22 @@ import events from 'src/constants/events'
 const { mapGetters, mapState } = createNamespacedHelpers('server')
 export default {
   name: 'NoteOutline',
+  props: {
+    change: {
+      types: Function,
+      default: () => {}
+    }
+  },
   computed: {
     thumbStyle () {
       return {
-        backgroundColor: '#E8ECF1',
-        width: '7px',
-        opacity: 0.75
+        display: 'none'
       }
     },
 
     barStyle () {
       return {
-        width: '7px'
+        display: 'none'
       }
     },
     ...mapGetters(['currentNote']),
@@ -73,11 +76,13 @@ export default {
     }
   },
   methods: {
-    toggle: function () {
-      this.$refs.drawer.toggle()
+    show: function () {
+      this.$refs.drawer.show()
+      this.change(true)
     },
     hide: function () {
       this.$refs.drawer.hide()
+      this.change(false)
     },
     nodeClickHandler: function (v) {
       const node = helper.findNodeByNodeKey(this.contentsList, v)

diff --git a/src/css/style.css b/src/css/style.css
@@ -29,7 +29,8 @@ body {
   margin: 0;
   overflow: hidden;
   background: #ffffff !important;
-  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
+  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
+    'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
 }
 body.body {
   background: #ffffff !important;
@@ -41,6 +42,22 @@ body.body--dark {
   font-size: 15px;
   font-weight: bold;
 }
+.bg-blur {
+  /*webkit-filter: blur(10px); !* Chrome, Opera *!*/
+  /*-moz-filter: blur(10px);*/
+  /*-ms-filter: blur(10px);*/
+  /*filter: blur(10px);*/
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 99;
+  background-color: #fafafa;
+  backdrop-filter: blur(10px);
+  opacity: 0.8;
+  box-shadow: 0px 1px 16px 0px rgba(0, 0, 0, 0.31);
+  /*background: rgba(7, 7, 7, 0.6);*/
+}
 .tooltip {
   font-size: 17px;
 }

diff --git a/src/pages/Index.vue b/src/pages/Index.vue
@@ -31,10 +31,10 @@
           <q-icon
             name="format_align_center"
             class="absolute-top-right fab-icon cursor-pointer material-icons-round"
-            @click="() => $refs.outlineDrawer.toggle()"
+            @click="() => $refs.outlineDrawer.show()"
             size="24px"
             color="#26A69A"
-            v-if="dataLoaded && contentsListLoaded"
+            v-show="dataLoaded && contentsListLoaded && !isOutlineShow"
             v-ripple
           />
           <q-icon
@@ -43,11 +43,11 @@
             @click="refreshCurrentNote"
             size="24px"
             color="#26A69A"
-            v-if="dataLoaded"
+            v-show="dataLoaded && !isOutlineShow"
             v-ripple
           />
         </div>
-        <NoteOutline ref="outlineDrawer" />
+        <NoteOutline ref="outlineDrawer" :change="outlineDrawerChangeHandler" />
         <Loading :visible="isCurrentNoteLoading" />
       </template>
     </q-splitter>
@@ -93,12 +93,16 @@ export default {
   },
   data () {
     return {
-      splitterModel: 300
+      splitterModel: 300,
+      isOutlineShow: false
     }
   },
   methods: {
     refreshCurrentNote: function () {
       bus.$emit(events.SAVE_NOTE)
+    },
+    outlineDrawerChangeHandler: function (state) {
+      this.isOutlineShow = state
     }
   },
   mounted () {