Improvements: new Block Settings button style

docs/CHANGELOG.md

@@ -8,6 +8,7 @@
 - `Fix` - Fixed inline toolbar flipper activation on closing conversion toolbar [#995](https://github.com/codex-team/editor.js/issues/995) 
 - `Improvements` - New window tab is opened by clicking on anchor with ctrl [#1057](https://github.com/codex-team/editor.js/issues/1057)
 - `Fix` - Fix block-tune buttons alignment in some CSS-resetors that forces `box-sizing: border-box` rule [#1003](https://github.com/codex-team/editor.js/issues/1003)
+- `Improvements` - New style of a Block Settings button. Focused block background removed. 
 
 ### 2.16.1
 

src/components/modules/rectangleSelection.ts

@@ -131,12 +131,20 @@ export default class RectangleSelection extends Module {
    * @param {number} pageY - Y coord of mouse
    */
   public startSelection(pageX, pageY) {
-    this.Editor.BlockSelection.allBlocksSelected = false;
-    this.clearSelection();
-    this.stackOfSelected = [];
-
     const elemWhereSelectionStart = document.elementFromPoint(pageX - window.pageXOffset, pageY - window.pageYOffset);
 
+    /**
+     * Don't clear selected block by clicks on the Block settings
+     * because we need to keep highlighting working block
+     */
+    const startsInsideToolbar = elemWhereSelectionStart.closest(`.${this.Editor.Toolbar.CSS.toolbar}`);
+
+    if (!startsInsideToolbar) {
+      this.Editor.BlockSelection.allBlocksSelected = false;
+      this.clearSelection();
+      this.stackOfSelected = [];
+    }
+
     const selectorsToAvoid = [
       `.${Block.CSS.content}`,
       `.${this.Editor.Toolbar.CSS.toolbar}`,

src/components/modules/toolbar/blockSettings.ts

@@ -102,6 +102,11 @@ export default class BlockSettings extends Module {
   public open(): void {
     this.nodes.wrapper.classList.add(this.CSS.wrapperOpened);
 
+    /**
+     * Highlight content of a Block we are working with
+     */
+    this.Editor.BlockManager.currentBlock.selected = true;
+
     /**
      * Fill Tool's settings
      */

src/components/modules/toolbar/index.ts

@@ -8,12 +8,13 @@ import * as _ from '../../utils';
  *
  *  ______________________________________ Toolbar ____________________________________________
  * |                                                                                           |
- * |  ..................... Content ....................   ......... Block Actions ..........  |
- * |  .                                                .   .                                .  |
- * |  .                                                .   .        [Open Settings]         .  |
- * |  .  [Plus Button]  [Toolbox: {Tool1}, {Tool2}]    .   .                                .  |
- * |  .                                                .   .        [Settings Panel]        .  |
- * |  ..................................................   ..................................  |
+ * |  ..................... Content .........................................................  |
+ * |  .                                                   ........ Block Actions ...........   |
+ * |  .                                                   .        [Open Settings]         .   |
+ * |  .  [Plus Button]  [Toolbox: {Tool1}, {Tool2}]       .                                .   |
+ * |  .                                                   .        [Settings Panel]        .   |
+ * |  .                                                   ..................................   |
+ * |  .......................................................................................  |
  * |                                                                                           |
  * |___________________________________________________________________________________________|
  *
@@ -105,9 +106,14 @@ export default class Toolbar extends Module {
      */
     ['content',  'actions'].forEach( (el) => {
       this.nodes[el] = $.make('div', this.CSS[el]);
-      $.append(this.nodes.wrapper, this.nodes[el]);
     });
 
+    /**
+     * Actions will be included to the toolbar content so we can align in to the right of the content
+     */
+    $.append(this.nodes.wrapper, this.nodes.content);
+    $.append(this.nodes.content, this.nodes.actions);
+
     /**
      * Fill Content Zone:
      *  - Plus Button
@@ -144,7 +150,7 @@ export default class Toolbar extends Module {
      */
     this.nodes.blockActionsButtons = $.make('div', this.CSS.blockActionsButtons);
     this.nodes.settingsToggler  = $.make('span', this.CSS.settingsToggler);
-    const settingsIcon = $.svg('dots', 18, 4);
+    const settingsIcon = $.svg('dots', 8, 8);
 
     $.append(this.nodes.settingsToggler, settingsIcon);
     $.append(this.nodes.blockActionsButtons, this.nodes.settingsToggler);

src/styles/block.css

@@ -3,18 +3,6 @@
     margin-top: 0;
   }
 
-  &--focused {
-    background-image: linear-gradient(17deg, rgba(243, 248, 255, 0.03) 63.45%, rgba(207, 214, 229, 0.27) 98%);
-    border-radius: 3px;
-
-    @media (--mobile){
-      background-image: none;
-      background-color: rgba(200, 199, 219, 0.17);
-      margin: 0 -10px;
-      padding: 0 10px;
-    }
-  }
-
   &--selected &__content {
     background: var(--selectionColor);
 
@@ -89,7 +77,6 @@
   }
 }
 
-
 .codex-editor--narrow .ce-block--focused {
   @media (--not-mobile) {
     margin-right: calc(var(--narrow-mode-right-padding) * -1);

src/styles/settings.css

@@ -1,12 +1,13 @@
 .ce-settings {
   @apply --overlay-pane;
-  right: 5px;
-  top: 35px;
+  right: -1px;
+  top: 30px;
   min-width: 114px;
   box-sizing: content-box;
 
   @media (--mobile){
-    bottom: 50px;
+    bottom: 40px;
+    right: -11px;
     top: auto;
   }
 

src/styles/toolbar.css

@@ -32,7 +32,7 @@
       display: flex;
       align-content: center;
       margin: 0;
-      max-width: calc(100% - 40px);
+      max-width: calc(100% - 35px);
     }
   }
 
@@ -72,15 +72,15 @@
    */
   &__actions {
     position: absolute;
-    right: 0;
-    top: 10px;
-    padding-right: 16px;
+    right: -30px;
+    top: 5px;
     opacity: 0;
 
     @media (--mobile){
-      position: static;
-      margin-left: auto;
-      padding-right: 10px;
+      position: absolute;
+      right: -28px;
+      top: 50%;
+      transform: translateY(-50%);
       display: flex;
       align-items: center;
     }
@@ -95,11 +95,22 @@
   }
 
   &__settings-btn {
-    display: inline-block;
-    width: 24px;
-    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
     color: var(--grayText);
     cursor: pointer;
+    background: var(--bg-light);
+
+    &:hover {
+      color: var(--color-dark);
+    }
+
+    @media (--mobile){
+      background: transparent;
+    }
   }
 }
 

src/styles/variables.css

@@ -18,6 +18,11 @@
    */
   --grayText: #707684;
 
+  /**
+   * Gray icons hover
+   */
+  --color-dark: #1D202B;
+
   /**
    * Blue icons
    */