feat(select-all): change position of select-all button

Shelf-nu · Dec 11, 2024 · 513e048 · 513e048
1 parent 87849f9
commit 513e048
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 41 deletions.
diff --git a/app/components/layout/header/index.tsx b/app/components/layout/header/index.tsx
@@ -56,7 +56,7 @@ export default function Header({
         </>
       )}
       {!hidePageDescription && (
-        <div className={`flex items-center border-b border-gray-200 px-4 py-3`}>
+        <div className="flex items-center justify-between border-b border-gray-200 px-4 py-3">
           {slots?.["left-of-title"] ? (
             <div className="relative">{slots["left-of-title"]}</div>
           ) : null}

diff --git a/app/routes/_layout+/bookings.$bookingId.add-assets.tsx b/app/routes/_layout+/bookings.$bookingId.add-assets.tsx
@@ -350,6 +350,17 @@ export default function AddAssetsToNewBooking() {
         {...header}
         hideBreadcrumbs={true}
         classNames="text-left [&>div]:px-6 -mt-6 mx-0"
+        slots={{
+          "right-of-title": (
+            <Button
+              variant="secondary"
+              className="mr-6 px-2 py-1 text-sm font-normal"
+              onClick={handleSelectAll}
+            >
+              {hasSelectedAll ? "Clear all" : "Select all"}
+            </Button>
+          ),
+        }}
       />
 
       <div className="border-b px-6 py-2">
@@ -459,19 +470,10 @@ export default function AddAssetsToNewBooking() {
 
       {/* Footer of the modal */}
       <footer className="item-center flex justify-between border-t px-6 pt-3">
-        <div className="flex items-center gap-2">
-          <p>
-            {hasSelectedAll ? totalItems : selectedAssets.length} assets
-            selected
-          </p>
-          <Button
-            variant="secondary"
-            className="px-2 py-1 text-sm font-normal"
-            onClick={handleSelectAll}
-          >
-            {hasSelectedAll ? "Clear all" : "Select all"}
-          </Button>
-        </div>
+        <p>
+          {hasSelectedAll ? totalItems : selectedAssets.length} assets selected
+        </p>
+
         <div className="flex gap-3">
           <Button variant="secondary" to={".."}>
             Close

diff --git a/app/routes/_layout+/kits.$kitId.manage-assets.tsx b/app/routes/_layout+/kits.$kitId.manage-assets.tsx
@@ -453,8 +453,19 @@ export default function ManageAssetsInKit() {
     <div className="flex h-full max-h-full flex-col">
       <Header
         {...header}
-        hideBreadcrumbs={true}
+        hideBreadcrumbs
         classNames="text-left mb-3 -mx-6 [&>div]:px-6 -mt-6"
+        slots={{
+          "right-of-title": (
+            <Button
+              variant="secondary"
+              className="mr-6 px-2 py-1 text-sm font-normal"
+              onClick={handleSelectAll}
+            >
+              {hasSelectedAll ? "Clear all" : "Select all"}
+            </Button>
+          ),
+        }}
       />
 
       <div className="-mx-6 border-b px-6 md:pb-3">
@@ -542,19 +553,10 @@ export default function ManageAssetsInKit() {
 
       {/* Footer of the modal */}
       <footer className="item-center -mx-6 flex justify-between border-t px-6 pt-3">
-        <div className="flex items-center gap-2 font-medium">
-          <p>
-            {hasSelectedAll ? totalItems : selectedAssets.length} assets
-            selected
-          </p>
-          <Button
-            variant="secondary"
-            className="px-2 py-1 text-sm font-normal"
-            onClick={handleSelectAll}
-          >
-            {hasSelectedAll ? "Clear all" : "Select all"}
-          </Button>
-        </div>
+        <p>
+          {hasSelectedAll ? totalItems : selectedAssets.length} assets selected
+        </p>
+
         <div className="flex gap-3">
           <Button variant="secondary" to="..">
             Close

diff --git a/app/routes/_layout+/locations.$locationId.add-assets.tsx b/app/routes/_layout+/locations.$locationId.add-assets.tsx
@@ -380,6 +380,17 @@ export default function AddAssetsToLocation() {
         {...header}
         hideBreadcrumbs={true}
         classNames="text-left mb-3 -mx-6 [&>div]:px-6 -mt-6"
+        slots={{
+          "right-of-title": (
+            <Button
+              variant="secondary"
+              className="mr-6 min-w-24 px-2 py-1 text-sm font-normal"
+              onClick={handleSelectAll}
+            >
+              {hasSelectedAll ? "Clear all" : "Select all"}
+            </Button>
+          ),
+        }}
       />
 
       <div className="-mx-6 border-b px-6 md:pb-3">
@@ -456,19 +467,10 @@ export default function AddAssetsToLocation() {
       </div>
       {/* Footer of the modal */}
       <footer className="item-center -mx-6 flex justify-between border-t px-6 pt-3">
-        <div className="flex items-center gap-2">
-          <p>
-            {hasSelectedAll ? totalItems : selectedAssets.length} assets
-            selected
-          </p>
-          <Button
-            variant="secondary"
-            className="px-2 py-1 text-sm font-normal"
-            onClick={handleSelectAll}
-          >
-            {hasSelectedAll ? "Clear all" : "Select all"}
-          </Button>
-        </div>
+        <p>
+          {hasSelectedAll ? totalItems : selectedAssets.length} assets selected
+        </p>
+
         <div className="flex gap-3">
           <Button variant="secondary" to={".."}>
             Close