Mockups/new design discussions

[merlijn-sebrechts]

I sum it up to this for now based on your answers and including my favorites (hope this is right):

Looks good! I like the consistency between the various elements, nothing seems out of place.

Having some buttons focus (like the Shell ones) representing differently may look inconsistent?

I don’t think they are different? As I understand it, focused buttons have an orange selection border. In the following screenshot; the states are the following:

normal | hoover | active | normal focus

This is the same for other elements;

focussed (the orange is brighter in reality, but the screenshot isn’t able to capture it completely)

unfocussed

@luxamman

Can you elaborate on what the focused state of the pathbar is? For example, what happens if the “folder” element is focused in the next screenshot?

My guess would be that the entire border is orange, instead of only the bottom line, similar to how we do it now, yes? Like in the following screenshot, but then with your updated folder button.

And for the top bar and dock; I like the shadow because it clearly differentiates between top panel and application. Otherwise, the difference between the top bar and application is identical to the difference between application window bar and application menu bar.

[c-lobrano]

If I had to choose, I’ll go for #2, but I’m probably the only one who likes no border at all

To me, top panel shadow might have a meaning only with un-maximized windows, since I expect windows and top panel to be on the same “3D” level above the desktop and I don’t see any reason for a third level (desktop, windows, top panel).

[didrocks]

I don’t think they are different? As I understand it, focused buttons have an orange selection border.

Indeed, in that example, however, not in the proposed power off dialog:

[luxamman]

Hey everyone - seems I can again sum it up today (milestone ahead)!

---

Again at first the flat button in the header on dark:

Like it was: Flat | Hover | Clicked | Focus

---

Next, breadcrumbs:

Also flat, orange line for orientation. Like @merlijn-sebrechts pointed out, surrounding orange for focus.

---

Next, power off:

Like @didrocks and @merlijn-sebrechts discussed, of course I made a mistake - the focus state should again be an orange surrounding.

---

And the area/tab/whatever switcher:

Also here the focus is an orange surrounding.

---

I think we have a little design guide for the buttons on dark now if everyone is with me. I did not mentioned every circumstance and for testing, I like to adopt behaviors like they are now to see what’s good. Also, the system design is sometimes with squircles I did not recreate here:

• Only buttons when clicked or permanent clicked have inner-shadow
• Focus is always a surrounding orange line (should be present everywhere in the system)
• Connected buttons and breadcrumbs and similar have a grey back, selected areas/folders have a bottom orange line for feedback/orientation. The inner shadow could make (visual) problems I guess in some circumstances, so I suggest simple flat design. And they have a padding or background color border between to look separated.

---

So much for the buttons, top bar and dock will be next!
Stefan

[madsrh]

Stefan nice recap

You skipped the “Hangout” question It was much faster to make/take decisions there. Should we plan another session?

I’m just curious as to why this dialogue is using these “special styled” buttons and not the GTK ones like at GDM login (also on dark background)?

Not the prettiest example, but this is from Jade linux:

https://jadelinux.net/images/shutdown/shutdown.png

I’m guessing something like: it looks nicer, upstream does this, …

[luxamman]

You skipped the “Hangout” question It was much faster to make/take decisions there. Should we plan another session?

Sorry, just did not have the time over the last days and so I quickly made the mockups between work and meetings to force and to find a line. Maybe today in the evening or night…

I’m just curious as to why this dialogue is using these “special styled” buttons and not the GTK ones like at GDM login (also on dark background)?

Well, we do have the nicer once here^^
I hope we do not have to consider other designs in our decisions…

[luxamman]

About the top bar and the dock:

After getting your feedback and testing and researching a little more, a combination of designs should be working well.

First, window mode (not perfect mockup/rendering here but enough to get the idea - strange bright line in between):

In window mode, there is a shadow coming from the top bar down, separating the bar from the dock and to lift the dock a little - like the windows. This way we have a nice separation and the bar is also floating in front of the wallpaper on an alike level like the windows.
Maybe we need a shadow for the dock too, if it feels not right to have the dock on wallpaper level only.

---

Next, the max-windows mode:

We get rid of the shadow and the top bar gets a dark line to separate from the dock and the max-window. So we should have no problems with the shadow from the bar in some circumstances and apps/programs. I would also suggest (not like here in the mockups) that the transparency should be a little less (compared to window mode), but not get lost completely like it is now. This way we have a modern and clean look, also not that heavy like it is now (depending on the wallpaper of course).

---

Some may notice, this behavior and look is quite the same as in macOS - with the dock and how the windows are handled this is at least for me a nice and simple way to do it. Also, it looks and (hopefully) feels right.

Awaiting your feedback,
Stefan

[c-lobrano]

Great work as usual @luxamman

+1 for the top panel shadow, I like the effect

I also like a lot the new $inkstone colored line separation between windows and top panel when maximized (and I didn’t expect that :D). It looks nicer than just black.

I’m against, however, to keeping the transparency of top panel and dock when window is maximized. I understand that it might look more modern and cleaner, but with the headerbar/titlebar not transparent, it looks out of place.

[luxamman]

Thanks!

I’m against, however, to keeping the transparency of top panel and dock when window is maximized. I understand that it might look more modern and cleaner, but with the headerbar/titlebar not transparent, it looks out of place.

I’m fine with that, we can keep things like they are now and just adjust shadows and lines to see how it looks and feels. If we need more feedback over time, I can create mockups and start another poll to see what the community thinks.

I have some time now and so I will create some issues for all of that, hope you @c-lobrano and @godlyranchdressing doing good - lot of changes coming up^^

I’m happy to see progress and with @madsrh sounds, the system will be shiny, new - and will sound good

[luxamman]

Three more points to discuss:

#1 - Buttons on dark, like login and in the information center:

This seems to be the opposite of the bright buttons, but for me, every non-bright button should be flat - the bright line on the bottom looks not right here. Sometimes (like in the rubbish bin) it seems to work - if it is the same design.

---

#2 - Dock icon background - white square

This is just out of place, I would prefer the way it was - a simple white square all from left to the right. With the orange dots, it just looks offset. Maybe even no border (or only on top/bottom).

---

#3 - Rubbish Bin Color

This color is never used and to go with the meaning we should consider the Ubuntu design color #ED3146 (red, or variations of that color) for something like that. This has been discussed, but still is like that…

---

Lot to discuss and to do
I can’t wait until more changes are live for testing, thanks to all!

[merlijn-sebrechts]

About the Ubuntu dock overriding our css:

It’s supposed to apply (in order of loading, first one can be overriden by later ones):

1. general mode css (in /usr/share, the theme you are hacking on)
2. extensions stylesheet.css
3. extensions mode_name.css (ubuntu-communitheme).

There is no way for !important to take precedence.

In the case mode_name.css == stylesheet name (case for the ubuntu theme, not for the ubuntu-community-theme, so I need to test it), the trick is that an empty extension mode_name.css file will make the general mode css file taking precedence over the general extensions stylesheet.css! This is another option as well. But I think the cleanest way is to ship a mode_name.css file next to stylesheet.css in the extension.

Does this means that we need to fork the Ubuntu dock and provide it in our ppa? Or is it better for the gnome-shell-communitheme package to install ubuntu-communitheme.css in the folder of the extension?

[didrocks]

I would go for the second solutoin: Having the gnome-shell-communitheme package installing the css in the extension folder directly. If the extension isn’t present, it’s not a biggie.

[madsrh]

Hi guys

I hope you’re all doing great!

I’m really happy to see that there has been a few commits from users outside of this team We should definitely encourage that - awesome!
As @luxamman said, the theme is coming together nicely and if there’s someone standing next to you, please ask them to pat you on the back - you’ve deserved it

While there’s still a ton of things to work on with the theme, I got kind of sidetracked this weekend and with a little help from @godlyranchdressing I’ve uploaded a “proof of concept” cursor theme to github. My idea was to replace the black/white spinner with the blue suru spinner (like in Nautilus and Widget factory). It’s very simple (and yet not working 100% ) as the icon theme only contains the spinner, the rest is inherited from DMZ.
A more comprehensive task, would be to change this spinner to something less Windows-like - something I would like to see. There’s plenty of ideas that might fit better with Ubuntu (Circle of friends, Plymouth dots,…).

I know that this is very much outside the scope for this theme and it could feel like we’re spreading too thin, but I believe the details makes the difference for the allover experience.

[didrocks]

Nice work! I really like it However, the blue color + style makes me thinking about Windows 8/10, am I the only one having this feeling?

That the kind of change we can definitively something in the theme IMHO, as indeed, it’s something quite important for the default look and feel.

[madsrh]

…However, the blue color + style makes me thinking about Windows 8/10, am I the only one having this feeling?

No

…change this spinner to something less Windows-like - something I would like to see. There’s plenty of ideas that might fit better with Ubuntu (Circle of friends, Plymouth dots,…).

I’ll try to come up with something, unless you can point to one idea in the link above, that you think I should base my animation on. In random order, I like: Ellipsis, tail, message, typing, recycle, swing, balls.

[didrocks]

The dots may be an interesting idea, as they basically already mean “waiting to load” on plymouth boot screen…

[luxamman]

We get some attention, probably more testers in the near future:

http://www.omgubuntu.co.uk/2018/02/install-the-new-ubuntu-theme

[c-lobrano]

hopefully I’ll be able to test it tonight or tomorrow, but in any case, great work!

I’m really happy to see that there has been a few commits from users outside of this team We should definitely encourage that - awesome!

[c-lobrano]

I might have done something wrong. I still see the old spinner

this is the content of my /usr/share/icons

$  ll /usr/share/icons/Communitheme-White/
total 200
drwxr-xr-x 6 root root   4096 feb  6 08:59 cursors
-rw-r--r-- 1 root root     32 feb  6 08:59 cursor.theme
-rw-r--r-- 1 root root 189729 feb  6 08:59 dmz.svg
-rw-r--r-- 1 root root   1713 feb  6 08:59 index.theme

and Communitheme-White is selected in Tweaks

[madsrh]

I’ll look into it. I’m working on a new spinner.