fix: editor-code UI fixes

client/js/components/editor-code.vue

@@ -1,7 +1,7 @@
 <template lang='pug'>
   .editor-code
     v-toolbar(color='blue', flat, dense, dark)
-      v-icon(color='blue lighten-5') border_color
+      v-icon(color='blue lighten-5') edit
       v-toolbar-title.white--text Sample Page
     .editor-code-toolbar
       .editor-code-toolbar-group
@@ -126,15 +126,7 @@ export default {
         highlightSelectionMatches: {
           annotateScrollbar: true
         },
-        viewportMargin: 50,
-        extraKeys: {
-          'F11'(cm) {
-            cm.setOption('fullScreen', !cm.getOption('fullScreen'))
-          },
-          'Esc'(cm) {
-            if (cm.getOption('fullScreen')) cm.setOption('fullScreen', false)
-          }
-        }
+        viewportMargin: 50
       }
     }
   },
@@ -151,14 +143,19 @@ export default {
   },
   methods: {
     onCmReady(cm) {
-      cm.setSize(null, 'calc(100vh - 50px)')
+      let self = this
+      cm.setSize(null, 'calc(100vh - 100px)')
+      cm.setOption('extraKeys', {
+        'F11'(cm) {
+          cm.setOption('fullScreen', !cm.getOption('fullScreen'))
         },
-    onCmFocus(cm) {
-      console.log('the editor is focus!', cm)
+        'Esc'(cm) {
+          if (cm.getOption('fullScreen')) cm.setOption('fullScreen', false)
         },
-    onCmCodeChange(newCode) {
-      console.log('this is new code', newCode)
-      this.code = newCode
+        'Ctrl-S'(cm) {
+          self.$parent.save()
+        }
+      })
     }
   }
 }
@@ -174,7 +171,7 @@ export default {
   &-editor {
     flex: 1 1 50%;
     display: block;
-    min-height: calc(100vh - 50px);
+    min-height: calc(100vh - 100px);
     position: relative;
 
     &-title {

client/js/components/editor-modal-access.vue

@@ -15,14 +15,14 @@
             v-flex(xs6)
               v-menu(ref='menuPublishStart', lazy='', :close-on-content-click='false', v-model='isPublishStartShown', transition='scale-transition', offset-y='', full-width='', :nudge-right='40', min-width='290px', :return-value.sync='publishStartDate')
                 v-text-field(slot='activator', label='Publish starting on...', v-model='publishStartDate', prepend-icon='event', readonly)
-                v-date-picker(v-model='date', :min='(new Date()).toISOString().substring(0, 10)', reactive)
+                v-date-picker(v-model='publishStartDate', :min='(new Date()).toISOString().substring(0, 10)', reactive)
                   v-spacer
                   v-btn(flat='', color='primary', @click='isPublishStartShown = false') Cancel
                   v-btn(flat='', color='primary', @click='$refs.menuPublishStart.save(date)') OK
             v-flex(xs6)
               v-menu(ref='menuPublishEnd', lazy='', :close-on-content-click='false', v-model='isPublishEndShown', transition='scale-transition', offset-y='', full-width='', :nudge-right='40', min-width='290px', :return-value.sync='publishEndDate')
                 v-text-field(slot='activator', label='Publish ending on...', v-model='publishEndDate', prepend-icon='event', readonly)
-                v-date-picker(v-model='date', :min='(new Date()).toISOString().substring(0, 10)', reactive)
+                v-date-picker(v-model='publishEndDate', :min='(new Date()).toISOString().substring(0, 10)', reactive)
                   v-spacer
                   v-btn(flat='', color='primary', @click='isPublishEndShown = false') Cancel
                   v-btn(flat='', color='primary', @click='$refs.menuPublishEnd.save(date)') OK