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

Spacing in the toolbar and buttons #820

Closed
scofalik opened this issue Feb 5, 2018 · 4 comments
Closed

Spacing in the toolbar and buttons #820

scofalik opened this issue Feb 5, 2018 · 4 comments
Assignees
Labels
package:theme-lark type:task This issue reports a chore (non-production change) and other types of "todos".
Milestone

Comments

@scofalik
Copy link
Contributor

scofalik commented Feb 5, 2018

I have a feeling, that spacing between icons is too small. Toolbar feels crowded, compressed, narrowed. I feel that in the old theme there was just enough "air" between icons.

You can see how those changed here: https://user-images.githubusercontent.com/1099479/35739226-3d784046-0831-11e8-9528-ed16a9df86f3.gif

I also feel like it wouldn't be bad if the toolbar was a tad higher (like it was). Although that might look bad with new dropdown design.

@dkonopka
Copy link
Contributor

dkonopka commented Feb 7, 2018

I had the same feelings working on Letters. Spacing is important especially in the balloon toolbar where for example we have only four buttons (bold, italic, link, comment).

I think we can easily enlarge padding of buttons (without changing icon size) from:
--ck-spacing-tiny (0.15em) to 0.25em.

Current padding 0.15em for buttons

padding-015

Proposal padding 0.25em

padding-025

@scofalik
Copy link
Contributor Author

scofalik commented Feb 7, 2018

My problem wasn't necessarily padding, but just space between icons. It could be also solved with margin. I am not saying that adding more padding is wrong, just stating that it's not strictly about padding.

It's also a question about how much space we want to have between two selected buttons.

@oleq oleq added this to the iteration 14 milestone Feb 14, 2018
@oleq oleq added status:confirmed type:task This issue reports a chore (non-production change) and other types of "todos". labels Feb 14, 2018
@oleq oleq self-assigned this Feb 14, 2018
@Reinmar Reinmar changed the title Spacing between icons in toolbar Spacing in the toolbar Feb 14, 2018
@Reinmar Reinmar changed the title Spacing in the toolbar Spacing in the toolbar and buttons Feb 14, 2018
@Reinmar
Copy link
Member

Reinmar commented Feb 14, 2018

After a discussion with @oleq and @dkonopka I changed the title of this ticket to also cover spacing inside buttons and all types of spacing around buttons (and not only spacing between buttons).

One of the ideas (which @pjasiun brought) was to limit the spacing between toolbar and icons to have more "padding-less" effect:

image 7

We can also add spacing inside buttons (around icons):

image

To compare, this is the current state:

image

@oleq
Copy link
Member

oleq commented Feb 14, 2018

Unfortunately making the spacing around the buttons is not an option because it starts looking weird in balloons which have arrows. Check out my previous comment (section "Paddings in the UI").
image

dkonopka added a commit to ckeditor/ckeditor5-theme-lark that referenced this issue Feb 15, 2018
Other: Increased the spacing in the toolbar by making the buttons bigger. Unified rendering of several components. Closes ckeditor/ckeditor5#820.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package:theme-lark type:task This issue reports a chore (non-production change) and other types of "todos".
Projects
None yet
Development

No branches or pull requests

4 participants