-
-
Notifications
You must be signed in to change notification settings - Fork 3.7k
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 enabling toolbar items grouping in inline and balloon builds #5597
Labels
domain:ui/ux
This issue reports a problem related to UI or UX.
package:build-balloon
package:build-balloon-block
package:build-inline
support:2
An issue reported by a commercially licensed client.
type:feature
This issue reports a feature request (an idea for a new functionality or a missing option).
Milestone
Comments
oleq
added
type:feature
This issue reports a feature request (an idea for a new functionality or a missing option).
module:ux
package:build-balloon
package:build-balloon-block
package:build-inline
labels
Oct 16, 2019
This feature would be great to have! |
This was referenced Jan 14, 2020
Reinmar
added
domain:ui/ux
This issue reports a problem related to UI or UX.
and removed
module:ux
labels
Jan 15, 2020
lslowikowska
added
the
support:2
An issue reported by a commercially licensed client.
label
Feb 7, 2020
oleq
added a commit
to ckeditor/ckeditor5-core
that referenced
this issue
Feb 26, 2020
Docs: Removed the note that the `config.toolbar.shouldNotGroupWhenFull` works only in `ClassicEditor` and `DecoupledEditor` (see ckeditor/ckeditor5#5597).
oleq
added a commit
to ckeditor/ckeditor5-theme-lark
that referenced
this issue
Feb 26, 2020
Feature: Brought styles for the new [`BalloonPanelView.defaultPositions`](https://ckeditor.com/docs/ckeditor5/latest/api/module_ui_panel_balloon_balloonpanelview-BalloonPanelView.html#static-member-defaultPositions). Adjusted toolbar styles for better items grouping in different scenarios (see ckeditor/ckeditor5#5597).
oleq
added a commit
to ckeditor/ckeditor5-editor-inline
that referenced
this issue
Feb 26, 2020
Feature: The inline editor toolbar should group items when its width exceeds the editable’s width (see ckeditor/ckeditor5#5597). BREAKING CHANGE: From now on, the inline toolbar groups overflowing items by default. This behavior can be disabled via the editor config by setting the [`config.toolbar.shouldNotGroupWhenFull: true`](https://ckeditor.com/docs/ckeditor5/latest/api/module_core_editor_editorconfig-EditorConfig.html#member-toolbar) option.
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
domain:ui/ux
This issue reports a problem related to UI or UX.
package:build-balloon
package:build-balloon-block
package:build-inline
support:2
An issue reported by a commercially licensed client.
type:feature
This issue reports a feature request (an idea for a new functionality or a missing option).
📝 Provide a description of the new feature
ATM automatic items grouping (a.k.a. responsive toolbar) works only in classic and decoupled editors. I wasn't enabled in inline and balloon because there's no way to have it out–of–the–box. Simply, there's no obvious size restriction for the toolbars in these editors because the toolbar element is floating and physically attached down bellow in the so-called "body" collection. There's no parent that could squeeze it or force to resize.
But there are some tricks we could use to make it happen in inline/balloon:
For instance, we can use an arbitrary CSS
max–width
on the toolbar element. It will automatically group items that do not fit. It will be static from that moment on because still there's nothing that impacts its size, but it does improve the UXIn inline we could synchronize the
max-width
of the toolbar with the width of the editable it is attached to avoid this situation:This should be fairly easy because we have a tool that can observe changes in the geometry of the editable. All we need is to read it and apply to the toolbar:
In balloon we could do the same (
max-width
) maybe except thatSo in this case, we could also observe the geometry of the editable but use some sane scale factor like
toolbar#max-width = 50% of editable.width
.We can start implementing those features straight away or we can first document them like
and see if people start using it.
@Reinmar @dkonopka @mlewand
If you'd like to see this feature implemented, add a 👍 reaction to this post.
The text was updated successfully, but these errors were encountered: