Merge branch 'dev'

src/components/App.vue

@@ -18,6 +18,7 @@ import SplashScreen from './SplashScreen';
 import syncSvc from '../services/syncSvc';
 import networkSvc from '../services/networkSvc';
 import sponsorSvc from '../services/sponsorSvc';
+import tempFileSvc from '../services/tempFileSvc';
 import timeSvc from '../services/timeSvc';
 import store from '../store';
 
@@ -94,6 +95,7 @@ export default {
         networkSvc.init();
         sponsorSvc.init();
         this.ready = true;
+        tempFileSvc.setReady();
       })
       .catch((err) => {
         if (err && err.message !== 'reload') {

src/components/ButtonBar.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="button-bar">
     <div class="button-bar__inner button-bar__inner--top">
-      <button class="button-bar__button button" :class="{ 'button-bar__button--on': layoutSettings.showNavigationBar }" @click="toggleNavigationBar()" v-title="'Toggle navigation bar'">
+      <button class="button-bar__button button" :class="{ 'button-bar__button--on': layoutSettings.showNavigationBar }" v-if="!light" @click="toggleNavigationBar()" v-title="'Toggle navigation bar'">
         <icon-navigation-bar></icon-navigation-bar>
       </button>
       <button class="button-bar__button button" :class="{ 'button-bar__button--on': layoutSettings.showSidePreview }" tour-step-anchor="editor" @click="toggleSidePreview()" v-title="'Toggle side preview'">
@@ -26,12 +26,17 @@
 </template>
 
 <script>
-import { mapGetters, mapActions } from 'vuex';
+import { mapState, mapGetters, mapActions } from 'vuex';
 
 export default {
-  computed: mapGetters('data', [
-    'layoutSettings',
-  ]),
+  computed: {
+    ...mapState([
+      'light',
+    ]),
+    ...mapGetters('data', [
+      'layoutSettings',
+    ]),
+  },
   methods: mapActions('data', [
     'toggleNavigationBar',
     'toggleEditor',

src/components/Editor.vue

@@ -3,7 +3,7 @@
     <pre class="editor__inner markdown-highlighting" :style="{padding: styles.editorPadding}" :class="{monospaced: computedSettings.editor.monospacedFontOnly}"></pre>
     <div class="gutter" :style="{left: styles.editorGutterLeft + 'px'}">
       <comment-list v-if="styles.editorGutterWidth"></comment-list>
-      <editor-new-discussion-button></editor-new-discussion-button>
+      <editor-new-discussion-button v-if="!isCurrentTemp"></editor-new-discussion-button>
     </div>
   </div>
 </template>
@@ -19,6 +19,9 @@ export default {
     EditorNewDiscussionButton,
   },
   computed: {
+    ...mapGetters('file', [
+      'isCurrentTemp',
+    ]),
     ...mapGetters('layout', [
       'styles',
     ]),

src/components/Explorer.vue

@@ -19,7 +19,7 @@
         <icon-close></icon-close>
       </button>
     </div>
-    <div class="explorer__tree" :class="{'explorer__tree--new-item': !newChildNode.isNil}" tabindex="0">
+    <div class="explorer__tree" :class="{'explorer__tree--new-item': !newChildNode.isNil}" v-if="!light" tabindex="0" @keyup.delete="deleteItem()">
       <explorer-node :node="rootNode" :depth="0"></explorer-node>
     </div>
   </div>
@@ -34,6 +34,9 @@ export default {
     ExplorerNode,
   },
   computed: {
+    ...mapState([
+      'light',
+    ]),
     ...mapState('explorer', [
       'newChildNode',
     ]),
@@ -58,7 +61,7 @@ export default {
     },
   },
   created() {
-    this.$store.watch(
+    this.$watch(
       () => this.$store.getters['file/current'].id,
       (currentFileId) => {
         this.$store.commit('explorer/setSelectedId', currentFileId);

src/components/ExplorerNode.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="explorer-node" :class="{'explorer-node--selected': isSelected, 'explorer-node--open': isOpen, 'explorer-node--drag-target': isDragTargetFolder}" @dragover.prevent @dragenter.stop="setDragTarget(node.item.id)" @dragleave.stop="isDragTarget && setDragTargetId()" @drop.prevent.stop="onDrop" @contextmenu="onContextMenu">
+  <div class="explorer-node" :class="{'explorer-node--selected': isSelected, 'explorer-node--open': isOpen, 'explorer-node--drag-target': isDragTargetFolder}" @dragover.prevent @dragenter.stop="node.noDrop || setDragTarget(node.item.id)" @dragleave.stop="isDragTarget && setDragTargetId()" @drop.prevent.stop="onDrop" @contextmenu="onContextMenu">
     <div class="explorer-node__item-editor" v-if="isEditing" :class="['explorer-node__item-editor--' + node.item.type]" :style="{paddingLeft: leftPadding}" draggable="true" @dragstart.stop.prevent>
       <input type="text" class="text-input" v-focus @blur="submitEdit()" @keydown.enter="submitEdit()" @keydown.esc="submitEdit(true)" v-model="editingNodeName">
     </div>
@@ -169,7 +169,7 @@ export default {
             perform: () => this.newItem(false),
           }, {
             name: 'New folder',
-            disabled: !this.node.isFolder || this.node.isTrash,
+            disabled: !this.node.isFolder || this.node.isTrash || this.node.isTemp,
             perform: () => this.newItem(true),
           }, {
             type: 'separator',
@@ -179,7 +179,6 @@ export default {
             perform: () => this.setEditingId(this.node.item.id),
           }, {
             name: 'Delete',
-            disabled: this.node.isTrash || this.node.item.parentId === 'trash',
             perform: () => this.deleteItem(),
           }],
         })

src/components/Layout.vue

@@ -44,7 +44,7 @@
         <side-bar></side-bar>
       </div>
     </div>
-    <tour v-if="!layoutSettings.welcomeTourFinished"></tour>
+    <tour v-if="!light && !layoutSettings.welcomeTourFinished"></tour>
   </div>
 </template>
 
@@ -78,6 +78,9 @@ export default {
     FindReplace,
   },
   computed: {
+    ...mapState([
+      'light',
+    ]),
     ...mapState('content', [
       'revisionContent',
     ]),
@@ -116,8 +119,13 @@ export default {
     editorSvc.init(editorElt, previewElt, tocElt);
 
     // Focus on the editor every time reader mode is disabled
-    this.$watch(() => this.styles.showEditor,
-      showEditor => showEditor && editorSvc.clEditor.focus());
+    const focus = () => {
+      if (this.styles.showEditor) {
+        editorSvc.clEditor.focus();
+      }
+    };
+    setTimeout(focus, 100);
+    this.$watch(() => this.styles.showEditor, focus);
   },
   destroyed() {
     window.removeEventListener('resize', this.updateStyle);

src/components/Modal.vue

@@ -1,40 +1,6 @@
 <template>
   <div class="modal" @keydown.esc="onEscape" @keydown.tab="onTab">
-    <file-properties-modal v-if="config.type === 'fileProperties'"></file-properties-modal>
-    <settings-modal v-else-if="config.type === 'settings'"></settings-modal>
-    <templates-modal v-else-if="config.type === 'templates'"></templates-modal>
-    <about-modal v-else-if="config.type === 'about'"></about-modal>
-    <html-export-modal v-else-if="config.type === 'htmlExport'"></html-export-modal>
-    <pdf-export-modal v-else-if="config.type === 'pdfExport'"></pdf-export-modal>
-    <pandoc-export-modal v-else-if="config.type === 'pandocExport'"></pandoc-export-modal>
-    <link-modal v-else-if="config.type === 'link'"></link-modal>
-    <image-modal v-else-if="config.type === 'image'"></image-modal>
-    <sync-management-modal v-else-if="config.type === 'syncManagement'"></sync-management-modal>
-    <publish-management-modal v-else-if="config.type === 'publishManagement'"></publish-management-modal>
-    <workspace-management-modal v-else-if="config.type === 'workspaceManagement'"></workspace-management-modal>
-    <sponsor-modal v-else-if="config.type === 'sponsor'"></sponsor-modal>
-    <!-- Providers -->
-    <google-photo-modal v-else-if="config.type === 'googlePhoto'"></google-photo-modal>
-    <google-drive-account-modal v-else-if="config.type === 'googleDriveAccount'"></google-drive-account-modal>
-    <google-drive-save-modal v-else-if="config.type === 'googleDriveSave'"></google-drive-save-modal>
-    <google-drive-workspace-modal v-else-if="config.type === 'googleDriveWorkspace'"></google-drive-workspace-modal>
-    <google-drive-publish-modal v-else-if="config.type === 'googleDrivePublish'"></google-drive-publish-modal>
-    <dropbox-account-modal v-else-if="config.type === 'dropboxAccount'"></dropbox-account-modal>
-    <dropbox-save-modal v-else-if="config.type === 'dropboxSave'"></dropbox-save-modal>
-    <dropbox-publish-modal v-else-if="config.type === 'dropboxPublish'"></dropbox-publish-modal>
-    <github-account-modal v-else-if="config.type === 'githubAccount'"></github-account-modal>
-    <github-open-modal v-else-if="config.type === 'githubOpen'"></github-open-modal>
-    <github-save-modal v-else-if="config.type === 'githubSave'"></github-save-modal>
-    <github-publish-modal v-else-if="config.type === 'githubPublish'"></github-publish-modal>
-    <gist-sync-modal v-else-if="config.type === 'gistSync'"></gist-sync-modal>
-    <gist-publish-modal v-else-if="config.type === 'gistPublish'"></gist-publish-modal>
-    <wordpress-publish-modal v-else-if="config.type === 'wordpressPublish'"></wordpress-publish-modal>
-    <blogger-publish-modal v-else-if="config.type === 'bloggerPublish'"></blogger-publish-modal>
-    <blogger-page-publish-modal v-else-if="config.type === 'bloggerPagePublish'"></blogger-page-publish-modal>
-    <zendesk-account-modal v-else-if="config.type === 'zendeskAccount'"></zendesk-account-modal>
-    <zendesk-publish-modal v-else-if="config.type === 'zendeskPublish'"></zendesk-publish-modal>
-    <couchdb-workspace-modal v-else-if="config.type === 'couchdbWorkspace'"></couchdb-workspace-modal>
-    <couchdb-credentials-modal v-else-if="config.type === 'couchdbCredentials'"></couchdb-credentials-modal>
+    <component v-if="currentModalComponent" :is="currentModalComponent"></component>
     <modal-inner v-else aria-label="Dialog">
       <div class="modal__content" v-html="config.content"></div>
       <div class="modal__button-bar">
@@ -129,9 +95,22 @@ export default {
     CouchdbWorkspaceModal,
     CouchdbCredentialsModal,
   },
-  computed: mapGetters('modal', [
-    'config',
-  ]),
+  computed: {
+    ...mapGetters('modal', [
+      'config',
+    ]),
+    currentModalComponent() {
+      if (this.config.type) {
+        let componentName = this.config.type[0].toUpperCase();
+        componentName += this.config.type.slice(1);
+        componentName += 'Modal';
+        if (this.$options.components[componentName]) {
+          return componentName;
+        }
+      }
+      return null;
+    },
+  },
   methods: {
     onEscape() {
       this.config.reject();

src/components/NavigationBar.vue

@@ -2,11 +2,13 @@
   <nav class="navigation-bar" :class="{'navigation-bar--editor': styles.showEditor && !revisionContent}">
     <!-- Explorer -->
     <div class="navigation-bar__inner navigation-bar__inner--left navigation-bar__inner--button">
-      <button class="navigation-bar__button button" tour-step-anchor="explorer" @click="toggleExplorer()" v-title="'Toggle explorer'"><icon-folder></icon-folder></button>
+      <button class="navigation-bar__button button" v-if="light" @click="close()" v-title="'Close StackEdit'"><icon-close></icon-close></button>
+      <button class="navigation-bar__button button" v-else tour-step-anchor="explorer" @click="toggleExplorer()" v-title="'Toggle explorer'"><icon-folder></icon-folder></button>
     </div>
     <!-- Side bar -->
     <div class="navigation-bar__inner navigation-bar__inner--right navigation-bar__inner--button">
-      <button class="navigation-bar__button navigation-bar__button--stackedit button" tour-step-anchor="menu" @click="toggleSideBar()" v-title="'Toggle side bar'"><icon-provider provider-id="stackedit"></icon-provider></button>
+      <a class="navigation-bar__button navigation-bar__button--stackedit button" v-if="light" href="app" target="_blank" v-title="'Open StackEdit'"><icon-provider provider-id="stackedit"></icon-provider></a>
+      <button class="navigation-bar__button navigation-bar__button--stackedit button" v-else tour-step-anchor="menu" @click="toggleSideBar()" v-title="'Toggle side bar'"><icon-provider provider-id="stackedit"></icon-provider></button>
     </div>
     <div class="navigation-bar__inner navigation-bar__inner--right navigation-bar__inner--title flex flex--row">
       <!-- Spinner -->
@@ -57,6 +59,7 @@ import editorSvc from '../services/editorSvc';
 import syncSvc from '../services/syncSvc';
 import publishSvc from '../services/publishSvc';
 import animationSvc from '../services/animationSvc';
+import tempFileSvc from '../services/tempFileSvc';
 import utils from '../services/utils';
 
 export default {
@@ -68,6 +71,7 @@ export default {
   }),
   computed: {
     ...mapState([
+      'light',
       'offline',
     ]),
     ...mapState('queue', [
@@ -104,9 +108,7 @@ export default {
       }
       this.titleFakeElt.textContent = this.title;
       const width = this.titleFakeElt.getBoundingClientRect().width + 2; // 2px for the caret
-      return width < this.styles.titleMaxWidth
-        ? width
-        : this.styles.titleMaxWidth;
+      return Math.min(width, this.styles.titleMaxWidth);
     },
     titleScrolling() {
       const result = this.titleHover && !this.titleFocus;
@@ -178,9 +180,12 @@ export default {
       }
       this.titleInputElt.blur();
     },
+    close() {
+      tempFileSvc.close();
+    },
   },
   created() {
-    this.$store.watch(
+    this.$watch(
       () => this.$store.getters['file/current'].name,
       (name) => {
         this.title = name;
@@ -213,7 +218,7 @@ export default {
   float: left;
 
   &.navigation-bar__inner--button {
-    margin-right: 15px;
+    margin-right: 12px;
   }
 }
 
@@ -255,6 +260,7 @@ $button-size: 36px;
 .navigation-bar__button {
   width: $button-size;
   padding: 0 8px;
+  transition: opacity 0.25s;
 
   .navigation-bar__inner--button & {
     padding: 0 4px;
@@ -290,7 +296,7 @@ $button-size: 36px;
 
 .navigation-bar__title {
   margin: 0 4px;
-  font-size: 22px;
+  font-size: 21px;
 
   .layout--revision & {
     position: absolute;

src/components/Preview.vue

@@ -5,7 +5,7 @@
       </div>
       <div class="gutter" :style="{left: styles.previewGutterLeft + 'px'}">
         <comment-list v-if="styles.previewGutterWidth"></comment-list>
-        <preview-new-discussion-button></preview-new-discussion-button>
+        <preview-new-discussion-button v-if="!isCurrentTemp"></preview-new-discussion-button>
       </div>
     </div>
     <div v-if="!styles.showEditor" class="preview__corner">
@@ -32,9 +32,14 @@ export default {
   data: () => ({
     previewTop: true,
   }),
-  computed: mapGetters('layout', [
-    'styles',
-  ]),
+  computed: {
+    ...mapGetters('file', [
+      'isCurrentTemp',
+    ]),
+    ...mapGetters('layout', [
+      'styles',
+    ]),
+  },
   methods: {
     ...mapActions('data', [
       'toggleEditor',

src/components/StatusBar.vue

@@ -59,7 +59,7 @@ export default {
   created() {
     editorSvc.$on('sectionList', () => this.computeText());
     editorSvc.$on('selectionRange', () => this.computeText());
-    editorSvc.$on('previewText', () => this.computeHtml());
+    editorSvc.$on('previewCtx', () => this.computeHtml());
     editorSvc.$on('previewSelectionRange', () => this.computeHtml());
   },
 
@@ -92,7 +92,7 @@ export default {
         this.htmlSelection = true;
         if (!text) {
           this.htmlSelection = false;
-          text = editorSvc.previewText;
+          text = editorSvc.previewCtx.text;
         }
         if (text != null) {
           this.htmlStats.forEach((stat) => {

src/components/Toc.vue

@@ -30,7 +30,7 @@ export default {
       e.preventDefault();
       const y = e.clientY - tocElt.getBoundingClientRect().top;
 
-      editorSvc.sectionDescList.some((sectionDesc) => {
+      editorSvc.previewCtx.sectionDescList.some((sectionDesc) => {
         if (y >= sectionDesc.tocDimension.endOffset) {
           return false;
         }
@@ -64,7 +64,7 @@ export default {
     const updateMaskY = () => {
       const scrollPosition = editorSvc.getScrollPosition();
       if (scrollPosition) {
-        const sectionDesc = editorSvc.sectionDescList[scrollPosition.sectionIdx];
+        const sectionDesc = editorSvc.previewCtx.sectionDescList[scrollPosition.sectionIdx];
         this.maskY = sectionDesc.tocDimension.startOffset +
           (scrollPosition.posInSection * sectionDesc.tocDimension.height);
       }