Skip to content

Conversation

kineticjs
Copy link
Contributor

Add public layoutsConfiguration property to allow the app customize the column proportions per screen size and layout.
Also, update the layoutsConfiguration fields whenever the user interactively changes the column proportions by dragging the columns separator.

@kineticjs kineticjs marked this pull request as ready for review June 27, 2024 07:44
@dobrinyonkov
Copy link
Contributor

As synced offline, the layoutsConfiguration is now a public property that is being changed by the component upon user interaction, it would help to fire an event and notify the application about those changes.

Copy link
Contributor

@dobrinyonkov dobrinyonkov left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overall, it works and looks geat. I've only commented on two concerns of mine that we can discuss offline, if needed.

Also, could we add a test for the layout-configuration-change event?

return false;
}

const hasColumnBelowMinWidth = pxWidths.some(pxWidth => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure whether this could cause an issue but it seems that this check returns false whenever we have less than 3 columns because of their 0 width.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, this issue had popped up earlier, this is why the check for width also contained pxWidth > 0

this.layout = newLayout;
this.fireLayoutChange(true, false);
}
if (oldColumnLayout !== newColumnLayout) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Those two seems to be arrays, comparing them with "===" will compare them by reference and would result in false. Unless this is intentional, we may need to deep check if the fields have changed.

Copy link
Contributor Author

@kineticjs kineticjs Jul 22, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks, corrected now to compare the actual content

@kineticjs kineticjs force-pushed the fcl-layout-config-api branch from 535761b to 8f6514e Compare July 22, 2024 15:10
@github-actions github-actions bot added the Stale label Aug 21, 2024
@github-actions github-actions bot closed this Aug 28, 2024
@kineticjs kineticjs reopened this Aug 13, 2025
@github-actions github-actions bot removed the Stale label Aug 14, 2025
@cla-assistant
Copy link

cla-assistant bot commented Sep 9, 2025

CLA assistant check
All committers have signed the CLA.

@kineticjs kineticjs force-pushed the fcl-layout-config-api branch from f4411e2 to fd5dd40 Compare September 29, 2025 08:05
* @param {MEDIA} media The current media type
* @param {array} columnLayout The effective column layout, f.e ["67%", "33%", "0px"]
* @public
* @since 2.15.1
Copy link
Contributor Author

@kineticjs kineticjs Sep 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure about the correct version

* - Whenever the user drags the columns separator to resize the columns, the `layoutsConfiguration` object will be updated with the user-specified proportions for the given layout (and the `layout-configuration-change` event will be fired).
* - No custom configuration available for the phone screen size, as the default of 100% column width is always used there.
* @public
* @since 2.15.1
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure about the correct version (2.15.1?)

@kineticjs kineticjs closed this Sep 30, 2025
@kineticjs kineticjs reopened this Sep 30, 2025
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview September 30, 2025 10:58 Inactive
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview September 30, 2025 10:59 Inactive
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview September 30, 2025 11:04 Inactive
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview October 1, 2025 07:11 Inactive
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview October 23, 2025 08:02 Inactive
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants