popover width improved

src/components/modules/rectangleSelection.ts

@@ -376,7 +376,6 @@ export default class RectangleSelection extends Module {
     this.inverseSelection();
 
     SelectionUtils.get().removeAllRanges();
-    event.preventDefault();
   }
 
   /**

src/components/modules/toolbar/index.ts

@@ -33,11 +33,7 @@ interface ToolbarNodes {
   content: HTMLElement;
   actions: HTMLElement;
 
-  // Content Zone
   plusButton: HTMLElement;
-
-  // Actions Zone
-  blockActionsButtons: HTMLElement;
   settingsToggler: HTMLElement;
 }
 /**
@@ -137,14 +133,11 @@ export default class Toolbar extends Module<ToolbarNodes> {
       toolbarOpened: 'ce-toolbar--opened',
       openedToolboxHolderModifier: 'codex-editor--toolbox-opened',
 
-      // Content Zone
       plusButton: 'ce-toolbar__plus',
       plusButtonShortcut: 'ce-toolbar__plus-shortcut',
       plusButtonHidden: 'ce-toolbar__plus--hidden',
-
-      // Actions Zone
-      blockActionsButtons: 'ce-toolbar__actions-buttons',
       settingsToggler: 'ce-toolbar__settings-btn',
+      settingsTogglerHidden: 'ce-toolbar__settings-btn--hidden',
     };
   }
 
@@ -159,8 +152,6 @@ export default class Toolbar extends Module<ToolbarNodes> {
 
   /**
    * Plus Button public methods
-   *
-   * @returns {{hide: function(): void, show: function(): void}}
    */
   public get plusButton(): { hide: () => void; show: () => void } {
     return {
@@ -202,10 +193,8 @@ export default class Toolbar extends Module<ToolbarNodes> {
 
   /**
    * Block actions appearance manipulations
-   *
-   * @returns {{hide: function(): void, show: function(): void}}
    */
-  private get blockActions(): { hide: () => void; show: () => void } {
+  private get blockActions(): { hide: () => void; show: () => void; } {
     return {
       hide: (): void => {
         this.nodes.actions.classList.remove(this.CSS.actionsOpened);
@@ -216,6 +205,16 @@ export default class Toolbar extends Module<ToolbarNodes> {
     };
   }
 
+  /**
+   * Methods for working with Block Tunes toggler
+   */
+  private get blockTunesToggler(): { hide: () => void; show: () => void } {
+    return {
+      hide: (): void => this.nodes.settingsToggler.classList.add(this.CSS.settingsTogglerHidden),
+      show: (): void => this.nodes.settingsToggler.classList.remove(this.CSS.settingsTogglerHidden),
+    };
+  }
+
   /**
    * Toggles read-only mode
    *
@@ -288,6 +287,15 @@ export default class Toolbar extends Module<ToolbarNodes> {
       this.plusButton.hide();
     }
 
+    /**
+     * Do not show Block Tunes Toggler near single and empty block
+     */
+    if (this.Editor.BlockManager.blocks.length === 1 && block.isEmpty) {
+      this.blockTunesToggler.hide();
+    } else {
+      this.blockTunesToggler.show();
+    }
+
     this.open();
   }
 
@@ -378,13 +386,11 @@ export default class Toolbar extends Module<ToolbarNodes> {
      *  - Remove Block Button
      *  - Settings Panel
      */
-    this.nodes.blockActionsButtons = $.make('div', this.CSS.blockActionsButtons);
     this.nodes.settingsToggler = $.make('span', this.CSS.settingsToggler);
     const settingsIcon = $.svg('dots', 16, 16);
 
     $.append(this.nodes.settingsToggler, settingsIcon);
-    $.append(this.nodes.blockActionsButtons, this.nodes.settingsToggler);
-    $.append(this.nodes.actions, this.nodes.blockActionsButtons);
+    $.append(this.nodes.actions, this.nodes.settingsToggler);
 
     this.tooltip.onHover(
       this.nodes.settingsToggler,
@@ -397,7 +403,7 @@ export default class Toolbar extends Module<ToolbarNodes> {
     /**
      * Appending Toolbar components to itself
      */
-    $.append(this.nodes.content, this.makeToolbox());
+    $.append(this.nodes.actions, this.makeToolbox());
     $.append(this.nodes.actions, this.Editor.BlockSettings.nodes.wrapper);
 
     /**

src/styles/popover.css

@@ -9,6 +9,7 @@
   min-width: 180px;
   max-height: 284px;
   overflow-y: auto;
+  overflow-x: hidden;
   box-sizing: border-box;
   flex-shrink: 0;
   overscroll-behavior: contain;
@@ -36,22 +37,16 @@
 
   &__item {
     @apply --popover-button;
-    flex-basis: 100%;
-    flex-shrink: 0;
 
     &--focused {
       @apply --button-focused;
     }
 
-
     &-icon {
       @apply --tool-icon;
-      flex-shrink: 0;
     }
 
     &-label {
-      flex-shrink: 0;
-
       &::after {
         content: '';
         width: 25px;
@@ -67,7 +62,6 @@
       letter-spacing: -0.1em;
       padding-right: 5px;
       margin-bottom: -2px;
-      flex-shrink: 0;
       opacity: 0.6;
     }
   }

src/styles/settings.css

@@ -1,7 +1,7 @@
 .ce-settings {
   @apply --overlay-pane;
-  right: -1px;
   top: var(--toolbar-buttons-size);
+  left: 0;
   min-width: 114px;
   box-sizing: content-box;
 

src/styles/toolbar.css

@@ -64,6 +64,7 @@
     right: 100%;
     opacity: 0;
     display: flex;
+    padding-right: 5px;
 
     @media (--mobile){
       position: absolute;
@@ -77,19 +78,19 @@
     &--opened {
       opacity: 1;
     }
-
-    &-buttons {
-      text-align: right;
-    }
   }
 
   &__settings-btn {
     @apply --toolbox-button;
     width: 18px;
-    margin: 0 5px;
+    margin-left: 5px;
 
     cursor: pointer;
     user-select: none;
+
+    &--hidden {
+      display: none;
+    }
   }
 }
 

src/styles/toolbox.css

@@ -1,4 +1,4 @@
 .ce-toolbox {
   top: var(--toolbar-buttons-size);
-  left: calc(-1 * calc(var(--toolbox-buttons-size) * 2));
+  left: 0;
 }

src/styles/variables.css

@@ -174,7 +174,11 @@
    * Element of the Toolbox. Has icon and label
    */
   --popover-button: {
-    display: flex;
+    display: grid;
+    grid-template-columns: auto auto 1fr;
+    grid-template-rows: auto;
+    justify-content: start;
+    white-space: nowrap;
     padding: 4px;
     font-size: 14px;
     line-height: 20px;