diff --git a/CHANGELOG b/CHANGELOG
index 6506f49174a3665849a80b95123aaabf3692f97d..fee58c143c069768730e4340c696718e95598723 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -159,6 +159,7 @@ v 8.9.0
- Add Application Setting to configure Container Registry token expire delay (default 5min)
- Cache assigned issue and merge request counts in sidebar nav
- Use Knapsack only in CI environment
+ - Updated project creation page to match new UI #2542
- Cache project build count in sidebar nav
- Add milestone expire date to the right sidebar
- Manually mark a issue or merge request as a todo
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 98f917ce69b5c64df22c68286801d12c520512ea..e8d6a7f2775d4ec4caea5241a971cb60676b9e0f 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -1,5 +1,6 @@
.page-with-sidebar {
padding-top: $header-height;
+ padding-bottom: 25px;
transition: padding $sidebar-transition-duration;
.sidebar-wrapper {
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index d3e59d7fdb95415f385059c5cc8fb58b6d63bcbb..89ce1b2df2093a8b6f327496cc59e577abc92334 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -13,10 +13,53 @@
.new_project,
.edit-project {
- fieldset.features {
- .control-label {
+ fieldset {
+ &.features .control-label {
font-weight: normal;
}
+ .form-group {
+ margin-bottom: 5px;
+ }
+ &> .form-group {
+ padding-left: 0;
+ }
+ }
+ .help-block {
+ margin-bottom: 10px;
+ }
+ .project-path {
+ padding-right: 0;
+ .form-control {
+ border-radius: $border-radius-base;
+ }
+ }
+ .input-group > div {
+ &:last-child {
+ padding-right: 0;
+ }
+ }
+ @media (max-width: $screen-xs-max) {
+ .input-group > div {
+ margin-bottom: 14px;
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+ fieldset > .form-group:first-child {
+ padding-right: 0;
+ }
+ }
+
+ .input-group-addon {
+ &.static-namespace {
+ height: 35px;
+ border-radius: 3px;
+ border: 1px solid #e5e5e5;
+ }
+ &+ .select2 a {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
}
}
@@ -365,10 +408,28 @@ a.deploy-project-label {
}
}
-.project-import .btn {
- float: left;
- margin-bottom: 10px;
- margin-right: 10px;
+.project-import {
+ .form-group {
+ margin-bottom: 0;
+ }
+ .import-buttons {
+ padding-left: 0;
+ display: -webkit-flex;
+ display: flex;
+ -webkit-flex-wrap: wrap;
+ flex-wrap: wrap;
+ .btn {
+ margin-right: 10px;
+ padding: 8px 12px;
+ }
+ &> div {
+ margin-bottom: 14px;
+ padding-left: 0;
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+ }
}
.project-stats {
diff --git a/app/views/projects/new.html.haml b/app/views/projects/new.html.haml
index 3c1c6060504256b9a5f3923ba84eb8f772a256b1..8a73b0773574ae66ade3ef51b36a59c0c2a5a486 100644
--- a/app/views/projects/new.html.haml
+++ b/app/views/projects/new.html.haml
@@ -1,110 +1,121 @@
- page_title 'New Project'
- header_title "Projects", dashboard_projects_path
-%h3.page-title
- New Project
-%hr
-
.project-edit-container
.project-edit-errors
= render 'projects/errors'
- .project-edit-content
-
- = form_for @project, html: { class: 'new_project form-horizontal js-requires-input' } do |f|
- .form-group
- = f.label :path, class: 'control-label' do
- Project owner
- .col-sm-10
- = f.select :namespace_id, namespaces_options(:current_user), {}, {class: 'select2 js-select-namespace', tabindex: 1}
-
- - if current_user.can_create_group?
- .help-block
- Want to house several dependent projects under the same namespace?
- = link_to "Create a group", new_group_path
-
- .form-group
- = f.label :path, class: 'control-label' do
- Project name
- .col-sm-10
- = f.text_field :path, placeholder: "my-awesome-project", class: "form-control", tabindex: 2, autofocus: true, required: true
-
- - if import_sources_enabled?
- .project-import.js-toggle-container
- .form-group
- %label.control-label Import project from
- .col-sm-10
- - if github_import_enabled?
- - if github_import_configured?
- = link_to status_import_github_path, class: 'btn import_github' do
- %i.fa.fa-github
- GitHub
- - else
- = link_to '#', class: 'how_to_import_link btn import_github' do
- %i.fa.fa-github
- GitHub
- = render 'github_import_modal'
-
- - if bitbucket_import_enabled?
- - if bitbucket_import_configured?
- = link_to status_import_bitbucket_path, class: 'btn import_bitbucket', "data-no-turbolink" => "true" do
- %i.fa.fa-bitbucket
- Bitbucket
- - else
- = link_to status_import_bitbucket_path, class: 'how_to_import_link btn import_bitbucket', "data-no-turbolink" => "true" do
- %i.fa.fa-bitbucket
- Bitbucket
- = render 'bitbucket_import_modal'
-
- - if gitlab_import_enabled?
- - if gitlab_import_configured?
- = link_to status_import_gitlab_path, class: 'btn import_gitlab' do
- %i.fa.fa-heart
- GitLab.com
+ .row.prepend-top-default
+ .col-lg-3.profile-settings-sidebar
+ %h4.prepend-top-0
+ New project
+ %p
+ Create or Import your project from popular Git services
+ .col-lg-9
+ = form_for @project, html: { class: 'new_project' } do |f|
+ %fieldset.append-bottom-0
+ .form-group.col-xs-12.col-sm-6
+ = f.label :namespace_id, class: 'label-light' do
+ %span
+ Project path
+ .form-group
+ .input-group
+ - if current_user.can_select_namespace?
+ .input-group-addon
+ = root_url
+ = f.select :namespace_id, namespaces_options(params[:namespace_id] || :current_user, display_path: true), {}, {class: 'select2 js-select-namespace', tabindex: 1}
- else
- = link_to status_import_gitlab_path, class: 'how_to_import_link btn import_gitlab' do
- %i.fa.fa-heart
- GitLab.com
- = render 'gitlab_import_modal'
-
- - if gitorious_import_enabled?
- = link_to new_import_gitorious_path, class: 'btn import_gitorious' do
- %i.icon-gitorious.icon-gitorious-small
- Gitorious.org
-
- - if google_code_import_enabled?
- = link_to new_import_google_code_path, class: 'btn import_google_code' do
- %i.fa.fa-google
- Google Code
-
- - if fogbugz_import_enabled?
- = link_to new_import_fogbugz_path, class: 'btn import_fogbugz' do
- %i.fa.fa-bug
- Fogbugz
-
- - if git_import_enabled?
- = link_to "#", class: 'btn js-toggle-button import_git' do
- %i.fa.fa-git
- %span Repo by URL
-
- - if gitlab_project_import_enabled?
- = link_to new_import_gitlab_project_path, class: 'btn import_gitlab_project project-submit' do
- %i.fa.fa-gitlab
- %span GitLab export
-
- .js-toggle-content.hide
- = render "shared/import_form", f: f
-
- .prepend-botton-10
-
- .form-group
- = f.label :description, class: 'control-label' do
- Description
- %span.light (optional)
- .col-sm-10
- = f.text_area :description, class: "form-control", rows: 3, maxlength: 250, tabindex: 3
- = render 'shared/visibility_level', f: f, visibility_level: default_project_visibility, can_change_visibility_level: true, form_model: @project
+ .input-group-addon.static-namespace
+ #{root_url}#{current_user.username}/
+ .form-group.col-xs-12.col-sm-6.project-path
+ = f.label :namespace_id, class: 'label-light' do
+ %span
+ Project name
+ = f.text_field :path, placeholder: "my-awesome-project", class: "form-control", tabindex: 2, autofocus: true, required: true
+ - if current_user.can_create_group?
+ .help-block
+ Want to house several dependent projects under the same namespace?
+ = link_to "Create a group", new_group_path
+
+ - if import_sources_enabled?
+ .project-import.js-toggle-container
+ .form-group.clearfix
+ = f.label :visibility_level, class: 'label-light' do
+ Import project from
+ .col-sm-12.import-buttons
+ %div
+ - if github_import_enabled?
+ - if github_import_configured?
+ = link_to status_import_github_path, class: 'btn import_github' do
+ %i.fa.fa-github
+ GitHub
+ - else
+ = link_to '#', class: 'how_to_import_link btn import_github' do
+ %i.fa.fa-github
+ GitHub
+ = render 'github_import_modal'
+ %div
+ - if bitbucket_import_enabled?
+ - if bitbucket_import_configured?
+ = link_to status_import_bitbucket_path, class: 'btn import_bitbucket', "data-no-turbolink" => "true" do
+ %i.fa.fa-bitbucket
+ Bitbucket
+ - else
+ = link_to status_import_bitbucket_path, class: 'how_to_import_link btn import_bitbucket', "data-no-turbolink" => "true" do
+ %i.fa.fa-bitbucket
+ Bitbucket
+ = render 'bitbucket_import_modal'
+ %div
+ - if gitlab_import_enabled?
+ - if gitlab_import_configured?
+ = link_to status_import_gitlab_path, class: 'btn import_gitlab' do
+ %i.fa.fa-heart
+ GitLab.com
+ - else
+ = link_to status_import_gitlab_path, class: 'how_to_import_link btn import_gitlab' do
+ %i.fa.fa-heart
+ GitLab.com
+ = render 'gitlab_import_modal'
+ %div
+ - if gitorious_import_enabled?
+ = link_to new_import_gitorious_path, class: 'btn import_gitorious' do
+ %i.icon-gitorious.icon-gitorious-small
+ Gitorious.org
+ %div
+ - if google_code_import_enabled?
+ = link_to new_import_google_code_path, class: 'btn import_google_code' do
+ %i.fa.fa-google
+ Google Code
+ %div
+ - if fogbugz_import_enabled?
+ = link_to new_import_fogbugz_path, class: 'btn import_fogbugz' do
+ %i.fa.fa-bug
+ Fogbugz
+ %div
+ - if git_import_enabled?
+ = link_to "#", class: 'btn js-toggle-button import_git' do
+ %i.fa.fa-git
+ %span Repo by URL
+ %div
+ - if gitlab_project_import_enabled?
+ = link_to new_import_gitlab_project_path, class: 'btn import_gitlab_project project-submit' do
+ %i.fa.fa-gitlab
+ %span GitLab export
+
+ .js-toggle-content.hide
+ = render "shared/import_form", f: f
+
+ .form-group
+ = f.label :description, class: 'label-light' do
+ Project description
+ %span.light (optional)
+ = f.text_area :description, placeholder: 'Description format', class: "form-control", rows: 3, maxlength: 250
+
+ .form-group.project-visibility-level-holder
+ = f.label :visibility_level, class: 'label-light' do
+ Visibility Level
+ = link_to "(?)", help_page_path("public_access", "public_access")
+ = render('shared/visibility_radios', model_method: :visibility_level, form: f, selected_level: @project.visibility_level, form_model: @project)
- .form-actions
= f.submit 'Create project', class: "btn btn-create project-submit", tabindex: 4
= link_to 'Cancel', dashboard_projects_path, class: 'btn btn-cancel'
diff --git a/features/steps/dashboard/new_project.rb b/features/steps/dashboard/new_project.rb
index 29e6b9f1a016284ec0563d899b22f6ab6e83b002..31f8924c38c38c04e563bfb01a154240b1146d09 100644
--- a/features/steps/dashboard/new_project.rb
+++ b/features/steps/dashboard/new_project.rb
@@ -10,7 +10,7 @@ class Spinach::Features::NewProject < Spinach::FeatureSteps
end
step 'I see "New Project" page' do
- expect(page).to have_content('Project owner')
+ expect(page).to have_content('Project path')
expect(page).to have_content('Project name')
end