feat: improve pbi filter css (#542)

* feat: improve pbi filter css * Prettified Code! --------- Co-authored-by: Gustav-Eikaas <Gustav-Eikaas@users.noreply.github.com>
equinor · Nov 23, 2023 · 5bf1547 · 5bf1547
1 parent 23b1dff
commit 5bf1547
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 41 deletions.
diff --git a/packages/power-bi/package.json b/packages/power-bi/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@equinor/workspace-powerbi",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "type": "module",
   "sideEffects": false,
   "license": "MIT",

diff --git a/packages/power-bi/src/lib/components/Filter/Filter.tsx b/packages/power-bi/src/lib/components/Filter/Filter.tsx
@@ -11,6 +11,7 @@ import { search, playlist_add, drag_handle } from '@equinor/eds-icons';
 import { tokens } from '@equinor/eds-tokens';
 import { Skeleton } from '../skeleton/Skeleton';
 import { getVisibleFiltersFromLocalStorage, useVisibleFilters } from '../../hooks/useVisibleFilterGroups';
+import styled from 'styled-components';
 
 Icon.add({ search, playlist_add, drag_handle });
 
@@ -232,23 +233,22 @@ export const PowerBIFilter = ({ report, options }: PowerBIFilterProps): JSX.Elem
 
 function QuickFilterLoading() {
   return (
-    <div
-      style={{
-        height: '48px',
-        width: '100%',
-        display: 'flex',
-        background: tokens.colors.ui.background__light.hex,
-        alignItems: 'center',
-        gap: '1em',
-        paddingLeft: '1em',
-      }}
-    >
-      <Skeleton height={24} width={160} />
-      <Skeleton height={24} width={160} />
-      <Skeleton height={24} width={160} />
-      <Skeleton height={24} width={160} />
-      <Skeleton height={24} width={160} />
-      <Skeleton height={24} width={160} />
-    </div>
+    <StyledQuickFilterLoading>
+      {new Array(20).fill(null).map(() => (
+        <Skeleton style={{ gridRow: 1 }} height={24} width={160} />
+      ))}
+    </StyledQuickFilterLoading>
   );
 }
+
+const StyledQuickFilterLoading = styled.div`
+  height: 48px;
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, min-content));
+  grid-template-rows: 1fr;
+  background-color: ${tokens.colors.ui.background__light.hex};
+  align-items: center;
+  gap: 1em;
+  padding-left: 1em;
+`;
diff --git a/packages/power-bi/src/lib/components/QuickFilter/QuickFilter.tsx b/packages/power-bi/src/lib/components/QuickFilter/QuickFilter.tsx
@@ -63,25 +63,25 @@ export const PowerBIQuickFilter = ({ controller }: PowerBIQuickFilterProps): JSX
     <FilterWrapper>
       {!isFilterExpanded && (
         <StyledCompactFilterWrapper>
-          <FilterBar>
-            <div style={{ display: 'flex', width: '100%', gap: '2em', flexDirection: 'row-reverse' }}>
-              {slicerFilters.map((s, i) => {
-                i < 9 && shownFilters.push(s.type);
-                return (
-                  i < 9 && (
-                    <PowerBiFilterGroup
-                      activeFilters={activeFilters[s.type]}
-                      controller={controller}
-                      handleOnChange={(filter: PowerBiFilterItem, singleClick?: boolean) =>
-                        handleOnChange(s, filter, singleClick)
-                      }
-                      group={s}
-                      key={s.type + i}
-                    />
-                  )
-                );
-              })}
-            </div>
+          <StyledQuickFilterWrapper>
+            {slicerFilters.map((s, i) => {
+              i < 9 && shownFilters.push(s.type);
+              return (
+                i < 9 && (
+                  <PowerBiFilterGroup
+                    activeFilters={activeFilters[s.type]}
+                    controller={controller}
+                    handleOnChange={(filter: PowerBiFilterItem, singleClick?: boolean) =>
+                      handleOnChange(s, filter, singleClick)
+                    }
+                    group={s}
+                    key={s.type + i}
+                  />
+                )
+              );
+            })}
+          </StyledQuickFilterWrapper>
+          <StyledFilterButtons>
             <OtherFiltersAppliedInfo activeFilters={calculateHiddenFilters(shownFilters, activeFilters)} />
             <FilterButtonContainer>
               <FilterClearIcon isDisabled={!isAnyFiltersActive()} onClick={async () => await resetFilter()} />
@@ -90,14 +90,27 @@ export const PowerBIQuickFilter = ({ controller }: PowerBIQuickFilterProps): JSX
                 {isFilterExpanded ? <FilterCollapseIcon /> : <FilterExpandIcon />}
               </div>
             </FilterButtonContainer>
-          </FilterBar>
+          </StyledFilterButtons>
         </StyledCompactFilterWrapper>
       )}
       {isFilterExpanded && <ExpandedFilter controller={controller} />}
     </FilterWrapper>
   );
 };
 
+const StyledFilterButtons = styled.div`
+  background: ${tokens.colors.ui.background__light.hex};
+`;
+
+const StyledQuickFilterWrapper = styled.div`
+  display: grid;
+  width: 100%;
+  justify-content: flex-end;
+  grid-template-columns: repeat(auto-fit, minmax(60px, max-content));
+  gap: 2em;
+  grid-template-rows: 1fr;
+`;
+
 const FilterButtonContainer = styled.div`
   display: flex;
   align-items: center;

diff --git a/packages/power-bi/src/lib/components/QuickFilter/quickFilter.styles.ts b/packages/power-bi/src/lib/components/QuickFilter/quickFilter.styles.ts
@@ -5,4 +5,7 @@ export const StyledCompactFilterWrapper = styled.div`
   height: 50px;
   width: 100%;
   background-color: ${tokens.colors.ui.background__light.hex};
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-rows: 1fr;
 `;
diff --git a/packages/power-bi/src/lib/components/quickFilterGroup/QuickFilterGroup.tsx b/packages/power-bi/src/lib/components/quickFilterGroup/QuickFilterGroup.tsx
@@ -25,7 +25,7 @@ export const PowerBiFilterGroup = ({
   if (!activeFilters) return null;
   const isAllChecked = activeFilters.length === 0 || activeFilters.length === group.filterVals.length;
   return (
-    <div>
+    <div style={{ height: '50px', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
       <StyledFilterGroupWrapper onClick={() => setIsOpen((s) => !s)} ref={anchorEl}>
         <div>
           {getFilterHeaderText(

diff --git a/packages/workspace-fusion/package.json b/packages/workspace-fusion/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@equinor/workspace-fusion",
-  "version": "6.0.14",
+  "version": "6.0.15",
   "type": "module",
   "sideEffects": false,
   "license": "MIT",