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 enabling toolbar items grouping in inline and balloon builds #5597

Closed
oleq opened this issue Oct 16, 2019 · 1 comment · Fixed by ckeditor/ckeditor5-ui#536
Closed
Assignees
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).

Comments

@oleq
Copy link
Member

oleq commented Oct 16, 2019

📝 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 UX

    image

  • In inline we could synchronize the max-width of the toolbar with the width of the editable it is attached to avoid this situation:

    image

    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:

    image

  • In balloon we could do the same (max-width) maybe except that

    • we don't have control over where the toolbar is positioned,
    • and even if we had, a balloon toolbar as wide as editable still looks weird

    So 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

wanna save some space in balloon/inline, set max-width here and there

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.

@pshurygin
Copy link

pshurygin commented Dec 2, 2019

This feature would be great to have!
Also, i would argue that there is one obvious size restriction for any kind of editor toolbar, which is viewport width. I think there are pretty much no cases when you expect to see an editor toolbar outside of viewport and be forced to horizontally scroll to see it. This behavior actually looks like a bug to me.

@Reinmar Reinmar added domain:ui/ux This issue reports a problem related to UI or UX. and removed module:ux labels Jan 15, 2020
@Reinmar Reinmar modified the milestones: iteration 29, iteration 30 Feb 6, 2020
@lslowikowska 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).
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants