Feat/614 sticky toolbar and header (#790)

* feat: sticky toolbar and header * feat: make table context sticky
bcgov · Jan 26, 2024 · fdbea95 · fdbea95
1 parent e6d9d5a
commit fdbea95
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 64 deletions.
diff --git a/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/TableComponents/index.tsx b/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/TableComponents/index.tsx
@@ -365,6 +365,7 @@ export const renderPagination = (
   if (currentTab === 'mixTab') {
     return (
       <Pagination
+        className="table-pagination"
         pageSize={currMixPageSize}
         pageSizes={PageSizesConfig}
         itemsPerPageText=""
@@ -387,6 +388,7 @@ export const renderPagination = (
   }
   return (
     <Pagination
+      className="table-pagination"
       pageSize={currPageSize}
       pageSizes={PageSizesConfig}
       itemsPerPageText=""

diff --git a/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/index.tsx b/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/index.tsx
@@ -327,72 +327,75 @@ const ParentTreeStep = (
                   <TableContainer
                     title={pageText[currentTab].tabTitle}
                     description={pageText[currentTab].tableDescription}
+                    className={(!disableOptions) ? 'sticky-table-title' : undefined}
                   >
-                    <TableToolbar aria-label="data table toolbar">
-                      <TableToolbarContent>
-                        {
-                          currentTab === 'mixTab'
-                            ? (
-                              <Button
-                                kind="ghost"
-                                hasIconOnly
-                                disabled={disableOptions}
-                                renderIcon={Add}
-                                iconDescription="Add a new row"
-                                onClick={() => addNewMixRow(state, setStepData)}
-                              />
-                            )
-                            : null
-                        }
-                        <OverflowMenu
-                          menuOptionsClass="parent-tree-table-toggle-menu"
-                          renderIcon={View}
-                          iconDescription="Show/hide columns"
-                          flipped
-                          disabled={disableOptions}
-                        >
+                    <div className={(!disableOptions) ? 'sticky-toolbar' : undefined}>
+                      <TableToolbar aria-label="data table toolbar">
+                        <TableToolbarContent>
                           {
-                            renderColOptions(headerConfig, currentTab, setHeaderConfig)
-                          }
-                        </OverflowMenu>
-                        <OverflowMenu
-                          renderIcon={Settings}
-                          iconDescription="More options"
-                          menuOptionsClass="parent-tree-table-option-menu"
-                          disabled={disableOptions}
-                        >
-                          <OverflowMenuItem
-                            itemText={
-                              (
-                                <Link
-                                  ref={linkRef}
-                                  to={getDownloadUrl(currentTab)}
-                                  target="_blank"
-                                >
-                                  Download table template
-                                </Link>
+                            currentTab === 'mixTab'
+                              ? (
+                                <Button
+                                  kind="ghost"
+                                  hasIconOnly
+                                  disabled={disableOptions}
+                                  renderIcon={Add}
+                                  iconDescription="Add a new row"
+                                  onClick={() => addNewMixRow(state, setStepData)}
+                                />
                               )
+                              : null
+                          }
+                          <OverflowMenu
+                            menuOptionsClass="parent-tree-table-toggle-menu"
+                            renderIcon={View}
+                            iconDescription="Show/hide columns"
+                            flipped
+                            disabled={disableOptions}
+                          >
+                            {
+                              renderColOptions(headerConfig, currentTab, setHeaderConfig)
                             }
-                            onClick={() => linkRef.current?.click()}
-                          />
-                          <OverflowMenuItem itemText="Export table as CSV file" disabled />
-                          <OverflowMenuItem
-                            itemText="Clean table data"
-                            onClick={() => setIsCleanWarnOpen(true)}
-                          />
-                        </OverflowMenu>
-                        <Button
-                          className="upload-button"
-                          size="lg"
-                          kind="primary"
-                          renderIcon={Upload}
-                          onClick={() => setIsUploadOpen(true)}
-                          disabled={disableOptions || !allParentTreeQuery.isFetched}
-                        >
-                          Upload from file
-                        </Button>
-                      </TableToolbarContent>
-                    </TableToolbar>
+                          </OverflowMenu>
+                          <OverflowMenu
+                            renderIcon={Settings}
+                            iconDescription="More options"
+                            menuOptionsClass="parent-tree-table-option-menu"
+                            disabled={disableOptions}
+                          >
+                            <OverflowMenuItem
+                              itemText={
+                                (
+                                  <Link
+                                    ref={linkRef}
+                                    to={getDownloadUrl(currentTab)}
+                                    target="_blank"
+                                  >
+                                    Download table template
+                                  </Link>
+                                )
+                              }
+                              onClick={() => linkRef.current?.click()}
+                            />
+                            <OverflowMenuItem itemText="Export table as CSV file" disabled />
+                            <OverflowMenuItem
+                              itemText="Clean table data"
+                              onClick={() => setIsCleanWarnOpen(true)}
+                            />
+                          </OverflowMenu>
+                          <Button
+                            className="upload-button"
+                            size="lg"
+                            kind="primary"
+                            renderIcon={Upload}
+                            onClick={() => setIsUploadOpen(true)}
+                            disabled={disableOptions || !allParentTreeQuery.isFetched}
+                          >
+                            Upload from file
+                          </Button>
+                        </TableToolbarContent>
+                      </TableToolbar>
+                    </div>
                     {
                       // Check if it's fetching parent tree data
                       (!disableOptions && allParentTreeQuery.isFetching)

diff --git a/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/styles.scss b/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/styles.scss
@@ -6,6 +6,21 @@
   padding-right: 0rem;
   padding-bottom: 1rem;
 
+  .sticky-table-title {
+    .#{vars.$bcgov-prefix}--data-table-header {
+      position: sticky;
+      top: 3rem;
+      z-index: 1;
+    }
+  }
+
+  .sticky-toolbar {
+    position: sticky;
+    top: 8.3rem;
+    background: var(--#{vars.$bcgov-prefix}-layer);
+    z-index: 1;
+  }
+
   .parent-tree-step-tab-list {
     margin-left: -1rem;
     border-bottom: 2px solid var(--#{vars.$bcgov-prefix}-border-subtle-01);
@@ -85,7 +100,7 @@
     }
   }
 
-  .ghost-button-underlined{
+  .ghost-button-underlined {
     padding: 0;
     min-height: fit-content;
     text-decoration: underline;
@@ -158,13 +173,21 @@
 
   .table-header {
     height: 4rem;
+    position: sticky;
+    top: 11.3rem;
+    z-index: 1;
 
     th {
       vertical-align: baseline;
       padding-top: 1rem;
     }
   }
 
+  .table-pagination {
+    z-index: 2;
+    position: relative;
+  }
+
   .#{vars.$bcgov-prefix}--data-table-content {
     overflow: visible;
   }

diff --git a/frontend/src/layout/PrivateLayout/styles.scss b/frontend/src/layout/PrivateLayout/styles.scss
@@ -1,7 +1,6 @@
 @use '@bcgov-nr/nr-theme/design-tokens/variables.scss' as vars;
 
 .main-container {
-  overflow-x: hidden;
   padding-top: 5.625rem;
   padding-left: 16rem;
   padding-bottom: 2.5rem;