add markdown support to cv section

This commit is contained in:
Xuan Sang LE 2018-02-21 00:20:54 +01:00
parent e909da8057
commit f0a2fac51a
3 changed files with 24 additions and 4 deletions

View File

@ -1,5 +1,6 @@
<afx-app-window data-id = "blogger-cv-sec-win" apptitle="Porforlio section" width="450" height="400">
<afx-vbox >
<div data-height="5"></div>
<afx-hbox data-height = "30" >
<afx-label data-width= "70" text = "Title*:"></afx-label>
<input type = "text" name="title" input-class = "user-input"/>
@ -19,8 +20,10 @@
<input type = "text" name="end" input-class = "user-input"/>
</afx-hbox>
<afx-label data-height = "30" text = "Content*:" style = "margin-left:5px;"/>
<textarea name="content" input-class = "user-input" style = "margin-left:5px; margin-right:5px;" />
<afx-hbox data-height = "30">
<div data-id="editor-container">
<textarea name="content" data-id = "contentarea" />
</div>
<afx-hbox data-height = "35">
<div></div>
<afx-button iconclass = "fa fa-save" data-id = "bt-cv-sec-save" data-width="60" text = "Save"/>
</afx-hbox>

View File

@ -58,16 +58,32 @@ class BloggerCVSectionDiaglog extends this.OS.GUI.BaseDialog
main: () ->
me = @
@scheme.set "apptitle", @title
@editor = new SimpleMDE
element: @find "contentarea"
status: false
toolbar: false
($ (@select '[class = "CodeMirror-scroll"]')[0]).css "min-height", "50px"
($ (@select '[class="CodeMirror cm-s-paper CodeMirror-wrap"]')[0]).css "min-height", "50px"
@on "vboxchange", () ->
me.resizeContent()
console.log "resize content"
inputs = me.select "[input-class='user-input']"
(($ v).val me.data[v.name] for v in inputs ) if me.data
@editor.value me.data.content if me.data and me.data.content
(@find "bt-cv-sec-save").set "onbtclick", (e) ->
data = {}
console.log inputs
data[v.name] = ($ v).val() for v in inputs
data.content = me.editor.value()
return me.notify "Title must not be blank" if data.title is ""
return me.notify "Content must not be blank" if data.content is ""
data.id = me.data.id if me.data and me.data.id
me.handler data if me.handler
me.quit()
me.resizeContent()
resizeContent: () ->
container = @find "editor-container"
children = ($ container).children()
cheight = ($ container).height() - 30
($ children[1]).css("height", cheight + "px")
this.OS.register "BloggerCVSectionDiaglog", BloggerCVSectionDiaglog

View File

@ -41,7 +41,8 @@ afx-app-window[data-id="blogger-win"] afx-hbox[data-id="cv-container"] afx-labe
}
afx-app-window[data-id="blogger-cv-sec-win"] afx-hbox{
padding:5px;
padding-left:5px;
padding-right:5px;
}
afx-app-window[data-id="blogger-win"] afx-list-view[ data-id = "cv-sec-list"] > div.list-container > ul > li{
padding-bottom: 10px;