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

SplitButton's isOn=true state is barely visible. #3394

Closed
jodator opened this issue Feb 8, 2018 · 3 comments · Fixed by ckeditor/ckeditor5-theme-lark#133
Closed

SplitButton's isOn=true state is barely visible. #3394

jodator opened this issue Feb 8, 2018 · 3 comments · Fixed by ckeditor/ckeditor5-theme-lark#133
Assignees

Comments

@jodator
Copy link
Contributor

jodator commented Feb 8, 2018

The same goes for actionView:
selection_032

and arrowView:
selection_033

@jodator
Copy link
Contributor Author

jodator commented Feb 8, 2018

Adding:

& > .ck-button,
& > * > .ck-button,
& > * > * > .ck-button {

in https://github.com/ckeditor/ckeditor5-theme-lark/blob/7999134bef289f75e827d83b531e5b1aeaa71f22/theme/ckeditor5-ui/components/editorui/editorui.css#L39-L49

Fixes this but might be not the best solution:

selection_034 selection_035

@oleq
Copy link
Member

oleq commented Feb 8, 2018

The problem has been analyzed correctly. That's more or less what we're supposed to do.

But still that's a tricky one, I'm afraid. I've never liked this Christmas Tree selectors but I couldn't come up with a better one. Ideas:

Decentralization

We could move this logic to components/features – a drop-down would add such style and we could even provide a mixin for this (delivered by editorui). But then, these styles are not very useful, if someone decided to compile the theme without the EditorUiView (e.g. replaced with something else?). It's an upside-down approach anyway, a drop-down (child) understanding stuff about a hypothetical parent (toolbar). A no-go for me.

Narrowing down

Instead of & > * > * ... we could simply put all use cases here like

& > .ck-button,
& > .ck-dropdown > .ck-button,
& > .something-to-do-with-split-button > .ck-button {

There are not many of them. Would there be more (like much more)? I don't think so. It would also make more sense for developers decyphering this code because it clearly states what cases it covers.

LGTM

Another class

A perfect solution would be a CSS class (e.g. .ck-toolbar__button) for such buttons to be styled. But honestly, I see absolutely no way to add it to a dropdown, which is hosted by the toolbar. A toolbar would need to know that its child's button (div.ck-dropdown > .ck-button) should get such class. How? No idea. But it would definitely be the most elegant approach.

cc @Reinmar @dkonopka

@jodator
Copy link
Contributor Author

jodator commented Feb 9, 2018

So it should be like this:

& > .ck-button,
& > .ck-dropdown > .ck-button,
& > .ck-dropdown > .ck-splitbutton > .ck-button {

I'm fine with that as it is more clear what it does then Xmas tree before.

oleq referenced this issue in ckeditor/ckeditor5-theme-lark Feb 9, 2018
Fix: Split button's arrow button should get a proper styling when the button is on. Closes #131.
@mlewand mlewand transferred this issue from ckeditor/ckeditor5-theme-lark Oct 9, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants