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

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