caojiezi2003/Stackedit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Check list button

Browse Source
This commit is contained in:
benweet 2018-04-07 16:00:31 +01:00
parent 0a361a5ca0
commit 6d59514835
11 changed files with 126 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Layout.vue
View File

@ -207,7 +207,7 @@ $preview-background-dark: #252525;
.layout__panel--explorer,
.layout__panel--side-bar {
background-color: #dadada;
background-color: #ddd;
}
.layout__panel--find-replace {

54
src/components/NavigationBar.vue
View File

@ -1,5 +1,5 @@
<template>
<nav class="navigation-bar" :class="{'navigation-bar--editor': styles.showEditor && !revisionContent}">
<nav class="navigation-bar" :class="{'navigation-bar--editor': styles.showEditor && !revisionContent, 'navigation-bar--light': light}">
<!-- Explorer -->
<div class="navigation-bar__inner navigation-bar__inner--left navigation-bar__inner--button">
<button class="navigation-bar__button button" v-if="light" @click="close()" v-title="'Close StackEdit'"><icon-close></icon-close></button>
@ -33,22 +33,15 @@
<button class="navigation-bar__button navigation-bar__button--revision button" @click="setRevisionContent()" v-title="'Close revision'"><icon-close></icon-close></button>
</div>
</div>
<div class="navigation-bar__inner navigation-bar__inner--edit-buttons">
<div class="navigation-bar__inner navigation-bar__inner--edit-pagedownButtons">
<button class="navigation-bar__button button" @click="undo" v-title="'Undo'" :disabled="!canUndo"><icon-undo></icon-undo></button>
<button class="navigation-bar__button button" @click="redo" v-title="'Redo'" :disabled="!canRedo"><icon-redo></icon-redo></button>
<div class="navigation-bar__spacer"></div>
<button class="navigation-bar__button button" @click="pagedownClick('bold')" v-title="'Bold'"><icon-format-bold></icon-format-bold></button>
<button class="navigation-bar__button button" @click="pagedownClick('italic')" v-title="'Italic'"><icon-format-italic></icon-format-italic></button>
<button class="navigation-bar__button button" @click="pagedownClick('strikethrough')" v-title="'Strikethrough'"><icon-format-strikethrough></icon-format-strikethrough></button>
<button class="navigation-bar__button button" @click="pagedownClick('heading')" v-title="'Heading'"><icon-format-size></icon-format-size></button>
<button class="navigation-bar__button button" @click="pagedownClick('ulist')" v-title="'Unordered list'"><icon-format-list-bulleted></icon-format-list-bulleted></button>
<button class="navigation-bar__button button" @click="pagedownClick('olist')" v-title="'Ordered list'"><icon-format-list-numbers></icon-format-list-numbers></button>
<button class="navigation-bar__button button" @click="pagedownClick('table')" v-title="'Table'"><icon-table></icon-table></button>
<button class="navigation-bar__button button" @click="pagedownClick('quote')" v-title="'Blockquote'"><icon-format-quote-close></icon-format-quote-close></button>
<button class="navigation-bar__button button" @click="pagedownClick('code')" v-title="'Code'"><icon-code-tags></icon-code-tags></button>
<button class="navigation-bar__button button" @click="pagedownClick('link')" v-title="'Link'"><icon-link-variant></icon-link-variant></button>
<button class="navigation-bar__button button" @click="pagedownClick('image')" v-title="'Image'"><icon-file-image></icon-file-image></button>
<button class="navigation-bar__button button" @click="pagedownClick('hr')" v-title="'Horizontal rule'"><icon-format-horizontal-rule></icon-format-horizontal-rule></button>
<div v-for="button in pagedownButtons" :key="button.action">
<button class="navigation-bar__button button" v-if="button.action" @click="pagedownClick(button.action)" v-title="button.title">
<component :is="button.iconClass"></component>
</button>
<div class="navigation-bar__spacer" v-else></div>
</div>
</div>
</nav>
</template>
@ -61,6 +54,7 @@ import publishSvc from '../services/publishSvc';
import animationSvc from '../services/animationSvc';
import tempFileSvc from '../services/tempFileSvc';
import utils from '../services/utils';
import pagedownButtons from '../data/pagedownButtons';
export default {
data: () => ({
@ -95,6 +89,16 @@ export default {
...mapGetters('publishLocation', {
publishLocations: 'current',
}),
pagedownButtons() {
return pagedownButtons.map((button) => {
const title = button.title;
return {
...button,
title,
iconClass: `icon-${button.icon}`,
};
});
},
isSyncPossible() {
return this.$store.getters['workspace/syncToken'] ||
this.$store.getters['syncLocation/current'].length;
@ -225,7 +229,7 @@ export default {
.navigation-bar__inner--right {
float: right;
/* prevent from seeing wrapped buttons */
/* prevent from seeing wrapped pagedownButtons */
margin-bottom: 20px;
}
@ -233,7 +237,7 @@ export default {
margin: 0 4px;
}
.navigation-bar__inner--edit-buttons {
.navigation-bar__inner--edit-pagedownButtons {
margin-left: 15px;
.navigation-bar__button,
@ -246,20 +250,18 @@ export default {
flex: none;
}
$button-size: 36px;
.navigation-bar__button,
.navigation-bar__spacer {
height: $button-size;
height: 36px;
padding: 0 4px;
/* prevent from seeing wrapped buttons */
/* prevent from seeing wrapped pagedownButtons */
margin-bottom: 20px;
}
.navigation-bar__button {
width: $button-size;
padding: 0 8px;
width: 34px;
padding: 0 7px;
transition: opacity 0.25s;
.navigation-bar__inner--button & {
@ -375,7 +377,7 @@ $button-size: 36px;
}
.navigation-bar__title--input,
.navigation-bar__inner--edit-buttons {
.navigation-bar__inner--edit-pagedownButtons {
display: none;
.navigation-bar--editor & {
@ -402,6 +404,10 @@ $button-size: 36px;
&.navigation-bar__title--focus {
cursor: text;
}
.navigation-bar--light & {
display: none;
}
}
$r: 10px;

12
src/components/menus/common/MenuEntry.vue
View File

@ -17,23 +17,15 @@
padding: 10px;
height: auto;
font-size: 17px;
line-height: 1.5;
line-height: 1.4;
text-transform: none;
white-space: normal;
div div {
text-decoration: underline;
text-decoration-skip: ink;
.menu-entry__label {
text-decoration: none;
}
}
span {
display: inline-block;
font-size: 0.75rem;
opacity: 0.5;
line-height: 1.3;
span {
display: inline;

2
src/data/defaultSettings.yml
View File

@ -9,6 +9,8 @@ maxWidthFactor: 1
# Editor settings
editor:
# Automatic list numbering
listAutoNumber: true
# Display images in the editor
inlineImages: true
# Use monospaced font only

49
src/data/pagedownButtons.js Normal file
View File

@ -0,0 +1,49 @@
export default [{}, {
action: 'bold',
title: 'Bold',
icon: 'format-bold',
}, {
action: 'italic',
title: 'Italic',
icon: 'format-italic',
}, {
action: 'heading',
title: 'Heading',
icon: 'format-size',
}, {
action: 'strikethrough',
title: 'Strikethrough',
icon: 'format-strikethrough',
}, {}, {
action: 'ulist',
title: 'Unordered list',
icon: 'format-list-bulleted',
}, {
action: 'olist',
title: 'Ordered list',
icon: 'format-list-numbers',
}, {
action: 'clist',
title: 'Check list',
icon: 'format-list-checks',
}, {}, {
action: 'quote',
title: 'Blockquote',
icon: 'format-quote-close',
}, {
action: 'code',
title: 'Code',
icon: 'code-tags',
}, {
action: 'table',
title: 'Table',
icon: 'table',
}, {
action: 'link',
title: 'Link',
icon: 'link-variant',
}, {
action: 'image',
title: 'Image',
icon: 'file-image',
}];

5
src/icons/FormatHorizontalRule.vue
View File

@ -1,5 +0,0 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24">
<path fill="#000000" fill-opacity="1" stroke-linejoin="round" d="M3,13l5,0l0,-2l-5,0l0,2Zm6.5,0l5,0l0,-2l-5,0l0,2Zm6.5,0l5,0l0,-2l-5,0l0,2Z" />
</svg>
</template>

5
src/icons/FormatListChecks.vue Normal file
View File

@ -0,0 +1,5 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24">
<path d="M3,5H9V11H3V5M5,7V9H7V7H5M11,7H21V9H11V7M11,15H21V17H11V15M5,20L1.5,16.5L2.91,15.09L5,17.17L9.59,12.59L11,14L5,20Z" />
</svg>
</template>

4
src/icons/index.js
View File

@ -9,7 +9,6 @@ import Table from './Table';
import FormatListNumbers from './FormatListNumbers';
import FormatListBulleted from './FormatListBulleted';
import FormatSize from './FormatSize';
import FormatHorizontalRule from './FormatHorizontalRule';
import FormatStrikethrough from './FormatStrikethrough';
import StatusBar from './StatusBar';
import NavigationBar from './NavigationBar';
@ -49,6 +48,7 @@ import Message from './Message';
import History from './History';
import Database from './Database';
import Magnify from './Magnify';
import FormatListChecks from './FormatListChecks';
Vue.component('iconProvider', Provider);
Vue.component('iconFormatBold', FormatBold);
@ -60,7 +60,6 @@ Vue.component('iconTable', Table);
Vue.component('iconFormatListNumbers', FormatListNumbers);
Vue.component('iconFormatListBulleted', FormatListBulleted);
Vue.component('iconFormatSize', FormatSize);
Vue.component('iconFormatHorizontalRule', FormatHorizontalRule);
Vue.component('iconFormatStrikethrough', FormatStrikethrough);
Vue.component('iconStatusBar', StatusBar);
Vue.component('iconNavigationBar', NavigationBar);
@ -100,3 +99,4 @@ Vue.component('iconMessage', Message);
Vue.component('iconHistory', History);
Vue.component('iconDatabase', Database);
Vue.component('iconMagnify', Magnify);
Vue.component('iconFormatListChecks', FormatListChecks);

20
src/libs/pagedown.js
View File

@ -477,6 +477,9 @@ function UIManager(input, commandManager) {
buttons.ulist = bindCommand(function (chunk, postProcessing) {
this.doList(chunk, postProcessing, false);
});
buttons.clist = bindCommand(function (chunk, postProcessing) {
this.doList(chunk, postProcessing, false, true);
});
buttons.heading = bindCommand("doHeading");
buttons.hr = bindCommand("doHorizontalRule");
buttons.table = bindCommand("doTable");
@ -1032,7 +1035,7 @@ commandProto.doCode = function (chunk) {
}
};
commandProto.doList = function (chunk, postProcessing, isNumberedList) {
commandProto.doList = function (chunk, postProcessing, isNumberedList, isCheckList) {
// These are identical except at the very beginning and end.
// Should probably use the regex extension function to make this clearer.
@ -1048,13 +1051,18 @@ commandProto.doList = function (chunk, postProcessing, isNumberedList) {
var num = 1;
// Get the item prefix - e.g. " 1. " for a numbered list, " - " for a bulleted list.
var getItemPrefix = function () {
var getItemPrefix = function (checkListContent) {
var prefix;
if (isNumberedList) {
prefix = " " + num + ". ";
num++;
} else {
prefix = " " + bullet + " ";
if (isCheckList) {
prefix += '[';
prefix += checkListContent || ' ';
prefix += '] ';
}
}
return prefix;
};
@ -1068,9 +1076,11 @@ commandProto.doList = function (chunk, postProcessing, isNumberedList) {
}
// Renumber/bullet the list element.
itemText = itemText.replace(/^[ ]{0,3}([*+-]|\d+[.])\s/gm,
function () {
return getItemPrefix();
itemText = itemText.replace(isCheckList
? /^[ ]{0,3}([*+-]|\d+[.])\s+\[([ xX])\]\s/gm
: /^[ ]{0,3}([*+-]|\d+[.])\s/gm,
function (match, p1, p2) {
return getItemPrefix(p2);
});
return itemText;

8
src/services/optional/keystrokes.js
View File

@ -1,13 +1,17 @@
import cledit from '../cledit';
import editorSvc from '../editorSvc';
import store from '../../store';
const Keystroke = cledit.Keystroke;
const indentRegexp = /^ {0,3}>[ ]*|^[ \t]*[*+-][ \t]|^([ \t]*)\d+\.[ \t]|^\s+/;
const indentRegexp = /^ {0,3}>[ ]*|^[ \t]*[*+-][ \t](?:\[[ xX]\][ \t])?|^([ \t]*)\d+\.[ \t](?:\[[ xX]\][ \t])?|^\s+/;
let clearNewline;
let lastSelection;
function fixNumberedList(state, indent) {
if (state.selection || indent === undefined) {
if (state.selection
|| indent === undefined
|| !store.getters['data/computedSettings'].editor.listAutoNumber
) {
return;
}
const spaceIndent = indent.replace(/\t/g, ' ');

16
src/store/layout.js
View File

@ -1,11 +1,23 @@
import pagedownButtons from '../data/pagedownButtons';
let buttonCount = 0;
let spacerCount = 0;
pagedownButtons.forEach((button) => {
if (button.action) {
buttonCount += 1;
} else {
spacerCount += 1;
}
});
const minPadding = 20;
const editorTopPadding = 10;
const navigationBarEditButtonsWidth = (36 * 14) + 8; // 14 buttons + 1 spacer
const navigationBarEditButtonsWidth = (34 * buttonCount) + (8 * spacerCount); // buttons + spacers
const navigationBarLeftButtonWidth = 38 + 4 + 12;
const navigationBarRightButtonWidth = 38 + 8;
const navigationBarSpinnerWidth = 24 + 8 + 5; // 5 for left margin
const navigationBarLocationWidth = 20;
const navigationBarSyncPublishButtonsWidth = 36 + 10;
const navigationBarSyncPublishButtonsWidth = 34 + 10;
const navigationBarTitleMargin = 8;
const maxTitleMaxWidth = 800;
const minTitleMaxWidth = 200;