diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__daily (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__daily (fluent.blue.light).png index e094318bb33e..33a34a12c34e 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__daily (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__daily (fluent.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__daily (fluent.blue.light)_mask.png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__daily (fluent.blue.light)_mask.png index 019c3fa7fe72..866eb5abfb0e 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__daily (fluent.blue.light)_mask.png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__daily (fluent.blue.light)_mask.png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__hourly (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__hourly (fluent.blue.light).png index 3d57919e0c00..5b7d36deb385 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__hourly (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__hourly (fluent.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__hourly (fluent.blue.light)_mask.png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__hourly (fluent.blue.light)_mask.png index 019c3fa7fe72..4edc5cb29143 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__hourly (fluent.blue.light)_mask.png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__hourly (fluent.blue.light)_mask.png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__mobile (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__mobile (fluent.blue.light).png index 1feb9d4ca47a..5f1da00d5ad2 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__mobile (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__mobile (fluent.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__mobile (fluent.blue.light)_mask.png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__mobile (fluent.blue.light)_mask.png index 81a0513825c9..5c3ea3ce5684 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__mobile (fluent.blue.light)_mask.png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__mobile (fluent.blue.light)_mask.png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__monthly (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__monthly (fluent.blue.light).png index 7dda6ff240b6..5e118b5d5a8f 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__monthly (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__monthly (fluent.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__monthly (fluent.blue.light)_mask.png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__monthly (fluent.blue.light)_mask.png index 5c8d4850f564..3707a11c9666 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__monthly (fluent.blue.light)_mask.png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__monthly (fluent.blue.light)_mask.png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__readonly (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__readonly (fluent.blue.light).png index 988d7dc63b20..af2a3210399d 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__readonly (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__readonly (fluent.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__readonly (fluent.blue.light)_mask.png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__readonly (fluent.blue.light)_mask.png index 176cb1a3b240..bf1f8ff5c902 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__readonly (fluent.blue.light)_mask.png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__readonly (fluent.blue.light)_mask.png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__weekly (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__weekly (fluent.blue.light).png index bf5079707f88..9129592dfb31 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__weekly (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__weekly (fluent.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__weekly (fluent.blue.light)_mask.png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__weekly (fluent.blue.light)_mask.png index 8aa24cb17ab8..bf1f8ff5c902 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__weekly (fluent.blue.light)_mask.png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__weekly (fluent.blue.light)_mask.png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__weekly__mon-wed-fri (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__weekly__mon-wed-fri (fluent.blue.light).png deleted file mode 100644 index 5525af0bfff6..000000000000 Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__weekly__mon-wed-fri (fluent.blue.light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__weekly__mon-wed-fri (fluent.blue.light)_mask.png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__weekly__mon-wed-fri (fluent.blue.light)_mask.png deleted file mode 100644 index b373dfe7c98b..000000000000 Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__weekly__mon-wed-fri (fluent.blue.light)_mask.png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-icons (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-icons (fluent.blue.light).png index bcf573a56c87..b2587c5f6847 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-icons (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-icons (fluent.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-icons (fluent.blue.light)_mask.png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-icons (fluent.blue.light)_mask.png index d54bbfdba373..244c470549f5 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-icons (fluent.blue.light)_mask.png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-icons (fluent.blue.light)_mask.png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__yearly (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__yearly (fluent.blue.light).png index 6bf0a8d4d3e1..4bbdce6c7eb8 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__yearly (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__yearly (fluent.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__yearly (fluent.blue.light)_mask.png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__yearly (fluent.blue.light)_mask.png index 2a3edd3ed05d..737e178ee967 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__yearly (fluent.blue.light)_mask.png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__yearly (fluent.blue.light)_mask.png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/recurrence-form.visual.ts b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/recurrence-form.visual.ts index 2d9e90fd4d99..e6754d3c33b0 100644 --- a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/recurrence-form.visual.ts +++ b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/recurrence-form.visual.ts @@ -31,7 +31,7 @@ const SCHEDULER_SELECTOR = '#container'; t, takeScreenshot, `scheduler__appointment__recurrence-form__${frequency.toLowerCase()}.png`, - { element: appointmentPopup.recurrence.group }, + { element: appointmentPopup.contentElement }, ); await t @@ -45,40 +45,6 @@ const SCHEDULER_SELECTOR = '#container'; })); }); -test('firstDayOfWeek is applied to recurrence form', async (t) => { - const { takeScreenshot, compareResults } = createScreenshotsComparer(t); - - const appointment = { - text: 'Weekly Appointment', - startDate: new Date('2024-01-01T10:00:00'), - endDate: new Date('2024-01-01T11:00:00'), - }; - - const scheduler = new Scheduler(SCHEDULER_SELECTOR); - const appointmentPopup = await scheduler.openAppointmentPopup(t, appointment, false); - - await appointmentPopup.openRecurrenceForm(t, 'Weekly'); - await appointmentPopup.selectRecurrenceWeekDays(t, [0, 2, 4]); - await appointmentPopup.setRecurrenceEnd(t, 'count', 15); - - await testScreenshot( - t, - takeScreenshot, - 'scheduler__appointment__recurrence-form__weekly__mon-wed-fri.png', - { element: appointmentPopup.recurrence.group }, - ); - - await t - .expect(compareResults.isValid()) - .ok(compareResults.errorMessages()); -}).before(async () => createWidget('dxScheduler', { - dataSource: [], - views: ['week'], - currentView: 'week', - currentDate: new Date(2024, 0, 1), - firstDayOfWeek: 1, -})); - test('recurrence form with icons', async (t) => { const appointment = { text: 'Appointment', @@ -135,7 +101,7 @@ test('recurrence form readonly state', async (t) => { t, takeScreenshot, 'scheduler__appointment__recurrence-form__readonly.png', - { element: appointmentPopup.recurrence.group }, + { element: appointmentPopup.contentElement }, ); await t diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss index 620d7de3db56..7461494a91a2 100644 --- a/packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss @@ -31,8 +31,8 @@ $agenda-appointment-text-color: null !default; $agenda-appointment-title-font-size: null !default; $scheduler-header-panel-table-cell-height: null !default; -$scheduler-days-of-week-button-size: null !default; -$scheduler-recurrence-end-item-height: null !default; +$scheduler-appointment-popup-repeat-end-item-height: null !default; +$scheduler-appointment-popup-repeat-end-item-vertical-margin: null !default; // Agenda $agenda-appointment-recurrence-icon-color: null !default; @@ -547,88 +547,32 @@ $scheduler-appointment-form-label-padding: 20px; } } - .dx-scheduler-form-recurrence-end-group .dx-item { - .dx-texteditor-input-container .dx-texteditor-input { - padding-inline-end: 0; - } - } - - /* Recurrence End section - Grid layout with equal heights */ + /* Recurrence End Group */ .dx-scheduler-form-recurrence-end-group { .dx-field-item-label { - display: flex; - align-items: center; - } - - > .dx-box-item { - height: 100%; - margin: 0; - padding: 0; - } - } - - // RadioGroup and Inputs columns - .dx-scheduler-form-recurrence-end-editors { - .dx-field-item-content { - height: 100%; - padding: 0; - } - - .dx-radiogroup { - padding: 0; - height: 100%; + height: $scheduler-appointment-popup-repeat-end-item-height; + line-height: $scheduler-appointment-popup-repeat-end-item-height; } - .dx-item.dx-radiobutton { - margin: 8px 0 0 0; - padding: 0; - height: $scheduler-recurrence-end-item-height !important; // stylelint-disable-line declaration-no-important - - &:first-child { - margin-top: 0; - } - } - - .dx-radiogroup-item { - align-items: center; - } - - .dx-box-item-content { - height: 100%; - padding: 0; + .dx-radiobutton { + height: $scheduler-appointment-popup-repeat-end-item-height !important; // stylelint-disable-line declaration-no-important } - .dx-box-item { - height: $scheduler-recurrence-end-item-height; - margin: 0; - padding: 0; - - &:not(:first-child) { - margin-top: 8px; - } - - .dx-box-item-content { - height: $scheduler-recurrence-end-item-height; - padding: 0; + .dx-scheduler-form-recurrence-end-editors { + .dx-texteditor-input-container input.dx-texteditor-input { + padding-inline-end: 0; } - } - .dx-field-item, - .dx-empty-item { - height: $scheduler-recurrence-end-item-height; - margin: 0; - padding: 0 !important; // stylelint-disable-line declaration-no-important + margin: calc($scheduler-appointment-popup-repeat-end-item-vertical-margin / 2) 0; - .dx-field-item-content { - padding: 0 !important; // stylelint-disable-line declaration-no-important - height: $scheduler-recurrence-end-item-height; + .dx-item { + .dx-field-item, .dx-field-empty-item { + padding: 0; + margin: calc($scheduler-appointment-popup-repeat-end-item-vertical-margin / 2) 0; + height: $scheduler-appointment-popup-repeat-end-item-height; + } } } - - .dx-texteditor, - .dx-numberbox { - height: $scheduler-recurrence-end-item-height; - } } /* Repeat editor settings button */ diff --git a/packages/devextreme-scss/scss/widgets/fluent/scheduler/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/scheduler/_index.scss index 5ffa0863b400..cb1b968f78cd 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/scheduler/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/scheduler/_index.scss @@ -5,6 +5,7 @@ @use "sizes" as *; @use "../sizes" as *; @use "../form/sizes" as *; +@use "../radioGroup/sizes" as *; @use "../toolbar/sizes" as *; @use '../../base/scheduler/layout/header' as *; @use "../../base/mixins" as *; @@ -43,8 +44,8 @@ $agenda-appointment-text-color: $agenda-appointment-text-color, $agenda-appointment-title-font-size: $agenda-appointment-title-font-size, - $scheduler-days-of-week-button-size: $fluent-scheduler-days-of-week-button-size, - $scheduler-recurrence-end-item-height: $fluent-scheduler-recurrence-end-item-height + $scheduler-appointment-popup-repeat-end-item-height: $fluent-scheduler-appointment-popup-repeat-end-item-height, + $scheduler-appointment-popup-repeat-end-item-vertical-margin: $fluent-radio-button-vertical-margin ); @use "../button/colors" as *; @use "../button/mixins" as *; @@ -716,17 +717,9 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px; margin-top: $fluent-scheduler-appointment-popup-description-icon-margin-top; } - .dx-scheduler-form-group-with-icon.dx-scheduler-form-recurrence-end-group:has(.dx-scheduler-form-icon:not(.dx-hidden)) .dx-field-item-label { - height: $fluent-scheduler-appointment-popup-recurrence-end-group-label-height; - } - - .dx-scheduler-form-recurrence-end-group .dx-field-item-label { - margin-bottom: $fluent-scheduler-appointment-popup-recurrence-end-group-label-margin-bottom; - } - .dx-scheduler-days-of-week-buttons { height: $fluent-toolbar-height; - gap: $fluent-scheduler-days-of-week-buttons-gap; + gap: $fluent-scheduler-appointment-popup-days-of-week-buttons-gap; } .dx-field-item:not(.dx-first-col) { diff --git a/packages/devextreme-scss/scss/widgets/fluent/scheduler/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/scheduler/_sizes.scss index f00e0ae60dab..55addd46a9d9 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/scheduler/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/scheduler/_sizes.scss @@ -32,11 +32,8 @@ $fluent-scheduler-appointment-popup-icon-padding-right: null !default; $fluent-scheduler-appointment-popup-description-icon-margin-top: null !default; $fluent-scheduler-appointment-popup-item-padding-horizontal: null !default; $fluent-scheduler-appointment-popup-all-day-item-height: null !default; -$fluent-scheduler-appointment-popup-recurrence-end-group-label-margin-bottom: null !default; -$fluent-scheduler-appointment-popup-recurrence-end-group-label-height: null !default; -$fluent-scheduler-days-of-week-button-size: null !default; -$fluent-scheduler-days-of-week-buttons-gap: null !default; -$fluent-scheduler-recurrence-end-item-height: null !default; +$fluent-scheduler-appointment-popup-days-of-week-buttons-gap: null !default; +$fluent-scheduler-appointment-popup-repeat-end-item-height: null !default; $fluent-scheduler-appointment-short-content-padding: null !default; $fluent-scheduler-appointment-15min-height: null !default; @@ -130,11 +127,8 @@ $header-panel-time-cell-padding: null !default; $fluent-scheduler-appointment-popup-description-icon-margin-top: 24px !default; $fluent-scheduler-appointment-popup-item-padding-horizontal: 6px !default; $fluent-scheduler-appointment-popup-all-day-item-height: 40px !default; - $fluent-scheduler-appointment-popup-recurrence-end-group-label-margin-bottom: 16px !default; - $fluent-scheduler-appointment-popup-recurrence-end-group-label-height: 32px !default; - $fluent-scheduler-days-of-week-button-size: 32px !default; - $fluent-scheduler-days-of-week-buttons-gap: 12px !default; - $fluent-scheduler-recurrence-end-item-height: 32px !default; + $fluent-scheduler-appointment-popup-days-of-week-buttons-gap: 12px !default; + $fluent-scheduler-appointment-popup-repeat-end-item-height: 32px !default; $agenda-appointment-title-font-size: 14px; @@ -198,11 +192,8 @@ $header-panel-time-cell-padding: null !default; $fluent-scheduler-appointment-popup-description-icon-margin-top: 18px !default; $fluent-scheduler-appointment-popup-item-padding-horizontal: 4px !default; $fluent-scheduler-appointment-popup-all-day-item-height: 30px !default; - $fluent-scheduler-appointment-popup-recurrence-end-group-label-margin-bottom: 12px !default; - $fluent-scheduler-appointment-popup-recurrence-end-group-label-height: 24px !default; - $fluent-scheduler-days-of-week-button-size: 22px !default; - $fluent-scheduler-days-of-week-buttons-gap: 8px !default; - $fluent-scheduler-recurrence-end-item-height: 22px !default; + $fluent-scheduler-appointment-popup-days-of-week-buttons-gap: 8px !default; + $fluent-scheduler-appointment-popup-repeat-end-item-height: 24px !default; $agenda-appointment-title-font-size: 13px; diff --git a/packages/devextreme-scss/scss/widgets/generic/scheduler/_index.scss b/packages/devextreme-scss/scss/widgets/generic/scheduler/_index.scss index 697823d8b019..1ed79cec0430 100644 --- a/packages/devextreme-scss/scss/widgets/generic/scheduler/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/scheduler/_index.scss @@ -41,8 +41,8 @@ $agenda-appointment-text-color: $agenda-appointment-text-color, $agenda-appointment-title-font-size: $agenda-appointment-title-font-size, - $scheduler-days-of-week-button-size: $generic-scheduler-days-of-week-button-size, - $scheduler-recurrence-end-item-height: $generic-scheduler-recurrence-end-item-height + $scheduler-appointment-popup-repeat-end-item-height: $generic-scheduler-appointment-popup-repeat-end-item-height, + $scheduler-appointment-popup-repeat-end-item-vertical-margin: $generic-scheduler-appointment-popup-repeat-end-radio-margin-top ); @use "../button/colors" as *; @use "../tooltip/colors" as *; @@ -289,49 +289,20 @@ $generic-scheduler-agenda-group-header-padding: $generic-scheduler-agenda-time-c .dx-scheduler-days-of-week-buttons { height: $generic-toolbar-height; - gap: $generic-scheduler-days-of-week-buttons-gap; + gap: $generic-scheduler-appointment-popup-days-of-week-buttons-gap; .dx-button { - width: $generic-scheduler-days-of-week-button-size; - height: $generic-scheduler-days-of-week-button-size; - min-width: $generic-scheduler-days-of-week-button-size; - min-height: $generic-scheduler-days-of-week-button-size; + width: $generic-scheduler-appointment-popup-days-of-week-button-size; + height: $generic-scheduler-appointment-popup-days-of-week-button-size; + min-width: $generic-scheduler-appointment-popup-days-of-week-button-size; + min-height: $generic-scheduler-appointment-popup-days-of-week-button-size; } } - .dx-scheduler-form-group-with-icon.dx-scheduler-form-recurrence-end-group:has(.dx-scheduler-form-icon:not(.dx-hidden)) .dx-field-item-label { - height: $generic-scheduler-appointment-popup-recurrence-end-group-label-height; - } - - .dx-scheduler-form-recurrence-end-group .dx-field-item-label { - margin-bottom: $generic-scheduler-appointment-popup-recurrence-end-group-label-margin-bottom; - } - - .dx-scheduler-form-recurrence-end-editors { - .dx-item.dx-radiobutton { - height: $generic-scheduler-appointment-popup-recurrence-end-editors-item-height !important; // stylelint-disable-line declaration-no-important - } - - .dx-box-item { - height: $generic-scheduler-appointment-popup-recurrence-end-editors-item-height; - - .dx-box-item-content { - height: $generic-scheduler-appointment-popup-recurrence-end-editors-item-height; - } - } - - .dx-field-item, - .dx-empty-item { - height: $generic-scheduler-appointment-popup-recurrence-end-editors-item-height; - - .dx-field-item-content { - height: $generic-scheduler-appointment-popup-recurrence-end-editors-item-height; - } - } - - .dx-texteditor, - .dx-numberbox { - height: $generic-scheduler-appointment-popup-recurrence-end-editors-item-height; + .dx-scheduler-form-recurrence-end-group .dx-radiogroup.dx-widget { + .dx-radiobutton { + margin-top: $generic-scheduler-appointment-popup-repeat-end-radio-margin-top; + margin-bottom: 0; } } diff --git a/packages/devextreme-scss/scss/widgets/generic/scheduler/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/scheduler/_sizes.scss index b974feabbae1..4e4218b80217 100644 --- a/packages/devextreme-scss/scss/widgets/generic/scheduler/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/generic/scheduler/_sizes.scss @@ -36,12 +36,10 @@ $generic-scheduler-appointment-popup-description-icon-margin-top: null !default; $generic-scheduler-appointment-popup-item-padding-horizontal: null !default; $generic-scheduler-appointment-popup-item-padding-top: null !default; $generic-scheduler-appointment-popup-all-day-item-height: null !default; -$generic-scheduler-appointment-popup-recurrence-end-group-label-margin-bottom: null !default; -$generic-scheduler-appointment-popup-recurrence-end-editors-item-height: null !default; -$generic-scheduler-appointment-popup-recurrence-end-group-label-height: null !default; -$generic-scheduler-days-of-week-button-size: null !default; -$generic-scheduler-days-of-week-buttons-gap: null !default; -$generic-scheduler-recurrence-end-item-height: null !default; +$generic-scheduler-appointment-popup-days-of-week-button-size: null !default; +$generic-scheduler-appointment-popup-days-of-week-buttons-gap: null !default; +$generic-scheduler-appointment-popup-repeat-end-radio-margin-top: null !default; +$generic-scheduler-appointment-popup-repeat-end-item-height: null !default; $generic-scheduler-appointment-short-content-padding: null !default; $generic-scheduler-appointment-10min-height: null !default; @@ -104,12 +102,10 @@ $generic-scheduler-group-header-agenda-font-size: 14px !default; $generic-scheduler-appointment-popup-item-padding-horizontal: 5px !default; $generic-scheduler-appointment-popup-item-padding-top: 20px !default; $generic-scheduler-appointment-popup-all-day-item-height: 36px !default; - $generic-scheduler-appointment-popup-recurrence-end-group-label-margin-bottom: 12px !default; - $generic-scheduler-appointment-popup-recurrence-end-editors-item-height: 36px !default; - $generic-scheduler-appointment-popup-recurrence-end-group-label-height: 36px !default; - $generic-scheduler-days-of-week-button-size: 32px !default; - $generic-scheduler-days-of-week-buttons-gap: 10px !default; - $generic-scheduler-recurrence-end-item-height: 32px !default; + $generic-scheduler-appointment-popup-repeat-end-radio-margin-top: 10px !default; + $generic-scheduler-appointment-popup-days-of-week-button-size: 32px !default; + $generic-scheduler-appointment-popup-days-of-week-buttons-gap: 10px !default; + $generic-scheduler-appointment-popup-repeat-end-item-height: 36px !default; $agenda-appointment-title-font-size: 16px; @@ -168,18 +164,16 @@ $generic-scheduler-group-header-agenda-font-size: 14px !default; $generic-scheduler-appointment-popup-toolbar-height: 39px !default; $generic-scheduler-appointment-popup-toolbar-label-size: 18px !default; $generic-scheduler-appointment-popup-icon-size: 14px !default; - $generic-scheduler-appointment-popup-icon-container-height: 24px !default; + $generic-scheduler-appointment-popup-icon-container-height: 26px !default; $generic-scheduler-appointment-popup-icon-padding-right: 5px !default; $generic-scheduler-appointment-popup-description-icon-margin-top: 18px !default; $generic-scheduler-appointment-popup-item-padding-horizontal: 5px !default; $generic-scheduler-appointment-popup-item-padding-top: 10px !default; $generic-scheduler-appointment-popup-all-day-item-height: 24px !default; - $generic-scheduler-appointment-popup-recurrence-end-group-label-margin-bottom: 8px !default; - $generic-scheduler-appointment-popup-recurrence-end-editors-item-height: 26px !default; - $generic-scheduler-appointment-popup-recurrence-end-group-label-height: 24px !default; - $generic-scheduler-days-of-week-button-size: 24px !default; - $generic-scheduler-days-of-week-buttons-gap: 6px !default; - $generic-scheduler-recurrence-end-item-height: 32px !default; + $generic-scheduler-appointment-popup-repeat-end-radio-margin-top: 6px !default; + $generic-scheduler-appointment-popup-days-of-week-button-size: 24px !default; + $generic-scheduler-appointment-popup-days-of-week-buttons-gap: 6px !default; + $generic-scheduler-appointment-popup-repeat-end-item-height: 26px !default; $agenda-appointment-title-font-size: 16px; diff --git a/packages/devextreme-scss/scss/widgets/material/scheduler/_index.scss b/packages/devextreme-scss/scss/widgets/material/scheduler/_index.scss index 584ae0d514dd..8bdfdd2a10b9 100644 --- a/packages/devextreme-scss/scss/widgets/material/scheduler/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/scheduler/_index.scss @@ -4,6 +4,7 @@ @use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; +@use "../radioGroup/sizes" as *; @use "../toolbar/sizes" as *; @use '../../base/scheduler/layout/header' as *; @use "../../base/mixins" as *; @@ -41,8 +42,8 @@ $agenda-appointment-text-color: $agenda-appointment-text-color, $agenda-appointment-title-font-size: $agenda-appointment-title-font-size, - $scheduler-days-of-week-button-size: $material-scheduler-days-of-week-button-size, - $scheduler-recurrence-end-item-height: $material-scheduler-recurrence-end-item-height + $scheduler-appointment-popup-repeat-end-item-height: $material-scheduler-appointment-popup-repeat-end-item-height, + $scheduler-appointment-popup-repeat-end-item-vertical-margin: $material-radio-button-vertical-margin ); @use "../button/colors" as *; @use "../button/mixins" as *; @@ -670,52 +671,23 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px; .dx-scheduler-days-of-week-buttons { height: $material-toolbar-height; - gap: $material-scheduler-days-of-week-buttons-gap; + gap: $material-scheduler-appointment-popup-days-of-week-buttons-gap; } - .dx-scheduler-form-group-with-icon.dx-scheduler-form-recurrence-end-group:has(.dx-scheduler-form-icon:not(.dx-hidden)) .dx-field-item-label { - height: $material-scheduler-appointment-popup-recurrence-end-group-label-height; - } - - .dx-scheduler-form-recurrence-end-group .dx-field-item-label { - padding: 0; - margin-bottom: $material-scheduler-appointment-popup-recurrence-end-group-label-margin-bottom; + .dx-scheduler-form-recurrence-end-group { + .dx-field-item-label { + padding: 0; - .dx-field-item-label-text { - color: $base-text-color; + .dx-field-item-label-text { + color: $base-text-color; + } } - } - - .dx-scheduler-form-recurrence-end-editors { - .dx-item.dx-radiobutton { - height: $material-scheduler-appointment-popup-recurrence-end-editors-item-height !important; // stylelint-disable-line declaration-no-important + .dx-radiogroup.dx-widget { .dx-radiobutton-icon::after { content: unset; } } - - .dx-box-item { - height: $material-scheduler-appointment-popup-recurrence-end-editors-item-height; - - .dx-box-item-content { - height: $material-scheduler-appointment-popup-recurrence-end-editors-item-height; - } - } - - .dx-field-item, - .dx-empty-item { - height: $material-scheduler-appointment-popup-recurrence-end-editors-item-height; - - .dx-field-item-content { - height: $material-scheduler-appointment-popup-recurrence-end-editors-item-height; - } - } - - .dx-texteditor, - .dx-numberbox { - height: $material-scheduler-appointment-popup-recurrence-end-editors-item-height; - } } .dx-field-item:not(.dx-first-col) { diff --git a/packages/devextreme-scss/scss/widgets/material/scheduler/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/scheduler/_sizes.scss index 1d68dc12ac84..d186bd01e711 100644 --- a/packages/devextreme-scss/scss/widgets/material/scheduler/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/material/scheduler/_sizes.scss @@ -74,12 +74,8 @@ $material-scheduler-appointment-popup-all-day-item-height: null !default; $material-scheduler-appointment-popup-all-day-item-padding-left: null !default; $material-scheduler-appointment-popup-all-day-item-font-size: null !default; $material-scheduler-appointment-popup-all-day-item-margin-bottom: null !default; -$material-scheduler-appointment-popup-recurrence-end-group-label-margin-bottom: null !default; -$material-scheduler-appointment-popup-recurrence-end-editors-item-height: null !default; -$material-scheduler-appointment-popup-recurrence-end-group-label-height: null !default; -$material-scheduler-days-of-week-button-size: null !default; -$material-scheduler-days-of-week-buttons-gap: null !default; -$material-scheduler-recurrence-end-item-height: null !default; +$material-scheduler-appointment-popup-days-of-week-buttons-gap: null !default; +$material-scheduler-appointment-popup-repeat-end-item-height: null !default; $scheduler-timeline-cell-height: 50px !default; @@ -125,12 +121,8 @@ $scheduler-timeline-cell-height: 50px !default; $material-scheduler-appointment-popup-all-day-item-padding-left: 16px !default; $material-scheduler-appointment-popup-all-day-item-font-size: 16px !default; $material-scheduler-appointment-popup-all-day-item-margin-bottom: 3px !default; - $material-scheduler-appointment-popup-recurrence-end-group-label-margin-bottom: 12px !default; - $material-scheduler-appointment-popup-recurrence-end-editors-item-height: 48px !default; - $material-scheduler-appointment-popup-recurrence-end-group-label-height: 48px !default; - $material-scheduler-days-of-week-button-size: 32px !default; - $material-scheduler-days-of-week-buttons-gap: 8px !default; - $material-scheduler-recurrence-end-item-height: 32px !default; + $material-scheduler-appointment-popup-days-of-week-buttons-gap: 8px !default; + $material-scheduler-appointment-popup-repeat-end-item-height: 48px !default; $agenda-appointment-title-font-size: 14px; @@ -196,12 +188,8 @@ $scheduler-timeline-cell-height: 50px !default; $material-scheduler-appointment-popup-all-day-item-padding-left: 12px !default; $material-scheduler-appointment-popup-all-day-item-font-size: 14px !default; $material-scheduler-appointment-popup-all-day-item-margin-bottom: 1px !default; - $material-scheduler-appointment-popup-recurrence-end-group-label-margin-bottom: 4px !default; - $material-scheduler-appointment-popup-recurrence-end-editors-item-height: 32px !default; - $material-scheduler-appointment-popup-recurrence-end-group-label-height: 32px !default; - $material-scheduler-days-of-week-button-size: 24px !default; - $material-scheduler-days-of-week-buttons-gap: 4px !default; - $material-scheduler-recurrence-end-item-height: 32px !default; + $material-scheduler-appointment-popup-days-of-week-buttons-gap: 4px !default; + $material-scheduler-appointment-popup-repeat-end-item-height: 32px !default; $agenda-appointment-title-font-size: 13px; diff --git a/packages/devextreme/js/__internal/scheduler/appointment_popup/m_recurrence_form.ts b/packages/devextreme/js/__internal/scheduler/appointment_popup/m_recurrence_form.ts index d9a41ef98a44..d991bee0d7c0 100644 --- a/packages/devextreme/js/__internal/scheduler/appointment_popup/m_recurrence_form.ts +++ b/packages/devextreme/js/__internal/scheduler/appointment_popup/m_recurrence_form.ts @@ -72,16 +72,16 @@ const FREQ = { } as const; const EDITOR_NAMES = { - recurrenceStartDate: 'recurrenceStartDateEditor', + recurrenceStartDateEditor: 'recurrenceStartDateEditor', recurrenceCountEditor: 'recurrenceCountEditor', recurrencePeriodEditor: 'recurrencePeriodEditor', recurrenceDayOfYearMonthEditor: 'recurrenceDayOfYearMonthEditor', recurrenceDayOfMonthEditor: 'recurrenceDayOfMonthEditor', recurrenceDayOfYearDayEditor: 'recurrenceDayOfYearDayEditor', recurrenceEndEditor: 'recurrenceEndEditor', - repeatEnd: 'recurrenceRepeatEndEditor', - until: 'recurrenceEndUntilEditor', - count: 'recurrenceEndCountEditor', + recurrenceRepeatEndEditor: 'recurrenceRepeatEndEditor', + recurrenceEndUntilEditor: 'recurrenceEndUntilEditor', + recurrenceEndCountEditor: 'recurrenceEndCountEditor', recurrenceEndSpacer: 'recurrenceEndSpacer', }; @@ -223,7 +223,7 @@ export class RecurrenceForm { true, getStartDateCommonConfig(this.scheduler.getFirstDayOfWeek()), { - name: EDITOR_NAMES.recurrenceStartDate, + name: EDITOR_NAMES.recurrenceStartDateEditor, label: { text: messageLocalization.format('dxScheduler-editorLabelStartDate'), }, @@ -459,10 +459,9 @@ export class RecurrenceForm { private createRecurrenceEndRadioGroup(): SimpleItem { return { itemType: 'simple', - name: EDITOR_NAMES.repeatEnd, + name: EDITOR_NAMES.recurrenceRepeatEndEditor, colSpan: 1, editorType: 'dxRadioGroup', - cssClass: CLASSES.recurrenceEndEditors, label: { visible: false, }, @@ -498,7 +497,7 @@ export class RecurrenceForm { }, { itemType: 'simple', - name: EDITOR_NAMES.until, + name: EDITOR_NAMES.recurrenceEndUntilEditor, label: { visible: false, }, @@ -509,6 +508,9 @@ export class RecurrenceForm { calendarOptions: { firstDayOfWeek: this.scheduler.getFirstDayOfWeek(), }, + inputAttr: { + 'aria-label': messageLocalization.format('dxScheduler-recurrenceUntilDateLabel'), + }, onContentReady: (e): void => { e.component.option('value', this.recurrenceRule.until); }, @@ -519,7 +521,7 @@ export class RecurrenceForm { }, { itemType: 'simple', - name: EDITOR_NAMES.count, + name: EDITOR_NAMES.recurrenceEndCountEditor, cssClass: CLASSES.countEditor, label: { visible: false, @@ -530,6 +532,9 @@ export class RecurrenceForm { min: 1, showSpinButtons: true, useLargeSpinButtons: false, + inputAttr: { + 'aria-label': messageLocalization.format('dxScheduler-recurrenceOccurrenceLabel'), + }, onContentReady: (e): void => { e.component.option('value', this.recurrenceRule.count ?? undefined); }, @@ -553,12 +558,12 @@ export class RecurrenceForm { startDate, ); - this.dxForm.getEditor(EDITOR_NAMES.recurrenceStartDate)?.option('value', this.recurrenceRule.startDate); + this.dxForm.getEditor(EDITOR_NAMES.recurrenceStartDateEditor)?.option('value', this.recurrenceRule.startDate); this.dxForm.getEditor(EDITOR_NAMES.recurrencePeriodEditor)?.option('value', repeatEditorValue); this.dxForm.getEditor(EDITOR_NAMES.recurrenceCountEditor)?.option('value', this.recurrenceRule.interval); - this.dxForm.getEditor(EDITOR_NAMES.repeatEnd)?.option('value', this.recurrenceRule.repeatEnd); - this.dxForm.getEditor(EDITOR_NAMES.until)?.option('value', this.recurrenceRule.until); - this.dxForm.getEditor(EDITOR_NAMES.count)?.option('value', this.recurrenceRule.count); + this.dxForm.getEditor(EDITOR_NAMES.recurrenceRepeatEndEditor)?.option('value', this.recurrenceRule.repeatEnd); + this.dxForm.getEditor(EDITOR_NAMES.recurrenceEndUntilEditor)?.option('value', this.recurrenceRule.until); + this.dxForm.getEditor(EDITOR_NAMES.recurrenceEndCountEditor)?.option('value', this.recurrenceRule.count); this.updateRepeatEndEditors(); this.updateDayEditorsVisibility(); @@ -589,8 +594,8 @@ export class RecurrenceForm { private updateRepeatEndEditors(): void { const repeatEndValue = this.recurrenceRule.repeatEnd; - const untilEditor = this.dxForm.getEditor(EDITOR_NAMES.until); - const countEditor = this.dxForm.getEditor(EDITOR_NAMES.count); + const untilEditor = this.dxForm.getEditor(EDITOR_NAMES.recurrenceEndUntilEditor); + const countEditor = this.dxForm.getEditor(EDITOR_NAMES.recurrenceEndCountEditor); untilEditor?.option('disabled', repeatEndValue !== 'until'); countEditor?.option('disabled', repeatEndValue !== 'count'); diff --git a/packages/testcafe-models/scheduler/appointment/popup.ts b/packages/testcafe-models/scheduler/appointment/popup.ts index 84f1c4130634..56de41b9485c 100644 --- a/packages/testcafe-models/scheduler/appointment/popup.ts +++ b/packages/testcafe-models/scheduler/appointment/popup.ts @@ -131,35 +131,4 @@ export default class AppointmentPopup { .selectText(SELECTORS.dayOfMonthInput) .typeText(SELECTORS.dayOfMonthInput, day.toString(), { replace: true }); } - - async setRecurrenceEnd( - t: TestController, - type: 'never' | 'count' | 'until', - value?: number | string, - ): Promise { - if (type === 'never') { - const neverRadio = this.recurrence.endRadioGroup.find('.dx-radiobutton').nth(0); - await t.click(neverRadio); - } else if (type === 'until') { - const untilRadio = this.recurrence.endRadioGroup.find('.dx-radiobutton').nth(1); - await t.click(untilRadio); - - if (value !== undefined) { - const untilEditor = this.recurrence.endInputGroup.find('[type="text"]').nth(0); - await t - .selectText(untilEditor) - .typeText(untilEditor, value.toString(), { replace: true }); - } - } else if (type === 'count') { - const countRadio = this.recurrence.endRadioGroup.find('.dx-radiobutton').nth(2); - await t.click(countRadio); - - if (value !== undefined) { - const countEditor = this.recurrence.endInputGroup.find('[type="text"]').nth(1); - await t - .selectText(countEditor) - .typeText(countEditor, value.toString(), { replace: true }); - } - } - } }