rte ui restructuring, extracted editor to be a standalone compontent, module will be re-coded to follow suit

themes/dash/assets/css/dash.css

@@ -2201,26 +2201,29 @@ select {
   font-size: 1.5em;
   color: #eee;
 }
-#entries-edit-index #entries-edit-index-wrapper #entry-header #entry-meta #entry_tags {
+#entries-edit-index #entries-edit-index-wrapper #entry-header #entry-title #entry-date {
-  background: #91867a;
-  font-family: 'Apercu';
-  width: 100%;
-  height: 115px;
-  color: #4c463f;
-}
-#entries-edit-index #entries-edit-index-wrapper #entry-header #entry-meta #entry-date {
   background: #897e71;
   border-radius: 0 3px 3px 0;
   width: 105px;
   font-family: 'Apercu';
   color: #cd898d;
+  height: 35px;
+  vertical-align: top;
 }
-#entries-edit-index #entries-edit-index-wrapper #entry-header #entry-meta label {
+#entries-edit-index #entries-edit-index-wrapper #entry-header #entry-title label {
   background: #81776b;
   border-radius: 3px 0 0 3px;
   display: inline-block;
   padding: 5px;
   color: #a69d93;
+  line-height: 35px;
+}
+#entries-edit-index #entries-edit-index-wrapper #entry-header #entry-meta #entry_tags {
+  background: #91867a;
+  font-family: 'Apercu';
+  width: 100%;
+  height: 150px;
+  color: #4c463f;
 }
 #entries-edit-index #entries-edit-index-wrapper #entry-header #entry-meta #featured-click,
 #entries-edit-index #entries-edit-index-wrapper #entry-header #entry-meta #post-image {
@@ -2585,11 +2588,11 @@ select {
 -------------------------------
 **/
 #edit-control {
-  margin: 10px;
   top: 1px;
-  padding: 5px;
+  padding: 2px;
-  border-radius: 5px;
+  border-radius: 3px;
-  background: rgba(137,126,113,0.75);
+  background: rgba(137,126,113,0.5);
+  width: 100%;
   z-index: 2000;
 }
 #edit-control button {

themes/dash/assets/js/dash.min.js

@@ -494,53 +494,7 @@ function (_EventEmitter) {
 
 var _default = Animate;
 exports.default = _default;
-},{"../events/EventEmitter.jsx":"tools/events/EventEmitter.jsx"}],"tools/effects/TextEffects.jsx":[function(require,module,exports) {
+},{"../events/EventEmitter.jsx":"tools/events/EventEmitter.jsx"}],"tools/utilities/StringUtils.jsx":[function(require,module,exports) {
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-var TexEffects =
-/*#__PURE__*/
-function () {
-  //--------------------------
-  // constructor
-  //--------------------------
-  function TexEffects() {
-    _classCallCheck(this, TexEffects);
-  } //--------------------------
-  // methods
-  //--------------------------
-
-
-  _createClass(TexEffects, [{
-    key: "scramble",
-    value: function scramble(obj, offset, complete) {
-      var scrambleText = new ScrambleText(obj, {
-        timeOffset: offset,
-        chars: ['安', '以', '宇', '衣', '於', '加', '幾', '久', '計', '己', '左', '之', '寸', '世', '曽', '太', '知', '川', '天', '止', '奈', '仁', '奴', '称', '乃', '波', '比', '不', '部', '保', '末', '美', '武', '女', '毛', '也', '為', '由', '恵', '与', '良', '利', '留', '礼', '呂', '和', '遠', '无'],
-        callback: complete
-      }).start();
-    } //--------------------------
-    // event handlers
-    //--------------------------
-
-  }]);
-
-  return TexEffects;
-}();
-
-var _default = TexEffects;
-exports.default = _default;
-},{}],"tools/utilities/StringUtils.jsx":[function(require,module,exports) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -2763,14 +2717,14 @@ var DataEvent = _interopRequireWildcard(require("../tools/events/DataEvent"));
 
 var Ease = _interopRequireWildcard(require("../tools/effects/Animate"));
 
-var _TextEffects = _interopRequireDefault(require("../tools/effects/TextEffects"));
-
 var _EntryTasks = _interopRequireDefault(require("../tasks/EntryTasks"));
 
 var _TextEditor = _interopRequireDefault(require("../tools/utilities/TextEditor"));
 
 var _tinyDatePicker = _interopRequireDefault(require("tiny-date-picker"));
 
+var _DateUtils = _interopRequireDefault(require("../tools/utilities/DateUtils"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
@@ -2791,9 +2745,11 @@ function () {
     _classCallCheck(this, Entry);
 
     reframe('iframe');
+    var self = this;
     this.uploadFiles;
     this.start();
     this.editor = new _TextEditor.default();
+    this.dateUtils = new _DateUtils.default();
     (0, _tinyDatePicker.default)(document.getElementById('entry-date'), {
       mode: 'dp-below',
       format: function format(date) {
@@ -2933,7 +2889,7 @@ function () {
 
 exports.default = Entry;
 Entry.uploadFiles = [];
-},{"../tools/utilities/DataUtils":"tools/utilities/DataUtils.jsx","../tools/events/DataEvent":"tools/events/DataEvent.jsx","../tools/effects/Animate":"tools/effects/Animate.jsx","../tools/effects/TextEffects":"tools/effects/TextEffects.jsx","../tasks/EntryTasks":"tasks/EntryTasks.jsx","../tools/utilities/TextEditor":"tools/utilities/TextEditor.jsx","tiny-date-picker":"../../../../node_modules/tiny-date-picker/dist/tiny-date-picker.js"}],"controllers/DisplayManager.jsx":[function(require,module,exports) {
+},{"../tools/utilities/DataUtils":"tools/utilities/DataUtils.jsx","../tools/events/DataEvent":"tools/events/DataEvent.jsx","../tools/effects/Animate":"tools/effects/Animate.jsx","../tasks/EntryTasks":"tasks/EntryTasks.jsx","../tools/utilities/TextEditor":"tools/utilities/TextEditor.jsx","tiny-date-picker":"../../../../node_modules/tiny-date-picker/dist/tiny-date-picker.js","../tools/utilities/DateUtils":"tools/utilities/DateUtils.jsx"}],"controllers/DisplayManager.jsx":[function(require,module,exports) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {

themes/dash/entry-edit.pug

@@ -19,19 +19,6 @@ block main-content
         #entries-edit-index-wrapper
             //h2 EDIT 
                 =post_title
-            #entry-header.columns
-                #entry-title.column
-                    textarea(id="entry_title" type='text', name='entry_title' class='post-edit', placeholder='title', required, autofocus)
-                        =post_title
-                #entry-meta.column
-                    textarea(id='entry_tags' type='text', name='entry_tags' class='form-control', placeholder='tags [comma seperated]', autofocus)
-                        =post_tags
-                    label Date Posted
-                    input(id="entry-date" type="text" value=post_date)
-                    br
-                    input(id="featured-click" type="file" name="featured-click")
-                    input(id="post-image" type="file" name="post-image")
-
             #entry-feature
                 //label FEATURE IMAGE
                 if(post_feature == 'null')
@@ -46,37 +33,21 @@ block main-content
                                 use(xlink:href='/dash/assets/images/sprite.svg#entypo-image-inverted')
                     #featured-image-drop
                             img(src=post_feature)
+            #entry-header.columns
+                #entry-title.column
+                    textarea(id="entry_title" type='text', name='entry_title' class='post-edit', placeholder='title', required, autofocus)
+                        =post_title
+                    label Date Posted
+                    input(id="entry-date" type="text" value=post_date)
+                    br
+                #entry-meta.column
+                    textarea(id='entry_tags' type='text', name='entry_tags' class='form-control', placeholder='tags [comma seperated]', autofocus)
+                        =post_tags
+                    include partials/editor
+                    input(id="featured-click" type="file" name="featured-click")
+                    input(id="post-image" type="file" name="post-image")
             #edit-content
-                #edit-control
+                
-                    button#option-bold.content-editor-btn-text.editor-button(title="bold")
-                        | B
-                    button#option-italic.content-editor-btn-text.editor-button(title="italics")
-                        | I
-                    button#option-strikethrough.content-editor-btn-text.editor-button(title="strikethrough")
-                        | S
-                    button#option-link.content-editor-btn-icon.editor-button(title="insert link")
-                        svg#option-link(viewBox="0 0 20 20" class="icons")
-                            use(xlink:href='/dash/assets/images/sprite.svg#entypo-link')
-                    button#option-header1.content-editor-btn-text.editor-button(title="header 1")
-                        | H1
-                    button#option-header2.content-editor-btn-text.editor-button(title="header 2")
-                        | H2
-                    button#option-header3.content-editor-btn-text.editor-button(title="header 3")
-                        | H3
-                    button#option-image.content-editor-btn-icon(for="post-image" title='insert image')
-                        svg#option-link(viewBox="0 0 20 20" class="icons")
-                            use(xlink:href='/dash/assets/images/sprite.svg#entypo-image')
-                    
-                    if(edit)
-                        button#post-sumbit-btn.post-sumbit-btn.submit-start(data-action='blog-update' data-id=post.id type='submit')
-                            svg#submit-save(viewBox="0 0 20 20" class="icons")
-                                use(xlink:href='/dash/assets/images/sprite.svg#entypo-save' data-action='blog-update' data-id=post.id)  
-                            svg#submit-good.icon-hide(viewBox="0 0 20 20" class="icons")
-                                use(xlink:href='/dash/assets/images/sprite.svg#entypo-thumbs-up')
-                            svg#submit-error.icon-hide(viewBox="0 0 20 20" class="icons")
-                                use(xlink:href='/dash/assets/images/sprite.svg#entypo-thumbs-down')
-                    else
-                        button#post-sumbit-btn.post-sumbit-btn(data-action='blog-add' type='submit') ADD POST
                     
                 #edit-content-wrapper
                     pre

themes/dash/partials/editor.pug

@@ -0,0 +1,30 @@
+#edit-control
+    button#option-bold.content-editor-btn-text.editor-button(title="bold")
+        | B
+    button#option-italic.content-editor-btn-text.editor-button(title="italics")
+        | I
+    button#option-strikethrough.content-editor-btn-text.editor-button(title="strikethrough")
+        | S
+    button#option-link.content-editor-btn-icon.editor-button(title="insert link")
+        svg#option-link(viewBox="0 0 20 20" class="icons")
+            use(xlink:href='/dash/assets/images/sprite.svg#entypo-link')
+    button#option-header1.content-editor-btn-text.editor-button(title="header 1")
+        | H1
+    button#option-header2.content-editor-btn-text.editor-button(title="header 2")
+        | H2
+    button#option-header3.content-editor-btn-text.editor-button(title="header 3")
+        | H3
+    button#option-image.content-editor-btn-icon(for="post-image" title='insert image')
+        svg#option-link(viewBox="0 0 20 20" class="icons")
+            use(xlink:href='/dash/assets/images/sprite.svg#entypo-image')
+    
+    if(edit)
+        button#post-sumbit-btn.post-sumbit-btn.submit-start(data-action='blog-update' data-id=post.id type='submit')
+            svg#submit-save(viewBox="0 0 20 20" class="icons")
+                use(xlink:href='/dash/assets/images/sprite.svg#entypo-save' data-action='blog-update' data-id=post.id)  
+            svg#submit-good.icon-hide(viewBox="0 0 20 20" class="icons")
+                use(xlink:href='/dash/assets/images/sprite.svg#entypo-thumbs-up')
+            svg#submit-error.icon-hide(viewBox="0 0 20 20" class="icons")
+                use(xlink:href='/dash/assets/images/sprite.svg#entypo-thumbs-down')
+    else
+        button#post-sumbit-btn.post-sumbit-btn(data-action='blog-add' type='submit') ADD POST

themes/dash/src/com/controllers/DashEntry.jsx

@@ -10,10 +10,10 @@ import DataUtils, {
 import * as DataEvent from '../tools/events/DataEvent';
 import Animate from '../tools/effects/Animate';
 import * as Ease from '../tools/effects/Animate';
-import TextEffects from '../tools/effects/TextEffects';
 import EntryTasks from '../tasks/EntryTasks';
 import TextEditor from '../tools/utilities/TextEditor';
 import TinyDatePicker from 'tiny-date-picker';
+import DateUtils from '../tools/utilities/DateUtils';
 
 
 class Entry {
@@ -22,9 +22,11 @@ class Entry {
     //--------------------------
     constructor() {
         reframe('iframe');
+        let self = this;
         this.uploadFiles;
         this.start();
         this.editor = new TextEditor();
+        this.dateUtils = new DateUtils();
 
         TinyDatePicker(document.getElementById('entry-date'), {
             mode: 'dp-below',

themes/dash/src/styles/main/_editor.styl

@@ -1,9 +1,10 @@
 #edit-control
-    margin 10px
+    //margin 10px
     top 1px
-    padding 5px
+    padding 2px
-    border-radius 5px
+    border-radius 3px
-    background-opacity($primary - 10%, 0.75)
+    background-opacity($primary - 10%, 0.50)
+    width: 100%
     z-index 2000
 
     button

themes/dash/src/styles/main/_entries.styl

@@ -49,7 +49,7 @@
         width 100%
 
         #entry-header
-            //width 100%
+            // width 100%
             max-width 900px
             margin 0 auto
             padding 0.75rem
@@ -62,26 +62,30 @@
                     height 150px
                     font-size 1.5em
                     color $white
+                #entry-date
+                    background $primary - 10%
+                    border-radius 0 3px 3px 0
+                    width 105px
+                    font-family 'Apercu'
+                    color $highlight
+                    height 35px
+                    vertical-align top
+
+                label
+                    background $primary - 15%
+                    border-radius 3px 0 0 3px
+                    display inline-block
+                    padding 5px
+                    color $primary + 15%
+                    line-height 35px
 
             #entry-meta
                 #entry_tags
                     background $primary - 4%
                     font-family 'Apercu'
                     width 100%
-                    height 115px
+                    height 150px
                     color $primary - 50%
-                #entry-date
-                    background $primary - 10%
-                    border-radius 0 3px 3px 0
-                    width: 105px
-                    font-family: 'Apercu'
-                    color: $highlight
-                label
-                    background: $primary - 15% 
-                    border-radius: 3px 0 0 3px
-                    display inline-block
-                    padding: 5px
-                    color $primary + 15%
 
                 #featured-click, #post-image
                     display none