@plone/volto 18.0.0-alpha.31 → 18.0.0-alpha.33

package/src/components/manage/Sidebar/ObjectBrowserBody.jsx

@@ -21,6 +21,8 @@ import clearSVG from '@plone/volto/icons/clear.svg';
 import searchSVG from '@plone/volto/icons/zoom.svg';
 import linkSVG from '@plone/volto/icons/link.svg';
 import homeSVG from '@plone/volto/icons/home.svg';
+import iconsSVG from '@plone/volto/icons/apps.svg';
+import listSVG from '@plone/volto/icons/list-bullet.svg';
 
 import ObjectBrowserNav from '@plone/volto/components/manage/Sidebar/ObjectBrowserNav';
 
@@ -41,6 +43,18 @@ const messages = defineMessages({
     id: 'Search SVG',
     defaultMessage: 'Search SVG',
   },
+  iconView: {
+    id: 'Icon View',
+    defaultMessage: 'Icon View',
+  },
+  listView: {
+    id: 'List View',
+    defaultMessage: 'List View',
+  },
+  home: {
+    id: 'Home',
+    defaultMessage: 'Home',
+  },
   of: { id: 'Selected items - x of y', defaultMessage: 'of' },
 });
 
@@ -132,6 +146,7 @@ class ObjectBrowserBody extends Component {
         this.props.mode === 'image'
           ? this.props.searchableTypes || config.settings.imageObjects
           : this.props.searchableTypes,
+      view: this.props.mode === 'image' ? 'icons' : 'list',
     };
     this.searchInputRef = React.createRef();
   }
@@ -201,10 +216,28 @@ class ObjectBrowserBody extends Component {
         showSearchInput: !prevState.showSearchInput,
       }),
       () => {
-        if (this.searchInputRef?.current) this.searchInputRef.current.focus();
+        if (this.searchInputRef?.current) {
+          this.searchInputRef.current.focus();
+        } else {
+          this.props.searchContent(
+            this.state.currentFolder,
+            {
+              'path.depth': 1,
+              sort_on: 'getObjPositionInParent',
+              metadata_fields: '_all',
+              b_size: 1000,
+            },
+            `${this.props.block}-${this.props.mode}`,
+          );
+        }
       },
     );
 
+  toggleView = () =>
+    this.setState((prevState) => ({
+      view: prevState.view === 'icons' ? 'list' : 'icons',
+    }));
+
   onSearch = (e) => {
     const text = flattenToAppURL(e.target.value);
     if (text.startsWith('/')) {
@@ -386,25 +419,9 @@ class ObjectBrowserBody extends Component {
    */
   render() {
     return (
-      <Segment.Group raised>
+      <Segment.Group raised className="object-browser">
         <header className="header pulled">
           <div className="vertical divider" />
-          {this.state.currentFolder === '/' ? (
-            <>
-              {this.props.mode === 'image' ? (
-                <Icon name={folderSVG} size="24px" />
-              ) : (
-                <Icon name={linkSVG} size="24px" />
-              )}
-            </>
-          ) : (
-            <button
-              aria-label={this.props.intl.formatMessage(messages.back)}
-              onClick={() => this.navigateTo(this.state.parentFolder)}
-            >
-              <Icon name={backSVG} size="24px" />
-            </button>
-          )}
           {this.state.showSearchInput ? (
             <Input
               className="search"
@@ -414,20 +431,40 @@ class ObjectBrowserBody extends Component {
                 messages.SearchInputPlaceholder,
               )}
             />
-          ) : this.props.mode === 'image' ? (
-            <h2>
-              <FormattedMessage
-                id="Choose Image"
-                defaultMessage="Choose Image"
-              />
-            </h2>
           ) : (
-            <h2>
-              <FormattedMessage
-                id="Choose Target"
-                defaultMessage="Choose Target"
-              />
-            </h2>
+            <>
+              {this.state.currentFolder === '/' ? (
+                <>
+                  {this.props.mode === 'image' ? (
+                    <Icon name={folderSVG} size="24px" />
+                  ) : (
+                    <Icon name={linkSVG} size="24px" />
+                  )}
+                </>
+              ) : (
+                <button
+                  aria-label={this.props.intl.formatMessage(messages.back)}
+                  onClick={() => this.navigateTo(this.state.parentFolder)}
+                >
+                  <Icon name={backSVG} size="24px" />
+                </button>
+              )}
+              {this.props.mode === 'image' ? (
+                <h2>
+                  <FormattedMessage
+                    id="Choose Image"
+                    defaultMessage="Choose Image"
+                  />
+                </h2>
+              ) : (
+                <h2>
+                  <FormattedMessage
+                    id="Choose Target"
+                    defaultMessage="Choose Target"
+                  />
+                </h2>
+              )}
+            </>
           )}
 
           <button
@@ -441,40 +478,94 @@ class ObjectBrowserBody extends Component {
           </button>
         </header>
         <Segment secondary className="breadcrumbs" vertical>
-          <Breadcrumb>
-            {this.state.currentFolder !== '/' ? (
-              this.state.currentFolder.split('/').map((item, index, items) => {
-                return (
-                  <React.Fragment key={`divider-${item}-${index}`}>
-                    {index === 0 ? (
-                      <Breadcrumb.Section onClick={() => this.navigateTo('/')}>
-                        <Icon
-                          className="home-icon"
-                          name={homeSVG}
-                          size="18px"
-                        />
-                      </Breadcrumb.Section>
-                    ) : (
-                      <>
-                        <Breadcrumb.Divider key={`divider-${item.url}`} />
-                        <Breadcrumb.Section
-                          onClick={() =>
-                            this.navigateTo(items.slice(0, index + 1).join('/'))
-                          }
-                        >
-                          {item}
-                        </Breadcrumb.Section>
-                      </>
-                    )}
-                  </React.Fragment>
-                );
-              })
-            ) : (
-              <Breadcrumb.Section onClick={() => this.navigateTo('/')}>
-                <Icon className="home-icon" name={homeSVG} size="18px" />
-              </Breadcrumb.Section>
-            )}
-          </Breadcrumb>
+          {this.props.mode === 'image' && (
+            <button
+              onClick={this.toggleView}
+              className="mode-switch"
+              aria-label={this.props.intl.formatMessage(
+                this.state.view === 'list'
+                  ? messages.iconView
+                  : messages.listView,
+              )}
+            >
+              <Icon
+                name={this.state.view === 'list' ? iconsSVG : listSVG}
+                size="24px"
+                className="mode-switch"
+                title={this.props.intl.formatMessage(
+                  this.state.view === 'list'
+                    ? messages.iconView
+                    : messages.listView,
+                )}
+              />
+            </button>
+          )}
+          {!this.state.showSearchInput ? (
+            <Breadcrumb>
+              {this.state.currentFolder !== '/' ? (
+                this.state.currentFolder
+                  .split('/')
+                  .map((item, index, items) => {
+                    return (
+                      <React.Fragment key={`divider-${item}-${index}`}>
+                        {index === 0 ? (
+                          <Breadcrumb.Section
+                            onClick={() => this.navigateTo('/')}
+                            role="button"
+                            aria-label={this.props.intl.formatMessage(
+                              messages.home,
+                            )}
+                          >
+                            <Icon
+                              className="home-icon"
+                              name={homeSVG}
+                              size="18px"
+                              title={this.props.intl.formatMessage(
+                                messages.home,
+                              )}
+                            />
+                          </Breadcrumb.Section>
+                        ) : (
+                          <>
+                            <Breadcrumb.Divider key={`divider-${item.url}`} />
+                            <Breadcrumb.Section
+                              role="button"
+                              onClick={() =>
+                                this.navigateTo(
+                                  items.slice(0, index + 1).join('/'),
+                                )
+                              }
+                            >
+                              {item}
+                            </Breadcrumb.Section>
+                          </>
+                        )}
+                      </React.Fragment>
+                    );
+                  })
+              ) : (
+                <Breadcrumb.Section
+                  onClick={() => this.navigateTo('/')}
+                  aria-label={this.props.intl.formatMessage(messages.home)}
+                >
+                  <Icon
+                    className="home-icon"
+                    name={homeSVG}
+                    role="button"
+                    size="18px"
+                    title={this.props.intl.formatMessage(messages.home)}
+                  />
+                </Breadcrumb.Section>
+              )}
+            </Breadcrumb>
+          ) : (
+            <div className="searchResults">
+              <FormattedMessage
+                id="Search results"
+                defaultMessage="Search results"
+              />
+            </div>
+          )}
         </Segment>
         {this.props.mode === 'multiple' && (
           <Segment className="infos">
@@ -510,6 +601,7 @@ class ObjectBrowserBody extends Component {
           handleClickOnItem={this.handleClickOnItem}
           handleDoubleClickOnItem={this.handleDoubleClickOnItem}
           mode={this.props.mode}
+          view={this.state.view}
           navigateTo={this.navigateTo}
           isSelectable={this.isSelectable}
         />
@@ -523,6 +615,7 @@ export default compose(
   connect(
     (state) => ({
       searchSubrequests: state.search.subrequests,
+      lang: state.intl.locale,
     }),
     { searchContent },
   ),

package/src/components/manage/Sidebar/ObjectBrowserNav.jsx

@@ -26,6 +26,7 @@ const ObjectBrowserNav = ({
   handleClickOnItem,
   handleDoubleClickOnItem,
   mode,
+  view,
   navigateTo,
   isSelectable,
 }) => {
@@ -47,83 +48,136 @@ const ObjectBrowserNav = ({
   return (
     <Segment as="ul" className="object-listing">
       {currentSearchResults &&
-        currentSearchResults.items.map((item) => (
-          <li
-            role="presentation"
-            aria-label={
-              item.is_folderish && mode === 'image'
-                ? `${intl.formatMessage(messages.browse)} ${item.title}`
-                : `${intl.formatMessage(messages.select)} ${item.title}`
-            }
-            key={item['@id']}
-            className={cx('', {
-              'selected-item': isSelected(item),
-
-              disabled:
-                mode === 'image'
-                  ? !config.settings.imageObjects.includes(item['@type']) &&
-                    !item.is_folderish
-                  : !isSelectable(item),
-            })}
-            onClick={() => handleClickOnItem(item)}
-            onDoubleClick={() => handleDoubleClickOnItem(item)}
-          >
-            <span title={`${item['@id']} (${item['@type']})`}>
-              <Popup
-                key={item['@id']}
-                content={
-                  <>
-                    <Icon name={homeSVG} size="18px" />{' '}
-                    {flattenToAppURL(item['@id'])} ( {item['@type']})
-                  </>
-                }
-                trigger={
-                  <span>
-                    <Icon
-                      name={getContentIcon(item['@type'], item.is_folderish)}
-                      size="24px"
-                    />
-                  </span>
-                }
-              />
-
-              {item.title}
-            </span>
-            {item.is_folderish && mode === 'image' && (
-              <Icon
-                className="right-arrow-icon"
-                name={rightArrowSVG}
-                size="24px"
-              />
-            )}
-            {item.is_folderish && (mode === 'link' || mode === 'multiple') && (
+        currentSearchResults.items.map((item) =>
+          view === 'icons' ? (
+            <li
+              className="image-wrapper"
+              title={`${item['@id']} (${item['@type']})`}
+            >
               <div
+                basic
                 role="presentation"
-                className="right-arrow-link-mode"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  navigateTo(item['@id']);
-                }}
+                onClick={(e) => handleClickOnItem(item)}
+                onDoubleClick={() => handleDoubleClickOnItem(item)}
+                className="image-preview"
+                aria-label={`${intl.formatMessage(messages.select)} ${
+                  item.title
+                }`}
               >
-                <Button.Group>
-                  <Button
-                    basic
-                    icon
-                    aria-label={`${intl.formatMessage(messages.browse)} ${
-                      item.title
-                    }`}
-                  >
+                {item['@type'] === 'Image' ? (
+                  <img
+                    src={`${item['@id']}/@@images/image/preview`}
+                    alt={item.title}
+                    style={{
+                      width: 143,
+                      height: 143,
+                    }}
+                    className={isSelected(item) ? 'selected' : ''}
+                  />
+                ) : (
+                  <div className="icon-wrapper">
                     <Icon
-                      className="right-arrow-icon"
-                      name={rightArrowSVG}
-                      size="24px"
+                      name={getContentIcon(item['@type'], item.is_folderish)}
+                      size="45px"
                     />
-                  </Button>
-                </Button.Group>
+                  </div>
+                )}
+              </div>
+              <div className="image-title">
+                <div
+                  className="icon-align-name"
+                  onClick={(e) => handleClickOnItem(item)}
+                  aria-hidden="true"
+                >
+                  <div
+                    title={item.title}
+                    style={{ width: 143 }}
+                    className="image-title-content"
+                  >
+                    {item.title}
+                  </div>
+                </div>
               </div>
-            )}
-          </li>
-        ))}
+            </li>
+          ) : (
+            <li
+              role="presentation"
+              aria-label={
+                item.is_folderish && mode === 'image'
+                  ? `${intl.formatMessage(messages.browse)} ${item.title}`
+                  : `${intl.formatMessage(messages.select)} ${item.title}`
+              }
+              key={item['@id']}
+              className={cx('', {
+                'selected-item': isSelected(item),
+
+                disabled:
+                  mode === 'image'
+                    ? !config.settings.imageObjects.includes(item['@type']) &&
+                      !item.is_folderish
+                    : !isSelectable(item),
+              })}
+              onClick={() => handleClickOnItem(item)}
+              onDoubleClick={() => handleDoubleClickOnItem(item)}
+            >
+              <span title={`${item['@id']} (${item['@type']})`}>
+                <Popup
+                  key={item['@id']}
+                  content={
+                    <>
+                      <Icon name={homeSVG} size="18px" />{' '}
+                      {flattenToAppURL(item['@id'])} ( {item['@type']})
+                    </>
+                  }
+                  trigger={
+                    <span>
+                      <Icon
+                        name={getContentIcon(item['@type'], item.is_folderish)}
+                        size="24px"
+                      />
+                    </span>
+                  }
+                />
+
+                {item.title}
+              </span>
+              {item.is_folderish && mode === 'image' && (
+                <Icon
+                  className="right-arrow-icon"
+                  name={rightArrowSVG}
+                  size="24px"
+                />
+              )}
+              {item.is_folderish &&
+                (mode === 'link' || mode === 'multiple') && (
+                  <div
+                    role="presentation"
+                    className="right-arrow-link-mode"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      navigateTo(item['@id']);
+                    }}
+                  >
+                    <Button.Group>
+                      <Button
+                        basic
+                        icon
+                        aria-label={`${intl.formatMessage(messages.browse)} ${
+                          item.title
+                        }`}
+                      >
+                        <Icon
+                          className="right-arrow-icon"
+                          name={rightArrowSVG}
+                          size="24px"
+                        />
+                      </Button>
+                    </Button.Group>
+                  </div>
+                )}
+            </li>
+          ),
+        )}
     </Segment>
   );
 };