UI: Block Settings, show Plus after Enter keydown (#265)

* Some UI improvements: icons settigns

* Show plus button after split

* decrease autoprefixer

* rename variable

.postcssrc

@@ -8,7 +8,7 @@ plugins:
     postcss-nested-ancestors: {}
     postcss-nesting: {}
     postcss-nested: {}
-    postcss-color-function: {}
+    postcss-color-mod-function: {}
     postcss-color-hex-alpha: {}
     postcss-font-variant: {}
     postcss-font-family-system-ui: {}

example/example.html

@@ -83,7 +83,7 @@
                 {
                     type : 'text',
                     data : {
-                        text : '<p><b>CodeX</b> Привет!!!</p>'
+                        text : 'В <b>JavaScript</b> <a href="https://ifmo.su/ts-classes">нет возможности</a> назначить свойства при объявлении класса — все необходимые значения нужно определять в конструкторе или других методах. При таком подходе объявление свойств неявное, не всегда ясно какие свойства имеет класс. TS решает эту проблему: здесь можно не только объявить свойства класса, но и назначить им начальные значения'
                     }
                 }
             ]

example/plugins/text/text.css

@@ -3,11 +3,20 @@
 */
 
 .ce-text {
-    padding: 15px 0 !important;
-    line-height: 1.6em;
-    outline: none;
+  padding: 10px 0;
+  line-height: 1.6em;
+  outline: none;
 }
 
+.ce-text p:first-of-type {
+  margin-top: 0;
+}
+
+.ce-text p:last-of-type {
+  margin-bottom: 0;
+}
+
+
 .ce-paragraph:empty::before,
 .ce-paragraph p:empty::before{
     content : attr(data-placeholder);
@@ -32,4 +41,4 @@
 }
 .ce-paragraph p:last-of-type{
     margin-bottom: 0;
-}
+}

package.json

@@ -29,8 +29,8 @@
     "html-janitor": "^2.0.2",
     "path": "^0.12.7",
     "postcss-apply": "^0.10.0",
-    "postcss-color-function": "^4.0.1",
     "postcss-color-hex-alpha": "^3.0.0",
+    "postcss-color-mod-function": "^2.4.2",
     "postcss-cssnext": "^3.1.0",
     "postcss-custom-media": "^6.0.0",
     "postcss-custom-properties": "^7.0.0",

src/components/block-tunes/block-tune-delete.ts

@@ -23,6 +23,9 @@ export default class DeleteTune implements IBlockTune {
    */
   private CSS = {
     wrapper: 'ass',
+    button: 'ce-settings__button',
+    buttonDelete: 'ce-settings__button--delete',
+    buttonConfirm: 'ce-settings__button--confirm',
   };
 
   /**
@@ -35,6 +38,13 @@ export default class DeleteTune implements IBlockTune {
    */
   private resetConfirmation: () => void;
 
+  /**
+   * Tune nodes
+   */
+  private nodes = {
+    button: null,
+  };
+
   /**
    * DeleteTune constructor
    *
@@ -53,9 +63,10 @@ export default class DeleteTune implements IBlockTune {
    * @returns [Element}
    */
   public render() {
-    const deleteButton = $.make('div', ['ce-settings-delete'], {});
-    deleteButton.addEventListener('click', (event) => this.handleClick(event), false);
-    return deleteButton;
+    this.nodes.button = $.make('div', [this.CSS.button, this.CSS.buttonDelete], {});
+    this.nodes.button.appendChild($.svg('cross', 12, 12));
+    this.nodes.button.addEventListener('click', (event) => this.handleClick(event), false);
+    return this.nodes.button;
   }
 
   /**
@@ -94,6 +105,7 @@ export default class DeleteTune implements IBlockTune {
    */
   private setConfirmation(state): void {
     this.needConfirmation = state;
+    this.nodes.button.classList.add(this.CSS.buttonConfirm);
   }
 
 }

src/components/block-tunes/block-tune-move-up.ts

@@ -23,6 +23,7 @@ export default class MoveUpTune implements IBlockTune {
    */
   private CSS = {
     wrapper: 'ass',
+    button: 'ce-settings__button',
   };
 
   /**
@@ -39,7 +40,8 @@ export default class MoveUpTune implements IBlockTune {
    * @returns [Element}
    */
   public render() {
-    const moveUpButton = $.make('div', ['ce-settings-move-up'], {});
+    const moveUpButton = $.make('div', this.CSS.button, {});
+    moveUpButton.appendChild($.svg('arrow-up', 14, 14));
     moveUpButton.addEventListener('click', (event) => this.handleClick(event), false);
     return moveUpButton;
   }

src/components/modules/blockManager.js

@@ -160,12 +160,16 @@ export default class BlockManager extends Module {
    * @param {String} toolName — plugin name
    * @param {Object} data — plugin data
    * @param {Object} settings - default settings
+   *
+   * @return {Block}
    */
   insert(toolName, data = {}, settings = {}) {
     let block = this.composeBlock(toolName, data, settings);
 
     this._blocks[++this.currentBlockIndex] = block;
     this.Editor.Caret.setToBlock(block);
+
+    return block;
   }
 
   /**
@@ -223,7 +227,13 @@ export default class BlockManager extends Module {
       text: $.isEmpty(wrapper) ? '' : wrapper.innerHTML,
     };
 
-    this.insert(this.config.initialBlock, data);
+    /**
+     * Renew current Block
+     * @type {Block}
+     */
+    const blockInserted = this.insert(this.config.initialBlock, data);
+
+    this.currentNode = blockInserted.pluginsContent;
   }
 
   /**

src/components/modules/keyboard.js

@@ -87,6 +87,19 @@ export default class Keyboard extends Module {
      * Split the Current Block into two blocks
      */
     this.Editor.BlockManager.split();
+
+    /**
+     * Renew local current node after split
+     */
+    let newCurrent = this.Editor.BlockManager.currentBlock;
+
+    this.Editor.Toolbar.move();
+    this.Editor.Toolbar.open();
+
+    if (this.Editor.Tools.isInitial(newCurrent.tool) && newCurrent.isEmpty) {
+      this.Editor.Toolbar.plusButton.show();
+    }
+
     event.preventDefault();
   }
 

src/components/modules/toolbar.js

@@ -114,6 +114,7 @@ export default class Toolbar extends Module {
      *  - Toolbox
      */
     this.nodes.plusButton = $.make('div', Toolbar.CSS.plusButton);
+    $.append(this.nodes.plusButton, $.svg('plus', 14, 14));
     $.append(this.nodes.content, this.nodes.plusButton);
     this.nodes.plusButton.addEventListener('click', event => this.plusButtonClicked(event), false);
 
@@ -131,7 +132,9 @@ export default class Toolbar extends Module {
      */
     this.nodes.blockActionsButtons = $.make('div', Toolbar.CSS.blockActionsButtons);
     this.nodes.settingsToggler  = $.make('span', Toolbar.CSS.settingsToggler);
+    const settingsIcon = $.svg('dots', 18, 4);
 
+    $.append(this.nodes.settingsToggler, settingsIcon);
     $.append(this.nodes.blockActionsButtons, this.nodes.settingsToggler);
     $.append(this.nodes.actions, this.nodes.blockActionsButtons);
 

src/components/modules/ui.js

@@ -9,36 +9,6 @@
  */
 import sprite from '../../../build/sprite.svg';
 
-// let className = {
-
-/**
- * @const {string} BLOCK_CLASSNAME - redactor blocks name
- */
-// BLOCK_CLASSNAME : 'ce-block',
-
-/**
- * @const {String} wrapper for plugins content
- */
-// BLOCK_CONTENT : 'ce-block__content',
-
-/**
- * @const {String} BLOCK_STRETCHED - makes block stretched
- */
-// BLOCK_STRETCHED : 'ce-block--stretched',
-
-/**
- * @const {String} BLOCK_HIGHLIGHTED - adds background
- */
-// BLOCK_HIGHLIGHTED : 'ce-block--focused',
-
-/**
- * @const {String} - for all default settings
- */
-// SETTINGS_ITEM : 'ce-settings__item'
-// };
-
-// import Block from '../block';
-
 /**
  * @class
  *

src/styles/block.css

@@ -1,14 +1,13 @@
 .ce-block {
-  border: 1px dotted #ccc;
-  margin: 2px 0;
-
   &:first-of-type {
     margin-top: 0;
   }
 
   &--selected {
-    background-color: var(--bg-light);
+    background-image: linear-gradient(17deg, rgba(243, 248, 255, 0.03) 63.45%, rgba(207, 214, 229, 0.27) 98%);
+    border-radius: 3px;
   }
+
   &__content {
     max-width: var(--content-width);
     margin: 0 auto;