Added object browser icon view

cypress/tests/core/basic/objectBrowser.js

@@ -97,7 +97,10 @@ describe('Object Browser Tests', () => {
     // The document is not in the list
     cy.findByLabelText('Browse My Searchable Page').should('not.exist');
     // And the list has only 1 item
-    cy.get('.ui.segment.object-listing li').should('have.length', 1);
+    cy.get('.ui.segment.object-listing .image-wrapper').should(
+      'have.length',
+      1,
+    );
 
     // The image can be selected as usual
     cy.findByLabelText('Select My Searchable Image').dblclick();

locales/ca/LC_MESSAGES/volto.po

@@ -3049,6 +3049,7 @@ msgid "Search input label"
 msgstr "Cerca l'etiqueta d'entrada"
 
 #: components/manage/Blocks/Search/components/SearchDetails
+#: components/manage/Sidebar/ObjectBrowserBody
 #: components/theme/Search/Search
 # defaultMessage: Search results
 msgid "Search results"

locales/de/LC_MESSAGES/volto.po

@@ -3046,6 +3046,7 @@ msgid "Search input label"
 msgstr "Label Suchfeld"
 
 #: components/manage/Blocks/Search/components/SearchDetails
+#: components/manage/Sidebar/ObjectBrowserBody
 #: components/theme/Search/Search
 # defaultMessage: Search results
 msgid "Search results"

locales/en/LC_MESSAGES/volto.po

@@ -3040,6 +3040,7 @@ msgid "Search input label"
 msgstr ""
 
 #: components/manage/Blocks/Search/components/SearchDetails
+#: components/manage/Sidebar/ObjectBrowserBody
 #: components/theme/Search/Search
 # defaultMessage: Search results
 msgid "Search results"

locales/es/LC_MESSAGES/volto.po

@@ -3051,6 +3051,7 @@ msgid "Search input label"
 msgstr "Etiqueta del campo de búsqueda"
 
 #: components/manage/Blocks/Search/components/SearchDetails
+#: components/manage/Sidebar/ObjectBrowserBody
 #: components/theme/Search/Search
 # defaultMessage: Search results
 msgid "Search results"

locales/eu/LC_MESSAGES/volto.po

@@ -3047,6 +3047,7 @@ msgid "Search input label"
 msgstr "Bilaketa kutxaren etiketa"
 
 #: components/manage/Blocks/Search/components/SearchDetails
+#: components/manage/Sidebar/ObjectBrowserBody
 #: components/theme/Search/Search
 # defaultMessage: Search results
 msgid "Search results"

locales/fi/LC_MESSAGES/volto.po

@@ -3051,6 +3051,7 @@ msgid "Search input label"
 msgstr "Hakukentän nimike"
 
 #: components/manage/Blocks/Search/components/SearchDetails
+#: components/manage/Sidebar/ObjectBrowserBody
 #: components/theme/Search/Search
 # defaultMessage: Search results
 msgid "Search results"

locales/fr/LC_MESSAGES/volto.po

@@ -3057,6 +3057,7 @@ msgid "Search input label"
 msgstr "Label du champ de recherche"
 
 #: components/manage/Blocks/Search/components/SearchDetails
+#: components/manage/Sidebar/ObjectBrowserBody
 #: components/theme/Search/Search
 # defaultMessage: Search results
 msgid "Search results"

locales/it/LC_MESSAGES/volto.po

@@ -3040,6 +3040,7 @@ msgid "Search input label"
 msgstr "Etichetta del campo di ricerca"
 
 #: components/manage/Blocks/Search/components/SearchDetails
+#: components/manage/Sidebar/ObjectBrowserBody
 #: components/theme/Search/Search
 # defaultMessage: Search results
 msgid "Search results"

locales/ja/LC_MESSAGES/volto.po

@@ -3048,6 +3048,7 @@ msgid "Search input label"
 msgstr ""
 
 #: components/manage/Blocks/Search/components/SearchDetails
+#: components/manage/Sidebar/ObjectBrowserBody
 #: components/theme/Search/Search
 # defaultMessage: Search results
 msgid "Search results"

locales/nl/LC_MESSAGES/volto.po

@@ -3059,6 +3059,7 @@ msgid "Search input label"
 msgstr ""
 
 #: components/manage/Blocks/Search/components/SearchDetails
+#: components/manage/Sidebar/ObjectBrowserBody
 #: components/theme/Search/Search
 # defaultMessage: Search results
 msgid "Search results"

locales/pt/LC_MESSAGES/volto.po

@@ -3048,6 +3048,7 @@ msgid "Search input label"
 msgstr ""
 
 #: components/manage/Blocks/Search/components/SearchDetails
+#: components/manage/Sidebar/ObjectBrowserBody
 #: components/theme/Search/Search
 # defaultMessage: Search results
 msgid "Search results"

locales/pt_BR/LC_MESSAGES/volto.po

@@ -3050,6 +3050,7 @@ msgid "Search input label"
 msgstr "Rótulo da caixa de busca"
 
 #: components/manage/Blocks/Search/components/SearchDetails
+#: components/manage/Sidebar/ObjectBrowserBody
 #: components/theme/Search/Search
 # defaultMessage: Search results
 msgid "Search results"

locales/ro/LC_MESSAGES/volto.po

@@ -3040,6 +3040,7 @@ msgid "Search input label"
 msgstr "Căutați eticheta de intrare"
 
 #: components/manage/Blocks/Search/components/SearchDetails
+#: components/manage/Sidebar/ObjectBrowserBody
 #: components/theme/Search/Search
 # defaultMessage: Search results
 msgid "Search results"

locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2023-10-02T11:59:20.013Z\n"
+"POT-Creation-Date: 2023-10-06T11:50:27.347Z\n"
 "Last-Translator: Plone i18n <[email protected]>\n"
 "Language-Team: Plone i18n <[email protected]>\n"
 "MIME-Version: 1.0\n"
@@ -3042,6 +3042,7 @@ msgid "Search input label"
 msgstr ""
 
 #: components/manage/Blocks/Search/components/SearchDetails
+#: components/manage/Sidebar/ObjectBrowserBody
 #: components/theme/Search/Search
 # defaultMessage: Search results
 msgid "Search results"

locales/zh_CN/LC_MESSAGES/volto.po

@@ -3046,6 +3046,7 @@ msgid "Search input label"
 msgstr "搜索输入标签"
 
 #: components/manage/Blocks/Search/components/SearchDetails
+#: components/manage/Sidebar/ObjectBrowserBody
 #: components/theme/Search/Search
 # defaultMessage: Search results
 msgid "Search results"

news/5279.feature

@@ -0,0 +1 @@
+Added object browser icon view @robgietema

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';
 
@@ -132,6 +134,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 +204,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('/')) {
@@ -365,25 +386,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"
@@ -393,20 +398,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
@@ -420,40 +445,63 @@ 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' && (
+            <Icon
+              name={this.state.view === 'list' ? iconsSVG : listSVG}
+              size="24px"
+              className="mode-switch"
+              onClick={this.toggleView}
+            />
+          )}
+          {!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('/')}
+                          >
+                            <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>
+          ) : (
+            <div className="searchResults">
+              <FormattedMessage
+                id="Search results"
+                defaultMessage="Search results"
+              />
+            </div>
+          )}
         </Segment>
         {this.props.mode === 'multiple' && (
           <Segment className="infos">
@@ -489,6 +537,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}
         />
@@ -502,6 +551,7 @@ export default compose(
   connect(
     (state) => ({
       searchSubrequests: state.search.subrequests,
+      lang: state.intl.locale,
     }),
     { searchContent },
   ),