diff --git a/packages/devextreme/js/renovation/ui/scheduler/workspaces/base/header_panel/date_header/dateHeaderText.tsx b/packages/devextreme/js/renovation/ui/scheduler/workspaces/base/header_panel/date_header/dateHeaderText.tsx index b2a755872b0f..9f5d2785a065 100644 --- a/packages/devextreme/js/renovation/ui/scheduler/workspaces/base/header_panel/date_header/dateHeaderText.tsx +++ b/packages/devextreme/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) => ({part})) + ? textParts.map((part) => (
{part}
)) : text } diff --git a/packages/devextreme/js/renovation/ui/scheduler/workspaces/base/header_panel/date_header/layout.tsx b/packages/devextreme/js/renovation/ui/scheduler/workspaces/base/header_panel/date_header/layout.tsx index 886e6a14b14d..a83585363194 100644 --- a/packages/devextreme/js/renovation/ui/scheduler/workspaces/base/header_panel/date_header/layout.tsx +++ b/packages/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} /> ))} diff --git a/packages/devextreme/js/renovation/ui/scheduler/workspaces/timeline/header_panel/date_header/layout.tsx b/packages/devextreme/js/renovation/ui/scheduler/workspaces/timeline/header_panel/date_header/layout.tsx index aa95a4a405a5..10a8c9e1b775 100644 --- a/packages/devextreme/js/renovation/ui/scheduler/workspaces/timeline/header_panel/date_header/layout.tsx +++ b/packages/devextreme/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 index 36f6374f0085..e50665137056 100644 --- 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 index 67df532f3244..664a3ee14679 100644 --- 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 index 7d03e800ddc0..80c10a5ed4e3 100644 --- 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 index ae802e89d67a..7285af718cd4 100644 --- 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 index 113e99bef902..fd504b76c713 100644 --- 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;