PromucFlow_constructor/app/client/src/utils/autoLayout/constants.ts

87 lines
1.5 KiB
TypeScript
Raw Normal View History

fix: Layout Conversion bugs for auto Layout (#22565) ## Description The Changes in this PR includes, - separated the logic for getting Readable snapshot details and are derived on component render rather than on change of state to have upto date value on the conversion modal - Separated the DayJs Utils for the same. - Upon restoring Snapshot, change the layout type based on the response from API rather than the opposite of current layout type - Updated the width of modal widget for calculating the positions of children in PositionUtils - Updated Conversion algorithm to remove the dynamic binding path from list for property paths with default autolayout values Fixes #21967 Fixes #21969 Fixes #22244 Fixes #22094 Fixes #22187 Fixes #22697 # Type of change - Bug fix (non-breaking change which fixes an issue) ## How Has This Been Tested? Manual - Manual ### Test Plan > Add Testsmith test cases links that relate to this PR ### Issues raised during DP testing > Link issues raised during DP testing for better visiblity and tracking (copy link from comments dropped on this PR) ## Checklist: ### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag ### QA activity: - [ ] Test plan has been approved by relevant developers - [ ] Test plan has been peer reviewed by QA - [ ] Cypress test cases have been added and approved by either SDET or manual QA - [ ] Organized project review call with relevant stakeholders after Round 1/2 of QA - [ ] Added Test Plan Approved label after reveiwing all Cypress test --------- Co-authored-by: Preet <preetsidhu.bits@gmail.com>
2023-05-03 04:26:52 +00:00
export const SNAPSHOT_EXPIRY_IN_DAYS = 5;
export enum LayoutDirection {
Horizontal = "Horizontal",
Vertical = "Vertical",
}
export enum JustifyContent {
FlexStart = "flex-start",
Center = "center",
SpaceAround = "space-around",
SpaceBetween = "space-between",
SpaceEvenly = "space-evenly",
FlexEnd = "flex-end",
}
export enum AlignItems {
FlexStart = "flex-start",
Center = "center",
Stretch = "stretch",
FlexEnd = "flex-end",
}
export enum Positioning {
Fixed = "fixed",
Horizontal = "horizontal",
Vertical = "vertical",
}
export enum ResponsiveBehavior {
Fill = "fill",
Hug = "hug",
}
export enum FlexDirection {
Row = "row",
RowReverse = "row-reverse",
Column = "column",
ColumnReverse = "column-reverse",
}
export enum Alignment {
Top = "top",
Bottom = "bottom",
Left = "left",
Right = "right",
}
export enum Spacing {
None = "none",
Equal = "equal",
SpaceBetween = "space-between",
}
export enum Overflow {
Wrap = "wrap",
NoWrap = "nowrap",
Hidden = "hidden",
Scroll = "scroll",
Auto = "auto",
}
export enum FlexLayerAlignment {
None = "none",
Start = "start",
Center = "center",
End = "end",
}
export enum FlexVerticalAlignment {
Top = "start",
Center = "center",
Bottom = "end",
}
feat: Vertical alignment and row gaps for Auto Layout (#21888) ## Description - Defined the default vertical alignment of widgets within a row. Now, all widgets will align bottom except container widget which will align top - Added a predefined row gap of 12px in the case of desktop and 8px in the case of mobile viewport. Fixes #22227 Fixes #22228 ## Type of change - New feature (non-breaking change which adds functionality) ## How Has This Been Tested? - Manual - Drag n drop multiple widgets, verified all the widgets except container widget are bottom aligned and container widget is top aligned - Checked if the row gap is 12px in the case of non-mobile viewport and it is 8px in the case of mobile viewport - Checked if the highlights are shown in the proper position - Tested some templates after conversion ### Test Plan > Add Testsmith test cases links that relate to this PR ### Issues raised during DP testing > Link issues raised during DP testing for better visiblity and tracking (copy link from comments dropped on this PR) ## Checklist: ### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [ ] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [x] PR is being merged under a feature flag ### QA activity: - [ ] Test plan has been approved by relevant developers - [ ] Test plan has been peer reviewed by QA - [ ] Cypress test cases have been added and approved by either SDET or manual QA - [ ] Organized project review call with relevant stakeholders after Round 1/2 of QA - [ ] Added Test Plan Approved label after reveiwing all Cypress test --------- Co-authored-by: rahulramesha <rahul@appsmith.com> Co-authored-by: Ashok Kumar M <35134347+marks0351@users.noreply.github.com> Co-authored-by: Arsalan <arsalanyaldram0211@outlook.com> Co-authored-by: Preet <preetsidhu.bits@gmail.com>
2023-04-20 05:14:37 +00:00
export const ROW_GAP = 12;
export const MOBILE_ROW_GAP = 8;
export const defaultAutoLayoutWidgets = [
"CONTAINER_WIDGET",
"TABS_WIDGET",
"LIST_WIDGET_V2",
"MODAL_WIDGET",
"STATBOX_WIDGET",
"FORM_WIDGET",
];