Checkpoint

eea · Dec 30, 2022 · 058bd2c · 058bd2c
1 parent 65b0f15
commit 058bd2c
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 61 deletions.
diff --git a/src/SearchBlock/BlockContainer/BlockContainer.jsx b/src/SearchBlock/BlockContainer/BlockContainer.jsx
@@ -9,11 +9,6 @@ import clearSVG from '@plone/volto/icons/clear.svg';
 import BlockEdit from '@plone/volto/components/manage/Blocks/Block/Edit';
 import NewBlockAddButton from './NewBlockAddButton';
 
-const style = {
-  zIndex: '101',
-  position: 'relative',
-};
-
 export default function BlockContainer(props) {
   // console.log('block container', props);
   const {
@@ -49,43 +44,39 @@ export default function BlockContainer(props) {
 
   return mode === 'view' ? (
     <RenderBlocks content={content} metadata={metadata} location={location} />
-  ) : (
-    <div className="aboveSearchblockOverlay" style={style}>
-      {data ? (
-        <>
-          <Button
-            icon
-            basic
-            aria-label="Delete block"
-            onClick={() => onDeleteSlotfill(block)}
-          >
-            <Icon name={clearSVG} size="24px" />
-          </Button>
+  ) : data ? (
+    <div>
+      <Button
+        icon
+        basic
+        aria-label="Delete block"
+        onClick={() => onDeleteSlotfill(block)}
+      >
+        <Icon name={clearSVG} size="24px" />
+      </Button>
 
-          <BlockEdit
-            id={block}
-            block={block}
-            data={data}
-            type={data['@type']}
-            properties={properties}
-            metadata={metadata}
-            selected={selected}
-            multiSelected={false}
-            onMoveBlock={() => {}}
-            onDeleteBlock={() => {}}
-            onChangeBlock={onChangeSlotfill}
-            onSelectBlock={(id, isSelected) => onSelectSlotfill(id)}
-            pathname={location.pathname}
-            index={index}
-            disableNewBlocks={true}
-            blocksConfig={blocksConfig}
-          />
-        </>
-      ) : (
-        <div>
-          <NewBlockAddButton block={block} onMutateBlock={onChangeSlotfill} />
-        </div>
-      )}
+      <BlockEdit
+        id={block}
+        block={block}
+        data={data}
+        type={data['@type']}
+        properties={properties}
+        metadata={metadata}
+        selected={selected}
+        multiSelected={false}
+        onMoveBlock={() => {}}
+        onDeleteBlock={() => {}}
+        onChangeBlock={onChangeSlotfill}
+        onSelectBlock={(id, isSelected) => onSelectSlotfill(id)}
+        pathname={location.pathname}
+        index={index}
+        disableNewBlocks={true}
+        blocksConfig={blocksConfig}
+      />
+    </div>
+  ) : (
+    <div>
+      <NewBlockAddButton block={block} onMutateBlock={onChangeSlotfill} />
     </div>
   );
 }
diff --git a/src/SearchBlock/BlockContainer/SlotEditor.jsx b/src/SearchBlock/BlockContainer/SlotEditor.jsx
@@ -22,6 +22,7 @@ export default function SlotEditor(props) {
 
   return (
     <Tab
+      className="aboveSearchblockOverlay"
       panes={SEARCH_STATES.map(([state, label]) => {
         const blockId = `${name}-${state}`;
         return {
@@ -30,7 +31,7 @@ export default function SlotEditor(props) {
             <Tab.Pane>
               <BlockContainer
                 key={blockId}
-                selected={selectedSlotFill === name}
+                selected={selectedSlotFill === blockId}
                 block={blockId}
                 mode={mode}
                 data={data?.[blockId]}

diff --git a/src/SearchBlock/SearchBlockEdit.jsx b/src/SearchBlock/SearchBlockEdit.jsx
@@ -5,6 +5,7 @@ import SearchBlockView from './SearchBlockView';
 import config from '@plone/volto/registry';
 import { useDebouncedStableData } from './hocs';
 // import useWhyDidYouUpdate from '@eeacms/search/lib/hocs/useWhyDidYouUpdate';
+import './edit.less';
 
 const SearchBlockEdit = (props) => {
   const { onChangeBlock, block, data } = props;

diff --git a/src/SearchBlock/edit.less b/src/SearchBlock/edit.less
@@ -0,0 +1,13 @@
+@overlayZIndex: 1;
+
+.aboveSearchblockOverlay {
+  z-index: @overlayZIndex + 1;
+  position: relative;
+}
+
+.searchlib-edit-overlay {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: @overlayZIndex;
+}
diff --git a/src/SearchBlock/templates/FullView.jsx b/src/SearchBlock/templates/FullView.jsx
@@ -3,13 +3,6 @@ import { BodyClass } from '@plone/volto/helpers';
 import { SEARCH_STATES, SLOTS, SearchApp } from '@eeacms/search';
 import { SlotEditor, BlockContainer } from './../BlockContainer';
 
-const overlayStyle = {
-  position: 'absolute',
-  width: '100%',
-  height: '100%',
-  zIndex: '100',
-};
-
 const slotCombinations = SLOTS.reduce(
   (acc, slot) => [...acc, ...SEARCH_STATES.map((state) => `${slot}-${state}`)],
   [],
@@ -37,8 +30,7 @@ function FullView(props) {
           <div
             role="presentation"
             onKeyDown={() => onSelectSlotfill(null)}
-            className="overlay"
-            style={overlayStyle}
+            className="searchlib-edit-overlay"
             onClick={() => onSelectSlotfill(null)}
           ></div>
         )}

diff --git a/src/SearchBlock/templates/SearchResultsView.jsx b/src/SearchBlock/templates/SearchResultsView.jsx
@@ -2,22 +2,13 @@ import React from 'react';
 import { BodyClass } from '@plone/volto/helpers';
 import { SearchResultsApp } from '@eeacms/search';
 
-const overlayStyle = {
-  position: 'absolute',
-  width: '100%',
-  height: '100%',
-  zIndex: '100',
-};
-
 export default function SearchResultsView(props) {
   const { appName, mode } = props;
 
   return (
     <BodyClass className={`${appName}-view searchlib-page`}>
       <div className="searchlib-block">
-        {mode !== 'view' && (
-          <div className="overlay" style={overlayStyle}></div>
-        )}
+        {mode !== 'view' && <div className="searchlib-edit-overlay"></div>}
         <SearchResultsApp {...props} />
         {props.children}
       </div>