Skip to content
This repository has been archived by the owner on Jun 26, 2020. It is now read-only.

t/123: Implemented smart DropdownView panel positioning #449

Merged
merged 6 commits into from
Oct 16, 2018
Merged

Conversation

oleq
Copy link
Member

@oleq oleq commented Oct 12, 2018

Suggested merge commit message (convention)

Feature: Implemented configurable, smart DropdownView panel positioning. Closes ckeditor/ckeditor5#5286.

Also fixed some dropdown–related documentation and manual tests.


Additional information

I fixed some outdated docs and manual tests in this branch, which were abandoned as the API changed in the past. The UI framework guide also needed revisiting and changes are in a separate PR in the root repository, so it's nice if they were verified and merged too.

image

image

@oleq oleq requested review from dkonopka and oskarwrobel October 12, 2018 09:45
@coveralls
Copy link

Coverage Status

Coverage remained the same at 100.0% when pulling d5e702c on t/123 into 9cdcd4a on master.

* @default 'se'
* @member {'se'|'sw'|'ne'|'nw'} #position
*/
this.set( 'position', 'se' );
Copy link
Contributor

Choose a reason for hiding this comment

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

I like this option but I'm wondering about one case. I want to display panel using custom position but I if this position will be out of the viewport then I want to see the panel in some other optimal position that fit the viewport. So, I'm wondering about custom + auto. Does it make sense?

Copy link
Member Author

Choose a reason for hiding this comment

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

Feels like a complex case to me. Is there really any use case for that ATM?

Anyway, if we moved this call https://github.com/ckeditor/ckeditor5-ui/pull/449/files#diff-27dea69116225060a1623b7476d8960fR258 to a separate method, which someone could override, all they would need to do is to pass the positions to the array in their preferred order. getOptimalPosition returns the first position which is fully visible, so order matters.

I can change the implementation to make this possible but I don't feel like we really need that ATM and just for the sake of simplicity, I'd stick with this code.

Copy link
Member Author

Choose a reason for hiding this comment

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

Anyway, since the current implementation is event-driven, they could attach the same event which callback is executed later and they can run the getOptimalPosition logic once again or return whatever they want. Hackish but possible.

createPositionedDropdown( 'NW' );
createPositionedDropdown( 'NE' );
createPositionedDropdown( 'SW' );
createPositionedDropdown( 'SE' );
Copy link
Contributor

@dkonopka dkonopka Oct 16, 2018

Choose a reason for hiding this comment

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

It would be nice to see in this manual test dropdown with auto settings too I think.

Copy link
Contributor

@dkonopka dkonopka left a comment

Choose a reason for hiding this comment

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

LGTM 👍

@oskarwrobel oskarwrobel merged commit 8094f19 into master Oct 16, 2018
@oskarwrobel oskarwrobel deleted the t/123 branch October 16, 2018 09:57
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Implement configurable/smart dropdown panel placement
4 participants