Skip to content

Commit

Permalink
[fix]: optimize editor button and add lock notification
Browse files Browse the repository at this point in the history
  • Loading branch information
TankNee committed Jul 8, 2021
1 parent 1e17718 commit b2b48ce
Show file tree
Hide file tree
Showing 4 changed files with 58 additions and 44 deletions.
8 changes: 1 addition & 7 deletions src/components/Header.vue
Original file line number Diff line number Diff line change
Expand Up @@ -355,12 +355,7 @@ export default {
key: 'noteListVisible',
value: !this.noteListVisible
})
},
lockModeHandler: function () {
this.toggleChanged({
key: 'enablePreviewEditor',
value: !this.enablePreviewEditor
})
this.$refs.sideDrawer.hide()
},
clearInputHandler: function () {
this.searchText = ''
Expand All @@ -379,7 +374,6 @@ export default {
this.$refs.loginDialog.toggle()
}
bus.$on(events.VIEW_SHORTCUT_CALL.switchView, this.switchViewHandler)
bus.$on(events.VIEW_SHORTCUT_CALL.lockMode, this.lockModeHandler)
},
watch: {
isLogin: function (currentData) {
Expand Down
4 changes: 3 additions & 1 deletion src/i18n/en-us/other.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,7 @@ export default {
prepareExportData: 'Preparing Export-Data',
exportNoteSuccessfully: 'Export Note Successfully',
sourceMode: 'Source Mode',
previewMode: 'Preview Mode'
previewMode: 'Preview Mode',
lockModeOn: 'Keyboard Locked',
lockModeOff: 'Keyboard Unlocked'
}
4 changes: 3 additions & 1 deletion src/i18n/zh-cn/other.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,7 @@ export default {
prepareExportData: '正在准备导出数据',
exportNoteSuccessfully: '笔记导出成功',
sourceMode: '源代码模式',
previewMode: '预览模式'
previewMode: '预览模式',
lockModeOn: '键盘输入已被锁定',
lockModeOff: '键盘锁定已被解除'
}
86 changes: 51 additions & 35 deletions src/pages/Index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -19,17 +19,6 @@
</template>
<template v-slot:after>
<div class='full-height'>
<!-- <q-scroll-area-->
<!-- ref='previewScrollArea'-->
<!-- id='muyaScrollContainer'-->
<!-- :thumb-style='thumbStyle'-->
<!-- :bar-style='barStyle'-->
<!-- class='exclude-header'-->
<!-- v-show='!isSourceMode'-->
<!-- @scroll='editorScrollHandler'-->
<!-- >-->
<!-- <Muya ref='muya' :active='!isSourceMode' :data='tempNoteData' />-->
<!-- </q-scroll-area>-->
<div v-show='!isSourceMode'>
<Muya ref='muya' :active='!isSourceMode' :data='tempNoteData' />
</div>
Expand All @@ -54,37 +43,57 @@
</g>
</svg>
</q-icon>
<q-icon
name='format_align_center'
<q-btn
icon='format_align_center'
dense
flat
round
class='absolute-top-right fab-icon cursor-pointer material-icons-round'
@click.stop='$refs.outlineDrawer.show'
size='24px'
size='md'
color='#26A69A'
v-show='dataLoaded && contentsListLoaded && !isOutlineShow && !isSourceMode'
v-ripple
key='format_align_center'
/>
<q-icon
:name='isSourceMode ? "assignment" : "code"'
<q-btn
:icon='isSourceMode ? "assignment" : "code"'
dense
flat
round
class='absolute-bottom-right fab-icon cursor-pointer material-icons-round'
style='bottom: 50px'
style='bottom: 100px'
@click='isSourceMode = !isSourceMode'
size='24px'
size='md'
color='#26A69A'
v-show='dataLoaded && !isOutlineShow'
v-ripple
key='source_code'
:title="!isSourceMode ? $t('sourceMode') : $t('previewMode')"
>
<q-tooltip anchor='top middle' self='bottom middle' :offset='[10, 10]'
content-class='text-bold text-white shadow-4'
>{{ !isSourceMode ? $t('sourceMode') : $t('previewMode') }}
</q-tooltip>
</q-icon>
<q-icon
name='save'
</q-btn>
<q-btn
:icon='enablePreviewEditor ? "lock_open" : "lock"'
dense
flat
round
class='absolute-bottom-right fab-icon cursor-pointer material-icons-round'
style='bottom: 50px'
@click='lockModeHandler'
size='md'
color='#26A69A'
v-show='dataLoaded && !isOutlineShow'
v-ripple
key='lock'
/>
<q-btn
icon='save'
class='absolute-bottom-right fab-icon cursor-pointer material-icons-round'
dense
flat
round
@click='refreshCurrentNote'
size='24px'
size='md'
color='#26A69A'
v-show='dataLoaded && !isOutlineShow'
v-ripple
Expand Down Expand Up @@ -115,7 +124,7 @@ const {
mapGetters: mapServerGetters,
mapState: mapServerState
} = createNamespacedHelpers('server')
const { mapState: mapClientState } = createNamespacedHelpers('client')
const { mapState: mapClientState, mapActions: mapClientActions } = createNamespacedHelpers('client')
// import Sidebar from '../components/Sidebar'
export default {
name: 'PageIndex',
Expand Down Expand Up @@ -152,7 +161,7 @@ export default {
},
...mapServerGetters(['currentNote']),
...mapServerState(['contentsList', 'isCurrentNoteLoading']),
...mapClientState(['noteListVisible'])
...mapClientState(['noteListVisible', 'enablePreviewEditor'])
},
data () {
return {
Expand All @@ -174,15 +183,22 @@ export default {
},
editorScrollHandler: function (e) {
bus.$emit(events.EDITOR_SCROLL, e)
}
},
lockModeHandler: function () {
this.toggleChanged({
key: 'enablePreviewEditor',
value: !this.enablePreviewEditor
})
this.$q.notify({
color: 'primary',
icon: 'info',
message: this.enablePreviewEditor ? this.$t('lockModeOff') : this.$t('lockModeOn')
})
},
...mapClientActions(['toggleChanged'])
},
mounted () {
// const that = this
// bus.$on(events.SCROLL_DOWN, () => {
// that.$refs.previewScrollArea.setScrollPosition(that.$refs.previewScrollArea.scrollSize, 300)
// })
bus.$on(events.VIEW_SHORTCUT_CALL.lockMode, this.lockModeHandler)
bus.$on(events.VIEW_SHORTCUT_CALL.sourceMode, this.sourceModeHandler)
},
watch: {
Expand Down

0 comments on commit b2b48ce

Please sign in to comment.