Yaru: Save dialog enhancements

Created on 24 Apr 2018  路  22Comments  路  Source: ubuntu/yaru

I don't have the answer for this one, but whenever I see the save dialog, I always think it looks a bit off 馃

  • The textfield where you have to type the filename is almost impossible to spot if it isn't selected. Maybe the background is just inherited from the darkmode. Perhaps this should be white as it is in Ambiance?

image

  • The "browser-header-stack" panel looks weird being white when there's a table header with a lightgray background below - looks like something went wrong. Here I tried to make it darker. Is it too many shades of gray? Perhaps just use the sidebar color?

save

Enhancement Design

Most helpful comment

@clobrano I've found one additional issue which you could resolve with this:
image
The color of the text should be black in the dark version (peek uses the dark one)

All 22 comments

What about headerbar button hover background?

image

Would be enough to make it look like we had a plan! =D

@clobrano You don't like the white background? IMO the hover background is still too dark

Unfortunately white background is so strong that selection ring is no more visible. This way the entry looks visible to me, fixing the original problem, without distracting because if it's not selected, my attention is actually elsewhere in the window.
Not to forget that the entry is the first thing selected when window opens, so the user should be able to understand what it is and how to use it. What do you think?

Unfortunately white background is so strong that selection ring is no more visible. This way the entry looks visible to me, fixing the original problem, without distracting because if it's not selected

I agree @clobrano! Although it's a small improvement, the hover background is an improvement for sure.

What do you think about the "browser-header-stack" panel?

What do you think about the "browser-header-stack" panel?

Uhm, darker because the pathbar is already the same color of "name" row below, right?

@clobrano I can't tell on my phone 馃槅 but yes +1 for something darker

Alright, this actually requires some time, since all the path-bar inside a filechooser is to be restyled :smile:
I'll work on it

EDIT: but, I can start pushing the change on the entry (I added a 5% brightness to hover bg color), and open a new ticket for the filechooser's path bar

Consistency-police here:
Shouldn't the entryfield look like this?
password

Worth a try

Nope - the hover background color is better.
image

Totally unrelated: did you notice the blurry edge of the Gedit over Nautilus? I was wondering if a border would fix this or what do you think?
image

...But here's a fix @NusiNusi 馃ぃ
image

as long as all entryfields look the same i am happy. buuuuuut the white entryfield somehow "eats" the orange. The orange is this way for me not so strong visible anymore. dark entryfield looks IMHO better.

Okay, it was a bad joke @NusiNusi - sorry. Carlo already killed the white fields 馃拃

I'm not sure if we can use the same color - it just doesn't look good. I would love to see them unified, but I would rather they look great but differently styled. Also, they are not exactly the same thing: one is a shell dialog and the other is part of the GTK theme.

@clobrano I've found one additional issue which you could resolve with this:
image
The color of the text should be black in the dark version (peek uses the dark one)

The white entry field looks better than I thought it would! The only problem is it overpowering the orange. Though the following is still an option. I mentioned this to fix the strange "orange border with blue text selection" inconsistency. Just rely on caret-color instead of border-color. Maybe this is too muted though.

entry

I feel white entry in headerbar is a bit too much. I came up with this now

image
image

@clobrano Isn't the first pic how it already is? I think the entryfield should have an orange border to show that it is selected and needs my attention. But yes, we could test the second version you showed. Bit it might be confusing: _Is this a button or an entryfield? Is "Untitled Document 1" the name of the window or a possible name for a file i can change?_

@NusiNusi :open_mouth:
Both pictures come from the change, but those are just static pictures, the interaction with the filechooser is clear, the only problem was that originally, unselected entry in headerbar was not really visible.

When you open the file chooser, the entry is selected and text is highlighted, so you cannot misunderstand it for a window title.

...I came up with this now

@clobrano the "browser-header-stack" panel also looks much better.

Totally unrelated: did you notice the blurry edge of the Gedit over Nautilus? I was wondering if a border would fix this or what do you think?

Gedit is blurred there because the filechooser is opened. I don't feel like is necessary to sharpen it

The white entry field looks better than I thought it would! The only problem is it overpowering the orange. Though the following is still an option. I mentioned this to fix the strange "orange border with blue text selection" inconsistency. Just rely on caret-color instead of border-color. Maybe this is too muted though.

@godlyranchdressing
I am not very happy with the first image opening filechooser (black from the headerbar, orange ring, light blue text selection, a very clash of colors :disappointed: ), so I am trying what you proposed, only I cannot get rid of orange selection. Is it the outline-color property, right?

Linking the same issue into this: https://github.com/ubuntu/gtk-communitheme/issues/295

With the recent changes in text selection, this looks a bit better even with selection ring

image

Was this page helpful?
0 / 5 - 0 ratings

Related issues

8none1 picture 8none1  路  3Comments

mivoligo picture mivoligo  路  3Comments

YamiYukiSenpai picture YamiYukiSenpai  路  3Comments

Feichtmeier picture Feichtmeier  路  3Comments

CDrummond picture CDrummond  路  3Comments