Skip to content

G
gitlab-ce
Commit 5854d0a9 authored by Martin Wortschack's avatar Martin Wortschack Committed by Filipa Lacerda
Browse files
Options

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 ce54eaed
Hide whitespace changes
Inline Side-by-side
Showing with 69 additions and 22 deletions
app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue
View file @ 5854d0a9
......@@ -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
View file @ 5854d0a9
......@@ -202,11 +202,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
View file @ 5854d0a9
......@@ -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
View file @ 5854d0a9
......@@ -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
View file @ 5854d0a9
......@@ -128,6 +128,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
View file @ 5854d0a9
......@@ -266,6 +266,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
View file @ 5854d0a9
......@@ -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
View file @ 5854d0a9
......@@ -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
View file @ 5854d0a9
......@@ -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
View file @ 5854d0a9
......@@ -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
View file @ 5854d0a9
......@@ -20,7 +20,7 @@
.row= 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
View file @ 5854d0a9
......@@ -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
View file @ 5854d0a9
......@@ -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
View file @ 5854d0a9
......@@ -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
View file @ 5854d0a9
......@@ -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
View file @ 5854d0a9
......@@ -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
View file @ 5854d0a9
......@@ -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
View file @ 5854d0a9
......@@ -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
View file @ 5854d0a9
.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 0 → 100644
View file @ 5854d0a9
---
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7