From 273515b8a15cc9f920d6bf868f6a546ad832214e Mon Sep 17 00:00:00 2001 From: Lukas Eipert Date: Fri, 3 Aug 2018 17:36:53 +0200 Subject: [PATCH] backport changes from https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/6740 --- app/assets/javascripts/groups_select.js | 1 + .../javascripts/pages/projects/new/index.js | 2 -- .../javascripts/projects/project_new.js | 17 +++++----- app/assets/stylesheets/pages/projects.scss | 33 +++++++++---------- .../admin/application_settings/show.html.haml | 3 +- .../projects/_project_templates.html.haml | 31 ++++------------- .../_built_in_templates.html.haml | 17 ++++++++++ .../_project_fields_form.html.haml | 12 +++++++ ...60-FE-instance-level-project-templates.yml | 5 +++ locale/gitlab.pot | 12 +++++++ 10 files changed, 80 insertions(+), 53 deletions(-) create mode 100644 app/views/projects/project_templates/_built_in_templates.html.haml create mode 100644 app/views/projects/project_templates/_project_fields_form.html.haml create mode 100644 changelogs/unreleased/6860-FE-instance-level-project-templates.yml diff --git a/app/assets/javascripts/groups_select.js b/app/assets/javascripts/groups_select.js index 310f6fe06cf..e37fc5c4be6 100644 --- a/app/assets/javascripts/groups_select.js +++ b/app/assets/javascripts/groups_select.js @@ -12,6 +12,7 @@ export default function groupsSelect() { const skipGroups = $select.data('skipGroups') || []; $select.select2({ placeholder: 'Search for a group', + allowClear: $select.hasClass('allowClear'), multiple: $select.hasClass('multiselect'), minimumInputLength: 0, ajax: { diff --git a/app/assets/javascripts/pages/projects/new/index.js b/app/assets/javascripts/pages/projects/new/index.js index 7db644e2477..097403ba9e2 100644 --- a/app/assets/javascripts/pages/projects/new/index.js +++ b/app/assets/javascripts/pages/projects/new/index.js @@ -1,9 +1,7 @@ -import initProjectLoadingSpinner from '../shared/save_project_loader'; import initProjectVisibilitySelector from '../../../project_visibility'; import initProjectNew from '../../../projects/project_new'; document.addEventListener('DOMContentLoaded', () => { - initProjectLoadingSpinner(); initProjectVisibilitySelector(); initProjectNew.bindEvents(); }); diff --git a/app/assets/javascripts/projects/project_new.js b/app/assets/javascripts/projects/project_new.js index 002edb4663c..04badad0f34 100644 --- a/app/assets/javascripts/projects/project_new.js +++ b/app/assets/javascripts/projects/project_new.js @@ -37,9 +37,10 @@ const bindEvents = () => { const $projectFieldsForm = $('.project-fields-form'); const $selectedTemplateText = $('.selected-template'); const $changeTemplateBtn = $('.change-template'); - const $selectedIcon = $('.selected-icon svg'); + const $selectedIcon = $('.selected-icon'); const $templateProjectNameInput = $('#template-project-name #project_path'); const $pushNewProjectTipTrigger = $('.push-new-project-tip'); + const $projectTemplateButtons = $('.project-templates-buttons'); if ($newProjectForm.length !== 1) { return; @@ -88,35 +89,35 @@ const bindEvents = () => { } function chooseTemplate() { - $('.template-option').hide(); + $projectTemplateButtons.addClass('hidden'); $projectFieldsForm.addClass('selected'); - $selectedIcon.removeClass('d-block'); + $selectedIcon.empty(); const value = $(this).val(); const templates = { rails: { text: 'Ruby on Rails', - icon: '.selected-icon .icon-rails', + icon: '.template-option svg.icon-rails', }, express: { text: 'NodeJS Express', - icon: '.selected-icon .icon-node-express', + icon: '.template-option svg.icon-node-express', }, spring: { text: 'Spring', - icon: '.selected-icon .icon-java-spring', + icon: '.template-option svg.icon-java-spring', }, }; const selectedTemplate = templates[value]; $selectedTemplateText.text(selectedTemplate.text); - $(selectedTemplate.icon).addClass('d-block'); + $(selectedTemplate.icon).clone().addClass('d-block').appendTo($selectedIcon); $templateProjectNameInput.focus(); } $useTemplateBtn.on('change', chooseTemplate); $changeTemplateBtn.on('click', () => { - $('.template-option').show(); + $projectTemplateButtons.removeClass('hidden'); $projectFieldsForm.removeClass('selected'); $useTemplateBtn.prop('checked', false); }); diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 2a41a045e71..944421604fe 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -490,30 +490,31 @@ margin-bottom: 0; } + .tab-pane { + padding-top: 0; + padding-bottom: 0; + } + .template-option { - padding: $gl-padding $gl-padding $gl-padding ($gl-padding * 4); - position: relative; + .logo { + .btn-template-icon { + width: 40px !important; + } + } + + padding: 16px 0; &:not(:first-child) { border-top: 1px solid $border-color; } - .btn-template-icon { - position: absolute; - left: $gl-padding; - top: $gl-padding; + .controls { + margin-left: auto; } + } - .template-title { - font-size: 16px; - } - - .template-description { - margin: 6px 0 12px; - } - - .template-button { + .choose-template { input { position: absolute; clip: rect(0, 0, 0, 0); @@ -540,8 +541,6 @@ } .selected-icon { - padding-right: $gl-padding; - svg { display: none; top: 7px; diff --git a/app/views/admin/application_settings/show.html.haml b/app/views/admin/application_settings/show.html.haml index 5cb8001a364..1c8801566d4 100644 --- a/app/views/admin/application_settings/show.html.haml +++ b/app/views/admin/application_settings/show.html.haml @@ -336,5 +336,6 @@ .settings-content = render 'third_party_offers', application_setting: @application_setting -= render_if_exists 'admin/application_settings/pseudonymizer_settings', expanded: expanded += render_if_exists 'admin/application_settings/custom_templates_form', expanded: expanded += render_if_exists 'admin/application_settings/pseudonymizer_settings', expanded: expanded diff --git a/app/views/projects/_project_templates.html.haml b/app/views/projects/_project_templates.html.haml index 9d8627c9eb1..e90a6355214 100644 --- a/app/views/projects/_project_templates.html.haml +++ b/app/views/projects/_project_templates.html.haml @@ -1,27 +1,8 @@ -.project-templates-buttons.import-buttons - - Gitlab::ProjectTemplate.all.each do |template| - .template-option - = custom_icon(template.logo) - .template-title= template.title - .template-description= template.description - %label.btn.btn-success.template-button.choose-template.append-right-10{ for: template.name } - %input{ type: "radio", autocomplete: "off", name: "project[template_name]", id: template.name, value: template.name } - %span Use template - %a.btn.btn-default{ href: template.preview, rel: 'noopener noreferrer', target: '_blank' } Preview +- f ||= local_assigns[:f] - .project-fields-form - .row - .form-group.col-sm-12 - %label.label-bold - Template - .input-group.template-input-group - .input-group-prepend - .input-group-text - .selected-icon - - Gitlab::ProjectTemplate.all.each do |template| - = custom_icon(template.logo) - .selected-template - .input-group-append - %button.btn.btn-default.change-template{ type: "button" } Change template +.project-templates-buttons.import-buttons.col-sm-12 + = render 'projects/project_templates/built_in_templates' - = render 'new_project_fields', f: f, project_name_id: "template-project-name" +.project-fields-form + = render 'projects/project_templates/project_fields_form' + = render 'projects/new_project_fields', f: f, project_name_id: "template-project-name" diff --git a/app/views/projects/project_templates/_built_in_templates.html.haml b/app/views/projects/project_templates/_built_in_templates.html.haml new file mode 100644 index 00000000000..e7636099be6 --- /dev/null +++ b/app/views/projects/project_templates/_built_in_templates.html.haml @@ -0,0 +1,17 @@ +- Gitlab::ProjectTemplate.all.each do |template| + .template-option.d-flex.align-items-center + .logo.append-right-10 + = custom_icon(template.logo, size: 40) + .description + %strong + = template.title + %br + .text-muted + = template.description + .controls.d-flex.align-items-center + %label.btn.btn-success.template-button.choose-template.append-right-10.append-bottom-0{ for: template.name } + %input{ type: "radio", autocomplete: "off", name: "project[template_name]", id: template.name, value: template.name } + %span + = _("Use template") + %a.btn.btn-default{ href: template.preview, rel: 'noopener noreferrer', target: '_blank' } + = _("Preview") diff --git a/app/views/projects/project_templates/_project_fields_form.html.haml b/app/views/projects/project_templates/_project_fields_form.html.haml new file mode 100644 index 00000000000..c96010550d8 --- /dev/null +++ b/app/views/projects/project_templates/_project_fields_form.html.haml @@ -0,0 +1,12 @@ +.row + .form-group.col-sm-12 + %label.label-bold + = _('Template') + .input-group.template-input-group + .input-group-prepend + .input-group-text + .selected-icon.append-right-10 + .selected-template + .input-group-append + %button.btn.btn-default.change-template{ type: "button" } + = _('Change template') diff --git a/changelogs/unreleased/6860-FE-instance-level-project-templates.yml b/changelogs/unreleased/6860-FE-instance-level-project-templates.yml new file mode 100644 index 00000000000..74e0daee71b --- /dev/null +++ b/changelogs/unreleased/6860-FE-instance-level-project-templates.yml @@ -0,0 +1,5 @@ +--- +title: Update design of project templates +merge_request: 21012 +author: +type: changed diff --git a/locale/gitlab.pot b/locale/gitlab.pot index c1b80cd114c..a414f0a90cc 100644 --- a/locale/gitlab.pot +++ b/locale/gitlab.pot @@ -1050,6 +1050,9 @@ msgstr "" msgid "Cannot modify managed Kubernetes cluster" msgstr "" +msgid "Change template" +msgstr "" + msgid "Change this value to influence how frequently the GitLab UI polls for updates." msgstr "" @@ -4028,6 +4031,9 @@ msgstr "" msgid "Preferences|Navigation theme" msgstr "" +msgid "Preview" +msgstr "" + msgid "Prioritize" msgstr "" @@ -5081,6 +5087,9 @@ msgstr "" msgid "Team" msgstr "" +msgid "Template" +msgstr "" + msgid "Terms of Service Agreement and Privacy Policy" msgstr "" @@ -5655,6 +5664,9 @@ msgstr "" msgid "Use one line per URI" msgstr "" +msgid "Use template" +msgstr "" + msgid "Use the following registration token during setup:" msgstr ""