Give applications-games and input-gaming more contrast with Breeze Dark
ClosedPublic

Authored by ndavis on Dec 10 2018, 8:56 AM.

Diff Detail

Repository
R266 Breeze Icons
Branch
master
Lint
No Linters Available
Unit
No Unit Test Coverage
Build Status
Buildable 5881
Build 5899: arc lint + arc unit
guoyunhe created this revision.Dec 10 2018, 8:56 AM
Restricted Application added a project: Frameworks. · View Herald TranscriptDec 10 2018, 8:56 AM
Restricted Application added a subscriber: kde-frameworks-devel. · View Herald Transcript
guoyunhe requested review of this revision.Dec 10 2018, 8:56 AM
guoyunhe edited the summary of this revision. (Show Details)Dec 10 2018, 8:57 AM
guoyunhe added a reviewer: Breeze.
guoyunhe updated this revision to Diff 47251.Dec 10 2018, 9:14 AM

Add modified icon with light background

guoyunhe updated this revision to Diff 47254.Dec 10 2018, 9:21 AM

Clean up Inkscape metadata

ndavis added a subscriber: ndavis.EditedDec 10 2018, 9:36 AM

In general, color icons are the same in Breeze and Breeze Dark while monochrome icons change their primary color. I think the light and dark versions of this icon should be the same.

I think the overall design of this icon needs to be changed though. The proportions look odd to me. I think basing it on the F310 or F710 would be a good idea since it's already similar to those. Those controllers are a hybrid of the Xbox and DualShock controller designs.

ndavis added a comment.EditedDec 10 2018, 11:29 AM

Here's a rough draft of something similar to the Logitech F 710, but with colors that are more similar to the original gray DualShock controller:

100%

200%

Here's a rough draft of something similar to the Logitech F 710, but with colors that are more similar to the original gray DualShock controller:

100%

200%

Maybe it is better to remove the dark sides? Only F710 has this design. Most controllers, including PS4 and XBox One, are pure white or black or other colors.

This is another example where a subtle outline could help visibility for dark themes, without having to resort to drawing a whole new version of it.

ndavis added a comment.EditedDec 10 2018, 3:02 PM

This is another example where a subtle outline could help visibility for dark themes, without having to resort to drawing a whole new version of it.

An outline would not look very subtle on this shape at this size. I think it needs to be redesigned anyway. As I said in a previous comment, the proportions look weird. It doesn't quite match the folder-games icons either.

ndavis added a comment.EditedDec 10 2018, 3:09 PM

Maybe it is better to remove the dark sides? Only F710 has this design. Most controllers, including PS4 and XBox One, are pure white or black or other colors.

We'll need something to make the handles look somewhat separate from the body. If we don't do that with side grips, maybe we can do that with gradients. I don't think we need to match the most commonly used controllers though since users will still know it's a game controller. I just used that look because I liked the contrast and symmetry.

abetts added a subscriber: abetts.Dec 10 2018, 3:36 PM

It's looking good. I would say change the last tone to a tad lighter. The gray has too much black in it. I would probably move the hue to the yellow side.

@ndavis To be honest, I liked the shape and composition of the original icon better than your proposed new one. I'm not a huge fan of the flat sides and lack of visual distinction between the body and handles. +1 on removing the superfluous Plasma logo though.

@ndavis To be honest, I liked the shape and composition of the original icon better than your proposed new one. I'm not a huge fan of the flat sides and lack of visual distinction between the body and handles. +1 on removing the superfluous Plasma logo though.

What about this?

That's much better! I think I would still prefer a bit more slope on the sides though. However at this point it's just aesthetic quibbling. :)

I made a more detailed version, but I'm not sure if it's going overboard.

@guoyunhe Do you mind if I commandeer this?

@guoyunhe Do you mind if I commandeer this?

Go ahead!

ndavis commandeered this revision.Mar 13 2019, 3:52 PM
ndavis edited reviewers, added: guoyunhe; removed: ndavis.
ndavis updated this revision to Diff 53836.Mar 13 2019, 9:44 PM

Change style for Breeze and Breeze Dark

ndavis edited the summary of this revision. (Show Details)Mar 13 2019, 9:47 PM
ndavis edited the test plan for this revision. (Show Details)
ndavis retitled this revision from applications-games icon for dark theme to Give applications-games more contrast with Breeze Dark.

Better, but the dark parts of the dark version still disappear against a dark background. Most of the time we solve this with a transparent outline (we did this for the clock icon recently), and I think that could work well here too.

Better, but the dark parts of the dark version still disappear against a dark background. Most of the time we solve this with a transparent outline (we did this for the clock icon recently), and I think that could work well here too.

No, there are too many details and not enough room. It worked for the clock icon because a lot of clocks have a frame like that around them.

ndavis updated this revision to Diff 53839.Mar 13 2019, 10:42 PM

Darken the handle grips

ndavis edited the test plan for this revision. (Show Details)Mar 13 2019, 10:43 PM
ndavis edited the test plan for this revision. (Show Details)

No room? Instead of widening the grips by one pixel to make room for the contrast border, how about building it in, effectively narrowing the grips by one pixel?

No room? Instead of widening the grips by one pixel to make room for the contrast border, how about building it in, effectively narrowing the grips by one pixel?

That's what I had in mind to begin with when you said to add a border. It just doesn't look right. There's no controller in existence that looks like that.

ngraham accepted this revision.Mar 14 2019, 12:33 AM

Hmm, I see what you mean. Okay, let's go with this one!

BTW, the duplicate test fails as of f2509047d4372f1a59d8f8b5ff009146f1a6adcb:

********* Start testing of DupeTest *********
Config: Using QtTest library 5.12.0, Qt 5.12.0 (x86_64-little_endian-lp64 shared (dynamic) release build; by GCC 7.3.0)
PASS   : DupeTest::initTestCase()
FAIL!  : DupeTest::test_duplicates() 
  The following files are duplicates but not links:
    - /home/dev/kde/src/breeze-icons/icons/actions/22/go-up.svg
    - /home/dev/kde/src/breeze-icons/icons/actions/24/go-up.svg

   Loc: [/home/dev/kde/src/breeze-icons/autotests/testhelpers.h(42)]
FAIL!  : DupeTest::test_duplicates() 
  The following files are duplicates but not links:
    - /home/dev/kde/src/breeze-icons/icons-dark/actions/22/go-up.svg
    - /home/dev/kde/src/breeze-icons/icons-dark/actions/24/go-up.svg

   Loc: [/home/dev/kde/src/breeze-icons/autotests/testhelpers.h(42)]

Do you think you could fix that after landing this?

This revision is now accepted and ready to land.Mar 14 2019, 12:33 AM

Hmm, I see what you mean. Okay, let's go with this one!

BTW, the duplicate test fails as of f2509047d4372f1a59d8f8b5ff009146f1a6adcb:

********* Start testing of DupeTest *********
Config: Using QtTest library 5.12.0, Qt 5.12.0 (x86_64-little_endian-lp64 shared (dynamic) release build; by GCC 7.3.0)
PASS   : DupeTest::initTestCase()
FAIL!  : DupeTest::test_duplicates() 
  The following files are duplicates but not links:
    - /home/dev/kde/src/breeze-icons/icons/actions/22/go-up.svg
    - /home/dev/kde/src/breeze-icons/icons/actions/24/go-up.svg

   Loc: [/home/dev/kde/src/breeze-icons/autotests/testhelpers.h(42)]
FAIL!  : DupeTest::test_duplicates() 
  The following files are duplicates but not links:
    - /home/dev/kde/src/breeze-icons/icons-dark/actions/22/go-up.svg
    - /home/dev/kde/src/breeze-icons/icons-dark/actions/24/go-up.svg

   Loc: [/home/dev/kde/src/breeze-icons/autotests/testhelpers.h(42)]

Do you think you could fix that after landing this?

Looks like I forgot to make the icon actually 24 px when I copied in the 22px version. I'll be sure to fix that.

I should probably also update the 64px device icons for gamepads to match this.

ndavis updated this revision to Diff 53925.Mar 14 2019, 9:23 PM

Update input-gaming and make circle around dpad and colored buttons darker

ndavis edited the test plan for this revision. (Show Details)Mar 14 2019, 9:27 PM
ndavis retitled this revision from Give applications-games more contrast with Breeze Dark to Give applications-games and input-gaming more contrast with Breeze Dark.Mar 14 2019, 9:33 PM
rooty accepted this revision.Mar 16 2019, 6:34 PM
rooty added a subscriber: rooty.

Much better than before

filipf accepted this revision.Mar 16 2019, 6:53 PM
This revision was automatically updated to reflect the committed changes.