Skip to content

Commit

Permalink
Responsive edit area and toolbar
Browse files Browse the repository at this point in the history
  • Loading branch information
dark-flames committed Jul 15, 2018
1 parent 37274f4 commit b2fc835
Show file tree
Hide file tree
Showing 6 changed files with 76 additions and 29 deletions.
4 changes: 3 additions & 1 deletion src/components/DefaultConfig.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import KatexParser from '@luogu-dev/markdown-it-katex'
import 'katex/dist/katex.css'
import HighlightjsParser from './plugins/HighlightjsParser'
import 'highlight.js/styles/tomorrow.css'
import { defaultBtns, getBtns } from './toolbar-button/toolbarBtn'
import { defaultBtns, defaultSimpleBtns, getBtns } from './toolbar-button/toolbarBtn'
import _ from 'lodash'

function mixin (dest, src) {
Expand All @@ -24,6 +24,8 @@ export const defaultConfig = {
HighlightjsParser
],
toolbarConfig: defaultBtns,
bigScreenToolbarConfig: defaultBtns,
smallScreenToolbarConfig: defaultSimpleBtns,
editorOption: {
mode: 'gfm',
lineNumbers: true,
Expand Down
2 changes: 1 addition & 1 deletion src/components/Dialog.vue
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@

<form class="mp-dialog-body" @submit.prevent="finish">
<div class="mp-dialog-form">
<div class="mp-dialog-field" v-for="field in request.body">
<div class="mp-dialog-field" v-for="field in request.body" :key="field.name">
<component :is="field.type || field.component" :request-field="field" v-model="responseData[field.name]"></component>
</div>
</div>
Expand Down
59 changes: 41 additions & 18 deletions src/components/MarkdownPalettes.vue
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<template>
<div class="mp-editor-container" :class="{'mp-full-screen': this.fullScreen}">
<div class="mp-editor-toolbar">
<ul class="mp-editor-menu" v-if="toolbarConfig.length > 0">
<li v-for="(item, index) in toolbarConfig" :class="{'mp-divider':item.name === '|'}" :key="item.name + index">
<div class="mp-editor-toolbar" v-if="toolbarBtns.length">
<ul class="mp-editor-menu">
<li v-for="(item, index) in toolbarBtns" :class="{'mp-divider':item.name === '|'}" :key="item.name + index">
<span v-if="item.name === '|'">|</span>
<a v-else :title="t(ensureValue(item.title))" @click="toolbarAction(item)" unselectable="on">
<i :class="['fa', ensureValue(item.icon)]" unselectable="on">{{ ensureValue(item.content) }}</i>
Expand All @@ -13,13 +13,15 @@
<div class="mp-editor-ground">
<div class="mp-editor-zone mp-input-zone" :class="{
'mp-editor-zone': previewDisplay === 'normal',
'mp-editor-zone-full': previewDisplay === 'hide'
'mp-editor-zone-full': previewDisplay === 'hide',
'mp-editor-zone-hide': previewDisplay === 'full'
}">
<div class="mp-input-area" ref="inputArea"></div>
</div>
<div class="mp-editor-zone mp-preview-zone" :class="{
'mp-editor-zone': previewDisplay === 'normal',
'mp-editor-zone-hide': previewDisplay === 'hide'
'mp-editor-zone-hide': previewDisplay === 'hide',
'mp-editor-zone-full': previewDisplay === 'full'
}">
<div class="mp-preview-area" ref="previewArea" @scroll="previewAreaScroll">
<div class="mp-preview-content" ref="previewContent" v-html="previewContent"></div>
Expand All @@ -34,6 +36,29 @@
</template>

<style scoped lang="stylus">
.mp-editor-zone
height: 100%
.mp-input-zone
box-sizing: border-box
width: 100%
height: 100%
.mp-preview-zone
display: none
.mp-editor-zone-full
display: block
box-sizing: border-box
width: 100%
border: none !important
.mp-editor-zone-hide
display: none !important
@media only screen and (min-width: 768px)
.mp-editor-zone
display block
box-sizing: border-box
width: 50%
float: left
.mp-editor-container
position:relative
height: 100%
Expand All @@ -59,18 +84,6 @@
bottom: 0
overflow: hidden
border-top: 1px solid #ddd
.mp-editor-zone
box-sizing: border-box
width: 50%
height: 100%
float: left
.mp-editor-zone-full
box-sizing: border-box
width: 100%
.mp-editor-zone-hide
display: none
.mp-preview-zone
border-left: 1px solid #ddd
padding-bottom: 2px
Expand Down Expand Up @@ -129,6 +142,7 @@
.mp-editor-menu>li>a
outline: 0
color: #666
cursor pointer
display: inline-block
min-width: 24px
font-size: 16px
Expand Down Expand Up @@ -198,7 +212,16 @@ export default {
}
},
computed: {
contentParser () { return contentParserFactory([...this.parsers, InjectLnParser]) }
contentParser () {
return contentParserFactory([...this.parsers, InjectLnParser])
},
toolbarBtns () {
if (window.screen.width > 768) {
return this.config.bigScreenToolbarConfig
} else {
return this.config.smallScreenToolbarConfig
}
}
},
methods: {
setCode (code) {
Expand Down
6 changes: 5 additions & 1 deletion src/components/ToolbarMixin.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,11 @@ export default {
toolbarHandleEventLegacy (event) {
if (event === 'hide') {
if (this.previewDisplay === 'normal') {
this.previewDisplay = 'hide'
if (window.screen.width > 768) {
this.previewDisplay = 'hide'
} else {
this.previewDisplay = 'full'
}
} else {
this.previewDisplay = 'normal'
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/toolbar-button/btn-header.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
export default function header (level) {
export default function headerFactory (level) {
return {
name: 'h' + level,
icon: 'icon-blold',
Expand Down
32 changes: 25 additions & 7 deletions src/components/toolbar-button/toolbarBtn.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import Divider from './divider'
import BtnImg from './btn-img'
import BtnLink from './btn-link'
import BtnTable from './btn-table'
import BtnsHeader from './btn-header'
import BtnsHeaderFactory from './btn-header'
import BtnUl from './btn-ul'
import BtnOl from './btn-ol'
import BtnHr from './btn-hr'
Expand All @@ -21,12 +21,12 @@ export const defaultBtns = [
BtnItalic,
BtnHr,
Divider,
BtnsHeader(1),
BtnsHeader(2),
BtnsHeader(3),
BtnsHeader(4),
BtnsHeader(5),
BtnsHeader(6),
BtnsHeaderFactory(1),
BtnsHeaderFactory(2),
BtnsHeaderFactory(3),
BtnsHeaderFactory(4),
BtnsHeaderFactory(5),
BtnsHeaderFactory(6),
Divider,
BtnUl,
BtnOl,
Expand All @@ -43,6 +43,24 @@ export const defaultBtns = [
BtnInfo
]

export const defaultSimpleBtns = [
BtnBold,
BtnStrikeThrough,
BtnItalic,
BtnHr,
BtnsHeaderFactory(1),
BtnsHeaderFactory(2),
BtnsHeaderFactory(3),
BtnUl,
BtnOl,
BtnImg,
BtnLink,
BtnTable,
BtnHide,
BtnFullscreen,
BtnInfo
]

function getDefaultBtnsMap () {
const btnsMap = {}
defaultBtns.forEach(function (btn) {
Expand Down

0 comments on commit b2fc835

Please sign in to comment.