Scheduler: Appointment Form - fix paddings#32865
Scheduler: Appointment Form - fix paddings#32865sjbur wants to merge 37 commits intoDevExpress:26_1from
Conversation
# Conflicts: # packages/devextreme/js/__internal/scheduler/appointment_popup/m_form.ts
| .dx-item-content:has(.dx-texteditor-with-floating-label):not(:has(.dx-scheduler-form-all-day-switch)) .dx-scheduler-form-icon.dx-field-item, | ||
| .dx-item-content:has(.dx-texteditor-with-label):not(:has(.dx-scheduler-form-all-day-switch)) .dx-scheduler-form-icon.dx-field-item { | ||
| height: $generic-scheduler-appointment-popup-icon-static-label-container-height; | ||
| padding-top: $generic-scheduler-appointment-popup-icon-static-label-padding-top; |
There was a problem hiding this comment.
We already have styles for the icon in generic theme for static label mode:
just need to set the size here:
There was a problem hiding this comment.
Do we still need these styles in this case?
There was a problem hiding this comment.
In this case we can avoid those styles. Rewrote them
| }); | ||
| }); | ||
|
|
||
| test.meta({ browserSize: [1500, 1500] })('appointment form with labelMode=static', async (t) => { |
There was a problem hiding this comment.
pls add a test for a case when main group doesn't have icons. Since we made icons invisible when they are disabled, some paddings will not appear, so the main group visual is changed.
There was a problem hiding this comment.
OK. Will write them soon
| const iconsShowMode = this.getIconsShowMode(); | ||
| const showMainGroupIcons = ['main', 'both'].includes(iconsShowMode); | ||
| const showRecurrenceGroupIcons = ['recurrence', 'both'].includes(iconsShowMode); |
There was a problem hiding this comment.
I understand your solution: propagate showIcon parameter through each function and duplicate logic of selecting colSpan:
colSpan: showIcon ? 1 : 2
While this works, the problem is that the logic is duplicated and we can easily forget to update some item's colSpan.
Here's the alternative approach by using setStylingModeToEditors:
private setStylingModeToEditors(item: FormItem, showIcon: boolean): void {
const itemClasses = (item.cssClass ?? '').split(' ');
const isIconItem = itemClasses.includes(CLASSES.formIcon);
if (isIconItem) {
return;
}
if (item.itemType === 'simple') {
// ...
return;
}
if (item.itemType === 'group') {
const groupItem = item as GroupItem;
const colCount = showIcon ? 2 : 1;
groupItem.colCount = colCount;
groupItem.colCountByScreen = { xs: colCount };
groupItem.items?.forEach((child) => {
this.setStylingModeToEditors(child, showIcon);
});
}
}This way we can remove:
- showIcon parameter propagation
- duplication of
showIcon ? 1 : 2logic - groupItems' colCount duplicated option
What do you think?
P.S. the codesnippet is for ref only, I haven't tested it
There was a problem hiding this comment.
Updated the solution based on your suggestion
There was a problem hiding this comment.
private setStylingModeToEditors(item: FormItem, showIcon: boolean): void {
const itemClasses = (item.cssClass ?? '').split(' ');
const isIconItem = itemClasses.includes(CLASSES.formIcon);
if (isIconItem) {
item.visible = showIcon;
return;
}
if (item.itemType === 'simple') {
// ...
return;
}
if (item.itemType === 'group') {
const groupItem = item as GroupItem;
if (itemClasses.includes(CLASSES.groupWithIcon)) {
const colCount = showIcon ? 2 : 1;
groupItem.colCount = colCount;
groupItem.colCountByScreen = { xs: colCount };
}
groupItem.items?.forEach((child) => {
this.setStylingModeToEditors(child, showIcon);
});
}
}
2 participants
No description provided.