Merge pull request #314 from os2display/feature/5529-move-filters-and-buttons-around-in-the-list-view

Move filters and buttons around in the list view

Author: sinejespersen

CHANGELOG.md

@@ -24,6 +24,7 @@ All notable changes to this project will be documented in this file.
 - Added command to migrate config.json files.
 - Fix data fetching bug
 - Refactored screen layout commands.
+- Moved list components (search and checkboxes) around
 
 ### NB! Prior to 3.x the project was split into separate repositories
 

assets/admin/app.scss

@@ -19,8 +19,6 @@ body {
   height: 100vh;
   height: -webkit-fill-available;
   max-height: 100vh;
-  //  overflow-x: auto;
-  //  overflow-y: hidden;  // TODO: Why was this added?
 }
 
 // To make multicomponent look like bootstrap for now
@@ -143,3 +141,10 @@ body {
   right: 0;
   margin: 2em;
 }
+
+.delete-search-button {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-color: var(--bs-border-color);
+  background-color: var(--bs-tertiary-bg);
+}

assets/admin/components/util/list/list.jsx

@@ -244,15 +244,15 @@ function List({
 
   return (
     <>
-      <Row className="my-2">
-        <Col>
-          {displaySearch && (
-            <SearchBox value={searchParams} onChange={onSearch} />
-          )}
-        </Col>
-        <>
-          {enableScreenStatus && (
-            <Col md="auto">
+      <div className="my-2">
+        <Row>
+          <Col>
+            {displaySearch && (
+              <SearchBox value={searchParams} onChange={onSearch} />
+            )}
+          </Col>
+          <Col className="d-flex justify-content-end">
+            {enableScreenStatus && (
               <Select
                 onChange={onScreenStatus}
                 name="screenStatus"
@@ -281,41 +281,7 @@ function List({
                 ]}
                 value={screenStatusParam}
               />
-            </Col>
-          )}
-          {displayPublished && publishedParams && (
-            <Col md="auto">
-              <>
-                <FormCheckbox
-                  label={t("published")}
-                  onChange={onIsPublished}
-                  name="published"
-                  value={publishedParams === "published"}
-                />
-                <FormCheckbox
-                  label={t("not-published")}
-                  name="not-published"
-                  onChange={onIsPublished}
-                  value={publishedParams === "not-published"}
-                />
-              </>
-            </Col>
-          )}
-          {createdByParams && showCreatedByFilter && (
-            <Col md="auto">
-              <>
-                <FormCheckbox
-                  label={t("my-content")}
-                  name="current-user"
-                  onChange={onIsCreatedByChange}
-                  value={createdByParams === "current-user"}
-                />
-              </>
-            </Col>
-          )}
-        </>
-        <Col md="auto" className="d-flex justify-content-end">
-          <>
+            )}
             {handleDelete && (
               <Button
                 variant="danger"
@@ -327,7 +293,7 @@ function List({
                     accept: deleteHandler,
                   })
                 }
-                className="me-3"
+                className="mx-2"
               >
                 {t("delete-button")}
               </Button>
@@ -342,10 +308,40 @@ function List({
                 {t("deselect-all")}
               </Button>
             )}
+          </Col>
+        </Row>
+        <Row className="my-3">
+          <>
+            {createdByParams && showCreatedByFilter && (
+              <div className="d-flex flex-row">
+                <FormCheckbox
+                  label={t("my-content")}
+                  name="current-user"
+                  onChange={onIsCreatedByChange}
+                  value={createdByParams === "current-user"}
+                />
+                {displayPublished && publishedParams && (
+                  <>
+                    <FormCheckbox
+                      formGroupClasses="mx-4"
+                      label={t("published")}
+                      onChange={onIsPublished}
+                      name="published"
+                      value={publishedParams === "published"}
+                    />
+                    <FormCheckbox
+                      label={t("not-published")}
+                      name="not-published"
+                      onChange={onIsPublished}
+                      value={publishedParams === "not-published"}
+                    />
+                  </>
+                )}
+              </div>
+            )}
           </>
-        </Col>
-      </Row>
-      <Row />
+        </Row>
+      </div>
       <Table data={data} columns={columns} isFetching={isFetching} />
       {!isFetching && (
         <Pagination

assets/admin/components/util/search-box/search-box.jsx

@@ -28,7 +28,7 @@ function SearchBox({ onChange, value = "", showLabel = false }) {
           autoFocus
           placeholder={t("placeholder")}
           id="search-field"
-          aria-label="search-box-aria-label"
+          aria-label={t("search-box-aria-label")}
           role="search"
           name="search"
           value={value ?? ""}
@@ -37,7 +37,7 @@ function SearchBox({ onChange, value = "", showLabel = false }) {
         />
         <div className="input-group-append">
           <button
-            className="btn btn-outline-secondary"
+            className="btn btn-outline-secondary delete-search-button"
             type="button"
             onClick={() => onChange("")}
           >