Skip to content

Commit

Permalink
Merge pull request #27 from voraciousdev/support-user-settings
Browse files Browse the repository at this point in the history
Add settings menu
  • Loading branch information
davidmyersdev authored Sep 7, 2020
2 parents d9f9856 + f3ee074 commit 68d3b53
Show file tree
Hide file tree
Showing 9 changed files with 152 additions and 9 deletions.
20 changes: 18 additions & 2 deletions src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,18 @@
<router-link @click.native="hideMenu" class="btn btn-secondary d-md-none" :to="{ name: 'tags' }">
<span class="action">tags</span>
</router-link>
<div class="btn btn-menu btn-primary d-flex justify-space-between align-items-center" @click.stop="toggleMenu" role="button" aria-haspopup="true" aria-expanded="false">
<div class="btn btn-menu btn-primary d-flex justify-content-between align-items-center ml-2" @click.stop="toggleMenu" role="button" aria-haspopup="true" aria-expanded="false">
<svg width="0.75em" height="0.75em" viewBox="0 0 16 16" class="bi bi-lightning-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z"/>
</svg>
<span>actions</span>
<small class="action-shortcut d-none d-md-block">cmd + k</small>
</div>
<router-link :to="{ name: 'settings' }" class="btn btn-settings pr-2 pl-2 d-flex align-items-center justify-content-center ml-2">
<svg width="1.25em" height="1.25em" viewBox="0 0 16 16" class="bi bi-person-lines-fill mr-0" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M1 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm7 1.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5zm2 9a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5z"/>
</svg>
</router-link>
<Menu :class="{ hide: !showMenu }" />
</div>
</nav>
Expand Down Expand Up @@ -330,7 +335,6 @@ a, a:hover {
.navbar .btn-menu {
align-items: baseline;
display: flex;
margin-left: 0.5rem;
}
.action-shortcut {
Expand Down Expand Up @@ -455,6 +459,13 @@ a, a:hover {
color: #aaa;
}
.btn-settings, .btn-settings:hover, .btn-settings:active, .btn-settings:focus {
background-color: #222 !important;
border: none;
box-shadow: none !important;
color: #aaa;
}
.monospace {
font-family: 'Fira Mono', monospace !important;
}
Expand Down Expand Up @@ -489,6 +500,11 @@ pre {
display: none !important;
}
hr {
background-color: #aaa;
margin-top: 0.5rem;
}
svg:not(.close-context) {
flex-shrink: 0;
margin-right: 0.5em;
Expand Down
11 changes: 9 additions & 2 deletions src/components/MarkdownEditor.vue
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,12 @@ export default {
cursor.hasOwnProperty('character') && cursor.hasOwnProperty('line')
),
},
settings: {
type: Object,
default: () => ({
// nothing yet
}),
},
value: String,
},
data() {
Expand All @@ -54,17 +60,18 @@ export default {
if (instance.somethingSelected()) {
instance.indentSelection('add');
} else {
instance.replaceSelection(Array(instance.getOption('indentUnit') + 1).join(' '), 'end', '+input');
instance.replaceSelection(Array(instance.getOption('tabSize') + 1).join(' '), 'end', '+input');
}
},
},
indentUnit: this.settings.tabSize || 2,
indentWithTabs: false,
lineWrapping: true,
mode: {
name: 'gfm',
},
singleCursorHeightPerLine: true,
tabSize: 2,
tabSize: this.settings.tabSize || 2,
theme: 'yeti',
};
},
Expand Down
5 changes: 4 additions & 1 deletion src/components/TheEditor.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div class="container-lg">
<div class="editor" @click="focusEditor">
<div class="gutter gutter-start" :class="{ 'md-plus': mediumPlus }" @click="focusEditorStart"></div>
<MarkdownEditor ref="editable" class="editable" :initialCursor="initialCursor" :value="document.text" @input="input" @ready="onReady" />
<MarkdownEditor ref="editable" class="editable" :initialCursor="initialCursor" :settings="settings" :value="document.text" @input="input" @ready="onReady" />
<div class="gutter gutter-end expand" :class="{ 'md-plus': mediumPlus }" @click="focusEditorEnd"></div>
<div class="document-actions">
<DiscardableAction v-if="document.clientId" :discardedAt="document.discardedAt" :onDiscard="discardDocument" :onRestore="restoreDocument" class="destroy"></DiscardableAction>
Expand Down Expand Up @@ -80,6 +80,9 @@ export default {
mediumPlus() {
return ['md', 'lg', 'xl'].includes(this.$mq);
},
settings() {
return this.$store.state.settings.editor;
},
savedAt() {
if (this.document.updatedAt) {
if (this.now.diff(this.document.updatedAt, 'seconds') < 5) {
Expand Down
42 changes: 42 additions & 0 deletions src/components/TheSettings.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<template>
<div class="container context mt-3 mt-md-5">
<div>
<h3 class="card-title">Settings</h3>
<h6 class="card-subtitle text-muted font-weight-normal mb-3">Make yourself comfortable</h6>
<section>
<h4 class="font-weight-normal">Editor</h4>
<hr>
<div class="form-group">
<label for="config-tab-size">Tab length</label>
<input v-model="tabSize" type="number" min="2" id="config-tab-size" class="form-control">
<small class="text-muted">Number of spaces per tab (minimum: 2)</small>
</div>
</section>
</div>
</div>
</template>

<script>
import {
SET_EDITOR_TAB_SIZE,
} from '@/store/modules/settings';
export default {
name: 'TheSettings',
data() {
return {
// nothing yet
};
},
computed: {
tabSize: {
get() {
return this.$store.state.settings.editor.tabSize;
},
set(value) {
this.$store.dispatch(SET_EDITOR_TAB_SIZE, parseInt(value) || 2);
},
},
},
};
</script>
7 changes: 7 additions & 0 deletions src/router.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import Dashboard from './views/Dashboard.vue';
import Context from './components/Context.vue';
import DocumentList from './components/DocumentList.vue';
import TheEditor from './components/TheEditor.vue';
import TheSettings from './components/TheSettings.vue';
import TagList from './components/TagList.vue';


Expand Down Expand Up @@ -95,6 +96,12 @@ const router = new Router({
component: TagList,
props: true,
},
// settings
{
path: 'settings',
name: 'settings',
component: TheSettings,
},
],
},
],
Expand Down
16 changes: 12 additions & 4 deletions src/store.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,16 @@
import Vue from 'vue';
import Vuex from 'vuex';

import documents from '@/store/modules/documents';
import cachePlugin from '@/store/plugins/cache';
import router from '@/router';

// modules
import documentsModule from '@/store/modules/documents';
import settingsModule from '@/store/modules/settings';

// plugins
import documentsCachingPlugin from '@/store/plugins/caching/documents';
import settingsCachingPlugin from '@/store/plugins/caching/settings';

import {
ACTIVATE_CONTEXT,
BLUR_EDITOR,
Expand Down Expand Up @@ -147,9 +153,11 @@ export default new Vuex.Store({
},
},
modules: {
documents,
documents: documentsModule,
settings: settingsModule,
},
plugins: [
cachePlugin,
documentsCachingPlugin,
settingsCachingPlugin,
],
});
30 changes: 30 additions & 0 deletions src/store/modules/settings.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
export const LOAD_SETTINGS = 'LOAD_SETTINGS';
export const SET_EDITOR_TAB_SIZE = 'SET_EDITOR_TAB_SIZE';

export default {
state: () => ({
editor: {
tabSize: 2,
},
}),
getters: {
// nothing yet
},
mutations: {
[LOAD_SETTINGS] (state, settings) {
// shallow merge
Object.assign(state, settings);
},
[SET_EDITOR_TAB_SIZE] (state, tabSize) {
state.editor.tabSize = tabSize;
},
},
actions: {
async [LOAD_SETTINGS] (context, settings) {
context.commit(LOAD_SETTINGS, settings);
},
async [SET_EDITOR_TAB_SIZE] (context, tabSize) {
context.commit(SET_EDITOR_TAB_SIZE, tabSize);
},
},
};
File renamed without changes.
30 changes: 30 additions & 0 deletions src/store/plugins/caching/settings.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import localforage from 'localforage';

import {
LOAD_SETTINGS,
SET_EDITOR_TAB_SIZE,
} from '@/store/modules/settings';

const CACHE_KEY = 'main';
const cache = localforage.createInstance({
name: 'settings',
});

export default (store) => {
cache.getItem(CACHE_KEY).then((settings) => {
if (settings) {
store.dispatch(LOAD_SETTINGS, settings);
}
});

store.subscribe(({ type, _payload }, state) => {
switch (type) {
case SET_EDITOR_TAB_SIZE:
cache.setItem(CACHE_KEY, state.settings);

break;
default:
break;
}
});
};

0 comments on commit 68d3b53

Please sign in to comment.