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

app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue

@@ -82,8 +82,14 @@ export default {
   <li class="frequent-items-list-item-container">
     <a :href="webUrl" class="clearfix">
       <div class="frequent-items-item-avatar-container">
-        <img v-if="hasAvatar" :src="avatarUrl" class="avatar s32" />
-        <identicon v-else :entity-id="itemId" :entity-name="itemName" size-class="s32" />
+        <img v-if="hasAvatar" :src="avatarUrl" class="avatar rect-avatar s32" />
+        <identicon
+          v-else
+          :entity-id="itemId"
+          :entity-name="itemName"
+          size-class="s32"
+          class="rect-avatar"
+        />
       </div>
       <div class="frequent-items-item-metadata-container">
         <div :title="itemName" class="frequent-items-item-title" v-html="highlightedItemName"></div>

app/assets/javascripts/gfm_auto_complete.js

@@ -195,11 +195,15 @@ class GfmAutoComplete {
               title += ` (${m.count})`;
             }
+            const GROUP_TYPE = 'Group';
+
             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="${
               m.username
-            }" class="avatar avatar-inline center s26"/>`;
-            const txtAvatar = `<div class="avatar center avatar-inline s26">${autoCompleteAvatar}</div>`;
+            }" class="avatar ${rectAvatarClass} avatar-inline center s26"/>`;
+            const txtAvatar = `<div class="avatar ${rectAvatarClass} center avatar-inline s26">${autoCompleteAvatar}</div>`;
             return {
               username: m.username,

app/assets/javascripts/groups/components/group_item.vue

@@ -88,7 +88,7 @@ export default {
       </div>
       <div
         :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">
           <img v-if="hasAvatar" :src="group.avatarUrl" class="avatar s24" />

app/assets/javascripts/vue_shared/components/project_avatar/default.vue

@@ -26,7 +26,7 @@ export default {
 </script>
 <template>
-  <span :class="sizeClass" class="avatar-container project-avatar">
+  <span :class="sizeClass" class="avatar-container rect-avatar project-avatar">
     <project-avatar-image
       v-if="project.avatar_url"
       :link-href="project.path"
@@ -34,6 +34,12 @@ export default {
       :img-alt="project.name"
       :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>
 </template>

app/assets/stylesheets/framework/avatar.scss

@@ -124,6 +124,30 @@
   &.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 {
   background-color: $gray-darkest;
   color: $white-light;

app/assets/stylesheets/framework/variables.scss

@@ -265,6 +265,7 @@ $container-text-max-width: 540px;
 $gl-avatar-size: 40px;
 $border-radius-default: 4px;
 $border-radius-small: 2px;
+$border-radius-large: 8px;
 $default-icon-size: 18px;
 $layout-link-gray: #7e7c7c;
 $btn-side-margin: 10px;

app/views/admin/groups/_group.html.haml

@@ -22,7 +22,7 @@
     %span.visibility-icon.has-tooltip{ data: { container: 'body', placement: 'left' }, title: visibility_icon_description(group) }
       = 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")
   .title
     = link_to [:admin, group], class: 'group-name' do

app/views/admin/groups/show.html.haml

@@ -15,7 +15,7 @@
         = _('Group info:')
       %ul.content-list
         %li
-          .avatar-container.s60
+          .avatar-container.rect-avatar.s60
             = group_icon(@group, class: "avatar s60")
         %li
           %span.light= _('Name:')

app/views/admin/projects/_projects.html.haml

@@ -19,7 +19,7 @@
           .title
             = link_to(admin_namespace_project_path(project.namespace, project)) do
               .dash-project-avatar
-                .avatar-container.s40
+                .avatar-container.rect-avatar.s40
                   = project_icon(project, alt: '', class: 'avatar project-avatar s40', width: 40, height: 40)
               %span.project-full-name
                 %span.namespace-name

app/views/groups/_home_panel.html.haml

@@ -3,7 +3,7 @@
 .group-home-panel
   .row.mb-3
     .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)
       .d-flex.flex-column.flex-wrap.align-items-baseline
         .d-inline-flex.align-items-baseline

app/views/groups/settings/_general.html.haml

@@ -20,7 +20,7 @@
     = render_if_exists 'shared/repository_size_limit_setting', form: f, type: :group
     .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')
       = f.label :avatar, _('Group avatar'), class: 'label-bold d-block'
       = render 'shared/choose_group_avatar_button', f: f

app/views/layouts/nav/sidebar/_group.html.haml

@@ -6,7 +6,7 @@
   .nav-sidebar-inner-scroll
     .context-header
       = 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")
         .sidebar-context-title
           = @group.name

app/views/layouts/nav/sidebar/_project.html.haml

@@ -3,7 +3,7 @@
     - can_edit = can?(current_user, :admin_project, @project)
     .context-header
       = 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)
         .sidebar-context-title
           = @project.name

app/views/projects/_home_panel.html.haml

@@ -3,7 +3,7 @@
 .project-home-panel{ class: ("empty-project" if empty_repo) }
   .row.append-bottom-8
     .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)
       .d-flex.flex-column.flex-wrap.align-items-baseline
         .d-inline-flex.align-items-baseline

app/views/projects/edit.html.haml

@@ -46,7 +46,7 @@
           %h5.prepend-top-0= _("Project avatar")
           .form-group
             - 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)
             - if @project.avatar_in_git
               %p.light

app/views/projects/forks/_fork_button.html.haml

@@ -5,7 +5,7 @@
   .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
       - if /no_((\w*)_)*avatar/.match(avatar)
-        = group_icon(namespace, class: "avatar s100 identicon")
+        = group_icon(namespace, class: "avatar rect-avatar s100 identicon")
       - else
         .avatar-container.s100
           = image_tag(avatar, class: "avatar s100")
@@ -18,7 +18,7 @@
         class: ("disabled has-tooltip" unless can_create_project),
         title: (_('You have reached your project limit') unless can_create_project) do
       - if /no_((\w*)_)*avatar/.match(avatar)
-        = group_icon(namespace, class: "avatar s100 identicon")
+        = group_icon(namespace, class: "avatar rect-avatar s100 identicon")
       - else
         .avatar-container.s100
           = image_tag(avatar, class: "avatar s100")

app/views/shared/groups/_group.html.haml

@@ -14,7 +14,7 @@
     %span.visibility-icon.has-tooltip{ data: { container: 'body', placement: 'left' }, title: visibility_icon_description(group) }
       = visibility_level_icon(group.visibility_level, fw: false)
-  .avatar-container.s40
+  .avatar-container.rect-avatar.s40
     = link_to group do
       = group_icon(group, class: "avatar s40 d-none d-sm-block")
   .title

app/views/shared/projects/_project.html.haml

@@ -13,14 +13,15 @@
 - cache_key = project_list_cache_key(project)
 - updated_tooltip = time_ago_with_tooltip(project.last_activity_date)
 - 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 }
   = cache(cache_key) do
     - 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
           - 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
             = project_icon(project, alt: '', class: 'avatar project-avatar s48', width: 48, height: 48)
     .project-details.d-sm-flex.flex-sm-fill.align-items-center

app/views/users/_groups.html.haml

 .clearfix
   - groups.each do |group|
     = 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')

changelogs/unreleased/52734-styling-of-user-project-and-group-avatars.yml

+---
+title: Add rectangular project and group avatars
+merge_request: 25098
+author:
+type: other