Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Consider implementing more default positions of BalloonPanelView (and using it across features) #5501

Closed
oleq opened this issue Apr 17, 2019 · 2 comments · Fixed by ckeditor/ckeditor5-ui#536
Labels
package:ui support:2 An issue reported by a commercially licensed client. type:improvement This issue reports a possible enhancement of an existing feature.

Comments

@oleq
Copy link
Member

oleq commented Apr 17, 2019

ATM when the editable (not the viewport, it's not about RWD) is narrow there are often no positions to choose from to fit the floating panel into the editable, no matter which one is assigned, the panel sticks out.

image

We need either:

  • more itermediate possitions, for instance something in between arrow SW and arrow S,
  • a totally fluid balloon arrow positioning when none of pre–defined positions provides any decent fit of the panel into the editable react.

cc @oskarwrobel @Reinmar @mlewand


If you'd like to see this feature implemented, add 👍 to this post.

@Reinmar
Copy link
Member

Reinmar commented Apr 23, 2019

I could understand this if the RWD was the reason to work on it. But if it's not RWD, then what's wrong with the above screenshot?

@oleq
Copy link
Member Author

oleq commented Apr 23, 2019

But if it's not RWD, then what's wrong with the above screenshot?

There could be a very limited (horizontal) space for the editor in the application. Whatever is left or right to the editable may be important and shouldn't be covered by the balloon. Or it could belong to a semantically different area like a sidebar or some navigation and having a part of a balloon there is unacceptable. What's more, if it occurs, developers can do absolutely nothing about that – there's no quick fix or a dirty hack to address this kind of issue.

We could fit the balloon in the editable with some extra positions because there's some space left but we don't do that. Instead of staying in the safe zone, CKEditor is "spilling" its UI in the app, something I wrote about earlier in the context of the mention panel. Our goal is to keep the editor UI contained within the editable as long as it is possible because this is the only safe area of the app we control.

This issue is about minimizing the chance of the balloon UI not being contained within editable by increasing the number of positions it can use.

@mlewand mlewand transferred this issue from ckeditor/ckeditor5-ui Oct 9, 2019
@mlewand mlewand added this to the backlog milestone Oct 9, 2019
@mlewand mlewand added status:confirmed support:2 An issue reported by a commercially licensed client. type:improvement This issue reports a possible enhancement of an existing feature. package:ui labels Oct 9, 2019
@oleq oleq modified the milestones: backlog, iteration 30 Feb 26, 2020
oleq added a commit to ckeditor/ckeditor5-ui that referenced this issue Feb 26, 2020
Feature: The `BalloonToolbar` plugin should group items when its width is close to related editable's width. Closes ckeditor/ckeditor5#5597. Closes ckeditor/ckeditor5#5501.

BREAKING CHANGE: The `BalloonToolbar` plugin groups overflowing items now by default. This can be disabled via the editor configuration by setting `config.balloonToolbar.shouldNotGroupWhenFull = true`.

[`BalloonPanelView.defaultPositions`](https://ckeditor.com/docs/ckeditor5/latest/api/module_ui_panel_balloon_balloonpanelview-BalloonPanelView.html#static-member-defaultPositions) has been extended with additional positions. Please refer to the documentation to learn more.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package:ui support:2 An issue reported by a commercially licensed client. type:improvement This issue reports a possible enhancement of an existing feature.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants