Editor - Codeblock UI

This commit is contained in:
NGPixel 2016-12-03 20:20:06 -05:00
parent f7ba9ad143
commit f7ce81e8c9
8 changed files with 76 additions and 31 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -44,9 +44,20 @@ let vueCodeBlock = new Vue({
}
},
methods: {
open: (ev) => {
$('#modal-editor-codeblock').addClass('is-active');
_.delay(() => {
codeEditor.resize();
codeEditor.focus();
codeEditor.setAutoScrollEditorIntoView(true);
codeEditor.renderer.updateFull();
}, 1000);
},
cancel: (ev) => {
mdeModalOpenState = false;
$('#modal-editor-codeblock').slideUp();
$('#modal-editor-codeblock').removeClass('is-active');
},
insertCode: (ev) => {

View File

@ -27,12 +27,12 @@ let vueImage = new Vue({
open: () => {
mdeModalOpenState = true;
$('#modal-editor-image').slideDown();
$('#modal-editor-image').addClass('is-active');
vueImage.refreshFolders();
},
cancel: (ev) => {
mdeModalOpenState = false;
$('#modal-editor-image').slideUp();
$('#modal-editor-image').removeClass('is-active');
},
// -------------------------------------------

View File

@ -138,10 +138,7 @@ if($('#mk-editor').length === 1) {
codeEditor.setValue('');
}
$('#modal-editor-codeblock').slideDown(400, () => {
codeEditor.resize();
codeEditor.focus();
});
vueCodeBlock.open();
}
},

View File

@ -102,6 +102,20 @@
overflow: auto;
overflow-x: hidden;
> em {
display: flex;
align-items: center;
padding: 25px;
color: mc('grey', '500');
> i {
font-size: 32px;
margin-right: 10px;
color: mc('grey', '300');
}
}
> figure {
display: flex;
flex-direction: column;
@ -235,12 +249,31 @@
position: relative;
}
.ace_scroller {
width: 100%;
}
.ace_content {
height: 100%;
}
#page-type-source .ace-container {
min-height: 95vh;
}
#modal-editor-codeblock .ace-container {
height: 400px;
display: flex;
align-items: stretch;
padding: 0;
position: relative;
width: 100%;
height: 100%;
#codeblock-editor {
width: 100%;
height: 100%;
min-height: 500px;
}
}
#source-display, #codeblock-editor {

View File

@ -1,21 +1,23 @@
.modallayer#modal-editor-codeblock
.modallayer-content
.columns
.column
h3 Code Block
.column.is-narrow
p.control
span.select
select(style={width: '300px'}, v-model='modeSelected')
option(v-for="mode in modes" v-bind:value='mode.name') {{ mode.caption }}
.column.is-narrow
.control.is-grouped
p.control
a.button.is-warning.is-outlined(v-on:click="cancel") Cancel
p.control
a.button.is-primary.is-outlined(v-on:click="insertCode") Insert Code Block
.modal#modal-editor-codeblock
.modal-background
.modal-container
.modal-content.is-expanded
header.is-green
span Insert Code Block
.ace-container(style={'border-radius':'5px'})
#codeblock-editor
section.is-gapless
.columns.is-stretched
.column.is-one-quarter.modal-sidebar.is-green(style={'max-width':'350px'})
.model-sidebar-header Language
.model-sidebar-content
p.control.is-fullwidth
select(v-model='modeSelected')
option(v-for="mode in modes" v-bind:value='mode.name') {{ mode.caption }}
.column.ace-container
#codeblock-editor
footer
a.button.is-grey.is-outlined(v-on:click="cancel") Discard
a.button.is-green(v-on:click="insertCode") Insert Code Block

View File

@ -29,7 +29,7 @@
li(v-for="fld in folders")
a(v-on:click="selectFolder(fld)", v-bind:class="{ 'is-active': currentFolder === fld }")
i.icon-folder2
span /{{ fld }}
span / {{ fld }}
.model-sidebar-header Alignment
.model-sidebar-content
p.control.is-fullwidth
@ -43,7 +43,9 @@
img(v-bind:src="'/uploads/t/' + img._id + '.png'")
span: strong {{ img.basename }}
span {{ img.filesize | filesize }}
em(v-show="images.length < 1") This folder is empty.
em(v-show="images.length < 1")
i.icon-marquee-minus
| This folder is empty.
footer
a.button.is-grey.is-outlined(v-on:click="cancel") Discard
a.button.is-green(v-on:click="insertImage") Insert Image