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

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

app/assets/stylesheets/framework/sidebar.scss

 .page-with-sidebar {
   padding-top: $header-height;
+  padding-bottom: 25px;
   transition: padding $sidebar-transition-duration;
 
   .sidebar-wrapper {

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;
+.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 {

app/views/projects/new.html.haml

 - 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|
+  .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
-        = 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}
-        
+              .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
+                  .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
 
-      .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
+            .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
@@ -43,7 +53,7 @@
                         %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
@@ -54,7 +64,7 @@
                         %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
@@ -65,27 +75,27 @@
                         %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
@@ -94,17 +104,18 @@
             .js-toggle-content.hide
               = render "shared/import_form", f: f
 
-      .prepend-botton-10
-
         .form-group
-        = f.label :description, class: 'control-label' do
-          Description
+          = f.label :description, class: 'label-light' do
+            Project 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
+          = 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'
 

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