🎨 Fluent: Scheduler CSS fixes (part 5) (#25818)

packages/devextreme/js/__internal/scheduler/appointment_popup/m_form.ts

@@ -13,6 +13,7 @@ import DataSource from '@js/data/data_source';
 import messageLocalization from '@js/localization/message';
 import { Semaphore } from '@js/renovation/ui/scheduler/utils/semaphore/semaphore';
 import Form from '@js/ui/form';
+import { current, isFluent } from '@js/ui/themes';
 
 import { createAppointmentAdapter } from '../m_appointment_adapter';
 import timeZoneDataUtils from '../timezones/m_utils_timezones_data';
@@ -24,6 +25,8 @@ export const APPOINTMENT_FORM_GROUP_NAMES = {
   Recurrence: 'recurrenceGroup',
 };
 
+const stylingMode = isFluent(current()) ? 'filled' : undefined;
+
 const getDateWithStartHour = (date, startDayHour) => new Date(new Date(date).setHours(startDayHour));
 
 const validateAppointmentFormDate = (editor, value, previousValue) => {
@@ -51,6 +54,7 @@ const createDateBoxEditor = (dataField, colSpan, firstDayOfWeek, label, onValueC
     type: 'required',
   }],
   editorOptions: {
+    stylingMode,
     width: '100%',
     calendarOptions: {
       firstDayOfWeek,
@@ -272,6 +276,9 @@ export class AppointmentForm {
         label: {
           text: messageLocalization.format('dxScheduler-editorLabelTitle'),
         },
+        editorOptions: {
+          stylingMode,
+        },
       },
       {
         itemType: 'group',
@@ -363,6 +370,9 @@ export class AppointmentForm {
         label: {
           text: messageLocalization.format('dxScheduler-editorLabelDescription'),
         },
+        editorOptions: {
+          stylingMode,
+        },
       },
       {
         itemType: 'empty',

packages/devextreme/js/__internal/scheduler/m_recurrence_editor.ts

@@ -15,6 +15,7 @@ import DateBox from '@js/ui/date_box';
 import Editor from '@js/ui/editor/editor';
 import Form from '@js/ui/form';
 import NumberBox from '@js/ui/number_box';
+import { current, isFluent } from '@js/ui/themes';
 
 import { getRecurrenceProcessor } from './m_recurrence';
 
@@ -72,6 +73,8 @@ const repeatEndTypes = [
 
 const days = ['SU', 'MO', 'TU', 'WE', 'TH', 'FR', 'SA'];
 
+const stylingMode = isFluent(current()) ? 'filled' : undefined;
+
 class RecurrenceRule {
   _recurrenceProcessor = getRecurrenceProcessor();
 
@@ -257,6 +260,7 @@ class RecurrenceEditor extends Editor {
       editorType: 'dxSelectBox',
       cssClass: FREQUENCY_EDITOR,
       editorOptions: {
+        stylingMode,
         items: frequencies,
         value: freq,
         field: 'freq',
@@ -286,6 +290,7 @@ class RecurrenceEditor extends Editor {
           dataField: 'interval',
           editorType: 'dxNumberBox',
           editorOptions: {
+            stylingMode,
             format: '#',
             width: recurrentEditorNumberBoxWidth,
             min: 1,
@@ -381,6 +386,7 @@ class RecurrenceEditor extends Editor {
       dataField: 'bymonth',
       editorType: 'dxSelectBox',
       editorOptions: {
+        stylingMode,
         field: 'bymonth',
         items: months,
         value: this._monthOfYearByRules(),
@@ -404,6 +410,7 @@ class RecurrenceEditor extends Editor {
       dataField: 'bymonthday',
       editorType: 'dxNumberBox',
       editorOptions: {
+        stylingMode,
         min: 1,
         max: 31,
         format: '#',
@@ -600,6 +607,7 @@ class RecurrenceEditor extends Editor {
       .appendTo($editorWrapper);
 
     this._repeatCountEditor = this._createComponent(this._$repeatCountEditor, NumberBox, {
+      stylingMode,
       field: 'count',
       format: '#',
       width: recurrentEditorNumberBoxWidth,
@@ -643,6 +651,7 @@ class RecurrenceEditor extends Editor {
       .appendTo($editorWrapper);
 
     this._repeatUntilDate = this._createComponent(this._$repeatDateEditor, DateBox, {
+      stylingMode,
       field: 'until',
       value: repeatUntil,
       type: 'date',

packages/devextreme/js/__internal/scheduler/m_scheduler.ts

@@ -39,7 +39,7 @@ import {
   validateDayHours,
 } from '@js/renovation/ui/scheduler/view_model/to_test/views/utils/base';
 import { custom as customDialog } from '@js/ui/dialog';
-import { isMaterialBased } from '@js/ui/themes';
+import { isMaterial, isMaterialBased } from '@js/ui/themes';
 import errors from '@js/ui/widget/ui.errors';
 import Widget from '@js/ui/widget/ui.widget';
 
@@ -477,15 +477,21 @@ class Scheduler extends Widget<any> {
               if (!index) $(element).append(' ' as any);
             });
           },
-
-          _appointmentTooltipOffset: { x: 0, y: 11 },
           _appointmentTooltipButtonsPosition: 'top',
           _appointmentTooltipOpenButtonText: null,
           _appointmentCountPerCell: 1,
           _collectorOffset: 20,
           _appointmentOffset: 30,
         },
       },
+      {
+        device() {
+          return (isMaterial as any)();
+        },
+        options: {
+          _appointmentTooltipOffset: { x: 0, y: 11 },
+        },
+      },
     ]);
   }
 

packages/devextreme/js/__internal/scheduler/resources/m_utils.ts

@@ -9,6 +9,7 @@ import { isDefined } from '@js/core/utils/type';
 import { DataSource } from '@js/data/data_source/data_source';
 import { normalizeDataSourceOptions } from '@js/data/data_source/utils';
 import { hasResourceValue } from '@js/renovation/ui/scheduler/resources/hasResourceValue';
+import { current, isFluent } from '@js/ui/themes';
 
 export const getValueExpr = (resource) => resource.valueExpr || 'id';
 export const getDisplayExpr = (resource) => resource.displayExpr || 'text';
@@ -173,6 +174,7 @@ export const createResourceEditorModel = (resources, loadedResources) => resourc
       dataSource: dataSource.length ? dataSource : getWrappedDataSource(resource.dataSource),
       displayExpr: getDisplayExpr(resource),
       valueExpr: getValueExpr(resource),
+      stylingMode: isFluent(current()) ? 'filled' : 'outlined',
     },
     dataField,
     editorType: resource.allowMultiple ? 'dxTagBox' : 'dxSelectBox',

packages/devextreme/scss/widgets/base/scheduler/_index.scss

@@ -1,5 +1,6 @@
 $scheduler-appointment-base-color: null !default;
 $scheduler-appointment-start-color: null !default;
+$scheduler-appointment-active-color: null !default;
 $scheduler-base-border-color: null !default;
 $scheduler-accent-border-color: null !default;
 $scheduler-current-time-cell-color: null !default;
@@ -18,6 +19,7 @@ $scheduler-workspace-focused-cell-color: null !default;
 $scheduler-droppable-cell-background-color: null !default;
 $scheduler-appointment-text-color: null !default;
 $scheduler-fill-focused-appointment: null !default;
+$scheduler-is-shadow-color-for-focused-state: null !default;
 $scheduler-dd-appointment-hover-text-color: null !default;
 $scheduler-tooltip-appointment-text-color: null !default;
 $scheduler-timeline-cell-height: null !default;
@@ -106,7 +108,9 @@ $scheduler-appointment-form-label-padding: 20px;
   $scheduler-vertical-appointment-resizable-hovering-shadow: $scheduler-vertical-appointment-resizable-hovering-shadow,
   $scheduler-hovered-appointment-top-shadow-size: $scheduler-hovered-appointment-top-shadow-size,
   $scheduler-fill-focused-appointment: $scheduler-fill-focused-appointment,
+  $scheduler-is-shadow-color-for-focused-state: $scheduler-is-shadow-color-for-focused-state,
   $scheduler-appointment-start-color: $scheduler-appointment-start-color,
+  $scheduler-appointment-active-color: $scheduler-appointment-active-color,
   $scheduler-appointment-dragging-shadow: $scheduler-appointment-dragging-shadow,
   $scheduler-reduced-icon-offset: $scheduler-reduced-icon-offset,
 

packages/devextreme/scss/widgets/base/scheduler/appointment/_index.scss

@@ -8,7 +8,9 @@ $scheduler-vertical-appointment-hovering-shadow: null !default;
 $scheduler-vertical-appointment-resizable-hovering-shadow: null !default;
 $scheduler-hovered-appointment-top-shadow-size: null !default;
 $scheduler-fill-focused-appointment: null !default;
+$scheduler-is-shadow-color-for-focused-state: null !default;
 $scheduler-appointment-start-color: null !default;
+$scheduler-appointment-active-color: null !default;
 $scheduler-appointment-dragging-shadow: null !default;
 $scheduler-reduced-icon-offset: null !default;
 
@@ -29,7 +31,9 @@ $agenda-appointment-title-font-size: null !default;
   $vertical-appointment-resizable-hovering-shadow: $scheduler-vertical-appointment-resizable-hovering-shadow,
   $hovered-appointment-top-shadow-size: $scheduler-hovered-appointment-top-shadow-size,
   $fill-focused-appointment: $scheduler-fill-focused-appointment,
+  $is-shadow-color-for-focused-state: $scheduler-is-shadow-color-for-focused-state,
   $appointment-start-color: $scheduler-appointment-start-color,
+  $appointment-active-color: $scheduler-appointment-active-color,
   $appointment-dragging-shadow: $scheduler-appointment-dragging-shadow,
   $reduced-icon-offset: $scheduler-reduced-icon-offset
 );

packages/devextreme/scss/widgets/base/scheduler/appointment/regular/_index.scss

@@ -13,7 +13,9 @@ $vertical-appointment-resizable-hovering-shadow: null !default;
 $hovered-appointment-top-shadow-size: null !default;
 
 $fill-focused-appointment: null !default;
+$is-shadow-color-for-focused-state: null !default;
 $appointment-start-color: null !default;
+$appointment-active-color: null !default;
 
 $appointment-dragging-shadow: null !default;
 
@@ -38,16 +40,33 @@ $reduced-icon-offset: null !default;
       left: 0;
       right: 0;
       bottom: 0;
+    }
 
-      // T314382
-      @if not $fill-focused-appointment {
-        background-color: $appointment-start-color;
-        opacity: 0.98;
+    // T314382
+    @if not $fill-focused-appointment {
+      @if $is-shadow-color-for-focused-state {
+        &:not(.dx-scheduler-appointment-drag-source)::before {
+          @include dx-scheduler-appointment-shadow-color-mixin();
+        }
+      } @else {
+        &:not(.dx-scheduler-appointment-has-resource-color):not(.dx-scheduler-appointment-drag-source)::before {
+          background-color: $appointment-active-color;
+          border-radius: 4px;
+        }
+
+        &.dx-scheduler-appointment-has-resource-color:not(.dx-scheduler-appointment-drag-source)::before {
+          @include dx-scheduler-appointment-shadow-color-mixin();
+        }
       }
     }
   }
 }
 
+@mixin dx-scheduler-appointment-shadow-color-mixin() {
+  background-color: $appointment-start-color;
+  opacity: 0.98;
+}
+
 .dx-scheduler-appointment-content-date {
   opacity: 0.7;
   display: inline-block;

packages/devextreme/scss/widgets/fluent/pivotGrid/_index.scss

@@ -187,8 +187,6 @@ $fluent-pivotgridfieldchooser-field-min-height: 36px;
 }
 
 .dx-pivotgridfieldchooser {
-  background-color: $pivotgrid-area-background;
-
   .dx-area-icon {
     width: $fluent-button-icon-size;
     height: $fluent-button-icon-size;

packages/devextreme/scss/widgets/fluent/scheduler/_colors.scss

@@ -38,6 +38,7 @@ $scheduler-appointment-base-color: null !default;
 * $type color
 */
 $scheduler-appointment-start-color: color.change($base-shadow-color, $alpha: 0.3) !default;
+$scheduler-appointment-active-color: $base-brand2-bg-active;
 
 /**
 * $name 60. Focused cell color
@@ -72,6 +73,7 @@ $scheduler-header-bg: $base-bg !default;
 $scheduler-alldaypanel-bg: $base-element-bg !default;
 $scheduler-other-month-cell-opacity: 0.5 !default;
 $scheduler-fill-focused-appointment: false !default;
+$scheduler-is-shadow-color-for-focused-state: false !default;
 $scheduler-time-indicator-background-color: rgba(0, 0, 0, 0.03) !default;
 $fluent-scheduler-toolbar-color: $base-accent;
 $fluent-scheduler-toolbar-active-color: color.change($base-accent, $alpha: 0.08);

packages/devextreme/scss/widgets/fluent/scheduler/_index.scss

@@ -12,6 +12,7 @@
   $scheduler-appointment-overlay-bg: $scheduler-appointment-overlay-bg,
   $scheduler-appointment-base-color: $scheduler-appointment-base-color,
   $scheduler-appointment-start-color: $scheduler-appointment-start-color,
+  $scheduler-appointment-active-color: $scheduler-appointment-active-color,
   $scheduler-base-border-color: $scheduler-base-border-color,
   $scheduler-accent-border-color: $scheduler-accent-border-color,
   $scheduler-current-time-cell-color: $scheduler-current-time-cell-color,
@@ -31,6 +32,7 @@
   $scheduler-droppable-cell-background-color: $scheduler-droppable-cell-background-color,
   $scheduler-appointment-text-color: $scheduler-appointment-text-color,
   $scheduler-fill-focused-appointment: $scheduler-fill-focused-appointment,
+  $scheduler-is-shadow-color-for-focused-state: $scheduler-is-shadow-color-for-focused-state,
   $scheduler-dd-appointment-hover-text-color: $scheduler-dd-appointment-hover-text-color,
 
   $agenda-appointment-recurrence-icon-color: $agenda-appointment-recurrence-icon-color,

packages/devextreme/scss/widgets/fluent/scheduler/_sizes.scss

@@ -51,7 +51,7 @@ $scheduler-timeline-cell-height: 50px !default;
 @if $size == "default" {
   $fluent-scheduler-workspace-date-table-cell-height: 38px !default;
 
-  $fluent-scheduler-toolbar-item-offset: 0 16px !default;
+  $fluent-scheduler-toolbar-item-offset: 0 12px !default;
   $fluent-scheduler-navigator-height: 36px !default;
   $fluent-scheduler-header-panel-day-font-size: 16px !default;
 
@@ -78,7 +78,7 @@ $scheduler-timeline-cell-height: 50px !default;
 @else if $size == "compact" {
   $fluent-scheduler-workspace-date-table-cell-height: 28px !default;
 
-  $fluent-scheduler-toolbar-item-offset: 0 11px !default;
+  $fluent-scheduler-toolbar-item-offset: 0 8px !default;
   $fluent-scheduler-navigator-height: 28px !default;
   $fluent-scheduler-header-panel-day-font-size: 20px !default;
 

packages/devextreme/scss/widgets/generic/scheduler/_colors.scss

@@ -81,6 +81,7 @@ $scheduler-tab-selected-before-bg: null !default;
 $scheduler-tab-focused-border-color: null !default;
 $scheduler-other-month-cell-opacity: null !default;
 $scheduler-fill-focused-appointment: null !default;
+$scheduler-is-shadow-color-for-focused-state: true !default;
 $scheduler-time-indicator-background-color: null !default;
 $scheduler-first-month-cell-background-color: null !default;
 $scheduler-time-panel-background-color: null !default;
@@ -409,3 +410,5 @@ $agenda-appointment-text-color: null !default;
   $agenda-appointment-active-bg: color.change(#000, $alpha: 0.08) !default;
 }
 
+$scheduler-appointment-active-color: $scheduler-appointment-start-color;
+

packages/devextreme/scss/widgets/generic/scheduler/_index.scss

@@ -31,6 +31,7 @@
   $scheduler-droppable-cell-background-color: $scheduler-droppable-cell-background-color,
   $scheduler-appointment-text-color: $scheduler-appointment-text-color,
   $scheduler-fill-focused-appointment: $scheduler-fill-focused-appointment,
+  $scheduler-is-shadow-color-for-focused-state: $scheduler-is-shadow-color-for-focused-state,
   $scheduler-dd-appointment-hover-text-color: $scheduler-dd-appointment-hover-text-color,
 
   $agenda-appointment-recurrence-icon-color: $agenda-appointment-recurrence-icon-color,

packages/devextreme/scss/widgets/material/scheduler/_colors.scss

@@ -38,6 +38,7 @@ $scheduler-appointment-base-color: $base-accent !default;
 * $type color
 */
 $scheduler-appointment-start-color: color.change($base-shadow-color, $alpha: 0.3) !default;
+$scheduler-appointment-active-color: $scheduler-appointment-start-color;
 
 /**
 * $name 60. Focused cell color
@@ -72,6 +73,7 @@ $scheduler-header-bg: $base-bg !default;
 $scheduler-alldaypanel-bg: $base-element-bg !default;
 $scheduler-other-month-cell-opacity: 0.5 !default;
 $scheduler-fill-focused-appointment: false !default;
+$scheduler-is-shadow-color-for-focused-state: true !default;
 $scheduler-time-indicator-background-color: rgba(0, 0, 0, 0.03) !default;
 $scheduler-first-month-cell-background-color: color.adjust($scheduler-appointment-base-color, $alpha: -0.85) !default;
 $material-scheduler-toolbar-color: $base-accent;

packages/devextreme/scss/widgets/material/scheduler/_index.scss

@@ -31,6 +31,7 @@
   $scheduler-droppable-cell-background-color: $scheduler-droppable-cell-background-color,
   $scheduler-appointment-text-color: $scheduler-appointment-text-color,
   $scheduler-fill-focused-appointment: $scheduler-fill-focused-appointment,
+  $scheduler-is-shadow-color-for-focused-state: $scheduler-is-shadow-color-for-focused-state,
   $scheduler-dd-appointment-hover-text-color: $scheduler-dd-appointment-hover-text-color,
 
   $agenda-appointment-recurrence-icon-color: $agenda-appointment-recurrence-icon-color,

packages/devextreme/testing/tests/DevExpress.ui/defaultOptions.tests.js

@@ -1526,7 +1526,6 @@ testComponentDefaults(Accordion,
 testComponentDefaults(Scheduler,
     {},
     {
-        _appointmentTooltipOffset: { x: 0, y: 11 },
         _appointmentTooltipButtonsPosition: 'top',
         _appointmentTooltipOpenButtonText: null,
         _appointmentCountPerCell: 1,
@@ -1541,3 +1540,17 @@ testComponentDefaults(Scheduler,
         themes.isMaterialBased = this.origIsMaterialBased;
     }
 );
+
+testComponentDefaults(Scheduler,
+    {},
+    {
+        _appointmentTooltipOffset: { x: 0, y: 11 }
+    },
+    function() {
+        this.origIsMaterial = themes.isMaterial;
+        themes.isMaterial = function() { return true; };
+    },
+    function() {
+        themes.isMaterial = this.origIsMaterial;
+    }
+);