Style block toolbar only within columns block context

eea · Mar 23, 2021 · ac790af · ac790af
1 parent 529da7d
commit ac790af
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 49 deletions.
diff --git a/src/ColumnsBlock/ColumnsBlockEdit.jsx b/src/ColumnsBlock/ColumnsBlockEdit.jsx
@@ -29,7 +29,7 @@ import { COLUMNSBLOCK } from '@eeacms/volto-columns-block/constants';
 import { variants } from '@eeacms/volto-columns-block/grid';
 import { makeStyleSchema, getStyle } from '@eeacms/volto-columns-block/Styles';
 
-import tuneSVG from '@plone/volto/icons/configuration.svg';
+import tuneSVG from '@plone/volto/icons/column.svg';
 import upSVG from '@plone/volto/icons/up.svg';
 
 import './styles.less';
@@ -388,7 +388,7 @@ class ColumnsBlockEdit extends React.Component {
                             <Button
                               icon
                               basic
-                              title="Edit column"
+                              title="Go to Column settings"
                               onClick={() => {
                                 this.setState({
                                   showSidebar: true,

diff --git a/src/ColumnsBlock/styles.less b/src/ColumnsBlock/styles.less
@@ -103,9 +103,58 @@
   }
 
   .blocks-chooser {
-    left: 0;
+    right: 0;
+    left: auto;
     margin-top: 50px;
   }
+
+  .block-toolbar {
+    position: absolute;
+    z-index: 3;
+    right: -9px;
+    display: flex;
+    padding: 5px;
+    border: none;
+    border: 1px solid #78c0d7bf;
+    border-bottom: 1px solid #fff;
+    margin-top: -45px;
+    background-color: #fff;
+    border-top-left-radius: 1rem;
+    border-top-right-radius: 1rem;
+
+    .ui.basic.button {
+      padding: 3px;
+      padding-right: 0;
+    }
+
+    .wrapper-column-block {
+      > .ui.basic.button {
+        &:hover {
+          background-color: transparent !important;
+        }
+      }
+    }
+
+    > .ui.basic.button {
+      &:hover {
+        background-color: transparent !important;
+      }
+
+      svg {
+        color: #134448;
+      }
+    }
+
+    .drag.handle.wrapper-column-block {
+      position: initial;
+      left: initial;
+      min-height: 1em;
+      margin-left: initial !important;
+      font-size: 1rem;
+      line-height: 1em;
+      vertical-align: baseline;
+    }
+  }
 }
 
 .columns-view {
@@ -124,52 +173,6 @@
   margin-bottom: 0.8rem;
 }
 
-.block-toolbar {
-  position: absolute;
-  z-index: 3;
-  left: -9px;
-  display: flex;
-  padding: 5px;
-  border: none;
-  border: 1px solid #78c0d7bf;
-  border-bottom: 1px solid #fff;
-  margin-top: -45px;
-  background-color: #fff;
-
-  .ui.basic.button {
-    padding: 3px;
-    padding-right: 0;
-  }
-
-  .wrapper-column-block {
-    > .ui.basic.button {
-      &:hover {
-        background-color: transparent !important;
-      }
-    }
-  }
-
-  > .ui.basic.button {
-    &:hover {
-      background-color: transparent !important;
-    }
-
-    svg {
-      color: #134448;
-    }
-  }
-
-  .drag.handle.wrapper-column-block {
-    position: initial;
-    left: initial;
-    min-height: 1em;
-    margin-left: initial !important;
-    font-size: 1rem;
-    line-height: 1em;
-    vertical-align: baseline;
-  }
-}
-
 .drag-drop-list-widget {
   .columns-area {
     padding: 1em 0em;