implementation

DevExpress · Sep 8, 2023 · 51d6dcf · 51d6dcf
1 parent a9a5dbf
commit 51d6dcf
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 9 deletions.
diff --git a/...me/js/renovation/ui/scheduler/workspaces/base/header_panel/date_header/dateHeaderText.tsx b/...me/js/renovation/ui/scheduler/workspaces/base/header_panel/date_header/dateHeaderText.tsx
@@ -17,7 +17,7 @@ export const viewFunction = ({
     {
       splitText
         // eslint-disable-next-line react/jsx-key
-        ? textParts.map((part) => (<span className="dx-scheduler-header-panel-cell-date">{part}</span>))
+        ? textParts.map((part) => (<div className="dx-scheduler-header-panel-cell-date"><span>{part}</span></div>))
         : text
     }
   </Fragment>

diff --git a/...devextreme/js/renovation/ui/scheduler/workspaces/base/header_panel/date_header/layout.tsx b/...devextreme/js/renovation/ui/scheduler/workspaces/base/header_panel/date_header/layout.tsx
@@ -18,7 +18,7 @@ import { isHorizontalGroupingApplied } from '../../../utils';
 import { DateHeaderCell } from './cell';
 import getThemeType from '../../../../../../utils/getThemeType';
 
-const { isMaterial } = getThemeType();
+const { isMaterial, isFluent } = getThemeType();
 
 export const viewFunction = ({
   isHorizontalGrouping,
@@ -73,7 +73,7 @@ export const viewFunction = ({
               dateCellTemplate={dateCellTemplate}
               key={key}
               colSpan={colSpan}
-              splitText={isMaterial}
+              splitText={isMaterial || isFluent}
             />
           ))}
         </Row>

diff --git a/...xtreme/js/renovation/ui/scheduler/workspaces/timeline/header_panel/date_header/layout.tsx b/...xtreme/js/renovation/ui/scheduler/workspaces/timeline/header_panel/date_header/layout.tsx
@@ -9,7 +9,7 @@ import { DateHeaderCell } from '../../../base/header_panel/date_header/cell';
 import { DateHeaderLayoutProps } from '../../../base/header_panel/date_header/layout';
 import getThemeType from '../../../../../../utils/getThemeType';
 
-const { isMaterial } = getThemeType();
+const { isMaterial, isFluent } = getThemeType();
 
 export const viewFunction = ({
   isHorizontalGrouping,
@@ -38,7 +38,7 @@ export const viewFunction = ({
         const rowsCount = dataMap.length;
         const isTimeCellTemplate = rowsCount - 1 === rowIndex;
         const isWeekDayRow = rowsCount > 1 && rowIndex === 0;
-        const splitText = isMaterial && (isMonthDateHeader || isWeekDayRow);
+        const splitText = (isMaterial || isFluent) && (isMonthDateHeader || isWeekDayRow);
 
         let validLeftVirtualCellCount: number | undefined = leftVirtualCellCount;
         let validRightVirtualCellCount: number | undefined = rightVirtualCellCount;

diff --git a/packages/devextreme/js/renovation/utils/getThemeType.ts b/packages/devextreme/js/renovation/utils/getThemeType.ts
@@ -1,11 +1,14 @@
-import { isMaterial, isCompact, current } from '../../ui/themes';
+import {
+  isFluent, isMaterial, isCompact, current,
+} from '../../ui/themes';
 
-const getThemeType = (): { isCompact: boolean; isMaterial: boolean } => {
+const getThemeType = (): { isCompact: boolean; isMaterial: boolean; isFluent: boolean } => {
   const theme = current();
 
   return {
     isCompact: isCompact(theme),
     isMaterial: isMaterial(theme),
+    isFluent: isFluent(theme),
   };
 };
 

diff --git a/packages/devextreme/js/ui/themes.d.ts b/packages/devextreme/js/ui/themes.d.ts
@@ -34,8 +34,10 @@ export default class themes {
      */
     static initialized(callback: Function): void;
     static isMaterial(theme: string): boolean;
+    static isFluent(theme: string): boolean;
 }
 
 export function current(): string;
+export function isFluent(theme: string): boolean;
 export function isMaterial(theme: string): boolean;
 export function isCompact(theme: string): boolean;
diff --git a/packages/devextreme/js/ui/themes.js b/packages/devextreme/js/ui/themes.js
@@ -318,6 +318,10 @@ function isTheme(themeRegExp, themeName) {
     return new RegExp(themeRegExp).test(themeName);
 }
 
+export function isFluent(themeName) {
+    return isTheme('fluent', themeName);
+}
+
 export function isMaterial(themeName) {
     return isTheme('material', themeName);
 }
@@ -445,6 +449,7 @@ export default {
     isDark,
     isGeneric,
     isMaterial,
+    isFluent,
     detachCssClasses,
     attachCssClasses,
     current,

diff --git a/packages/devextreme/scss/widgets/fluent/scheduler/_index.scss b/packages/devextreme/scss/widgets/fluent/scheduler/_index.scss
@@ -220,9 +220,26 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
 
 
   &.dx-scheduler-header-panel-current-time-cell {
+    color: $scheduler-panel-text-color;
+
     &::before {
       content: none;
     }
+
+    > div:last-child {
+      span {
+        color: $scheduler-appointment-text-color;
+        background-color: $scheduler-current-time-cell-color;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+        width: 28px;
+        height: 28px;
+        margin-top: 3px;
+        margin-bottom: 4px;
+      }
+    }
   }
 
   .dx-scheduler-header-panel-cell-date {
@@ -240,7 +257,7 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
 
     &:last-child {
       font-size: $fluent-scheduler-header-panel-day-font-size;
-      line-height: $fluent-scheduler-header-panel-day-font-size + 5;
+      line-height: $fluent-scheduler-header-panel-day-font-size + 19;
     }
   }
 }

diff --git a/packages/devextreme/scss/widgets/fluent/scheduler/_sizes.scss b/packages/devextreme/scss/widgets/fluent/scheduler/_sizes.scss
@@ -52,7 +52,7 @@ $scheduler-timeline-cell-height: 50px !default;
 
   $fluent-scheduler-toolbar-item-offset: 0 16px !default;
   $fluent-scheduler-navigator-height: 36px !default;
-  $fluent-scheduler-header-panel-day-font-size: 30px !default;
+  $fluent-scheduler-header-panel-day-font-size: 16px !default;
 
   $fluent-scheduler-appointment-tooltip-title-font-size: 18px !default;
   $fluent-scheduler-appointment-tooltip-date-font-size: 14px !default;