Stackedit/src/components/menus/MainMenu.vue
benweet abd0890512 Added favicons.
Added sponsorship options.
Added pdf and pandoc export.
Added emoji and mermaid extensions.
Added find/replace support.
Added HTML template with TOC.
Updated welcome file.
2017-11-04 16:59:48 +00:00

122 lines
3.7 KiB
Vue

<template>
<div class="side-bar__panel side-bar__panel--menu">
<menu-entry v-if="!loginToken" @click.native="signin">
<icon-login slot="icon"></icon-login>
<div>Sign in with Google</div>
<span>Back up and sync all your files, folders and settings.</span>
</menu-entry>
<div v-else class="menu-entry flex flex--row flex--align-center">
<div class="menu-entry__icon menu-entry__icon--image">
<user-image :user-id="loginToken.sub"></user-image>
</div>
<span>Signed in as <b>{{loginToken.name}}</b>.</span>
</div>
<hr>
<menu-entry @click.native="setPanel('sync')">
<icon-sync slot="icon"></icon-sync>
<div>Synchronize</div>
<span>Open, save, collaborate in the Cloud.</span>
</menu-entry>
<menu-entry @click.native="setPanel('publish')">
<icon-upload slot="icon"></icon-upload>
<div>Publish</div>
<span>Export your file to the web.</span>
</menu-entry>
<hr>
<menu-entry @click.native="fileProperties">
<icon-view-list slot="icon"></icon-view-list>
<div>File properties</div>
<span>Add metadata and configure extensions.</span>
</menu-entry>
<menu-entry @click.native="setPanel('toc')">
<icon-toc slot="icon"></icon-toc>
Table of contents
</menu-entry>
<menu-entry @click.native="setPanel('help')">
<icon-help-circle slot="icon"></icon-help-circle>
Markdown cheat sheet
</menu-entry>
<hr>
<menu-entry @click.native="print">
<icon-printer slot="icon"></icon-printer>
Print
</menu-entry>
<input class="hidden-file" id="import-disk-file-input" type="file" @change="onImportFile">
<label class="menu-entry button flex flex--row flex--align-center" for="import-disk-file-input">
<div class="menu-entry__icon flex flex--column flex--center">
<icon-content-save></icon-content-save>
</div>
<div class="flex flex--column">
Import from disk
</div>
</label>
<menu-entry @click.native="setPanel('export')">
<icon-content-save slot="icon"></icon-content-save>
Export to disk
</menu-entry>
<hr>
<menu-entry @click.native="setPanel('more')">
More...
</menu-entry>
</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex';
import MenuEntry from './common/MenuEntry';
import UserImage from '../UserImage';
import googleHelper from '../../services/providers/helpers/googleHelper';
import syncSvc from '../../services/syncSvc';
import providerUtils from '../../services/providers/providerUtils';
export default {
components: {
MenuEntry,
UserImage,
},
computed: {
...mapGetters('data', [
'loginToken',
]),
},
methods: {
...mapActions('data', {
setPanel: 'setSideBarPanel',
}),
signin() {
return googleHelper.signin()
.then(
() => syncSvc.requestSync(),
() => {}, // Cancel
);
},
onImportFile(evt) {
const file = evt.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
const content = e.target.result;
if (content.match(/\uFFFD/)) {
this.$store.dispatch('notification/error', 'File is not readable.');
} else {
this.$store.dispatch('createFile', {
...providerUtils.parseContent(content),
name: file.name,
})
.then(item => this.$store.commit('file/setCurrentId', item.id));
}
};
reader.readAsText(file);
}
},
fileProperties() {
return this.$store.dispatch('modal/open', 'fileProperties')
.catch(() => {}); // Cancel
},
print() {
print();
},
},
};
</script>