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

Should toolbar have a gradient? #805

Closed
Reinmar opened this issue Feb 1, 2018 · 12 comments
Closed

Should toolbar have a gradient? #805

Reinmar opened this issue Feb 1, 2018 · 12 comments
Assignees
Labels
Milestone

Comments

@Reinmar
Copy link
Member

Reinmar commented Feb 1, 2018

image

My feeling is that a gradient is a bit out of fashion. WDYT?

@oleq
Copy link
Member

oleq commented Feb 1, 2018

A follow-up of #645.

@oleq
Copy link
Member

oleq commented Feb 5, 2018

If we go with the gradient, this one must be fixed:

image

@scofalik
Copy link
Contributor

scofalik commented Feb 5, 2018

I don't like gradient. It looks a bit weird when you hover over icon - the contrast near top of the icon is different than on the below.

@Reinmar
Copy link
Member Author

Reinmar commented Feb 5, 2018

I was curious how it's going to look without the gradient and I'm not satisfied with this eiter :P

A little darker:

image

A little ligther:

image

Current:

image

@dkonopka
Copy link
Contributor

dkonopka commented Feb 5, 2018

For me, that gradient in toolbar looks like something is not rendered properly. Also gradient is not working good with states of buttons + arrows in balloons.

IMHO we should try to decide one color, like #f8f8f8 or #dadada and leave gradients.

screen shot 2018-02-05 at 15 56 26

Edit: @Reinmar I've meant #fafafa.

@Reinmar
Copy link
Member Author

Reinmar commented Feb 5, 2018

#dadada is a bit too dark IMO... OTOH, https://www.youtube.com/watch?v=lNYcviXK4rg

@Reinmar
Copy link
Member Author

Reinmar commented Feb 5, 2018

BTW, if we'd remove the gradient and go with a light background then the borders stand out too much.

Is the contrast between borders and the toolbar background important for a11y?

@oleq
Copy link
Member

oleq commented Feb 6, 2018

Is the contrast between borders and the toolbar background important for a11y?

Not much. It's more about the design.

@oleq
Copy link
Member

oleq commented Feb 6, 2018

BTW: Please make sure you visualize the editor as a part of an environment. Otherwise, it does not make much sense. CKEditor is almost never a standalone application in the web page. It makes a difference.

Gradient

ckeditor5-in-drupal-gradient

Flat

ckeditor5-in-drupal-flat

@Reinmar
Copy link
Member Author

Reinmar commented Feb 6, 2018

This is a good point. There are, however, many kind of apps to which CKEditor will be injected. I guess you can't look ideal in all of them.

From the two screenshot of CKEditor 5 in Drupal 8 I'm totally ok with both. I guess that the same will be for Wordpress, Neos or whatever else you'd try. Moreover, developers who will be integrating CKEditor 5 into these apps will be able to easily adjust the colors and gradients and everything. Which means that we fully satisfy this requirement (for CKE to be easy to integrate).

What matters now, the most, is the initial look of CKEditor 5 on our websites (docs and ckeditor.com). I'd actually focus on these, if we're talking about putting things into perspective.

@Reinmar
Copy link
Member Author

Reinmar commented Feb 8, 2018

Interestingly, this gradient is far less visible on my MB Pro than on my Dell external LCD. On my MB Pro it looks good :D I reported the issue when working on the Dell monitor.

@oleq oleq added this to the iteration 14 milestone Feb 14, 2018
@oleq oleq self-assigned this Feb 14, 2018
@Reinmar
Copy link
Member Author

Reinmar commented Feb 14, 2018

Result of our discussion with @dkonopka and @oleq. With and without gradient:

ckeditor5 github io_docs_nightly_ckeditor5_latest_examples_builds_classic-editor html 2

ckeditor5 github io_docs_nightly_ckeditor5_latest_examples_builds_classic-editor html 3

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants