Skip to content
This repository was archived by the owner on Sep 13, 2023. It is now read-only.

enhancement(refactor): Minor refactor in .vue and .js files #39

Merged
merged 3 commits into from
Feb 22, 2018
Merged

enhancement(refactor): Minor refactor in .vue and .js files #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
30c65cd
guastallaigor Feb 21, 2018
cef7ec4
Merge branch 'master' into code-js-refactor
guastallaigor Feb 21, 2018
b6d5b25
guastallaigor Feb 21, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions src/renderer/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,16 +15,16 @@
</template>

<script>
import Navbar from './Navbar';
import Sidebar from './Sidebar';
import Navbar from './Navbar';
import Sidebar from './Sidebar';

export default {
name: 'cn-app',
components: {
'cn-navbar': Navbar,
'cn-sidebar': Sidebar,
},
};
export default {
name: 'cn-app',
components: {
'cn-navbar': Navbar,
'cn-sidebar': Sidebar,
},
};
</script>

<style lang="scss">
Expand Down
66 changes: 33 additions & 33 deletions src/renderer/Navbar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@

<script>
// eslint-disable-next-line
import {remote} from 'electron';
import { remote } from 'electron';
import HelpTokenModal from './components/modals/help-token-modal/HelpTokenModal';

export default {
Expand All @@ -66,43 +66,43 @@
</script>

<style lang="scss" scoped>
nav {
-webkit-app-region: drag;
background-color: $primary;
text-align: center;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
nav {
-webkit-app-region: drag;
background-color: $primary;
text-align: center;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;

.logo {
padding: 10px 10px 4px 10px;
width: 110px;
position: relative;
left: 4%;
}
.logo {
padding: 10px 10px 4px 10px;
width: 110px;
position: relative;
left: 4%;
}

#about-code-notes,
#github,
#help {
color: $light;
position: relative;
top: 20px;
right: 20px;
}
#about-code-notes,
#github,
#help {
color: $light;
position: relative;
top: 20px;
right: 20px;
}

.modal {
.media-content {
text-align: center;
}
.modal {
.media-content {
text-align: center;
}

img {
width: 250px;
}
img {
width: 250px;
}

.badge {
width: 160px;
}
.badge {
width: 160px;
}
}
}
</style>
52 changes: 25 additions & 27 deletions src/renderer/Sidebar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@
</p>
<ul class="menu-list">
<li>
<a :class="{'is-active': !gistsSelected}" @click="selectGists(false)">Local
<a :class="{'is-active': !gistsSelected}" @click="selectGistsSidebar(false)">Local
<b-icon icon="laptop" class="is-pulled-right"></b-icon>
</a>
</li>
<li>
<a :class="{'is-active': gistsSelected}" @click="selectGists(true)">Gists
<a :class="{'is-active': gistsSelected}" @click="selectGistsSidebar(true)">Gists
<b-icon icon="github" class="is-pulled-right"></b-icon>
</a>
</li>
Expand All @@ -20,12 +20,12 @@
</p>
<ul class="menu-list" id="menu-list-languages" v-if="!isLoading">
<li>
<a :class="{'is-active': languageSelected === 'all'}" @click="selectLanguage('all')">All
<a :class="{'is-active': languageSelected === 'all'}" @click="selectLanguageSidebar('all')">All
<b-tag class="is-pulled-right" type="is-dark">{{totalFiles}}</b-tag>
</a>
</li>
<li v-for="(list, value) in Array.from(languages)">
<a :class="{'is-active': languageSelected === list[0]}" @click="selectLanguage(list[0])">{{list[0] | capitalize}}
<a :class="{'is-active': languageSelected === list[0]}" @click="selectLanguageSidebar(list[0])">{{list[0] | capitalize}}
<b-tag class="is-pulled-right" type="is-dark">{{list[1]}}</b-tag>
</a>
</li>
Expand All @@ -34,32 +34,30 @@
</template>

<script>
import Vuex from 'vuex';
import { mapGetters, mapActions } from 'vuex';

export default {
name: 'cn-sidebar',
data() {
return {};
},
methods: {
selectLanguage(language) {
this.$store.dispatch('selectLanguage', language);
export default {
name: 'cn-sidebar',
methods: {
...mapActions(['selectLanguage', 'selectGists']),
selectLanguageSidebar(language) {
this.selectLanguage(language);
},
selectGistsSidebar(gistsSelected) {
this.selectGists(gistsSelected);
},
},
selectGists(gistsSelected) {
this.$store.dispatch('selectGists', gistsSelected);
computed: {
...mapGetters([
'languages',
'notes',
'languageSelected',
'totalFiles',
'gistsSelected',
'isLoading',
]),
},
},
computed: {
...Vuex.mapGetters([
'languages',
'notes',
'languageSelected',
'totalFiles',
'gistsSelected',
'isLoading'
]),
},
};
};
</script>

<style lang="scss" scoped>
Expand Down
126 changes: 63 additions & 63 deletions src/renderer/components/editor/Editor.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,81 +2,81 @@
</template>

<script>
import ace from 'brace';
import emmet from 'emmet';
import ace from 'brace';
import emmet from 'emmet';

window.emmet = emmet;
window.emmet = emmet;

export default {
name: 'editor',
props: {
code: String,
value: String,
lang: String,
theme: String,
height: true,
width: true,
readOnly: Boolean,
},
data() {
return {
editor: null,
contentBackup: '',
};
},
methods: {
px(n) {
if (/^\d*$/.test(n)) {
return `${n}px`;
}
return n;
export default {
name: 'editor',
props: {
code: String,
value: String,
lang: String,
theme: String,
height: true,
width: true,
readOnly: Boolean,
},
},
watch: {
value(val) {
if (this.contentBackup !== val) this.editor.setValue(val, 1);
data() {
return {
editor: null,
contentBackup: '',
};
},
code(val) {
if (this.contentBackup !== val) this.editor.setValue(val, 1);
methods: {
px(n) {
if (/^\d*$/.test(n)) {
return `${n}px`;
}
return n;
},
},
lang(val) {
this.editor.getSession().setMode(`ace/mode/${val}`);
watch: {
value(val) {
if (this.contentBackup !== val) this.editor.setValue(val, 1);
},
code(val) {
if (this.contentBackup !== val) this.editor.setValue(val, 1);
},
lang(val) {
this.editor.getSession().setMode(`ace/mode/${val}`);
},
},
},
mounted() {
const vm = this;
const lang = this.lang || 'text';
const theme = this.theme || 'chrome';
mounted() {
const vm = this;
const lang = this.lang || 'text';
const theme = this.theme || 'chrome';

require('brace/ext/emmet');

require('brace/ext/emmet');
const editor = (vm.editor = ace.edit(this.$el));

const editor = (vm.editor = ace.edit(this.$el));
this.$emit('init', editor);

this.$emit('init', editor);
editor.$blockScrolling = Infinity;
editor.setOption('enableEmmet', true);
editor.setOption('maxLines', 15);
editor.getSession().setMode(`ace/mode/${lang}`);
editor.setTheme(`ace/theme/${theme}`);
editor.setShowPrintMargin(false);

editor.$blockScrolling = Infinity;
editor.setOption('enableEmmet', true);
editor.setOption('maxLines', 15);
editor.getSession().setMode(`ace/mode/${lang}`);
editor.setTheme(`ace/theme/${theme}`);
editor.setShowPrintMargin(false);
if (!this.readOnly) {
editor.setOption('minLines', 15);
editor.setValue(this.value, 1);
} else {
editor.setValue(this.code, 1);
}
editor.setReadOnly(this.readOnly);
if (!this.readOnly) {
editor.setOption('minLines', 15);
editor.setValue(this.value, 1);
} else {
editor.setValue(this.code, 1);
}
editor.setReadOnly(this.readOnly);

editor.on('change', () => {
const content = editor.getValue();
vm.$emit('input', content);
vm.contentBackup = content;
});
},
};
editor.on('change', () => {
const content = editor.getValue();
vm.$emit('input', content);
vm.contentBackup = content;
});
},
};
</script>

<style src="./Editor.scss" lang="scss">

</style>
Loading