Redesign dash fixed header (#1848)

datalens-tech · Nov 28, 2024 · cf59ce9 · cf59ce9
1 parent 4dc67fc
commit cf59ce9
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 69 deletions.
diff --git a/src/ui/components/DashKit/constants.ts b/src/ui/components/DashKit/constants.ts
@@ -3,7 +3,7 @@ export const MIN_AUTO_HEIGHT_PX = 44; // 2 rows + 1 margin
 
 export const DEFAULT_CONTROL_LAYOUT = {w: 8, h: 2};
 
-export const FIXED_HEADER_GROUP_COLS = 35;
+export const DASHKIT_COLS_AMOUNT = 36;
 export const FIXED_HEADER_GROUP_LINE_MAX_ROWS = 2;
 
 export const FIXED_GROUP_CONTAINER_ID = '__fixGCont';

diff --git a/src/ui/styles/variables.scss b/src/ui/styles/variables.scss
@@ -45,6 +45,7 @@ $monospaceFontFamily: 'Consolas', 'Menlo', 'Ubuntu Mono', monospace;
     --dl-color-entity-dataset: #0abe05;
     --dl-color-entity-dashboard: #ff8c3c;
 
+    --dl-color-fixed-header-background: var(--g-color-base-simple-hover-solid);
     --dl-color-text-workbook-icon: var(--g-color-text-dark-primary);
 
     &_theme_light {
@@ -55,7 +56,6 @@ $monospaceFontFamily: 'Consolas', 'Menlo', 'Ubuntu Mono', monospace;
         --w-disabled-item-background: rgba(0, 0, 0, 0.07);
         --dl-color-contrast-4: rgba(0, 0, 0, 0.04);
         --dl-color-base-workbook-icon: #d1dfff;
-        --dl-color-fixed-header-background: rgb(242, 242, 242);
     }
 
     &_theme_light-hc {
@@ -66,7 +66,6 @@ $monospaceFontFamily: 'Consolas', 'Menlo', 'Ubuntu Mono', monospace;
         --w-disabled-item-background: rgba(0, 0, 0, 0.07);
         --dl-color-contrast-4: rgba(0, 0, 0, 0.04);
         --dl-color-base-workbook-icon: #a8c3ff;
-        --dl-color-fixed-header-background: rgb(242, 242, 242);
     }
 
     &_theme_dark {
@@ -77,7 +76,6 @@ $monospaceFontFamily: 'Consolas', 'Menlo', 'Ubuntu Mono', monospace;
         --w-disabled-item-background: rgba(255, 255, 255, 0.07);
         --dl-color-contrast-4: rgba(255, 255, 255, 0.04);
         --dl-color-base-workbook-icon: #c2d0f0;
-        --dl-color-fixed-header-background: rgb(45, 40, 45);
     }
 
     &_theme_dark-hc {
@@ -88,6 +86,5 @@ $monospaceFontFamily: 'Consolas', 'Menlo', 'Ubuntu Mono', monospace;
         --w-disabled-item-background: rgba(255, 255, 255, 0.07);
         --dl-color-contrast-4: rgba(255, 255, 255, 0.04);
         --dl-color-base-workbook-icon: #c0d3fd;
-        --dl-color-fixed-header-background: rgb(30, 29, 30);
     }
 }
diff --git a/src/ui/units/dash/containers/Body/Body.scss b/src/ui/units/dash/containers/Body/Body.scss
@@ -27,6 +27,7 @@ $actionPanelDefaultBottom: 20px;
         width: 100%;
         transition: width 0.1s;
         padding: 20px #{$contentPadding} 48px;
+        background-color: var(--g-color-base-generic-ultralight);
 
         &_with-table-of-content:not(&_mobile) {
             width: calc(100% - 250px);
@@ -129,4 +130,8 @@ $actionPanelDefaultBottom: 20px;
     .edit-panel-item {
         width: 108px;
     }
+
+    &__fixed-header-settings-switcher {
+        width: inherit;
+    }
 }
diff --git a/src/ui/units/dash/containers/Body/Body.tsx b/src/ui/units/dash/containers/Body/Body.tsx
@@ -17,8 +17,8 @@ import type {
 } from '@gravity-ui/dashkit';
 import {DEFAULT_GROUP, MenuItems} from '@gravity-ui/dashkit/helpers';
 import {
-    ChevronsDown,
-    ChevronsUp,
+    ArrowChevronDown,
+    ArrowChevronUp,
     Gear,
     Pin,
     PinSlash,
@@ -52,9 +52,9 @@ import {
 } from 'shared';
 import type {DatalensGlobalState} from 'ui';
 import {
+    DASHKIT_COLS_AMOUNT,
     FIXED_GROUP_CONTAINER_ID,
     FIXED_GROUP_HEADER_ID,
-    FIXED_HEADER_GROUP_COLS,
     FIXED_HEADER_GROUP_LINE_MAX_ROWS,
 } from 'ui/components/DashKit/constants';
 import {getDashKitMenu} from 'ui/components/DashKit/helpers';
@@ -173,6 +173,13 @@ type DashkitGroupRenderWithContextProps = DashkitGroupRenderProps & {context: Me
 type GetPreparedCopyItemOptions<T extends object = {}> = (
     itemToCopy: PreparedCopyItemOptions<T>,
 ) => PreparedCopyItemOptions<T>;
+type DashKitGroupWithContextProps = Omit<DashKitGroup, 'render'> & {
+    render?: (
+        id: string,
+        children: React.ReactNode,
+        props: DashkitGroupRenderWithContextProps,
+    ) => React.ReactNode;
+};
 
 const GROUPS_WEIGHT = {
     [FIXED_GROUP_HEADER_ID]: 2,
@@ -245,6 +252,8 @@ class Body extends React.PureComponent<BodyProps> {
         byId: {},
         columns: 0,
     };
+    _fixedHeaderControlsRef: React.RefObject<HTMLDivElement>;
+    _fixedHeaderContainerRef: React.RefObject<HTMLDivElement>;
 
     state: DashBodyState = {
         fixedHeaderCollapsed: {},
@@ -255,40 +264,38 @@ class Body extends React.PureComponent<BodyProps> {
         loadedItemsMap: new Map<string, boolean>(),
     };
 
-    groups: DashKitGroup[] = [
-        {
-            id: FIXED_GROUP_HEADER_ID,
-            render: (id, children, props) =>
-                this.renderFixedGroupHeader(
-                    id,
-                    children,
-                    props as DashkitGroupRenderWithContextProps,
-                ),
-            gridProperties: (props) => {
-                return {
-                    ...props,
-                    cols: FIXED_HEADER_GROUP_COLS,
-                    maxRows: FIXED_HEADER_GROUP_LINE_MAX_ROWS,
-                    autoSize: false,
-                    compactType: 'horizontal-nowrap',
-                };
+    groups: DashKitGroupWithContextProps[];
+
+    constructor(props: BodyProps) {
+        super(props);
+
+        this.groups = [
+            {
+                id: FIXED_GROUP_HEADER_ID,
+                render: this.renderFixedGroupHeader,
+                gridProperties: (props) => {
+                    return {
+                        ...props,
+                        maxRows: FIXED_HEADER_GROUP_LINE_MAX_ROWS,
+                        autoSize: false,
+                        compactType: 'horizontal-nowrap',
+                    };
+                },
             },
-        },
-        {
-            id: FIXED_GROUP_CONTAINER_ID,
-            render: (id, children, props) =>
-                this.renderFixedGroupContainer(
-                    id,
-                    children,
-                    props as DashkitGroupRenderWithContextProps,
-                ),
-            gridProperties: getPropertiesWithResizeHandles,
-        },
-        {
-            id: DEFAULT_GROUP,
-            gridProperties: getPropertiesWithResizeHandles,
-        },
-    ];
+            {
+                id: FIXED_GROUP_CONTAINER_ID,
+                render: this.renderFixedGroupContainer,
+                gridProperties: getPropertiesWithResizeHandles,
+            },
+            {
+                id: DEFAULT_GROUP,
+                gridProperties: getPropertiesWithResizeHandles,
+            },
+        ];
+
+        this._fixedHeaderControlsRef = React.createRef();
+        this._fixedHeaderContainerRef = React.createRef();
+    }
 
     componentDidMount() {
         // if localStorage already have a dash item, we need to set it to state
@@ -477,7 +484,7 @@ class Body extends React.PureComponent<BodyProps> {
                             memo -= item.w;
                         }
                         return memo;
-                    }, FIXED_HEADER_GROUP_COLS);
+                    }, DASHKIT_COLS_AMOUNT);
 
                     const parentId =
                         itemCopy.h <= FIXED_HEADER_GROUP_LINE_MAX_ROWS && itemCopy.w <= leftSpace
@@ -590,8 +597,9 @@ class Body extends React.PureComponent<BodyProps> {
         if (mode === Mode.Edit) {
             return (
                 <DropdownMenu
+                    switcherWrapperClassName={b('fixed-header-settings-switcher')}
                     renderSwitcher={(props) => (
-                        <Button {...props} view={'raised'}>
+                        <Button {...props} view="raised" size="xl" width="max" pin="brick-round">
                             <Icon size={16} data={Gear} />
                         </Button>
                     )}
@@ -621,13 +629,26 @@ class Body extends React.PureComponent<BodyProps> {
             );
         } else if (hasFixedContainerElements) {
             return (
-                <Button onClick={this.toggleFixedHeader} view={'flat'}>
-                    <Icon data={isCollapsed ? ChevronsDown : ChevronsUp} />
+                <Button
+                    onClick={this.toggleFixedHeader}
+                    view="flat"
+                    size="xl"
+                    width="max"
+                    pin="brick-round"
+                >
+                    <Icon data={isCollapsed ? ArrowChevronDown : ArrowChevronUp} />
                 </Button>
             );
         } else {
             return (
-                <Button onClick={this.toggleFixedHeader} view={'flat'} disabled={true}>
+                <Button
+                    onClick={this.toggleFixedHeader}
+                    view="flat"
+                    size="xl"
+                    width="max"
+                    pin="brick-round"
+                    disabled={true}
+                >
                     <Icon data={Pin} />
                 </Button>
             );
@@ -651,6 +672,8 @@ class Body extends React.PureComponent<BodyProps> {
 
         return (
             <FixedHeaderControls
+                wrapperRef={this._fixedHeaderControlsRef}
+                containerRef={this._fixedHeaderContainerRef}
                 isEmpty={isEmpty}
                 key={`${id}_${this.props.tabId}`}
                 isCollapsed={fixedHeaderCollapsed}
@@ -679,6 +702,8 @@ class Body extends React.PureComponent<BodyProps> {
 
         return (
             <FixedHeaderContainer
+                wrapperRef={this._fixedHeaderContainerRef}
+                controlsRef={this._fixedHeaderControlsRef}
                 isEmpty={isEmpty}
                 key={`${id}_${this.props.tabId}`}
                 isCollapsed={fixedHeaderCollapsed}

diff --git a/src/ui/units/dash/containers/FixedHeader/FixedHeader.scss b/src/ui/units/dash/containers/FixedHeader/FixedHeader.scss
@@ -23,7 +23,6 @@ $fixedSectionOffset: 8px;
 
 .dash-fixed-header {
     &__controls {
-        display: flex;
         flex: 1;
         padding: 8px 0;
         min-height: 60px;
@@ -35,7 +34,7 @@ $fixedSectionOffset: 8px;
             top: 40px;
             background-color: var(
                 --dl-color-fixed-header-background,
-                var(--g-color-base-background)
+                var(--g-color-base-simple-hover-solid)
             );
             padding-left: 24px;
             padding-right: 24px;
@@ -48,28 +47,25 @@ $fixedSectionOffset: 8px;
         height: 60px;
         display: flex;
         flex-direction: row;
+
+        &_hidden {
+            display: none;
+        }
     }
 
     &__controls-grid {
+        position: relative;
         display: flex;
         flex-grow: 1;
 
         @include flexReactGridLayout;
     }
 
     &__controls-settings {
-        width: math.div(100%, 36) * 1;
-        flex-shrink: 0;
-        position: relative;
-    }
-
-    &__controls-settings-wrapper {
+        width: 20px;
         position: absolute;
-        inset: 0px 0px 0px 8px;
-        display: flex;
-        min-width: 28px;
-        align-items: center;
-        justify-content: end;
+        left: -24px;
+        top: 0;
     }
 
     &__container-placeholder {
@@ -102,7 +98,7 @@ $fixedSectionOffset: 8px;
             top: 100px;
             background-color: var(
                 --dl-color-fixed-header-background,
-                var(--g-color-base-background)
+                var(--g-color-base-simple-hover-solid)
             );
             border-bottom: 1px solid var(--g-color-line-generic);
             padding-left: 24px;