Improve project avatar settingsce-proj-settings-ok-avatar-only

Prioritize and simplify project settings content.

14 files changed, 39 insertions, 46 deletions

diff --git a/app/assets/javascripts/group_avatar.js b/app/assets/javascripts/avatar_picker.js
index dcda625f587..d38e0b4abaa 100644
--- a/app/assets/javascripts/group_avatar.js
+++ b/app/assets/javascripts/avatar_picker.js
@@ -1,11 +1,12 @@
 import $ from 'jquery';
 
-export default function groupAvatar() {
-  $('.js-choose-group-avatar-button').on('click', function onClickGroupAvatar() {
+export default function initAvatarPicker() {
+  $('.js-choose-avatar-button').on('click', function onClickAvatar() {
     const form = $(this).closest('form');
-    return form.find('.js-group-avatar-input').click();
+    return form.find('.js-avatar-input').click();
   });
-  $('.js-group-avatar-input').on('change', function onChangeAvatarInput() {
+
+  $('.js-avatar-input').on('change', function onChangeAvatarInput() {
     const form = $(this).closest('form');
     const filename = $(this)
       .val()
diff --git a/app/assets/javascripts/pages/admin/groups/edit/index.js b/app/assets/javascripts/pages/admin/groups/edit/index.js
index d3d125a1859..ad7276132b9 100644
--- a/app/assets/javascripts/pages/admin/groups/edit/index.js
+++ b/app/assets/javascripts/pages/admin/groups/edit/index.js
@@ -1,3 +1,3 @@
-import groupAvatar from '~/group_avatar';
+import initAvatarPicker from '~/avatar_picker';
 
-document.addEventListener('DOMContentLoaded', groupAvatar);
+document.addEventListener('DOMContentLoaded', initAvatarPicker);
diff --git a/app/assets/javascripts/pages/admin/groups/new/index.js b/app/assets/javascripts/pages/admin/groups/new/index.js
index 21f1ce222ac..6de740ee9ce 100644
--- a/app/assets/javascripts/pages/admin/groups/new/index.js
+++ b/app/assets/javascripts/pages/admin/groups/new/index.js
@@ -1,9 +1,9 @@
 import BindInOut from '../../../../behaviors/bind_in_out';
 import Group from '../../../../group';
-import groupAvatar from '../../../../group_avatar';
+import initAvatarPicker from '~/avatar_picker';
 
 document.addEventListener('DOMContentLoaded', () => {
   BindInOut.initAll();
   new Group(); // eslint-disable-line no-new
-  groupAvatar();
+  initAvatarPicker();
 });
diff --git a/app/assets/javascripts/pages/groups/edit/index.js b/app/assets/javascripts/pages/groups/edit/index.js
index 01ef445c901..d036ff07d89 100644
--- a/app/assets/javascripts/pages/groups/edit/index.js
+++ b/app/assets/javascripts/pages/groups/edit/index.js
@@ -1,4 +1,4 @@
-import groupAvatar from '~/group_avatar';
+import initAvatarPicker from '~/avatar_picker';
 import TransferDropdown from '~/groups/transfer_dropdown';
 import initConfirmDangerModal from '~/confirm_danger_modal';
 import initSettingsPanels from '~/settings_panels';
@@ -9,7 +9,7 @@ import groupsSelect from '~/groups_select';
 import projectSelect from '~/project_select';
 
 document.addEventListener('DOMContentLoaded', () => {
-  groupAvatar();
+  initAvatarPicker();
   new TransferDropdown(); // eslint-disable-line no-new
   initConfirmDangerModal();
   initSettingsPanels();
diff --git a/app/assets/javascripts/pages/groups/new/index.js b/app/assets/javascripts/pages/groups/new/index.js
index b2f275dc5ea..57b53eb9e5d 100644
--- a/app/assets/javascripts/pages/groups/new/index.js
+++ b/app/assets/javascripts/pages/groups/new/index.js
@@ -1,9 +1,9 @@
 import BindInOut from '~/behaviors/bind_in_out';
 import Group from '~/group';
-import groupAvatar from '~/group_avatar';
+import initAvatarPicker from '~/avatar_picker';
 
 document.addEventListener('DOMContentLoaded', () => {
   BindInOut.initAll();
   new Group(); // eslint-disable-line no-new
-  groupAvatar();
+  initAvatarPicker();
 });
diff --git a/app/assets/javascripts/pages/projects/edit/index.js b/app/assets/javascripts/pages/projects/edit/index.js
index 899d5925956..278c35d3846 100644
--- a/app/assets/javascripts/pages/projects/edit/index.js
+++ b/app/assets/javascripts/pages/projects/edit/index.js
@@ -3,7 +3,7 @@ import initSettingsPanels from '~/settings_panels';
 import setupProjectEdit from '~/project_edit';
 import initConfirmDangerModal from '~/confirm_danger_modal';
 import mountBadgeSettings from '~/pages/shared/mount_badge_settings';
-import fileUpload from '~/lib/utils/file_upload';
+import initAvatarPicker from '~/avatar_picker';
 import initProjectLoadingSpinner from '../shared/save_project_loader';
 import initProjectPermissionsSettings from '../shared/permissions';
 
@@ -12,7 +12,7 @@ document.addEventListener('DOMContentLoaded', () => {
   setupProjectEdit();
   // Initialize expandable settings panels
   initSettingsPanels();
-  fileUpload('.js-choose-project-avatar-button', '.js-project-avatar-input');
+  initAvatarPicker();
   initProjectPermissionsSettings();
   initConfirmDangerModal();
   mountBadgeSettings(PROJECT_BADGE);
diff --git a/app/views/admin/groups/_form.html.haml b/app/views/admin/groups/_form.html.haml
index 5e05568e384..8fb38f6a690 100644
--- a/app/views/admin/groups/_form.html.haml
+++ b/app/views/admin/groups/_form.html.haml
@@ -8,7 +8,7 @@
   .form-group.row.group-description-holder
     = f.label :avatar, _("Group avatar"), class: 'col-form-label col-sm-2'
     .col-sm-10
-      = render 'shared/choose_group_avatar_button', f: f
+      = render 'shared/choose_avatar_button', f: f
 
   = render 'shared/old_visibility_level', f: f, visibility_level: visibility_level, can_change_visibility_level: can_change_group_visibility_level?(@group), form_model: @group, with_label: false
 
diff --git a/app/views/groups/new.html.haml b/app/views/groups/new.html.haml
index 51dcc9d0cda..6269678079a 100644
--- a/app/views/groups/new.html.haml
+++ b/app/views/groups/new.html.haml
@@ -27,7 +27,7 @@
         .form-group.group-description-holder.col-sm-12
           = f.label :avatar, _("Group avatar"), class: 'label-bold'
           %div
-            = render 'shared/choose_group_avatar_button', f: f
+            = render 'shared/choose_avatar_button', f: f
 
         .form-group.col-sm-12
           %label.label-bold
diff --git a/app/views/groups/settings/_general.html.haml b/app/views/groups/settings/_general.html.haml
index 9ed71d19d32..c382a1ed168 100644
--- a/app/views/groups/settings/_general.html.haml
+++ b/app/views/groups/settings/_general.html.haml
@@ -23,10 +23,10 @@
       .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
+      = render 'shared/choose_avatar_button', f: f
       - if @group.avatar?
         %hr
-        = link_to _('Remove avatar'), group_avatar_path(@group.to_param), data: { confirm: _('Avatar will be removed. Are you sure?')}, method: :delete, class: 'btn btn-danger btn-inverted'
+        = link_to _('Remove avatar'), group_avatar_path(@group.to_param), data: { confirm: _('Avatar will be removed. Are you sure?')}, method: :delete, class: 'btn btn-link'
 
     = render 'shared/visibility_level', f: f, visibility_level: @group.visibility_level, can_change_visibility_level: can_change_group_visibility_level?(@group), form_model: @group
 
diff --git a/app/views/projects/edit.html.haml b/app/views/projects/edit.html.haml
index a6a8ca489a9..98017bea0c9 100644
--- a/app/views/projects/edit.html.haml
+++ b/app/views/projects/edit.html.haml
@@ -40,23 +40,16 @@
           = f.label :tag_list, "Topics", class: 'label-bold'
           = f.text_field :tag_list, value: @project.tag_list.join(', '), maxlength: 2000, class: "form-control"
           %p.form-text.text-muted Separate topics with commas.
-        %fieldset.features
-          %h5.prepend-top-0= _("Project avatar")
-          .form-group
-            - if @project.avatar?
-              .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
-                = _("Project avatar in repository: %{link}").html_safe % { link: @project.avatar_in_git }
-            .prepend-top-5.append-bottom-10
-              %button.btn.js-choose-project-avatar-button{ type: 'button' }= _("Choose file...")
-              %span.file_name.prepend-left-default.js-filename= _("No file chosen")
-              = f.file_field :avatar, class: "js-project-avatar-input hidden"
-            .form-text.text-muted= _("The maximum file size allowed is 200KB.")
-            - if @project.avatar?
-              %hr
-              = link_to _('Remove avatar'), project_avatar_path(@project), data: { confirm: _("Avatar will be removed. Are you sure?") }, method: :delete, class: "btn btn-danger btn-inverted"
+
+        .form-group.prepend-top-default.append-bottom-20
+          .avatar-container.s90
+            = project_icon(@project, alt: _('Project avatar'), class: 'avatar project-avatar s90')
+          = f.label :avatar, _('Project avatar'), class: 'label-bold d-block'
+          = render 'shared/choose_avatar_button', f: f
+          - if @project.avatar?
+            %hr
+            = link_to _('Remove avatar'), project_avatar_path(@project), data: { confirm: _('Avatar will be removed. Are you sure?')}, method: :delete, class: 'btn btn-link'
+
         = f.submit 'Save changes', class: "btn btn-success js-btn-success-general-project-settings"
 
   %section.settings.sharing-permissions.no-animate#js-shared-permissions{ class: ('expanded' if expanded) }
diff --git a/app/views/shared/_choose_avatar_button.html.haml b/app/views/shared/_choose_avatar_button.html.haml
new file mode 100644
index 00000000000..0d46d047134
--- /dev/null
+++ b/app/views/shared/_choose_avatar_button.html.haml
@@ -0,0 +1,4 @@
+%button.btn.js-choose-avatar-button{ type: 'button' }= _("Choose file…")
+%span.file_name.js-avatar-filename= _("No file chosen")
+= f.file_field :avatar, class: "js-avatar-input hidden"
+.form-text.text-muted= _("The maximum file size allowed is 200KB.")
diff --git a/app/views/shared/_choose_group_avatar_button.html.haml b/app/views/shared/_choose_group_avatar_button.html.haml
deleted file mode 100644
index 0552fe62090..00000000000
--- a/app/views/shared/_choose_group_avatar_button.html.haml
+++ /dev/null
@@ -1,4 +0,0 @@
-%button.btn.js-choose-group-avatar-button{ type: 'button' }= _("Choose File ...")
-%span.file_name.js-avatar-filename= _("No file chosen")
-= f.file_field :avatar, class: "js-group-avatar-input hidden"
-.form-text.text-muted= _("The maximum file size allowed is 200KB.")
diff --git a/changelogs/unreleased/ce-proj-settings-ok-avatar-only.yml b/changelogs/unreleased/ce-proj-settings-ok-avatar-only.yml
new file mode 100644
index 00000000000..10475824a75
--- /dev/null
+++ b/changelogs/unreleased/ce-proj-settings-ok-avatar-only.yml
@@ -0,0 +1,5 @@
+---
+title: Change project avatar remove button to a link
+merge_request: 26589
+author:
+type: other
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 177bd189817..a54eb108e83 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -1482,9 +1482,6 @@ msgstr ""
 msgid "Choose <strong>Next</strong> at the bottom of the page."
 msgstr ""
 
-msgid "Choose File ..."
-msgstr ""
-
 msgid "Choose a branch/tag (e.g. %{master}) or enter a commit (e.g. %{sha}) to see what's changed or to create a merge request."
 msgstr ""
 
@@ -1506,7 +1503,7 @@ msgstr ""
 msgid "Choose between <code>clone</code> or <code>fetch</code> to get the recent application code"
 msgstr ""
 
-msgid "Choose file..."
+msgid "Choose file…"
 msgstr ""
 
 msgid "Choose the top-level group for your repository imports."
@@ -6241,9 +6238,6 @@ msgstr ""
 msgid "Project avatar"
 msgstr ""
 
-msgid "Project avatar in repository: %{link}"
-msgstr ""
-
 msgid "Project details"
 msgstr ""