query styling

finos · Jun 28, 2023 · fa4b5c1 · fa4b5c1
1 parent e1bf9e8
commit fa4b5c1
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 19 deletions.
diff --git a/packages/legend-art/src/panel/PanelLoadingIndicator.tsx b/packages/legend-art/src/panel/PanelLoadingIndicator.tsx
@@ -20,12 +20,18 @@ import { clsx } from '../utils/ComponentUtils.js';
 export const PanelLoadingIndicator: React.FC<{
  isLoading: boolean;
  className?: string;
+ belowModalHeader?: boolean;
 }> = (props) => {
- const { isLoading, className } = props;
+ const { isLoading, className, belowModalHeader } = props;
  const ref = useRef<HTMLDivElement>(null);
 
  useEffect(() => {
  if (ref.current) {
+ if (belowModalHeader) {
+ ref.current.parentElement?.classList.add(
+ 'panel-loading-indicator__container__below-modal-header',
+ );
+ }
  if (isLoading) {
  ref.current.parentElement?.classList.add(
  'panel-loading-indicator__container',
@@ -36,7 +42,7 @@ export const PanelLoadingIndicator: React.FC<{
  );
  }
  }
- }, [isLoading]);
+ }, [isLoading, belowModalHeader]);
 
  return (
  <div

diff --git a/packages/legend-art/style/components/_panel-loading-indicator.scss b/packages/legend-art/style/components/_panel-loading-indicator.scss
@@ -22,6 +22,10 @@
 
  &__container {
  position: relative;
+
+ &__below-modal-header {
+ margin-top: -2rem;
+ }
  }
 
  &--disabled {

diff --git a/packages/legend-query-builder/src/components/data-access/DataAccessOverview.tsx b/packages/legend-query-builder/src/components/data-access/DataAccessOverview.tsx
@@ -315,7 +315,7 @@ export const DataAccessOverview = observer(
  >
  {isLoading && (
  <>
- <PanelLoadingIndicator isLoading={true} />
+ <PanelLoadingIndicator belowModalHeader={true} isLoading={true} />
  <PanelDivider />
  <PanelDivider />
  </>

diff --git a/packages/legend-query-builder/style/_data-access-overview.scss b/packages/legend-query-builder/style/_data-access-overview.scss
@@ -152,18 +152,6 @@
  }
  }
 
- .ag-center-cols-viewport {
- // stripped background for remaining height of the grid when there are not enough rows
- // See https://css-tricks.com/stripes-css/
- background: repeating-linear-gradient(
- 135deg,
- var(--color-light-grey-50),
- var(--color-light-grey-50) 0.5rem,
- var(--color-light-grey-200) 0.5rem,
- var(--color-light-grey-200) 1rem
- );
- }
-
  .ag-header-cell-text {
  font-weight: 700;
  }

diff --git a/packages/legend-query-builder/style/_query-builder.scss b/packages/legend-query-builder/style/_query-builder.scss
@@ -913,10 +913,6 @@
  height: 100%;
  padding: 2rem;
  }
-
- .panel-loading-indicator__container {
- margin-top: -2rem;
- }
 }
 
 .query-builder__usage-viewer {