Mockups/new design discussions

[godlyranchdressing]

Happy new year, everyone.

Just a reminder, unless you delete the CSS rules in /usr/share/gnome-shell/extensions/ubuntu-dock@ubuntu.com/stylesheet.css, those will override the theme’s. We can probably get around this by appending !important at the end of every changed/new rule for now, though.

Also, we need to figure out a way to indicate what version of the theme we’re using. Things like the headerbar buttons being too light when not in focus have been changed, those changes just haven’t been merged yet.

@luxamman

For now, honestly, the blue is just present with the volume and this is not making sense entirely. There is no concept and the blue just breaks out from the orange only accents. Compressing / copy files in “Files” is when clicked on the progress clock presented by a green bar. Downloading in Firefox is also orange. So for now I’m still not convinced by a single blue bar. And for testing: the blue should fit the orange, like the base #1C6595 and lighter variations like #37759D and #5A92B6 and darker variations like #0E4E78 and #053C5F. Overall orange and blue are working fine together, it’s just confusing if the only visible blue in the whole system is the volume bar.

There’s quite a few widgets that look like progressbars that use a couple colors. There’s the GtkScale/volume slider that we’re proposing should use the blue and would be the most common widget seen, but there’s also the levelbar and progressbar.

The levelbar uses three colors to indicate whether or not it’s low, not empty, high or full. The proposed colors would be:

low = yellow
high (or not empty) = blue (instead of the default orange)
full = green

This is how it looks in SCSS with the different states:

&.low { @include block_highlight($warning_color); }

&.high, &:not(.empty) { @include block_highlight($neutral_color); }

&.full { @include block_highlight($success_color); }

Progressbars only use one color from start to finish which is the green you’ll see when compressing a file. Maybe we can use the blue here instead though.

On minimizing the use of orange, what does everyone think about something similar to the following for selected dates in the calendar?

I hope we can semi-finalize things by the end of the month so we can do mass testing through February.

[c-lobrano]

@godlyranchdressing

Just a reminder, unless you delete the CSS rules in /usr/share/gnome-shell/extensions/ubuntu-dock@ubuntu.com/stylesheet.css, those will override the theme’s.

should changing this file’s name have the same effect?

@godlyranchdressing

On minimizing the use of orange, what does everyone think about something similar to the following for selected dates in the calendar?

Nice idea, I’m only worried about creating too many corner cases for indicators

[godlyranchdressing]

@c-lobrano

should changing this file’s name have the same effect?

Yeah, that does it. If anything goes wrong for anyone there’s always: sudo apt install gnome-shell-extension-ubuntu-dock --reinstall

[godlyranchdressing]

@luxamman

We have two kinds of feedbacks on clicked buttons - inner-shadow and the orange line. I guess when having the orange line, it is not necessary to give the button an inner-shadow. When having a lot of buttons like here, it immediately starts to look nervous and crowded, also because the “Home” button is elevated quite next to the lowered button. Let’s keep it simple and stylish.

We have that kind of buttons also in the software center/wallpaper and when having categories. So maybe let’s not think of them like typical buttons, but categories. Make them flat with a background, an orange line and a simple hover grey. So for now, just remove the inner-shadow for testing.

The other way is to make them flat (if the orange line is not fitting to the rest of the system) and just work with the background grey and maybe if needed, an inner-shadow.

In that case, how about something like this?

Though if the stackswitcher follows that style we’ll need to either get rid of the border-radius

Or get rid of the borders entirely

@luxamman

They follow the flat buttons now, like I like them to be. Maybe we can add a background grey to make them more noticeable, but at least the hover grey needs to be brighter.

I tried with a background color but I got rid of it since it messed up the openweather extension. Some extensions borrow class names and in this case, the openweather extension borrows the “.system-menu-action” class, it doesn’t seem to use the hover/active state though.

@madsrh

Good point on the orange. I’m guessing this should happen with every color (green, blue, etc.)? Just clarifying.

[madsrh]

@godlyranchdressing I see that you’re using #f7f7f7 for all the text. Maybe remove the bold font from the selected text and just adding a bit of gray to the rest?

How about using the full headerbar height like the Matcha theme does?

@godlyranchdressing

Good point on the orange. I’m guessing this should happen with every color (green, blue, etc.)? Just clarifying.

Yes! Adwaita doesn’t do this, but Ambience does
Speaking of colors, could the (now blue) volumeslider be a few pixels thinner, and the same for the orange around combo-boxes? When searching for a file in Nautilus, the orange border still feels a bit like a warning. Not sure if a 1px orange border solves that or it should be blue or something different? @luxamman ?

All the themes I’ve tried, all create a color-overlay on the selected file in Nautilus. This, especially with orange, almost always gives the icon a funky (in lack of a better word) color. Would it be possible to only color the background like this?

[godlyranchdressing]

@madsrh

@godlyranchdressing I see that you’re using #f7f7f7 for all the text. Maybe remove the bold font from the selected text and just adding a bit of gray to the rest?

Whoops, yeah, adding grey to the inactive elements text color makes sense. I’ll see how the current inactive text color works since Downloads and Home/Archives look very similar to me.

@madsrh

How about using the full headerbar height like the Matcha theme does?

My only problem with using the full headerbar height is that it’ll only be the path-bar that uses it. The stackswitcher (which is the only other button that the underline effect would work well for) can’t replicate it.

@madsrh

Speaking of colors, could the (now blue) volumeslider be a few pixels thinner, and the same for the orange around combo-boxes?

I was thinking that it was too thin. Without a border around it (like Adwaita does it) it doesn’t really pop out, especially for the dark theme. Maybe we could do some testing with the border again? Right now checkboxes and I think switches use it.

On the blue, we really should do a poll or come to some sort of consensus. If we change the entry focus color to blue then I think it’ll be best if we just change everything to blue otherwise we’ll end up with stuff like the following:

@madsrh

All the themes I’ve tried, all create a color-overlay on the selected file in Nautilus. This, especially with orange, almost always gives the icon a funky (in lack of a better word) color. Would it be possible to only color the background like this?

Not from what I’ve seen. The most I came out with was this:

.view:selected{ background-color: #ccc; background-image: linear-gradient(to right, #e95420, #e95420)

The folder becomes just a little darker since it’s being colored based on #CCC while the text background color is #E95420 since it’s pulling from the (fake) gradient. We can have this apply only to Nautilus.

[merlijn-sebrechts]

PS: It might be good to create issues for the stuff where we agree.

This way, you can see which issues have been addressed yet and which haven’t, and you don’t have to repeat yourself. This all-in-one conversation is good for general discussion, but it becomes complicated to track individual issues.

• GTK issues: https://github.com/Ubuntu/gtk-communitheme/issues
• Gnome Shell issues: https://github.com/Ubuntu/gnome-shell-communitheme/issues

Let me know if you need more permissions to triage issues etc.

[c-lobrano]

Also, please, address one issue at a time with PR or it is really complicated to create new branches from master to develop something else

[luxamman]

@madsrh

A few comments on a screenshot from today:

Thanks for the feedback!
Yes I’m with you with inactive windows, windows controls and the dock (still think we need a background), only the grey buttons are okay for me, I did get used to the grey quick.

@godlyranchdressing

The levelbar uses three colors to indicate whether or not it’s low, not empty, high or full.

Well (if I understood right), lot’s of time I don’t have to have a kind of warning or a kind of rating with multiple colors. That’s only useful and meaningful when it is warning to not go further. Lot’s of laptops would have the volume up to the red area, but that is not dangerous at all. Copy a file would also be dangerous at the end of the progress. I would stick to a single color.

@godlyranchdressing

On minimizing the use of orange, what does everyone think about something similar to the following for selected dates in the calendar?

That’s is okay for me - in your mockup the orange needs to be brighter (sometimes it is hard to see on a png) because the readable layer is too far away in contrast from the orange - so you have to focus your eyes on the contrast. For me, the actual way is fine and working for me.

@godlyranchdressing

In that case, how about something like this?

Yeah, that looks much cleaner and more focused on what’s important! Maybe we can try without border in some circumstances like when having categories, in “Files” it maybe is too loose without (because of the crowded buttons).

@madsrh

volumeslider be a few pixels thinner

Yes, true!

@madsrh

When searching for a file in Nautilus, the orange border still feels a bit like a warning.

Also true, for me less like a warning because we get used to the orange over time. But making it less warning-like sounds good, not sure if we can borrow the buttons design/border to let them fit in and be less warning?
And speaking about nautilus, maybe @godlyranchdressing knows - did the icons like search/grid/settings get bolder?

@godlyranchdressing

On the blue, we really should do a poll or come to some sort of consensus. If we change the entry focus color to blue then I think it’ll be best if we just change everything to blue otherwise we’ll end up with stuff like the following:

It’s like changing orange to blue because of… blue! Here we better work with (a grey button border) gray, before it gets too colorful/nervous/unfitting. When using the blue, we should give it a “task” or meaning, like indication or time (like copy files). And that brings me to an other question: is the mouse circle (when loading stuff) also a part of the theme? I would then also use a blue with a different style, like in the Suru mockups.

@godlyranchdressing

Not from what I’ve seen. The most I came out with was this:

Hm, maybe? You can try and decide, I guess. Is it enough noticeable?

@merlijn-sebrechts

It might be good to create issues for the stuff where we agree.

Thanks!

@c-lobrano

Also, please, address one issue at a time with PR or it is really complicated to create new branches from master to develop something else

I would suggest you filter the tasks from here to github issues until we are bugtracing?

@godlyranchdressing

I hope we can semi-finalize things by the end of the month so we can do mass testing through February.

Would be a good milestone, I will have another big session for testing and trying after the next update - please tell us when you create a new version with the latest changes.

And about buttons: did you change the colored buttons like the green/darker? In the software center they look nice, on the login screen they look still not polished.

Thanks, Stefan

[c-lobrano]

I opened some initial “enhancement” tickets on gtk-communitheme. Some of them might have been already fixed by the last @godlyranchdressing merged PR, so feel free to close them if so.
I also preferred to keep the default github label names so far, but we can change them in “task”, “to be done” or whatever you like the most

[godlyranchdressing]

@luxamman

And speaking about nautilus, maybe @godlyranchdressing knows - did the icons like search/grid/settings get bolder?

I don’t know for sure, I haven’t actively been following the icon theme. It could be a color illusion.

@luxamman

And that brings me to an other question: is the mouse circle (when loading stuff) also a part of the theme? I would then also use a blue with a different style, like in the Suru mockups.

Yeah, that could be done. I’ll see if I can get the colours to show up more often.

@luxamman

And about buttons: did you change the colored buttons like the green/darker? In the software center they look nice, on the login screen they look still not polished.

I think it’s something about the way the Shell draws things. I’ll see if I can make it look better.

@c-lobrano

I opened some initial “enhancement” tickets on gtk-communitheme. Some of them might have been already fixed by the last @godlyranchdressing merged PR, so feel free to close them if so.

Great! Sorry for the pull request/commit spam. I’ll make some issues myself.

[c-lobrano]

@godlyranchdressing

Great! Sorry for the pull request/commit spam. I’ll make some issues myself.

No problem at all

This question comes from Windows control: style buttons only when hover PR, that is actually changing in

So for this PR:

*   add square hover effect

my idea is that

As far as I can think of it, the box hover effect can be obtained only using images for the buttons. Currently the circular hover effect is performed by the button itself, if we want a bigger square and keep at the same time the “little” red circle inside, the circle should be provided by the image inside the button (so that the button boundaries can be expanded).

does anybody knows (@godlyranchdressing very likely ) if I’m wrong here?

[merlijn-sebrechts]

PS: all ppa builds on launchpad are disabled until further notice as emergency measures [meltdown and spectre]. Meanwhile, you can build communitheme from source if you want to see the latest code.

[godlyranchdressing]

That sounds like the gist of it. Once there’s a mockup to work from we’ll need to recreate the look in the assets.svg file and then use background-image instead of background-color/border. That’ll let us use whatever dimensions we want.

Since it’ll involve more than just CSS I think it’s best we finalize the look of things before loading up Inkscape, though.

[c-lobrano]

@godlyranchdressing

Not from what I’ve seen. The most I came out with was this:

.view:selected{ background-color: #ccc; background-image: linear-gradient(to right, #e95420, #e95420)

The folder becomes just a little darker since it’s being colored based on #CCC while the text background color is #E95420 since it’s pulling from the (fake) gradient. We can have this apply only to Nautilus.

+1 for this solution

[godlyranchdressing]

Hey guys, just wanted your opinion on something as this involves the ever popular blue vs orange color choice. Current context menus in the theme look like this:

While Suru’s looks like this:

Instead of an orange color a darker grey is used. The padding and spacing is also a lot more. The blue we can ignore.

But on another note, it is possible to replicate the blue the way Unity 8 uses it. If you open up the GTK3 Widget Factory and press tab a couple of times, you’ll notice a faint border appearing over some elements when they come into focus:

Current - >

To match Suru ->

Combination ->

Ambiance (as an example) ->

This style can be changed depending on the element so the focus effect for the switch and buttons doesn’t necessarily have to use the blue if we don’t want it to. Even though I changed some things for the above effect, the focus style for buttons is altered further down in the stylesheet and retains the grey:

[merlijn-sebrechts]

I like “combination” best, but I think the square corners of the highlight don’t really fit into the design. Is it possible to have the same rounded corners as the other elements?

[c-lobrano]

Consider that the Ambiance version will be (hopefully ) changed into this

https://user-images.githubusercontent.com/2883614/34204903-b9028a7e-e580-11e7-85d5-4c0e0dafaebb.png

(there is an open MP about it) that has slightly rounded corners

[godlyranchdressing]

Hey guys, I’ve been trying to make the dark theme usable but I was thinking that the raised button effect doesn’t translate over well. I copied the Shell’s button style for the dark GTK3 theme and updated the light theme’s design to match (which included making them lighter as per @madsrh’s advice). Do you think it looks alright?

Also something to mention, GTK3 headerbars go into a selection mode where you tick off different things. You can go into GNOME Software, go into the Installed category and click on the tick that appears in the headerbar to see what it looks like. The orange, again, makes it looks like something dangerous is happening so I was wondering what colour should be used here instead. The blue?

[c-lobrano]

@godlyranchdressing

Do you think it looks alright?

I’d say they look even better, awesome!

@godlyranchdressing

The orange, again, makes it looks like something dangerous is happening so I was wondering what colour should be used here instead. The blue?

That’s weird, but I’d keep the orange, since it’s still a “selection” and so the meaning is right.