From 12ed4dbf4a2a2e0a53d74470fc76b7e3b39cc1b7 Mon Sep 17 00:00:00 2001 From: Martin Wortschack Date: Mon, 25 Feb 2019 13:00:05 +0000 Subject: [PATCH] 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 --- .../components/frequent_items_list_item.vue | 10 ++++++-- app/assets/javascripts/gfm_auto_complete.js | 8 +++++-- .../groups/components/group_item.vue | 2 +- .../components/project_avatar/default.vue | 10 ++++++-- app/assets/stylesheets/framework/avatar.scss | 24 +++++++++++++++++++ .../stylesheets/framework/variables.scss | 1 + app/views/admin/groups/_group.html.haml | 2 +- app/views/admin/groups/show.html.haml | 2 +- app/views/admin/projects/_projects.html.haml | 2 +- app/views/groups/_home_panel.html.haml | 2 +- app/views/groups/settings/_general.html.haml | 2 +- .../layouts/nav/sidebar/_group.html.haml | 2 +- .../layouts/nav/sidebar/_project.html.haml | 2 +- app/views/projects/_home_panel.html.haml | 2 +- app/views/projects/edit.html.haml | 2 +- .../projects/forks/_fork_button.html.haml | 4 ++-- app/views/shared/groups/_group.html.haml | 2 +- app/views/shared/projects/_project.html.haml | 5 ++-- app/views/users/_groups.html.haml | 2 +- ...ling-of-user-project-and-group-avatars.yml | 5 ++++ 20 files changed, 69 insertions(+), 22 deletions(-) create mode 100644 changelogs/unreleased/52734-styling-of-user-project-and-group-avatars.yml diff --git a/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue b/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue index 2cbc7c7077b..42d14b65b3a 100644 --- a/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue +++ b/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue @@ -82,8 +82,14 @@ export default {
  • - - + +
    diff --git a/app/assets/javascripts/gfm_auto_complete.js b/app/assets/javascripts/gfm_auto_complete.js index 570d3b712e0..c81e754df4c 100644 --- a/app/assets/javascripts/gfm_auto_complete.js +++ b/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 = `${ m.username - }`; - const txtAvatar = `
    ${autoCompleteAvatar}
    `; + }" class="avatar ${rectAvatarClass} avatar-inline center s26"/>`; + const txtAvatar = `
    ${autoCompleteAvatar}
    `; return { username: m.username, diff --git a/app/assets/javascripts/groups/components/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue index 688bd37cc56..d5130cd331d 100644 --- a/app/assets/javascripts/groups/components/group_item.vue +++ b/app/assets/javascripts/groups/components/group_item.vue @@ -88,7 +88,7 @@ export default {
    diff --git a/app/assets/javascripts/vue_shared/components/project_avatar/default.vue b/app/assets/javascripts/vue_shared/components/project_avatar/default.vue index b399c232937..881b5059d2a 100644 --- a/app/assets/javascripts/vue_shared/components/project_avatar/default.vue +++ b/app/assets/javascripts/vue_shared/components/project_avatar/default.vue @@ -26,7 +26,7 @@ export default { diff --git a/app/assets/stylesheets/framework/avatar.scss b/app/assets/stylesheets/framework/avatar.scss index e132aa4c216..bfd3d776bd4 100644 --- a/app/assets/stylesheets/framework/avatar.scss +++ b/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; diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 27c54cb0b75..25b272ab3a9 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/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; diff --git a/app/views/admin/groups/_group.html.haml b/app/views/admin/groups/_group.html.haml index 0a688b90f3a..395c469255e 100644 --- a/app/views/admin/groups/_group.html.haml +++ b/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 diff --git a/app/views/admin/groups/show.html.haml b/app/views/admin/groups/show.html.haml index 93da87538bc..00d255846f9 100644 --- a/app/views/admin/groups/show.html.haml +++ b/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:') diff --git a/app/views/admin/projects/_projects.html.haml b/app/views/admin/projects/_projects.html.haml index 50296a2afe7..5bc695aa7b5 100644 --- a/app/views/admin/projects/_projects.html.haml +++ b/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 diff --git a/app/views/groups/_home_panel.html.haml b/app/views/groups/_home_panel.html.haml index 3a8d95f44d1..39c0c113793 100644 --- a/app/views/groups/_home_panel.html.haml +++ b/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 diff --git a/app/views/groups/settings/_general.html.haml b/app/views/groups/settings/_general.html.haml index 0424ece037d..9ed71d19d32 100644 --- a/app/views/groups/settings/_general.html.haml +++ b/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 diff --git a/app/views/layouts/nav/sidebar/_group.html.haml b/app/views/layouts/nav/sidebar/_group.html.haml index 3fbaaafe89e..21ea9f3b2f3 100644 --- a/app/views/layouts/nav/sidebar/_group.html.haml +++ b/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 diff --git a/app/views/layouts/nav/sidebar/_project.html.haml b/app/views/layouts/nav/sidebar/_project.html.haml index dd7833647b7..7b492efeb09 100644 --- a/app/views/layouts/nav/sidebar/_project.html.haml +++ b/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 diff --git a/app/views/projects/_home_panel.html.haml b/app/views/projects/_home_panel.html.haml index 0be41b5888c..bba303c906c 100644 --- a/app/views/projects/_home_panel.html.haml +++ b/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 diff --git a/app/views/projects/edit.html.haml b/app/views/projects/edit.html.haml index a58f736b5b4..1a489bfa275 100644 --- a/app/views/projects/edit.html.haml +++ b/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 diff --git a/app/views/projects/forks/_fork_button.html.haml b/app/views/projects/forks/_fork_button.html.haml index a69146513d8..3f0798a898d 100644 --- a/app/views/projects/forks/_fork_button.html.haml +++ b/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") diff --git a/app/views/shared/groups/_group.html.haml b/app/views/shared/groups/_group.html.haml index a1b901aaffa..609b8dce21a 100644 --- a/app/views/shared/groups/_group.html.haml +++ b/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 diff --git a/app/views/shared/projects/_project.html.haml b/app/views/shared/projects/_project.html.haml index df17ae95e2a..f1a87faa7ac 100644 --- a/app/views/shared/projects/_project.html.haml +++ b/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 diff --git a/app/views/users/_groups.html.haml b/app/views/users/_groups.html.haml index 55799e10a46..6d7a52c7688 100644 --- a/app/views/users/_groups.html.haml +++ b/app/views/users/_groups.html.haml @@ -1,5 +1,5 @@ .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') diff --git a/changelogs/unreleased/52734-styling-of-user-project-and-group-avatars.yml b/changelogs/unreleased/52734-styling-of-user-project-and-group-avatars.yml new file mode 100644 index 00000000000..9329e81eb83 --- /dev/null +++ b/changelogs/unreleased/52734-styling-of-user-project-and-group-avatars.yml @@ -0,0 +1,5 @@ +--- +title: Add rectangular project and group avatars +merge_request: 25098 +author: +type: other -- GitLab