@plone/volto 17.0.0-alpha.1 → 17.0.0-alpha.2

package/src/components/manage/Contents/Contents.jsx

@@ -290,6 +290,10 @@ const messages = defineMessages({
     id: 'This Page is referenced by the following items:',
     defaultMessage: 'This Page is referenced by the following items:',
   },
+  deleteItemCountMessage: {
+    id: 'Total items to be deleted:',
+    defaultMessage: 'Total items to be deleted:',
+  },
   deleteItemMessage: {
     id: 'Items to be deleted:',
     defaultMessage: 'Items to be deleted:',
@@ -418,6 +422,8 @@ class Contents extends Component {
     this.paste = this.paste.bind(this);
     this.fetchContents = this.fetchContents.bind(this);
     this.orderTimeout = null;
+    this.deleteItemsToShowThreshold = 10;
+
     this.state = {
       selected: [],
       showDelete: false,
@@ -427,6 +433,7 @@ class Contents extends Component {
       showProperties: false,
       showWorkflow: false,
       itemsToDelete: [],
+      showAllItemsToDelete: true,
       items: this.props.items,
       filter: '',
       currentPage: 0,
@@ -456,7 +463,6 @@ class Contents extends Component {
     this.fetchContents();
     this.setState({ isClient: true });
   }
-
   async componentDidUpdate(_, prevState) {
     if (
       this.state.itemsToDelete !== prevState.itemsToDelete &&
@@ -468,6 +474,8 @@ class Contents extends Component {
             this.getFieldById(item, 'UID'),
           ),
         ),
+        showAllItemsToDelete:
+          this.state.itemsToDelete.length < this.deleteItemsToShowThreshold,
       });
     }
   }
@@ -1188,16 +1196,35 @@ class Contents extends Component {
                       <div className="content">
                         <h3>
                           {this.props.intl.formatMessage(
-                            messages.deleteItemMessage,
-                          )}
+                            messages.deleteItemCountMessage,
+                          ) + ` ${this.state.itemsToDelete.length}`}
                         </h3>
                         <ul className="content">
-                          {map(this.state.itemsToDelete, (item) => (
-                            <li key={item}>
-                              {this.getFieldById(item, 'title')}
-                            </li>
-                          ))}
+                          {map(
+                            this.state.showAllItemsToDelete
+                              ? this.state.itemsToDelete
+                              : this.state.itemsToDelete.slice(
+                                  0,
+                                  this.deleteItemsToShowThreshold,
+                                ),
+                            (item) => (
+                              <li key={item}>
+                                {this.getFieldById(item, 'title')}
+                              </li>
+                            ),
+                          )}
                         </ul>
+                        {!this.state.showAllItemsToDelete && (
+                          <Button
+                            onClick={() =>
+                              this.setState({
+                                showAllItemsToDelete: true,
+                              })
+                            }
+                          >
+                            Show all items
+                          </Button>
+                        )}
                         {this.state.linkIntegrityBreakages.length > 0 ? (
                           <div>
                             <h3>

package/src/components/manage/Controlpanels/Controlpanels.jsx

@@ -270,7 +270,7 @@ class Controlpanels extends Component {
                 {group}
               </Segment>,
               <Segment key={`body-${group}`} attached>
-                <Grid columns={6}>
+                <Grid doubling columns={6}>
                   <Grid.Row>
                     {map(filter(controlpanels, { group }), (controlpanel) => (
                       <Grid.Column key={controlpanel.id}>

package/src/components/manage/DragDropList/DragDropList.jsx

@@ -3,7 +3,7 @@ import { isEmpty } from 'lodash';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { v4 as uuid } from 'uuid';
 
-const getPlaceholder = (draggedDOM, sourceIndex, destinationIndex) => {
+const getPlaceholder = (draggedDOM, sourceIndex, destinationIndex, uid) => {
   // Because of the margin rendering rules, there is no easy
   // way to calculate the offset of the placeholder.
   //
@@ -13,12 +13,16 @@ const getPlaceholder = (draggedDOM, sourceIndex, destinationIndex) => {
   //
   // To get a placeholder that looks good in all cases, we
   // fill up the space between the previous and the next element.
-  const childrenArray = [...draggedDOM.parentNode.children];
+  const queryAttr = 'data-rbd-droppable-id';
+  const domQuery = `[${queryAttr}='${uid}']`;
+  const parentDOM = document.querySelector(domQuery);
+
+  const childrenArray = [...parentDOM.children];
   // Remove the source element
   childrenArray.splice(sourceIndex, 1);
   // Also remove the placeholder that the library always inserts at the end
   childrenArray.splice(-1, 1);
-  const parentRect = draggedDOM.parentNode.getBoundingClientRect();
+  const parentRect = parentDOM.getBoundingClientRect();
   const prevNode = childrenArray[destinationIndex - 1];
   const nextNode = childrenArray[destinationIndex];
   let top, bottom;
@@ -40,9 +44,7 @@ const getPlaceholder = (draggedDOM, sourceIndex, destinationIndex) => {
   return {
     clientY: top,
     clientHeight: bottom - top,
-    clientX: parseFloat(
-      window.getComputedStyle(draggedDOM.parentNode).paddingLeft,
-    ),
+    clientX: parseFloat(window.getComputedStyle(parentDOM).paddingLeft),
     clientWidth: draggedDOM.clientWidth,
   };
 };
@@ -63,17 +65,22 @@ const DragDropList = (props) => {
   // queueing timed action
   const timer = useRef(null);
 
-  const onDragStart = React.useCallback((event) => {
-    clearTimeout(timer.current);
-    const queryAttr = 'data-rbd-draggable-id';
-    const domQuery = `[${queryAttr}='${event.draggableId}']`;
-    const draggedDOM = document.querySelector(domQuery);
-    if (!draggedDOM) {
-      return;
-    }
-    const sourceIndex = event.source.index;
-    setPlaceholderProps(getPlaceholder(draggedDOM, sourceIndex, sourceIndex));
-  }, []);
+  const onDragStart = React.useCallback(
+    (event) => {
+      clearTimeout(timer.current);
+      const queryAttr = 'data-rbd-draggable-id';
+      const domQuery = `[${queryAttr}='${event.draggableId}']`;
+      const draggedDOM = document.querySelector(domQuery);
+      if (!draggedDOM) {
+        return;
+      }
+      const sourceIndex = event.source.index;
+      setPlaceholderProps(
+        getPlaceholder(draggedDOM, sourceIndex, sourceIndex, uid),
+      );
+    },
+    [uid],
+  );
 
   const onDragEnd = React.useCallback(
     (result) => {
@@ -84,30 +91,33 @@ const DragDropList = (props) => {
     [onMoveItem],
   );
 
-  const onDragUpdate = React.useCallback((update) => {
-    clearTimeout(timer.current);
-    setPlaceholderProps({});
-    if (!update.destination) {
-      return;
-    }
-    const draggableId = update.draggableId;
-    const queryAttr = 'data-rbd-draggable-id';
-    const domQuery = `[${queryAttr}='${draggableId}']`;
-    const draggedDOM = document.querySelector(domQuery);
-    if (!draggedDOM) {
-      return;
-    }
-    const sourceIndex = update.source.index;
-    const destinationIndex = update.destination.index;
-    // Wait until the animations have finished, to make it look good.
-    timer.current = setTimeout(
-      () =>
-        setPlaceholderProps(
-          getPlaceholder(draggedDOM, sourceIndex, destinationIndex),
-        ),
-      250,
-    );
-  }, []);
+  const onDragUpdate = React.useCallback(
+    (update) => {
+      clearTimeout(timer.current);
+      setPlaceholderProps({});
+      if (!update.destination) {
+        return;
+      }
+      const draggableId = update.draggableId;
+      const queryAttr = 'data-rbd-draggable-id';
+      const domQuery = `[${queryAttr}='${draggableId}']`;
+      const draggedDOM = document.querySelector(domQuery);
+      if (!draggedDOM) {
+        return;
+      }
+      const sourceIndex = update.source.index;
+      const destinationIndex = update.destination.index;
+      // Wait until the animations have finished, to make it look good.
+      timer.current = setTimeout(
+        () =>
+          setPlaceholderProps(
+            getPlaceholder(draggedDOM, sourceIndex, destinationIndex, uid),
+          ),
+        250,
+      );
+    },
+    [uid],
+  );
 
   const AsDomComponent = as;
   return (
@@ -116,7 +126,18 @@ const DragDropList = (props) => {
       onDragUpdate={onDragUpdate}
       onDragEnd={onDragEnd}
     >
-      <Droppable droppableId={uid}>
+      <Droppable
+        droppableId={uid}
+        renderClone={(provided, snapshot, rubric) => {
+          const index = rubric.source.index;
+          return children({
+            child: childList[index][1],
+            childId: childList[index][0],
+            index,
+            draginfo: provided,
+          });
+        }}
+      >
         {(provided, snapshot) => (
           <AsDomComponent
             ref={provided.innerRef}

package/src/components/manage/Form/BlocksToolbar.jsx

@@ -177,7 +177,11 @@ export class BlocksToolbarComponent extends React.Component {
           ''
         )}
         {selectedBlock && (blocksClipboard?.cut || blocksClipboard?.copy) && (
-          <Plug pluggable="main.toolbar.bottom" id="block-paste-btn">
+          <Plug
+            pluggable="main.toolbar.bottom"
+            id="block-paste-btn"
+            dependencies={[selectedBlock]}
+          >
             <button
               aria-label={intl.formatMessage(messages.pasteBlocks)}
               onClick={this.pasteBlocks}

package/src/components/manage/Form/Form.jsx

@@ -258,7 +258,11 @@ class Form extends Component {
    * Tab selection is done only by setting activeIndex in state
    */
   onTabChange(e, { activeIndex }) {
-    this.setState({ activeIndex });
+    const defaultFocus = this.props.schema.fieldsets[activeIndex].fields[0];
+    this.setState({
+      activeIndex,
+      ...(defaultFocus ? { inFocus: { [defaultFocus]: true } } : {}),
+    });
   }
 
   /**
@@ -686,7 +690,7 @@ class Form extends Component {
                             id={field}
                             formData={this.state.formData}
                             fieldSet={item.title.toLowerCase()}
-                            focus={index === 0}
+                            focus={this.state.inFocus[field]}
                             value={this.state.formData?.[field]}
                             required={schema.required.indexOf(field) !== -1}
                             onChange={this.onChangeField}

package/theme/themes/pastanaga/extras/contents.less

@@ -38,6 +38,7 @@
   .ui.menu.top-menu {
     padding: 10px 0;
     border-bottom: 4px solid #c7d5d8;
+    overflow-x: scroll;
   }
 
   .ui.menu .menu.top-menu-menu {

package/theme/themes/pastanaga/extras/main.less

@@ -8,7 +8,6 @@
 @import (multiple) '../../theme.config';
 
 // Extras (third party libs)
-@import (less) '~hamburgers/dist/hamburgers.css';
 @import (less) '~react-toastify/dist/ReactToastify.css';
 
 // Mixins
@@ -494,6 +493,86 @@ fieldset.invisible {
 .hamburger-wrapper {
   position: relative;
   z-index: 5;
+  width: 70px;
+  height: 59px;
+  padding: 15px 15px;
+
+  .hamburger {
+    position: relative;
+    width: 40px;
+    height: 24px;
+    padding: 0;
+    border: none;
+    background-color: transparent;
+    cursor: pointer;
+    transition: 0.3s ease-in-out;
+  }
+
+  .hamburger::after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: inline-block;
+    width: 100%;
+    height: 4px;
+    background-color: #000;
+    border-radius: 4px;
+    content: '';
+    transition: 0.3s ease-in-out;
+  }
+
+  .hamburger::before {
+    position: absolute;
+    top: 20px;
+    left: 0;
+    display: inline-block;
+    width: 100%;
+    height: 4px;
+    background-color: #000;
+    border-radius: 4px;
+    content: '';
+    transition: 0.3s ease-in-out;
+  }
+
+  .hamburger-inner {
+    position: absolute;
+    top: 10px;
+    left: 0;
+    display: inline-block;
+    width: 100%;
+    height: 4px;
+    border-radius: 4px;
+    transition: 0.3s ease-in-out;
+  }
+
+  .hamburger.is-active::after,
+  .hamburger.is-active::before {
+    top: 10px;
+    left: 50%;
+    width: 0%;
+  }
+
+  .hamburger-inner::after,
+  .hamburger-inner::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    width: 100%;
+    height: 4px;
+    background-color: #000;
+    border-radius: 4px;
+    content: '';
+    transition: 0.3s ease-in-out;
+  }
+
+  .hamburger.is-active .hamburger-inner::after {
+    transform: rotate(45deg);
+  }
+
+  .hamburger.is-active .hamburger-inner::before {
+    transform: rotate(-45deg);
+  }
 }
 
 .mobile-menu {