Commit 12ed4dbf authored by Martin Wortschack's avatar Martin Wortschack Committed by Filipa Lacerda

Style avatars for groups and projects

- Add rectangular avatar classes
- Update avatar for groups
- Update avatar for projects
- Update avatar for frequent items
- Update avatar on "Fork project" page
- Conditionally add rectangular avatar class to autocomplete items
parent 20d84d80
...@@ -82,8 +82,14 @@ export default { ...@@ -82,8 +82,14 @@ export default {
<li class="frequent-items-list-item-container"> <li class="frequent-items-list-item-container">
<a :href="webUrl" class="clearfix"> <a :href="webUrl" class="clearfix">
<div class="frequent-items-item-avatar-container"> <div class="frequent-items-item-avatar-container">
<img v-if="hasAvatar" :src="avatarUrl" class="avatar s32" /> <img v-if="hasAvatar" :src="avatarUrl" class="avatar rect-avatar s32" />
<identicon v-else :entity-id="itemId" :entity-name="itemName" size-class="s32" /> <identicon
v-else
:entity-id="itemId"
:entity-name="itemName"
size-class="s32"
class="rect-avatar"
/>
</div> </div>
<div class="frequent-items-item-metadata-container"> <div class="frequent-items-item-metadata-container">
<div :title="itemName" class="frequent-items-item-title" v-html="highlightedItemName"></div> <div :title="itemName" class="frequent-items-item-title" v-html="highlightedItemName"></div>
......
...@@ -195,11 +195,15 @@ class GfmAutoComplete { ...@@ -195,11 +195,15 @@ class GfmAutoComplete {
title += ` (${m.count})`; title += ` (${m.count})`;
} }
const GROUP_TYPE = 'Group';
const autoCompleteAvatar = m.avatar_url || m.username.charAt(0).toUpperCase(); const autoCompleteAvatar = m.avatar_url || m.username.charAt(0).toUpperCase();
const rectAvatarClass = m.type === GROUP_TYPE ? 'rect-avatar' : '';
const imgAvatar = `<img src="${m.avatar_url}" alt="${ const imgAvatar = `<img src="${m.avatar_url}" alt="${
m.username m.username
}" class="avatar avatar-inline center s26"/>`; }" class="avatar ${rectAvatarClass} avatar-inline center s26"/>`;
const txtAvatar = `<div class="avatar center avatar-inline s26">${autoCompleteAvatar}</div>`; const txtAvatar = `<div class="avatar ${rectAvatarClass} center avatar-inline s26">${autoCompleteAvatar}</div>`;
return { return {
username: m.username, username: m.username,
......
...@@ -88,7 +88,7 @@ export default { ...@@ -88,7 +88,7 @@ export default {
</div> </div>
<div <div
:class="{ 'content-loading': group.isChildrenLoading }" :class="{ 'content-loading': group.isChildrenLoading }"
class="avatar-container s24 d-none d-sm-flex" class="avatar-container rect-avatar s24 d-none d-sm-flex"
> >
<a :href="group.relativePath" class="no-expand"> <a :href="group.relativePath" class="no-expand">
<img v-if="hasAvatar" :src="group.avatarUrl" class="avatar s24" /> <img v-if="hasAvatar" :src="group.avatarUrl" class="avatar s24" />
......
...@@ -26,7 +26,7 @@ export default { ...@@ -26,7 +26,7 @@ export default {
</script> </script>
<template> <template>
<span :class="sizeClass" class="avatar-container project-avatar"> <span :class="sizeClass" class="avatar-container rect-avatar project-avatar">
<project-avatar-image <project-avatar-image
v-if="project.avatar_url" v-if="project.avatar_url"
:link-href="project.path" :link-href="project.path"
...@@ -34,6 +34,12 @@ export default { ...@@ -34,6 +34,12 @@ export default {
:img-alt="project.name" :img-alt="project.name"
:img-size="size" :img-size="size"
/> />
<identicon v-else :entity-id="project.id" :entity-name="project.name" :size-class="sizeClass" /> <identicon
v-else
:entity-id="project.id"
:entity-name="project.name"
:size-class="sizeClass"
class="rect-avatar"
/>
</span> </span>
</template> </template>
...@@ -124,6 +124,30 @@ ...@@ -124,6 +124,30 @@
&.s64 { min-width: 64px; min-height: 64px; } &.s64 { min-width: 64px; min-height: 64px; }
} }
.rect-avatar {
border-radius: $border-radius-small;
&.s16 { border-radius: $border-radius-small; }
&.s18 { border-radius: $border-radius-small; }
&.s19 { border-radius: $border-radius-small; }
&.s20 { border-radius: $border-radius-small; }
&.s24 { border-radius: $border-radius-default; }
&.s26 { border-radius: $border-radius-default; }
&.s32 { border-radius: $border-radius-default; }
&.s36 { border-radius: $border-radius-default; }
&.s40 { border-radius: $border-radius-default; }
&.s46 { border-radius: $border-radius-default; }
&.s48 { border-radius: $border-radius-large; }
&.s60 { border-radius: $border-radius-large; }
&.s64 { border-radius: $border-radius-large; }
&.s70 { border-radius: $border-radius-large; }
&.s90 { border-radius: $border-radius-large; }
&.s96 { border-radius: $border-radius-large; }
&.s100 { border-radius: $border-radius-large; }
&.s110 { border-radius: $border-radius-large; }
&.s140 { border-radius: $border-radius-large; }
&.s160 { border-radius: $border-radius-large; }
}
.avatar-counter { .avatar-counter {
background-color: $gray-darkest; background-color: $gray-darkest;
color: $white-light; color: $white-light;
......
...@@ -265,6 +265,7 @@ $container-text-max-width: 540px; ...@@ -265,6 +265,7 @@ $container-text-max-width: 540px;
$gl-avatar-size: 40px; $gl-avatar-size: 40px;
$border-radius-default: 4px; $border-radius-default: 4px;
$border-radius-small: 2px; $border-radius-small: 2px;
$border-radius-large: 8px;
$default-icon-size: 18px; $default-icon-size: 18px;
$layout-link-gray: #7e7c7c; $layout-link-gray: #7e7c7c;
$btn-side-margin: 10px; $btn-side-margin: 10px;
......
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
%span.visibility-icon.has-tooltip{ data: { container: 'body', placement: 'left' }, title: visibility_icon_description(group) } %span.visibility-icon.has-tooltip{ data: { container: 'body', placement: 'left' }, title: visibility_icon_description(group) }
= visibility_level_icon(group.visibility_level, fw: false) = visibility_level_icon(group.visibility_level, fw: false)
.avatar-container.s40 .avatar-container.rect-avatar.s40
= group_icon(group, class: "avatar s40 d-none d-sm-block") = group_icon(group, class: "avatar s40 d-none d-sm-block")
.title .title
= link_to [:admin, group], class: 'group-name' do = link_to [:admin, group], class: 'group-name' do
......
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
= _('Group info:') = _('Group info:')
%ul.content-list %ul.content-list
%li %li
.avatar-container.s60 .avatar-container.rect-avatar.s60
= group_icon(@group, class: "avatar s60") = group_icon(@group, class: "avatar s60")
%li %li
%span.light= _('Name:') %span.light= _('Name:')
......
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
.title .title
= link_to(admin_namespace_project_path(project.namespace, project)) do = link_to(admin_namespace_project_path(project.namespace, project)) do
.dash-project-avatar .dash-project-avatar
.avatar-container.s40 .avatar-container.rect-avatar.s40
= project_icon(project, alt: '', class: 'avatar project-avatar s40', width: 40, height: 40) = project_icon(project, alt: '', class: 'avatar project-avatar s40', width: 40, height: 40)
%span.project-full-name %span.project-full-name
%span.namespace-name %span.namespace-name
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
.group-home-panel .group-home-panel
.row.mb-3 .row.mb-3
.home-panel-title-row.col-md-12.col-lg-6.d-flex .home-panel-title-row.col-md-12.col-lg-6.d-flex
.avatar-container.home-panel-avatar.append-right-default.float-none .avatar-container.rect-avatar.s64.home-panel-avatar.append-right-default.float-none
= group_icon(@group, class: 'avatar avatar-tile s64', width: 64, height: 64) = group_icon(@group, class: 'avatar avatar-tile s64', width: 64, height: 64)
.d-flex.flex-column.flex-wrap.align-items-baseline .d-flex.flex-column.flex-wrap.align-items-baseline
.d-inline-flex.align-items-baseline .d-inline-flex.align-items-baseline
......
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
= render_if_exists 'shared/repository_size_limit_setting', form: f, type: :group = render_if_exists 'shared/repository_size_limit_setting', form: f, type: :group
.form-group.prepend-top-default.append-bottom-20 .form-group.prepend-top-default.append-bottom-20
.avatar-container.s90 .avatar-container.rect-avatar.s90
= group_icon(@group, alt: '', class: 'avatar group-avatar s90') = group_icon(@group, alt: '', class: 'avatar group-avatar s90')
= f.label :avatar, _('Group avatar'), class: 'label-bold d-block' = f.label :avatar, _('Group avatar'), class: 'label-bold d-block'
= render 'shared/choose_group_avatar_button', f: f = render 'shared/choose_group_avatar_button', f: f
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
.nav-sidebar-inner-scroll .nav-sidebar-inner-scroll
.context-header .context-header
= link_to group_path(@group), title: @group.name do = link_to group_path(@group), title: @group.name do
.avatar-container.s40.group-avatar .avatar-container.rect-avatar.s40.group-avatar
= group_icon(@group, class: "avatar s40 avatar-tile") = group_icon(@group, class: "avatar s40 avatar-tile")
.sidebar-context-title .sidebar-context-title
= @group.name = @group.name
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
- can_edit = can?(current_user, :admin_project, @project) - can_edit = can?(current_user, :admin_project, @project)
.context-header .context-header
= link_to project_path(@project), title: @project.name do = link_to project_path(@project), title: @project.name do
.avatar-container.s40.project-avatar .avatar-container.rect-avatar.s40.project-avatar
= project_icon(@project, alt: @project.name, class: 'avatar s40 avatar-tile', width: 40, height: 40) = project_icon(@project, alt: @project.name, class: 'avatar s40 avatar-tile', width: 40, height: 40)
.sidebar-context-title .sidebar-context-title
= @project.name = @project.name
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
.project-home-panel{ class: ("empty-project" if empty_repo) } .project-home-panel{ class: ("empty-project" if empty_repo) }
.row.append-bottom-8 .row.append-bottom-8
.home-panel-title-row.col-md-12.col-lg-6.d-flex .home-panel-title-row.col-md-12.col-lg-6.d-flex
.avatar-container.home-panel-avatar.append-right-default.float-none .avatar-container.rect-avatar.s64.home-panel-avatar.append-right-default.float-none
= project_icon(@project, alt: @project.name, class: 'avatar avatar-tile s64', width: 64, height: 64) = project_icon(@project, alt: @project.name, class: 'avatar avatar-tile s64', width: 64, height: 64)
.d-flex.flex-column.flex-wrap.align-items-baseline .d-flex.flex-column.flex-wrap.align-items-baseline
.d-inline-flex.align-items-baseline .d-inline-flex.align-items-baseline
......
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,7 @@
%h5.prepend-top-0= _("Project avatar") %h5.prepend-top-0= _("Project avatar")
.form-group .form-group
- if @project.avatar? - if @project.avatar?
.avatar-container.s160.append-bottom-15 .avatar-container.rect-avatar.s160.append-bottom-15
= project_icon(@project, alt: '', class: 'avatar project-avatar s160', width: 160, height: 160) = project_icon(@project, alt: '', class: 'avatar project-avatar s160', width: 160, height: 160)
- if @project.avatar_in_git - if @project.avatar_in_git
%p.light %p.light
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
.bordered-box.fork-thumbnail.text-center.prepend-left-default.append-right-default.prepend-top-default.append-bottom-default.forked .bordered-box.fork-thumbnail.text-center.prepend-left-default.append-right-default.prepend-top-default.append-bottom-default.forked
= link_to project_path(forked_project) do = link_to project_path(forked_project) do
- if /no_((\w*)_)*avatar/.match(avatar) - if /no_((\w*)_)*avatar/.match(avatar)
= group_icon(namespace, class: "avatar s100 identicon") = group_icon(namespace, class: "avatar rect-avatar s100 identicon")
- else - else
.avatar-container.s100 .avatar-container.s100
= image_tag(avatar, class: "avatar s100") = image_tag(avatar, class: "avatar s100")
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
class: ("disabled has-tooltip" unless can_create_project), class: ("disabled has-tooltip" unless can_create_project),
title: (_('You have reached your project limit') unless can_create_project) do title: (_('You have reached your project limit') unless can_create_project) do
- if /no_((\w*)_)*avatar/.match(avatar) - if /no_((\w*)_)*avatar/.match(avatar)
= group_icon(namespace, class: "avatar s100 identicon") = group_icon(namespace, class: "avatar rect-avatar s100 identicon")
- else - else
.avatar-container.s100 .avatar-container.s100
= image_tag(avatar, class: "avatar s100") = image_tag(avatar, class: "avatar s100")
......
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
%span.visibility-icon.has-tooltip{ data: { container: 'body', placement: 'left' }, title: visibility_icon_description(group) } %span.visibility-icon.has-tooltip{ data: { container: 'body', placement: 'left' }, title: visibility_icon_description(group) }
= visibility_level_icon(group.visibility_level, fw: false) = visibility_level_icon(group.visibility_level, fw: false)
.avatar-container.s40 .avatar-container.rect-avatar.s40
= link_to group do = link_to group do
= group_icon(group, class: "avatar s40 d-none d-sm-block") = group_icon(group, class: "avatar s40 d-none d-sm-block")
.title .title
......
...@@ -13,14 +13,15 @@ ...@@ -13,14 +13,15 @@
- cache_key = project_list_cache_key(project) - cache_key = project_list_cache_key(project)
- updated_tooltip = time_ago_with_tooltip(project.last_activity_date) - updated_tooltip = time_ago_with_tooltip(project.last_activity_date)
- css_controls_class = compact_mode ? "" : "flex-lg-row justify-content-lg-between" - css_controls_class = compact_mode ? "" : "flex-lg-row justify-content-lg-between"
- avatar_container_class = project.creator && use_creator_avatar ? '' : 'rect-avatar'
%li.project-row.d-flex{ class: css_class } %li.project-row.d-flex{ class: css_class }
= cache(cache_key) do = cache(cache_key) do
- if avatar - if avatar
.avatar-container.s48.flex-grow-0.flex-shrink-0 .avatar-container.s48.flex-grow-0.flex-shrink-0{ class: avatar_container_class }
= link_to project_path(project), class: dom_class(project) do = link_to project_path(project), class: dom_class(project) do
- if project.creator && use_creator_avatar - if project.creator && use_creator_avatar
= image_tag avatar_icon_for_user(project.creator, 48), class: "avatar s65", alt:'' = image_tag avatar_icon_for_user(project.creator, 48), class: "avatar s48", alt:''
- else - else
= project_icon(project, alt: '', class: 'avatar project-avatar s48', width: 48, height: 48) = project_icon(project, alt: '', class: 'avatar project-avatar s48', width: 48, height: 48)
.project-details.d-sm-flex.flex-sm-fill.align-items-center .project-details.d-sm-flex.flex-sm-fill.align-items-center
......
.clearfix .clearfix
- groups.each do |group| - groups.each do |group|
= link_to group, class: 'profile-groups-avatars inline', title: group.name do = link_to group, class: 'profile-groups-avatars inline', title: group.name do
.avatar-container.s40 .avatar-container.rect-avatar.s40
= group_icon(group, class: 'avatar group-avatar s40') = group_icon(group, class: 'avatar group-avatar s40')
---
title: Add rectangular project and group avatars
merge_request: 25098
author:
type: other
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment