Merge branch 'lbennett/gitlab-ce-2542-implement-updated-ui-for-new-project-page' into 'master'

Implement UI for new project page

## What does this MR do?

Updates the project creation page to conform with the latest UI updates.

## Are there points in the code the reviewer needs to double check?

Ney.

## Why was this MR needed?

Updated UI.

## What are the relevant issue numbers?

Closes #2542.

## Screenshots (if relevant)

**Desktop:**

![Screen_Shot_2016-06-18_at_04.00.48](/uploads/0313eee96a2aef9ed5e048989548b133/Screen_Shot_2016-06-18_at_04.00.48.png)

**Mobile:**

![Screen_Shot_2016-06-18_at_04.01.00](/uploads/505b110c3fcbf523aac08797db9f6781/Screen_Shot_2016-06-18_at_04.01.00.png)

See merge request !4766

5 files changed, 180 insertions, 106 deletions

diff --git a/CHANGELOG b/CHANGELOG
index b0c7c528e38..dcec98469cb 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -167,6 +167,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 98f917ce69b..e8d6a7f2775 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 d3e59d7fdb9..89ce1b2df20 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 3c1c6060504..8a73b077357 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 29e6b9f1a01..31f8924c38c 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