Dash fixed header redesign

src/i18n-keysets/dash.main.view/en.json

@@ -16,5 +16,7 @@
   "label_updating": "Updating",
   "toast_paste-invalid-workbook-entry": "Pasting widgets linked to objects from another workbook is forbidden",
   "toast_unsaved": "There are unsaved changes on the page. Are you sure?",
+  "tooltip_collapse-fixed-group": "Collapse pinned group",
+  "tooltip_expand-fixed-group": "Expand pinned group",
   "warning_paste-invalid-workbook-entry": "To work with this object within another workbook, please migrate all linked objects from the source workbook. <link>Migrating objects to workbooks</link>"
 }

src/i18n-keysets/dash.main.view/ru.json

@@ -16,5 +16,7 @@
   "label_updating": "Обновление",
   "toast_paste-invalid-workbook-entry": "Не допускается вставка виджетов, у которых есть связи с объектами из другого воркбука",
   "toast_unsaved": "На странице есть несохраненные изменения. Вы уверены?",
+  "tooltip_collapse-fixed-group": "Свернуть закрепленную группу",
+  "tooltip_expand-fixed-group": "Развернуть закрепленную группу",
   "warning_paste-invalid-workbook-entry": "Чтобы работать с объектом в рамках другого воркбука, пожалуйста, перенесите в этот воркбук все связанные объекты из исходного воркбука. <link>Миграция объектов в воркбук</link>"
 }

src/shared/constants/qa/dash.ts

@@ -85,6 +85,13 @@ export enum DashCommonQa {
     RelationsRowPopover = 'dialog-relations-row-popover',
 }
 
+export enum FixedHeaderQa {
+    Wrapper = 'dash-fixed-header-wrapper',
+    Container = 'dash-fixed-header-containter',
+    Controls = 'dash-fixed-header-controls',
+    ExpandCollapseButton = 'dash-fixed-header-expand-collapse-button',
+}
+
 export enum DashRelationTypes {
     output = 'relation-type-option-output',
     input = 'relation-type-option-input',
@@ -102,11 +109,6 @@ export enum DashBodyQa {
     ContentWrapper = 'dash-body-content-wrapper',
 }
 
-export enum FixedHeaderQa {
-    Container = 'dash-fixed-header-containter',
-    Controls = 'dash-fixed-header-controls',
-}
-
 export enum DashTabsQA {
     Root = 'dash-tabs',
 }

src/ui/components/DashKit/utils.ts

@@ -11,12 +11,7 @@ import {
     CHARTKIT_SCROLLABLE_NODE_CLASSNAME,
 } from '../../libs/DatalensChartkit/ChartKit/helpers/constants';
 
-import {
-    FIXED_GROUP_HEADER_ID,
-    FIXED_HEADER_GROUP_LINE_MAX_ROWS,
-    MAX_AUTO_HEIGHT_PX,
-    MIN_AUTO_HEIGHT_PX,
-} from './constants';
+import {FIXED_GROUP_HEADER_ID, MAX_AUTO_HEIGHT_PX, MIN_AUTO_HEIGHT_PX} from './constants';
 
 /*
     The description is taken from dashkit (removed from there), but the meaning has not changed much.
@@ -163,9 +158,6 @@ export function adjustWidgetLayout({
             needSetDefault: false,
             adjustedWidgetLayout: {
                 ...correspondedLayoutItem,
-                h: FIXED_HEADER_GROUP_LINE_MAX_ROWS,
-                maxH: FIXED_HEADER_GROUP_LINE_MAX_ROWS,
-                minH: FIXED_HEADER_GROUP_LINE_MAX_ROWS,
             },
         });
         return;

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);
     }
 }

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;
+    }
 }