From f0a2fac51af673856072e43cdb8a093cd9c619b4 Mon Sep 17 00:00:00 2001
From: Xuan Sang LE <xsang.le@gmail.com>
Date: Wed, 21 Feb 2018 00:20:54 +0100
Subject: [PATCH] add markdown support to cv section

---
 src/packages/Blogger/cvsection.html |  7 +++++--
 src/packages/Blogger/dialogs.coffee | 18 +++++++++++++++++-
 src/packages/Blogger/main.css       |  3 ++-
 3 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/packages/Blogger/cvsection.html b/src/packages/Blogger/cvsection.html
index 9f0e1fc..6fedf5c 100644
--- a/src/packages/Blogger/cvsection.html
+++ b/src/packages/Blogger/cvsection.html
@@ -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>
diff --git a/src/packages/Blogger/dialogs.coffee b/src/packages/Blogger/dialogs.coffee
index 0cf9d2e..9ad3467 100644
--- a/src/packages/Blogger/dialogs.coffee
+++ b/src/packages/Blogger/dialogs.coffee
@@ -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
\ No newline at end of file
diff --git a/src/packages/Blogger/main.css b/src/packages/Blogger/main.css
index 8fd3768..dd6eb72 100644
--- a/src/packages/Blogger/main.css
+++ b/src/packages/Blogger/main.css
@@ -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;