rte ui restructuring, extracted editor to be a standalone compontent, module will be re-coded to follow suit
This commit is contained in:
parent
2b26d3b525
commit
77f4a2721d
9 changed files with 94 additions and 127 deletions
|
@ -2201,26 +2201,29 @@ select {
|
|||
font-size: 1.5em;
|
||||
color: #eee;
|
||||
}
|
||||
#entries-edit-index #entries-edit-index-wrapper #entry-header #entry-meta #entry_tags {
|
||||
background: #91867a;
|
||||
font-family: 'Apercu';
|
||||
width: 100%;
|
||||
height: 115px;
|
||||
color: #4c463f;
|
||||
}
|
||||
#entries-edit-index #entries-edit-index-wrapper #entry-header #entry-meta #entry-date {
|
||||
#entries-edit-index #entries-edit-index-wrapper #entry-header #entry-title #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;
|
||||
border-radius: 5px;
|
||||
background: rgba(137,126,113,0.75);
|
||||
padding: 2px;
|
||||
border-radius: 3px;
|
||||
background: rgba(137,126,113,0.5);
|
||||
width: 100%;
|
||||
z-index: 2000;
|
||||
}
|
||||
#edit-control button {
|
||||
|
|
File diff suppressed because one or more lines are too long
56
themes/dash/assets/js/dash.min.js
vendored
56
themes/dash/assets/js/dash.min.js
vendored
|
@ -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) {
|
||||
"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) {
|
||||
},{"../events/EventEmitter.jsx":"tools/events/EventEmitter.jsx"}],"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", {
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -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
|
||||
|
|
30
themes/dash/partials/editor.pug
Normal file
30
themes/dash/partials/editor.pug
Normal file
|
@ -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
|
|
@ -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',
|
||||
|
|
|
@ -1,9 +1,10 @@
|
|||
#edit-control
|
||||
margin 10px
|
||||
//margin 10px
|
||||
top 1px
|
||||
padding 5px
|
||||
border-radius 5px
|
||||
background-opacity($primary - 10%, 0.75)
|
||||
padding 2px
|
||||
border-radius 3px
|
||||
background-opacity($primary - 10%, 0.50)
|
||||
width: 100%
|
||||
z-index 2000
|
||||
|
||||
button
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue