isa/gnome-shell
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

theme: Don't draw border around symbolic user-icon

Browse Source 
Recent commit [1] added a strong light border around user avatar
icons, in accordance with design mockups.

As a probably unintentional side-effect, the border was also added
around the symbolic fallback icon, which is displayed whenever the
user avatar is not available. This doesn't work well with the current
design, as the strong border makes the subtle fallback icon
background indistinguishable. Additionally, it doesn't match the
design mockups for the symbolic avatar icon [2].

Correct this by adding a style class for when avatar image is used,
and apply the border only for that case.

[1] 498710c2ec
[2] https://gitlab.gnome.org/Teams/Design/os-mockups/-/blob/master/lock-login/username-based-login.png

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1490>
This commit is contained in:
Joonas Henriksson 2020-11-01 14:40:47 +02:00 committed by Florian Müllner
parent 6b9f277081
commit a7c343292e
2 changed files with 5 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
data/theme/gnome-shell-sass/widgets/_misc.scss
View File

@ -9,7 +9,6 @@
background-size: contain; background-size: contain;
color: $osd_fg_color; color: $osd_fg_color;
border-radius: 99px; border-radius: 99px;
border: 2px $osd_fg_color;
icon-size: $base_icon_size * 4; // 64px icon-size: $base_icon_size * 4; // 64px
&:hover { &:hover {
color: lighten($osd_fg_color,30%); color: lighten($osd_fg_color,30%);
@ -21,6 +20,10 @@
padding: $base_padding * 2 ; // 12px padding: $base_padding * 2 ; // 12px
width: $base_icon_size * 2.5; height: $base_icon_size * 2.5; // 40px; width: $base_icon_size * 2.5; height: $base_icon_size * 2.5; // 40px;
} }
&.user-avatar {
border: 2px $osd_fg_color;
}
} }
.user-widget.vertical .user-icon { .user-widget.vertical .user-icon {

1
js/ui/userWidget.js
View File

@ -90,6 +90,7 @@ class Avatar extends St.Bin {
if (iconFile) { if (iconFile) {
this.child = null; this.child = null;
this.add_style_class_name('user-avatar');
this.style = ` this.style = `
background-image: url("${iconFile}"); background-image: url("${iconFile}");
background-size: cover;`; background-size: cover;`;