Skip to content

Commit 0e6676f

Browse files
TucchhaaTucchhaa
authored
Scheduler - Appointment Form - Fix icons for resources with multiple selection (#31946)
1 parent f4f667a commit 0e6676f

File tree

9 files changed

+62
-36
lines changed

9 files changed

+62
-36
lines changed

‎e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__resource-with-multiple-selection (fluent.blue.light).png‎

41.4 KB
Loading

‎e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/form.visual.ts‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ const getResources = (withIcons = false) => ([
1717
dataSource: [
1818
{ text: 'Samantha Bright', id: 1, color: '#727bd2' },
1919
{ text: 'John Heart', id: 2, color: '#32c9ed' },
20+
{ text: 'Todd Hoffman', id: 3, color: '#2a7ee4' },
21+
{ text: 'Sandra Johnson', id: 4, color: '#7b49d3' },
2022
],
2123
icon: withIcons ? 'user' : undefined,
2224
},
@@ -223,3 +225,42 @@ test.meta({ browserSize: [450, 1000] })('main form on mobile screen', async (t)
223225
},
224226
},
225227
}));
228+
229+
test.meta({ browserSize: [1500, 1500] })('appointment form resource with multiple selection', async (t) => {
230+
const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
231+
232+
const appointment = {
233+
text: 'Appointment',
234+
startDate: new Date('2021-04-26T16:30:00.000Z'),
235+
endDate: new Date('2021-04-26T18:30:00.000Z'),
236+
allDay: false,
237+
assigneeId: [1, 2, 3, 4],
238+
roomId: 1,
239+
priorityId: 1,
240+
};
241+
242+
const scheduler = new Scheduler(SCHEDULER_SELECTOR);
243+
const appointmentPopup = await scheduler.openAppointmentPopup(t, appointment, false);
244+
245+
await testScreenshot(
246+
t,
247+
takeScreenshot,
248+
'scheduler__appointment__main-form__resource-with-multiple-selection.png',
249+
{ element: appointmentPopup.contentElement },
250+
);
251+
252+
await t
253+
.expect(compareResults.isValid())
254+
.ok(compareResults.errorMessages());
255+
}).before(async () => {
256+
await createWidget('dxScheduler', {
257+
dataSource: [],
258+
views: ['week'],
259+
currentView: 'week',
260+
currentDate: new Date(2021, 2, 25),
261+
resources: getResources(true),
262+
editing: {
263+
allowUpdating: true,
264+
},
265+
});
266+
});

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ $agenda-appointment-text-color: null !default;
3131
$agenda-appointment-title-font-size: null !default;
3232

3333
$scheduler-header-panel-table-cell-height: null !default;
34+
35+
$scheduler-appointment-popup-icon-margin-top: null !default;
3436
$scheduler-appointment-popup-repeat-end-item-height: null !default;
3537
$scheduler-appointment-popup-repeat-end-item-vertical-margin: null !default;
3638

@@ -500,28 +502,26 @@ $scheduler-appointment-form-label-padding: 20px;
500502
}
501503

502504
/* Icons alignment */
503-
.dx-scheduler-form-group-with-icon .dx-box-item:has(.dx-scheduler-form-icon) {
505+
.dx-scheduler-form-group-with-icon .dx-item-content > .dx-box-item:has(.dx-scheduler-form-icon) {
504506
flex: 0 1 auto !important; // stylelint-disable-line declaration-no-important
505-
align-items: end;
506-
}
507-
508-
.dx-scheduler-form-date-range-group .dx-box-item:has(.dx-scheduler-form-icon),
509-
.dx-scheduler-form-description-group .dx-box-item:has(.dx-scheduler-form-icon),
510-
.dx-scheduler-form-resources-group .dx-box-item:has(.dx-scheduler-default-resources-icon),
511-
.dx-scheduler-form-recurrence-settings-group .dx-box-item:has(.dx-scheduler-form-icon),
512-
.dx-scheduler-form-recurrence-end-group .dx-box-item:has(.dx-scheduler-form-icon) {
513507
align-items: start;
514508
}
515509

516510
.dx-scheduler-form-icon {
517511
display: flex;
518512
align-items: center;
513+
margin-top: $scheduler-appointment-popup-icon-margin-top;
519514

520515
> .dx-field-item-content {
521516
line-height: 1;
522517
}
523518
}
524519

520+
.dx-scheduler-form-date-range-group .dx-scheduler-form-icon,
521+
.dx-scheduler-form-recurrence-end-group .dx-scheduler-form-icon {
522+
margin-top: 0;
523+
}
524+
525525
/* Editors alignment */
526526
.dx-scheduler-form-all-day-switch.dx-field-item.dx-label-h-align {
527527
align-items: center;

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

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@
4444
$agenda-appointment-text-color: $agenda-appointment-text-color,
4545
$agenda-appointment-title-font-size: $agenda-appointment-title-font-size,
4646

47+
$scheduler-appointment-popup-icon-margin-top: $fluent-scheduler-appointment-popup-icon-margin-top,
4748
$scheduler-appointment-popup-repeat-end-item-height: $fluent-scheduler-appointment-popup-repeat-end-item-height,
4849
$scheduler-appointment-popup-repeat-end-item-vertical-margin: $fluent-radio-button-vertical-margin
4950
);
@@ -711,12 +712,6 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
711712
color: $scheduler-appointment-base-color;
712713
}
713714

714-
.dx-scheduler-form-description-group .dx-scheduler-form-icon,
715-
.dx-scheduler-form-resources-group .dx-scheduler-default-resources-icon,
716-
.dx-scheduler-form-recurrence-settings-group .dx-scheduler-form-icon {
717-
margin-top: $fluent-scheduler-appointment-popup-description-icon-margin-top;
718-
}
719-
720715
.dx-scheduler-days-of-week-buttons {
721716
height: $fluent-toolbar-height;
722717
gap: $fluent-scheduler-appointment-popup-days-of-week-buttons-gap;

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ $fluent-scheduler-appointment-tooltip-remove-padding-top: null !default;
2929
$fluent-scheduler-appointment-popup-toolbar-height: null !default;
3030
$fluent-scheduler-appointment-popup-icon-container-height: null !default;
3131
$fluent-scheduler-appointment-popup-icon-padding-right: null !default;
32-
$fluent-scheduler-appointment-popup-description-icon-margin-top: null !default;
32+
$fluent-scheduler-appointment-popup-icon-margin-top: null !default;
3333
$fluent-scheduler-appointment-popup-item-padding-horizontal: null !default;
3434
$fluent-scheduler-appointment-popup-all-day-item-height: null !default;
3535
$fluent-scheduler-appointment-popup-days-of-week-buttons-gap: null !default;
@@ -124,7 +124,7 @@ $header-panel-time-cell-padding: null !default;
124124
$fluent-scheduler-appointment-popup-toolbar-height: 56px !default;
125125
$fluent-scheduler-appointment-popup-icon-container-height: 32px !default;
126126
$fluent-scheduler-appointment-popup-icon-padding-right: 10px !default;
127-
$fluent-scheduler-appointment-popup-description-icon-margin-top: 24px !default;
127+
$fluent-scheduler-appointment-popup-icon-margin-top: 24px !default;
128128
$fluent-scheduler-appointment-popup-item-padding-horizontal: 6px !default;
129129
$fluent-scheduler-appointment-popup-all-day-item-height: 40px !default;
130130
$fluent-scheduler-appointment-popup-days-of-week-buttons-gap: 12px !default;
@@ -189,7 +189,7 @@ $header-panel-time-cell-padding: null !default;
189189
$fluent-scheduler-appointment-popup-toolbar-height: 48px !default;
190190
$fluent-scheduler-appointment-popup-icon-container-height: 24px !default;
191191
$fluent-scheduler-appointment-popup-icon-padding-right: 8px !default;
192-
$fluent-scheduler-appointment-popup-description-icon-margin-top: 18px !default;
192+
$fluent-scheduler-appointment-popup-icon-margin-top: 18px !default;
193193
$fluent-scheduler-appointment-popup-item-padding-horizontal: 4px !default;
194194
$fluent-scheduler-appointment-popup-all-day-item-height: 30px !default;
195195
$fluent-scheduler-appointment-popup-days-of-week-buttons-gap: 8px !default;

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

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@
4141
$agenda-appointment-text-color: $agenda-appointment-text-color,
4242
$agenda-appointment-title-font-size: $agenda-appointment-title-font-size,
4343

44+
$scheduler-appointment-popup-icon-margin-top: $generic-scheduler-appointment-popup-icon-margin-top,
4445
$scheduler-appointment-popup-repeat-end-item-height: $generic-scheduler-appointment-popup-repeat-end-item-height,
4546
$scheduler-appointment-popup-repeat-end-item-vertical-margin: $generic-scheduler-appointment-popup-repeat-end-radio-margin-top
4647
);
@@ -281,12 +282,6 @@ $generic-scheduler-agenda-group-header-padding: $generic-scheduler-agenda-time-c
281282
color: $scheduler-appointment-base-color;
282283
}
283284

284-
.dx-scheduler-form-description-group .dx-scheduler-form-icon,
285-
.dx-scheduler-form-resources-group .dx-scheduler-default-resources-icon,
286-
.dx-scheduler-form-recurrence-settings-group .dx-scheduler-form-icon {
287-
margin-top: $generic-scheduler-appointment-popup-description-icon-margin-top;
288-
}
289-
290285
.dx-scheduler-days-of-week-buttons {
291286
height: $generic-toolbar-height;
292287
gap: $generic-scheduler-appointment-popup-days-of-week-buttons-gap;

‎packages/devextreme-scss/scss/widgets/generic/scheduler/_sizes.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ $generic-scheduler-appointment-popup-toolbar-label-size: null !default;
3232
$generic-scheduler-appointment-popup-icon-size: null !default;
3333
$generic-scheduler-appointment-popup-icon-container-height: null !default;
3434
$generic-scheduler-appointment-popup-icon-padding-right: null !default;
35-
$generic-scheduler-appointment-popup-description-icon-margin-top: null !default;
35+
$generic-scheduler-appointment-popup-icon-margin-top: null !default;
3636
$generic-scheduler-appointment-popup-item-padding-horizontal: null !default;
3737
$generic-scheduler-appointment-popup-item-padding-top: null !default;
3838
$generic-scheduler-appointment-popup-all-day-item-height: null !default;
@@ -98,7 +98,7 @@ $generic-scheduler-group-header-agenda-font-size: 14px !default;
9898
$generic-scheduler-appointment-popup-icon-size: 18px !default;
9999
$generic-scheduler-appointment-popup-icon-container-height: 36px !default;
100100
$generic-scheduler-appointment-popup-icon-padding-right: 5px !default;
101-
$generic-scheduler-appointment-popup-description-icon-margin-top: 22px !default;
101+
$generic-scheduler-appointment-popup-icon-margin-top: 22px !default;
102102
$generic-scheduler-appointment-popup-item-padding-horizontal: 5px !default;
103103
$generic-scheduler-appointment-popup-item-padding-top: 20px !default;
104104
$generic-scheduler-appointment-popup-all-day-item-height: 36px !default;
@@ -166,7 +166,7 @@ $generic-scheduler-group-header-agenda-font-size: 14px !default;
166166
$generic-scheduler-appointment-popup-icon-size: 14px !default;
167167
$generic-scheduler-appointment-popup-icon-container-height: 26px !default;
168168
$generic-scheduler-appointment-popup-icon-padding-right: 5px !default;
169-
$generic-scheduler-appointment-popup-description-icon-margin-top: 18px !default;
169+
$generic-scheduler-appointment-popup-icon-margin-top: 18px !default;
170170
$generic-scheduler-appointment-popup-item-padding-horizontal: 5px !default;
171171
$generic-scheduler-appointment-popup-item-padding-top: 10px !default;
172172
$generic-scheduler-appointment-popup-all-day-item-height: 24px !default;

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

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@
4242
$agenda-appointment-text-color: $agenda-appointment-text-color,
4343
$agenda-appointment-title-font-size: $agenda-appointment-title-font-size,
4444

45+
$scheduler-appointment-popup-icon-margin-top: $material-scheduler-appointment-popup-icon-margin-top,
4546
$scheduler-appointment-popup-repeat-end-item-height: $material-scheduler-appointment-popup-repeat-end-item-height,
4647
$scheduler-appointment-popup-repeat-end-item-vertical-margin: $material-radio-button-vertical-margin
4748
);
@@ -663,12 +664,6 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px;
663664
color: $scheduler-appointment-base-color;
664665
}
665666

666-
.dx-scheduler-form-description-group .dx-scheduler-form-icon,
667-
.dx-scheduler-form-resources-group .dx-scheduler-default-resources-icon,
668-
.dx-scheduler-form-recurrence-settings-group .dx-scheduler-form-icon {
669-
margin-top: $material-scheduler-appointment-popup-description-icon-margin-top;
670-
}
671-
672667
.dx-scheduler-days-of-week-buttons {
673668
height: $material-toolbar-height;
674669
gap: $material-scheduler-appointment-popup-days-of-week-buttons-gap;

‎packages/devextreme-scss/scss/widgets/material/scheduler/_sizes.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ $material-scheduler-appointment-popup-toolbar-label-size: null !default;
6868
$material-scheduler-appointment-popup-icon-size: null !default;
6969
$material-scheduler-appointment-popup-icon-container-height: null !default;
7070
$material-scheduler-appointment-popup-icon-padding-right: null !default;
71-
$material-scheduler-appointment-popup-description-icon-margin-top: null !default;
71+
$material-scheduler-appointment-popup-icon-margin-top: null !default;
7272
$material-scheduler-appointment-popup-item-padding-horizontal: null !default;
7373
$material-scheduler-appointment-popup-all-day-item-height: null !default;
7474
$material-scheduler-appointment-popup-all-day-item-padding-left: null !default;
@@ -115,7 +115,7 @@ $scheduler-timeline-cell-height: 50px !default;
115115
$material-scheduler-appointment-popup-icon-size: 24px !default;
116116
$material-scheduler-appointment-popup-icon-container-height: 48px !default;
117117
$material-scheduler-appointment-popup-icon-padding-right: 8px !default;
118-
$material-scheduler-appointment-popup-description-icon-margin-top: 37px !default;
118+
$material-scheduler-appointment-popup-icon-margin-top: 37px !default;
119119
$material-scheduler-appointment-popup-item-padding-horizontal: 8px !default;
120120
$material-scheduler-appointment-popup-all-day-item-height: 54px !default;
121121
$material-scheduler-appointment-popup-all-day-item-padding-left: 16px !default;
@@ -182,7 +182,7 @@ $scheduler-timeline-cell-height: 50px !default;
182182
$material-scheduler-appointment-popup-icon-size: 18px !default;
183183
$material-scheduler-appointment-popup-icon-container-height: 32px !default;
184184
$material-scheduler-appointment-popup-icon-padding-right: 6px !default;
185-
$material-scheduler-appointment-popup-description-icon-margin-top: 22px !default;
185+
$material-scheduler-appointment-popup-icon-margin-top: 22px !default;
186186
$material-scheduler-appointment-popup-item-padding-horizontal: 6px !default;
187187
$material-scheduler-appointment-popup-all-day-item-height: 38px !default;
188188
$material-scheduler-appointment-popup-all-day-item-padding-left: 12px !default;

0 commit comments

Comments
 (0)