Commit 273515b8 authored by Lukas Eipert's avatar Lukas Eipert
parent 8a942142
...@@ -12,6 +12,7 @@ export default function groupsSelect() { ...@@ -12,6 +12,7 @@ export default function groupsSelect() {
const skipGroups = $select.data('skipGroups') || []; const skipGroups = $select.data('skipGroups') || [];
$select.select2({ $select.select2({
placeholder: 'Search for a group', placeholder: 'Search for a group',
allowClear: $select.hasClass('allowClear'),
multiple: $select.hasClass('multiselect'), multiple: $select.hasClass('multiselect'),
minimumInputLength: 0, minimumInputLength: 0,
ajax: { ajax: {
......
import initProjectLoadingSpinner from '../shared/save_project_loader';
import initProjectVisibilitySelector from '../../../project_visibility'; import initProjectVisibilitySelector from '../../../project_visibility';
import initProjectNew from '../../../projects/project_new'; import initProjectNew from '../../../projects/project_new';
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
initProjectLoadingSpinner();
initProjectVisibilitySelector(); initProjectVisibilitySelector();
initProjectNew.bindEvents(); initProjectNew.bindEvents();
}); });
...@@ -37,9 +37,10 @@ const bindEvents = () => { ...@@ -37,9 +37,10 @@ const bindEvents = () => {
const $projectFieldsForm = $('.project-fields-form'); const $projectFieldsForm = $('.project-fields-form');
const $selectedTemplateText = $('.selected-template'); const $selectedTemplateText = $('.selected-template');
const $changeTemplateBtn = $('.change-template'); const $changeTemplateBtn = $('.change-template');
const $selectedIcon = $('.selected-icon svg'); const $selectedIcon = $('.selected-icon');
const $templateProjectNameInput = $('#template-project-name #project_path'); const $templateProjectNameInput = $('#template-project-name #project_path');
const $pushNewProjectTipTrigger = $('.push-new-project-tip'); const $pushNewProjectTipTrigger = $('.push-new-project-tip');
const $projectTemplateButtons = $('.project-templates-buttons');
if ($newProjectForm.length !== 1) { if ($newProjectForm.length !== 1) {
return; return;
...@@ -88,35 +89,35 @@ const bindEvents = () => { ...@@ -88,35 +89,35 @@ const bindEvents = () => {
} }
function chooseTemplate() { function chooseTemplate() {
$('.template-option').hide(); $projectTemplateButtons.addClass('hidden');
$projectFieldsForm.addClass('selected'); $projectFieldsForm.addClass('selected');
$selectedIcon.removeClass('d-block'); $selectedIcon.empty();
const value = $(this).val(); const value = $(this).val();
const templates = { const templates = {
rails: { rails: {
text: 'Ruby on Rails', text: 'Ruby on Rails',
icon: '.selected-icon .icon-rails', icon: '.template-option svg.icon-rails',
}, },
express: { express: {
text: 'NodeJS Express', text: 'NodeJS Express',
icon: '.selected-icon .icon-node-express', icon: '.template-option svg.icon-node-express',
}, },
spring: { spring: {
text: 'Spring', text: 'Spring',
icon: '.selected-icon .icon-java-spring', icon: '.template-option svg.icon-java-spring',
}, },
}; };
const selectedTemplate = templates[value]; const selectedTemplate = templates[value];
$selectedTemplateText.text(selectedTemplate.text); $selectedTemplateText.text(selectedTemplate.text);
$(selectedTemplate.icon).addClass('d-block'); $(selectedTemplate.icon).clone().addClass('d-block').appendTo($selectedIcon);
$templateProjectNameInput.focus(); $templateProjectNameInput.focus();
} }
$useTemplateBtn.on('change', chooseTemplate); $useTemplateBtn.on('change', chooseTemplate);
$changeTemplateBtn.on('click', () => { $changeTemplateBtn.on('click', () => {
$('.template-option').show(); $projectTemplateButtons.removeClass('hidden');
$projectFieldsForm.removeClass('selected'); $projectFieldsForm.removeClass('selected');
$useTemplateBtn.prop('checked', false); $useTemplateBtn.prop('checked', false);
}); });
......
...@@ -490,30 +490,31 @@ ...@@ -490,30 +490,31 @@
margin-bottom: 0; margin-bottom: 0;
} }
.tab-pane {
padding-top: 0;
padding-bottom: 0;
}
.template-option { .template-option {
padding: $gl-padding $gl-padding $gl-padding ($gl-padding * 4); .logo {
position: relative; .btn-template-icon {
width: 40px !important;
}
}
padding: 16px 0;
&:not(:first-child) { &:not(:first-child) {
border-top: 1px solid $border-color; border-top: 1px solid $border-color;
} }
.btn-template-icon { .controls {
position: absolute; margin-left: auto;
left: $gl-padding;
top: $gl-padding;
} }
}
.template-title {
font-size: 16px;
} }
.template-description { .choose-template {
margin: 6px 0 12px;
}
.template-button {
input { input {
position: absolute; position: absolute;
clip: rect(0, 0, 0, 0); clip: rect(0, 0, 0, 0);
...@@ -540,8 +541,6 @@ ...@@ -540,8 +541,6 @@
} }
.selected-icon { .selected-icon {
padding-right: $gl-padding;
svg { svg {
display: none; display: none;
top: 7px; top: 7px;
......
...@@ -336,5 +336,6 @@ ...@@ -336,5 +336,6 @@
.settings-content .settings-content
= render 'third_party_offers', application_setting: @application_setting = 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
.project-templates-buttons.import-buttons - f ||= local_assigns[:f]
- 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
.project-fields-form .project-templates-buttons.import-buttons.col-sm-12
.row = render 'projects/project_templates/built_in_templates'
.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
= 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"
- 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")
.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')
---
title: Update design of project templates
merge_request: 21012
author:
type: changed
...@@ -1050,6 +1050,9 @@ msgstr "" ...@@ -1050,6 +1050,9 @@ msgstr ""
msgid "Cannot modify managed Kubernetes cluster" msgid "Cannot modify managed Kubernetes cluster"
msgstr "" msgstr ""
msgid "Change template"
msgstr ""
msgid "Change this value to influence how frequently the GitLab UI polls for updates." msgid "Change this value to influence how frequently the GitLab UI polls for updates."
msgstr "" msgstr ""
...@@ -4028,6 +4031,9 @@ msgstr "" ...@@ -4028,6 +4031,9 @@ msgstr ""
msgid "Preferences|Navigation theme" msgid "Preferences|Navigation theme"
msgstr "" msgstr ""
msgid "Preview"
msgstr ""
msgid "Prioritize" msgid "Prioritize"
msgstr "" msgstr ""
...@@ -5081,6 +5087,9 @@ msgstr "" ...@@ -5081,6 +5087,9 @@ msgstr ""
msgid "Team" msgid "Team"
msgstr "" msgstr ""
msgid "Template"
msgstr ""
msgid "Terms of Service Agreement and Privacy Policy" msgid "Terms of Service Agreement and Privacy Policy"
msgstr "" msgstr ""
...@@ -5655,6 +5664,9 @@ msgstr "" ...@@ -5655,6 +5664,9 @@ msgstr ""
msgid "Use one line per URI" msgid "Use one line per URI"
msgstr "" msgstr ""
msgid "Use template"
msgstr ""
msgid "Use the following registration token during setup:" msgid "Use the following registration token during setup:"
msgstr "" msgstr ""
......
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