Improve columns layout

eea · Sep 26, 2020 · 8ee7a4e · 8ee7a4e
1 parent 361f74e
commit 8ee7a4e
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 22 deletions.
diff --git a/src/ColumnsBlock/EditBlockWrapper.jsx b/src/ColumnsBlock/EditBlockWrapper.jsx
@@ -39,36 +39,41 @@ const EditBlockWrapper = (props) => {
     ? block.required
     : includes(blocks.requiredBlocks, type);
 
+  // visibility: visible ? 'visible' : 'hidden',
   return (
     <div
       ref={draginfo.innerRef}
       {...draginfo.draggableProps}
       className={`block-editor-${block['@type']}`}
     >
-      <div style={{ position: 'relative' }}>
-        <div
-          style={{
-            visibility: visible ? 'visible' : 'hidden',
-            display: 'inline-block',
-          }}
-          {...draginfo.dragHandleProps}
-          className="drag handle wrapper"
-        >
-          <Icon name={dragSVG} size="18px" />
+      {selected && (
+        <div className="block-toolbar">
+          <div
+            style={{
+              display: 'inline-block',
+            }}
+            {...draginfo.dragHandleProps}
+            className="drag handle wrapper-column-block"
+          >
+            <Button icon basic>
+              <Icon name={dragSVG} size="18px" />
+            </Button>
+          </div>
+
+          {!required && (
+            <Button
+              icon
+              basic
+              onClick={() => onDeleteBlock(blockId)}
+              className="delete-button-column-block"
+              aria-label={intl.formatMessage(messages.delete)}
+            >
+              <Icon name={trashSVG} size="18px" />
+            </Button>
+          )}
         </div>
+      )}
 
-        {selected && !required && (
-          <Button
-            icon
-            basic
-            onClick={() => onDeleteBlock(blockId)}
-            className="delete-button"
-            aria-label={intl.formatMessage(messages.delete)}
-          >
-            <Icon name={trashSVG} size="18px" />
-          </Button>
-        )}
-      </div>
       <div className={`ui drag block inner ${type}`}>{children}</div>
     </div>
   );

diff --git a/src/ColumnsBlock/styles.less b/src/ColumnsBlock/styles.less
@@ -18,6 +18,20 @@
   }
 }
 
+.block-toolbar {
+  background-color: #eaeaea;
+  padding: 3px;
+  position: absolute;
+  margin-top: -36px;
+  z-index: 10;
+
+  .drag.handle.wrapper-column-block {
+    position: initial;
+    left: initial;
+    margin-left: initial !important;
+  }
+}
+
 .drag-drop-list-widget {
   .columns-area {
     padding: 1em 0em;