feat: fixed the add and reset buttons to bottom right #2114

awslabs · Nov 21, 2023 · 15108b0 · 15108b0
1 parent b7e8574
commit 15108b0
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 12 deletions.
diff --git a/packages/dashboard/src/components/internalDashboard/index.css b/packages/dashboard/src/components/internalDashboard/index.css
@@ -83,7 +83,14 @@
   width: 15%;
   min-width: 0;
   height: 100%;
-  max-height: calc(100vh - var(--toolbar-overlay-height));
   z-index: var(--stack-order-grid-inputs);
   background-color: var(--colors-white);
 }
+
+.collapsible-panel-right {
+  max-height: calc(100vh - var(--right-toolbar-overlay-height));
+}
+
+.collapsible-panel-left {
+  max-height: calc(100vh - var(--left-toolbar-overlay-height));
+}
diff --git a/packages/dashboard/src/components/queryEditor/iotSiteWiseQueryEditor/constants.ts b/packages/dashboard/src/components/queryEditor/iotSiteWiseQueryEditor/constants.ts
@@ -1,2 +1,5 @@
 /** Defines pagination page size options for explorer tables. */
 export const SUPPORTED_PAGE_SIZES = [10, 25, 100, 250];
+
+// adjust sticky buttons width in the resource explorer
+export const STICKY_BUTTON_WIDTH_FACTOR = 25;
diff --git a/packages/dashboard/src/components/queryEditor/iotSiteWiseQueryEditor/footer/footer.tsx b/packages/dashboard/src/components/queryEditor/iotSiteWiseQueryEditor/footer/footer.tsx
@@ -1,8 +1,16 @@
 import React from 'react';
+import { useMeasure } from 'react-use';
 
 import Box from '@cloudscape-design/components/box';
 import SpaceBetween from '@cloudscape-design/components/space-between';
 import Button from '@cloudscape-design/components/button';
+import {
+  colorBackgroundButtonNormalDefault,
+  colorBorderDividerDefault,
+  spaceStaticXxxs,
+} from '@cloudscape-design/design-tokens';
+import { STICKY_BUTTON_WIDTH_FACTOR } from '../constants';
+import './index.css';
 
 export type ResourceExplorerFooterOptions = {
   addDisabled?: boolean;
@@ -17,16 +25,28 @@ export const ResourceExplorerFooter = ({
   onAdd,
   onReset,
 }: ResourceExplorerFooterOptions) => {
+  const [componentRef, { width }] = useMeasure<HTMLDivElement>();
+  const stickyFooter = {
+    backgroundColor: colorBackgroundButtonNormalDefault,
+    bottom: spaceStaticXxxs,
+    width: width + STICKY_BUTTON_WIDTH_FACTOR,
+    borderTop: `${spaceStaticXxxs} solid ${colorBorderDividerDefault}`,
+  };
+
   return (
-    <Box float='right'>
-      <SpaceBetween direction='horizontal' size='xs'>
-        <Button disabled={resetDisabled} onClick={onReset}>
-          Reset
-        </Button>
-        <Button variant='primary' disabled={addDisabled} onClick={onAdd}>
-          Add
-        </Button>
-      </SpaceBetween>
-    </Box>
+    <div ref={componentRef}>
+      <div className='queryeditor-button-sticky' style={stickyFooter}>
+        <Box float='right' padding='xs'>
+          <SpaceBetween direction='horizontal' size='xs'>
+            <Button disabled={resetDisabled} onClick={onReset}>
+              Reset
+            </Button>
+            <Button variant='primary' disabled={addDisabled} onClick={onAdd}>
+              Add
+            </Button>
+          </SpaceBetween>
+        </Box>
+      </div>
+    </div>
   );
 };
diff --git a/packages/dashboard/src/components/queryEditor/iotSiteWiseQueryEditor/footer/index.css b/packages/dashboard/src/components/queryEditor/iotSiteWiseQueryEditor/footer/index.css
@@ -0,0 +1,5 @@
+.queryeditor-button-sticky {
+  position: fixed;
+  z-index: 999;
+  left: 0;
+}
diff --git a/packages/dashboard/src/styles/variables.css b/packages/dashboard/src/styles/variables.css
@@ -37,7 +37,8 @@
   --size-asset-ghost-width: 300px;
   --radius-context-menu: 3px;
   --radius-component-palette-icon: 8px;
-  --toolbar-overlay-height: 116px;
+  --right-toolbar-overlay-height: 116px;
+  --left-toolbar-overlay-height: 136px;
   --button-action-gap: 0.5rem;
   --colors-background-button: #f90;
   --colors-button-hover: #ec7211;