From 8dc7efb2b025c9519b94362f3394ea6a1889ade1 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Thu, 14 Mar 2019 20:52:01 +0000 Subject: [PATCH] Improve project avatar settings Prioritize and simplify project settings content. --- .../{group_avatar.js => avatar_picker.js} | 9 ++++--- .../pages/admin/groups/edit/index.js | 4 +-- .../pages/admin/groups/new/index.js | 4 +-- .../javascripts/pages/groups/edit/index.js | 4 +-- .../javascripts/pages/groups/new/index.js | 4 +-- .../javascripts/pages/projects/edit/index.js | 4 +-- app/views/admin/groups/_form.html.haml | 2 +- app/views/groups/new.html.haml | 2 +- app/views/groups/settings/_general.html.haml | 4 +-- app/views/projects/edit.html.haml | 27 +++++++------------ .../shared/_choose_avatar_button.html.haml | 4 +++ .../_choose_group_avatar_button.html.haml | 4 --- .../ce-proj-settings-ok-avatar-only.yml | 5 ++++ locale/gitlab.pot | 8 +----- 14 files changed, 39 insertions(+), 46 deletions(-) rename app/assets/javascripts/{group_avatar.js => avatar_picker.js} (54%) create mode 100644 app/views/shared/_choose_avatar_button.html.haml delete mode 100644 app/views/shared/_choose_group_avatar_button.html.haml create mode 100644 changelogs/unreleased/ce-proj-settings-ok-avatar-only.yml diff --git a/app/assets/javascripts/group_avatar.js b/app/assets/javascripts/avatar_picker.js similarity index 54% rename from app/assets/javascripts/group_avatar.js rename to 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 Next 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 clone or fetch 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 ""