Editor - Codeblock UI
This commit is contained in:
parent
f7ba9ad143
commit
f7ce81e8c9
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -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) => {
|
||||
|
||||
|
@ -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');
|
||||
},
|
||||
|
||||
// -------------------------------------------
|
||||
|
@ -138,10 +138,7 @@ if($('#mk-editor').length === 1) {
|
||||
codeEditor.setValue('');
|
||||
}
|
||||
|
||||
$('#modal-editor-codeblock').slideDown(400, () => {
|
||||
codeEditor.resize();
|
||||
codeEditor.focus();
|
||||
});
|
||||
vueCodeBlock.open();
|
||||
|
||||
}
|
||||
},
|
||||
|
@ -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 {
|
||||
|
@ -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
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user