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

Enhanced navigation bar

Browse Source
This commit is contained in:
Benoit Schweblin 2017-07-25 19:20:52 +01:00
parent 274f660850
commit 3e94b1b16b
9 changed files with 351 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@ -3,6 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>my-project</title> <title>my-project</title>
<link href="https://fonts.googleapis.com/css?family=Cabin|Lato:400,400i,900,900i|Libre+Franklin:400,400i,700,700i|Merriweather:400,400i,700,700i|Open+Sans:400,400i,700,700i|Roboto+Mono:400,400i,700,700i|Source+Code+Pro|Source+Sans+Pro:400,400i,700,700i" rel="stylesheet">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

2
src/components/Editor.vue
View File

@ -27,7 +27,7 @@ export default {
} }
.editor__inner { .editor__inner {
font-family: $font-family-editor; font-family: $font-family-main;
font-variant-ligatures: no-common-ligatures; font-variant-ligatures: no-common-ligatures;
margin: 0; margin: 0;
padding: 10px 20px 360px 110px; padding: 10px 20px 360px 110px;

152
src/components/NavigationBar.vue
View File

@ -1,45 +1,44 @@
<template> <template>
<div class="navigation-bar"> <div class="navigation-bar" v-bind:class="{'navigation-bar--editor': showEditor}">
<div class="navigation-bar__title-mirror button" v-bind:style="{ maxWidth: titleMaxWidth + 'px' }"></div>
<div class="navigation-bar__inner navigation-bar__inner--right"> <div class="navigation-bar__inner navigation-bar__inner--right">
<button v-if="!editingTitle" v-on:click="editingTitle = true" v-bind:style="{ width: titleWidth + 'px' }" class="navigation-bar__title button">{{title}}</button> <div class="navigation-bar__title navigation-bar__title--text text-input" v-bind:style="{maxWidth: titleMaxWidth + 'px'}"></div>
<input v-if="editingTitle" v-on:blur="editingTitle = false" v-model.lazy.trim="title" v-focus v-autosize @keyup.enter="editingTitle = false" @keyup.esc="resetTitle" type="text" class="navigation-bar__title navigation-bar__title--input text-input"> <input class="navigation-bar__title navigation-bar__title--input text-input" v-bind:class="{'navigation-bar__title--focused': titleFocused, 'navigation-bar__title--scrolling': titleScrolling}" v-bind:style="{maxWidth: titleMaxWidth + 'px'}" @focus="editTitle(true)" @blur="editTitle(false)" @keyup.enter="submitTitle()" @keyup.esc="submitTitle(true)" v-model.lazy.trim="title">
</div> </div>
<div class="navigation-bar__inner navigation-bar__inner--left" v-if="showEditor"> <div class="navigation-bar__inner navigation-bar__inner--left">
<button class="navigation-bar__button button" v-on:click="pagedownClick('bold')"> <button class="navigation-bar__button button" @click="pagedownClick('bold')">
<icon-format-bold></icon-format-bold> <icon-format-bold></icon-format-bold>
</button> </button>
<button class="navigation-bar__button button" v-on:click="pagedownClick('italic')"> <button class="navigation-bar__button button" @click="pagedownClick('italic')">
<icon-format-italic></icon-format-italic> <icon-format-italic></icon-format-italic>
</button> </button>
<button class="navigation-bar__button button" v-on:click="pagedownClick('strikethrough')"> <button class="navigation-bar__button button" @click="pagedownClick('strikethrough')">
<icon-format-strikethrough></icon-format-strikethrough> <icon-format-strikethrough></icon-format-strikethrough>
</button> </button>
<button class="navigation-bar__button button" v-on:click="pagedownClick('heading')"> <button class="navigation-bar__button button" @click="pagedownClick('heading')">
<icon-format-size></icon-format-size> <icon-format-size></icon-format-size>
</button> </button>
<button class="navigation-bar__button button" v-on:click="pagedownClick('ulist')"> <button class="navigation-bar__button button" @click="pagedownClick('ulist')">
<icon-format-list-bulleted></icon-format-list-bulleted> <icon-format-list-bulleted></icon-format-list-bulleted>
</button> </button>
<button class="navigation-bar__button button" v-on:click="pagedownClick('olist')"> <button class="navigation-bar__button button" @click="pagedownClick('olist')">
<icon-format-list-numbers></icon-format-list-numbers> <icon-format-list-numbers></icon-format-list-numbers>
</button> </button>
<button class="navigation-bar__button button" v-on:click="pagedownClick('table')"> <button class="navigation-bar__button button" @click="pagedownClick('table')">
<icon-table></icon-table> <icon-table></icon-table>
</button> </button>
<button class="navigation-bar__button button" v-on:click="pagedownClick('quote')"> <button class="navigation-bar__button button" @click="pagedownClick('quote')">
<icon-format-quote-close></icon-format-quote-close> <icon-format-quote-close></icon-format-quote-close>
</button> </button>
<button class="navigation-bar__button button" v-on:click="pagedownClick('code')"> <button class="navigation-bar__button button" @click="pagedownClick('code')">
<icon-code-braces></icon-code-braces> <icon-code-braces></icon-code-braces>
</button> </button>
<button class="navigation-bar__button button" v-on:click="pagedownClick('link')"> <button class="navigation-bar__button button" @click="pagedownClick('link')">
<icon-link-variant></icon-link-variant> <icon-link-variant></icon-link-variant>
</button> </button>
<button class="navigation-bar__button button" v-on:click="pagedownClick('image')"> <button class="navigation-bar__button button" @click="pagedownClick('image')">
<icon-file-image></icon-file-image> <icon-file-image></icon-file-image>
</button> </button>
<button class="navigation-bar__button button" v-on:click="pagedownClick('hr')"> <button class="navigation-bar__button button" @click="pagedownClick('hr')">
<icon-format-horizontal-rule></icon-format-horizontal-rule> <icon-format-horizontal-rule></icon-format-horizontal-rule>
</button> </button>
</div> </div>
@ -49,34 +48,12 @@
<script> <script>
import { mapState } from 'vuex'; import { mapState } from 'vuex';
import editorSvc from '../services/editorSvc'; import editorSvc from '../services/editorSvc';
import animationSvc from '../services/animationSvc';
let titleMirrorElt;
export default { export default {
directives: {
focus: {
inserted(elt) {
elt.focus();
elt.select();
},
},
autosize: {
inserted(elt) {
function adjustWidth() {
titleMirrorElt.textContent = elt.value;
const width = titleMirrorElt.getBoundingClientRect().width + 1; // 1px for the caret
elt.style.width = `${width}px`;
}
adjustWidth();
elt.addEventListener('keyup', adjustWidth);
elt.addEventListener('input', adjustWidth);
},
},
},
data: () => ({ data: () => ({
editingTitle: null, titleFocused: false,
isMounted: false, titleHover: false,
}), }),
computed: { computed: {
...mapState('layout', { ...mapState('layout', {
@ -91,26 +68,61 @@ export default {
this.$store.commit('files/setCurrentFileName', value); this.$store.commit('files/setCurrentFileName', value);
}, },
}, },
titleWidth() { titleScrolling() {
if (!this.isMounted) { const result = this.titleHover && !this.titleFocused;
return 0; if (this.titleInputElt) {
if (result) {
const scrollLeft = this.titleInputElt.scrollWidth - this.titleInputElt.offsetWidth;
animationSvc.animate(this.titleInputElt)
.scrollLeft(scrollLeft)
.duration(scrollLeft * 10)
.easing('inOut')
.start();
} else {
animationSvc.animate(this.titleInputElt)
.scrollLeft(0)
.start();
} }
titleMirrorElt.textContent = this.$store.state.files.currentFile.name; }
return titleMirrorElt.getBoundingClientRect().width + 1; // 1px for the caret return result;
}, },
}, },
methods: { methods: {
pagedownClick(name) { pagedownClick(name) {
editorSvc.pagedownEditor.uiManager.doClick(name); editorSvc.pagedownEditor.uiManager.doClick(name);
}, },
resetTitle(event) { editTitle(toggle) {
event.target.value = ''; this.titleFocused = toggle;
this.editingTitle = false; if (toggle) {
this.titleInputElt.setSelectionRange(0, this.titleInputElt.value.length);
}
},
submitTitle(reset) {
if (reset) {
this.titleInputElt.value = '';
}
this.titleInputElt.blur();
}, },
}, },
mounted() { mounted() {
titleMirrorElt = this.$el.querySelector('.navigation-bar__title-mirror'); this.titleInputElt = this.$el.querySelector('.navigation-bar__title--input');
this.isMounted = true; const titleTextElt = this.$el.querySelector('.navigation-bar__title--text');
const adjustWidth = () => {
titleTextElt.textContent = this.titleInputElt.value;
const width = titleTextElt.getBoundingClientRect().width + 1; // 1px for the caret
this.titleInputElt.style.width = `${width}px`;
};
adjustWidth();
this.titleInputElt.addEventListener('keyup', adjustWidth);
this.titleInputElt.addEventListener('input', adjustWidth);
this.titleInputElt.addEventListener('mouseenter', () => {
this.titleHover = true;
});
this.titleInputElt.addEventListener('mouseleave', () => {
this.titleHover = false;
});
}, },
}; };
</script> </script>
@ -125,10 +137,6 @@ export default {
overflow: hidden; overflow: hidden;
} }
.navigation-bar__inner--left {
float: left;
}
.navigation-bar__inner--right { .navigation-bar__inner--right {
float: right; float: right;
} }
@ -143,13 +151,15 @@ $navbar-button-hover-background: #484848;
} }
.navigation-bar__title, .navigation-bar__title,
.navigation-bar__title-mirror,
.navigation-bar__button { .navigation-bar__button {
display: inline-block; display: inline-block;
color: $navbar-button-color; color: $navbar-button-color;
background-color: transparent; background-color: transparent;
font-weight: 400; font-weight: 400;
}
.navigation-bar__title--input,
.navigation-bar__button {
&:active, &:active,
&:focus, &:focus,
&:hover { &:hover {
@ -158,9 +168,35 @@ $navbar-button-hover-background: #484848;
} }
} }
.navigation-bar__title-mirror { .navigation-bar__title--text {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.navigation-bar__title--input,
.navigation-bar__inner--left {
display: none;
}
.navigation-bar--editor {
.navigation-bar__title--text {
position: absolute; position: absolute;
left: -9999px; left: -9999px;
width: auto; width: auto;
} }
.navigation-bar__title--input,
.navigation-bar__inner--left {
display: block;
}
}
.navigation-bar__title--input {
cursor: pointer;
&.navigation-bar__title--focused {
cursor: text;
}
}
</style> </style>

24
src/components/common/base.scss
View File

@ -5,7 +5,7 @@
html, html,
body { body {
color: rgba(0, 0, 0, 0.75); color: rgba(0, 0, 0, 0.75);
font-family: $font-family-editor; font-family: $font-family-main;
font-variant-ligatures: common-ligatures; font-variant-ligatures: common-ligatures;
line-height: 1.65; line-height: 1.65;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@ -27,6 +27,20 @@ dl {
margin: 1.2em 0; margin: 1.2em 0;
} }
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 1.8em 0 1.2em;
}
h1,
h2 {
border-bottom: 1px solid $hr-color;
}
ol ul, ol ul,
ul ol, ul ol,
ul ul, ul ul,
@ -36,6 +50,12 @@ ol ol {
a { a {
color: $link-color; color: $link-color;
text-decoration: none;
&:hover,
&:focus {
text-decoration: underline;
}
} }
code, code,
@ -64,7 +84,7 @@ code {
hr { hr {
border: 0; border: 0;
border-top: 1px solid rgba(128, 128, 128, 0.15); border-top: 1px solid $hr-color;
margin: 2em 0; margin: 2em 0;
} }

7
src/components/common/variables.scss
View File

@ -1,10 +1,11 @@
$font-family-editor: "Helvetica Neue", Helvetica, sans-serif; $font-family-main: 'Lato', sans-serif;
$font-family-monospace: "Lucida Sans Typewriter", "Lucida Console", monaco, Courrier, monospace; $font-family-monospace: "Lucida Sans Typewriter", "Lucida Console", monaco, Courrier, monospace;
$font-size-monospace: 0.9em; $font-size-monospace: 0.85em;
$code-bg: rgba(0, 0, 0, 0.05); $code-bg: rgba(0, 0, 0, 0.05);
$code-border-radius: 2px; $code-border-radius: 2px;
$link-color: #007acc; $link-color: #4a80cf;
$border-radius-base: 2px; $border-radius-base: 2px;
$hr-color: rgba(128, 128, 128, 0.2);
$editor-color: rgba(0, 0, 0, 0.8); $editor-color: rgba(0, 0, 0, 0.8);
$editor-color-light: rgba(0, 0, 0, 0.28); $editor-color-light: rgba(0, 0, 0, 0.28);

297
src/markdown/sample.md
View File

@ -1,117 +1,248 @@
# Basic writing # Welcome to StackEdit!
## Styling text Hey! I'm your first Markdown document in **StackEdit**[^stackedit]. Don't delete me, I'm here to help! I can be recovered anyway in the **Utils** tab of the <i class="icon-cog"></i> **Settings** dialog.
Make text **bold** or *italic* by using either `*` or `_` around the text.
_This text will be italic_ ## Documents
__This text will be bold__
Create strikethrough text by using `~~`. StackEdit stores your documents in your browser, which means all your documents are automatically saved locally and are accessible **offline!**
~~Mistaken text.~~ > **Note:**
## Blockquotes > - StackEdit is accessible offline after the application has been loaded for the first time.
> - Your local documents are not shared between different browsers or computers.
> - Clearing your browser's data may **delete all your local documents!** Make sure your documents are synchronized with **Google Drive** or **Dropbox** (check out the [<i class="icon-refresh"></i> Synchronization](#synchronization) section).
Indicate blockquotes with a `>`. #### <i class="icon-file"></i> Create a document
> Blockquote The document panel is accessible using the <i class="icon-folder-open"></i> button in the navigation bar. You can create a new document by clicking <i class="icon-file"></i> **New document** in the document panel.
## Headings #### <i class="icon-folder-open"></i> Switch to another document
Create a heading by adding one or more `#` symbols before your heading text. All your local documents are listed in the document panel. You can switch from one to another by clicking a document in the list or you can toggle documents using <kbd>Ctrl+[</kbd> and <kbd>Ctrl+]</kbd>.
##### Heading level 5 #### <i class="icon-pencil"></i> Rename a document
###### Heading level 6
## Horizontal rules You can rename the current document by clicking the document title in the navigation bar.
Insert a horizontal rule by putting three or more `-`, `*`, or `_` on a line by themselves. #### <i class="icon-trash"></i> Delete a document
---------- You can delete the current document by clicking <i class="icon-trash"></i> **Delete document** in the document panel.
## Table of contents #### <i class="icon-hdd"></i> Export a document
Insert a table of contents using the marker `[TOC]`. You can save the current document to a file by clicking <i class="icon-hdd"></i> **Export to disk** from the <i class="icon-provider-stackedit"></i> menu panel.
> **Tip:** Check out the [<i class="icon-upload"></i> Publish a document](#publish-a-document) section for a description of the different output formats.
## Synchronization
StackEdit can be combined with <i class="icon-provider-gdrive"></i> **Google Drive** and <i class="icon-provider-dropbox"></i> **Dropbox** to have your documents saved in the *Cloud*. The synchronization mechanism takes care of uploading your modifications or downloading the latest version of your documents.
> **Note:**
> - Full access to **Google Drive** or **Dropbox** is required to be able to import any document in StackEdit. Permission restrictions can be configured in the settings.
> - Imported documents are downloaded in your browser and are not transmitted to a server.
> - If you experience problems saving your documents on Google Drive, check and optionally disable browser extensions, such as Disconnect.
#### <i class="icon-refresh"></i> Open a document
You can open a document from <i class="icon-provider-gdrive"></i> **Google Drive** or the <i class="icon-provider-dropbox"></i> **Dropbox** by opening the <i class="icon-refresh"></i> **Synchronize** sub-menu and by clicking **Open from...**. Once opened, any modification in your document will be automatically synchronized with the file in your **Google Drive** / **Dropbox** account.
#### <i class="icon-refresh"></i> Save a document
You can save any document by opening the <i class="icon-refresh"></i> **Synchronize** sub-menu and by clicking **Save on...**. Even if your document is already synchronized with **Google Drive** or **Dropbox**, you can export it to a another location. StackEdit can synchronize one document with multiple locations and accounts.
#### <i class="icon-refresh"></i> Synchronize a document
Once your document is linked to a <i class="icon-provider-gdrive"></i> **Google Drive** or a <i class="icon-provider-dropbox"></i> **Dropbox** file, StackEdit will periodically (every 3 minutes) synchronize it by downloading/uploading any modification. A merge will be performed if necessary and conflicts will be detected.
If you just have modified your document and you want to force the synchronization, click the <i class="icon-refresh"></i> button in the navigation bar.
> **Note:** The <i class="icon-refresh"></i> button is disabled when you have no document to synchronize.
#### <i class="icon-refresh"></i> Manage document synchronization
Since one document can be synchronized with multiple locations, you can list and manage synchronized locations by clicking <i class="icon-refresh"></i> **Manage synchronization** in the <i class="icon-refresh"></i> **Synchronize** sub-menu. This will let you remove synchronization locations that are associated to your document.
> **Note:** If you delete the file from **Google Drive** or from **Dropbox**, the document will no longer be synchronized with that location.
## Publication
Once you are happy with your document, you can publish it on different websites directly from StackEdit. As for now, StackEdit can publish on **Blogger**, **Dropbox**, **Gist**, **GitHub**, **Google Drive**, **Tumblr**, **WordPress** and on any SSH server.
#### <i class="icon-upload"></i> Publish a document
You can publish your document by opening the <i class="icon-upload"></i> **Publish** sub-menu and by choosing a website. In the dialog box, you can choose the publication format:
- Markdown, to publish the Markdown text on a website that can interpret it (**GitHub** for instance),
- HTML, to publish the document converted into HTML (on a blog for example),
- Template, to have a full control of the output.
> **Note:** The default template is a simple webpage wrapping your document in HTML format. You can customize it in the **Advanced** tab of the <i class="icon-cog"></i> **Settings** dialog.
#### <i class="icon-upload"></i> Update a publication
After publishing, StackEdit will keep your document linked to that publication which makes it easy for you to update it. Once you have modified your document and you want to update your publication, click on the <i class="icon-upload"></i> button in the navigation bar.
> **Note:** The <i class="icon-upload"></i> button is disabled when your document has not been published yet.
#### <i class="icon-upload"></i> Manage document publication
Since one document can be published on multiple locations, you can list and manage publish locations by clicking <i class="icon-upload"></i> **Manage publication** in the <i class="icon-provider-stackedit"></i> menu panel. This will let you remove publication locations that are associated to your document.
> **Note:** If the file has been removed from the website or the blog, the document will no longer be published on that location.
## Markdown Extra
StackEdit supports **Markdown Extra**, which extends **Markdown** syntax with some nice features.
> **Tip:** You can disable any **Markdown Extra** feature in the **Extensions** tab of the <i class="icon-cog"></i> **Settings** dialog.
> **Note:** You can find more information about **Markdown** syntax [here][2] and **Markdown Extra** extension [here][3].
### Tables
**Markdown Extra** has a special syntax for tables:
Item | Value
-------- | ---
Computer | $1600
Phone | $12
Pipe | $1
You can specify column alignment with one or two colons:
| Item | Value | Qty |
| :------- | ----: | :---: |
| Computer | $1600 | 5 |
| Phone | $12 | 12 |
| Pipe | $1 | 234 |
### Definition Lists
**Markdown Extra** has a special syntax for definition lists too:
Term 1
Term 2
: Definition A
: Definition B
Term 3
: Definition C
: Definition D
> part of definition D
### Fenced code blocks
GitHub's fenced code blocks are also supported with **Highlight.js** syntax highlighting:
```
// Foo
var bar = 0;
```
> **Tip:** To use **Prettify** instead of **Highlight.js**, just configure the **Markdown Extra** extension in the <i class="icon-cog"></i> **Settings** dialog.
> **Note:** You can find more information:
> - about **Prettify** syntax highlighting [here][5],
> - about **Highlight.js** syntax highlighting [here][6].
### Footnotes
You can create footnotes like this[^footnote].
[^footnote]: Here is the *text* of the **footnote**.
### SmartyPants
SmartyPants converts ASCII punctuation characters into "smart" typographic punctuation HTML entities. For example:
| | ASCII | HTML |
----------------- | ---------------------------- | ------------------
| Single backticks | `'Isn't this fun?'` | 'Isn't this fun?' |
| Quotes | `"Isn't this fun?"` | "Isn't this fun?" |
| Dashes | `-- is en-dash, --- is em-dash` | -- is en-dash, --- is em-dash |
### Table of contents
You can insert a table of contents using the marker `[TOC]`:
[TOC] [TOC]
# Lists ### MathJax
## Unordered lists You can render *LaTeX* mathematical expressions using **MathJax**, as on [math.stackexchange.com][1]:
Make an unordered list by preceding list items with either a `*` or a `-`. The *Gamma function* satisfying $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ is via the Euler integral
- Item $$
- Item \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.
* Item $$
## Ordered lists > **Tip:** To make sure mathematical expressions are rendered properly on your website, include **MathJax** into your template:
Make an ordered list by preceding list items with a number. ```
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>
1. Item 1
2. Item 2
3. Item 3
# Code formatting
## Inline formats
Use single backticks to format text in a special `monospace format`.
## Multiple lines
Indent four spaces or a tab to format text as its own distinct block.
var foo = 'bar'; // baz
## Code highlighting
Use triple backticks including the language identifier to have syntax highlighting.
```js
var foo = 'bar'; // baz
``` ```
> **Note:** You can find more information about **LaTeX** mathematical expressions [here][4].
# Links and images
## Links
Create a link by wrapping link text in brackets, and then wrapping the link in parentheses.
[Visit Classeur](http://classeur.io)
## Images
Images are like links, but have an exclamation point in front of them.
![Classeur Logo](http://classeur.io/images/logo.png)
## Footnotes
To create footnotes, add a label starting with a `^` between a set of square brackets like this[^footnote], and then, declare the linked content.
[^footnote]: Here is the content of the footnote.
# Tables ### UML diagrams
Create tables by assembling a list of words and dividing them with hyphens (for the first row), and then separating each column with a pipe. You can also render sequence diagrams like this:
First Header | Second Header ```sequence
------------- | ------------- Alice->Bob: Hello Bob, how are you?
Content Cell | Content Cell Note right of Bob: Bob thinks
Content Cell | Content Cell Bob-->Alice: I am good thanks!
```
By including colons within the header row, you can define text to be left-aligned, right-aligned, or center-aligned. And flow charts like this:
| Left-Aligned | Center Aligned | Right Aligned | ```flow
| :------------ |:---------------:| -----:| st=>start: Start
| col 3 is | some wordy text | $1600 | e=>end
| col 2 is | centered | $12 | op=>operation: My Operation
| zebra stripes | are neat | $1 | cond=>condition: Yes or No?
st->op->cond
cond(yes)->e
cond(no)->op
```
> **Note:** You can find more information:
> - about **Sequence diagrams** syntax [here][7],
> - about **Flow charts** syntax [here][8].
### Support StackEdit
[![](https://cdn.monetizejs.com/resources/button-32.png)](https://monetizejs.com/authorize?client_id=ESTHdCYOi18iLhhO&summary=true)
[^stackedit]: [StackEdit](https://stackedit.io/) is a full-featured, open-source Markdown editor based on PageDown, the Markdown library used by Stack Overflow and the other Stack Exchange sites.
[1]: http://math.stackexchange.com/
[2]: http://daringfireball.net/projects/markdown/syntax "Markdown"
[3]: https://github.com/jmcmanus/pagedown-extra "Pagedown Extra"
[4]: http://meta.math.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference
[5]: https://code.google.com/p/google-code-prettify/
[6]: http://highlightjs.org/
[7]: http://bramp.github.io/js-sequence-diagrams/
[8]: http://adrai.github.io/flowchart.js/

7
src/services/animationSvc.js
View File

@ -2,7 +2,8 @@ import bezierEasing from 'bezier-easing';
const easings = { const easings = {
materialIn: bezierEasing(0.75, 0, 0.8, 0.25), materialIn: bezierEasing(0.75, 0, 0.8, 0.25),
materialOut: bezierEasing(0.25, 0.8, 0.25, 1.0), materialOut: bezierEasing(0.25, 0.8, 0.25, 1),
inOut: bezierEasing(0.25, 0.1, 0.67, 1),
}; };
const vendors = ['moz', 'webkit']; const vendors = ['moz', 'webkit'];
@ -225,4 +226,6 @@ function animate(elt) {
return elt.$animation; return elt.$animation;
} }
export default { animate }; export default {
animate,
};

2
src/store/modules/files.js
View File

@ -5,7 +5,7 @@ export default {
state: { state: {
files: [], files: [],
currentFile: { currentFile: {
name: 'Test', name: 'Test 123456 abcdefghijkl 123456 abcdefghijkl 123456 abcdefghijkl 123456 abcdefghijkl',
folderId: null, folderId: null,
isLoaded: true, isLoaded: true,
content: { content: {

11
src/store/modules/layout.js
View File

@ -5,9 +5,10 @@ const buttonBarWidth = 30;
const statusBarHeight = 20; const statusBarHeight = 20;
const outOfScreenMargin = 50; const outOfScreenMargin = 50;
const minPadding = 20; const minPadding = 20;
const navigationBarSpaceWidth = 30;
const navigationBarLeftWidth = 500; const navigationBarLeftWidth = 500;
const titleMaxMaxWidth = 500; const maxTitleMaxWidth = 800;
const titleMinMaxWidth = 200; const minTitleMaxWidth = 200;
const setter = propertyName => (state, value) => { const setter = propertyName => (state, value) => {
state[propertyName] = value; state[propertyName] = value;
@ -154,12 +155,12 @@ export default {
editorPadding = minPadding; editorPadding = minPadding;
} }
let titleMaxWidth = bodyWidth; let titleMaxWidth = bodyWidth - navigationBarSpaceWidth;
if (state.showEditor) { if (state.showEditor) {
titleMaxWidth -= navigationBarLeftWidth; titleMaxWidth -= navigationBarLeftWidth;
} }
titleMaxWidth = Math.min(titleMaxWidth, titleMaxMaxWidth); titleMaxWidth = Math.min(titleMaxWidth, maxTitleMaxWidth);
titleMaxWidth = Math.max(titleMaxWidth, titleMinMaxWidth); titleMaxWidth = Math.max(titleMaxWidth, minTitleMaxWidth);
commit('setFontSize', fontSize); commit('setFontSize', fontSize);
commit('setInner1Y', inner1Y); commit('setInner1Y', inner1Y);