Commit 6ff039ac authored by Jacob Schatz's avatar Jacob Schatz

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
parents 7a94432e 95714334
...@@ -167,6 +167,7 @@ v 8.9.0 ...@@ -167,6 +167,7 @@ v 8.9.0
- Add Application Setting to configure Container Registry token expire delay (default 5min) - Add Application Setting to configure Container Registry token expire delay (default 5min)
- Cache assigned issue and merge request counts in sidebar nav - Cache assigned issue and merge request counts in sidebar nav
- Use Knapsack only in CI environment - Use Knapsack only in CI environment
- Updated project creation page to match new UI #2542
- Cache project build count in sidebar nav - Cache project build count in sidebar nav
- Add milestone expire date to the right sidebar - Add milestone expire date to the right sidebar
- Manually mark a issue or merge request as a todo - Manually mark a issue or merge request as a todo
......
.page-with-sidebar { .page-with-sidebar {
padding-top: $header-height; padding-top: $header-height;
padding-bottom: 25px;
transition: padding $sidebar-transition-duration; transition: padding $sidebar-transition-duration;
.sidebar-wrapper { .sidebar-wrapper {
......
...@@ -13,10 +13,53 @@ ...@@ -13,10 +13,53 @@
.new_project, .new_project,
.edit-project { .edit-project {
fieldset.features { fieldset {
.control-label { &.features .control-label {
font-weight: normal; 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 { ...@@ -365,10 +408,28 @@ a.deploy-project-label {
} }
} }
.project-import .btn { .project-import {
float: left; .form-group {
margin-bottom: 10px; margin-bottom: 0;
}
.import-buttons {
padding-left: 0;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
.btn {
margin-right: 10px; margin-right: 10px;
padding: 8px 12px;
}
&> div {
margin-bottom: 14px;
padding-left: 0;
&:last-child {
margin-bottom: 0;
}
}
}
} }
.project-stats { .project-stats {
......
- page_title 'New Project' - page_title 'New Project'
- header_title "Projects", dashboard_projects_path - header_title "Projects", dashboard_projects_path
%h3.page-title
New Project
%hr
.project-edit-container .project-edit-container
.project-edit-errors .project-edit-errors
= render 'projects/errors' = render 'projects/errors'
.project-edit-content .row.prepend-top-default
.col-lg-3.profile-settings-sidebar
= form_for @project, html: { class: 'new_project form-horizontal js-requires-input' } do |f| %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 .form-group
= f.label :path, class: 'control-label' do .input-group
Project owner - if current_user.can_select_namespace?
.col-sm-10 .input-group-addon
= f.select :namespace_id, namespaces_options(:current_user), {}, {class: 'select2 js-select-namespace', tabindex: 1} = 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? - if current_user.can_create_group?
.help-block .help-block
Want to house several dependent projects under the same namespace? Want to house several dependent projects under the same namespace?
= link_to "Create a group", new_group_path = 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? - if import_sources_enabled?
.project-import.js-toggle-container .project-import.js-toggle-container
.form-group .form-group.clearfix
%label.control-label Import project from = f.label :visibility_level, class: 'label-light' do
.col-sm-10 Import project from
.col-sm-12.import-buttons
%div
- if github_import_enabled? - if github_import_enabled?
- if github_import_configured? - if github_import_configured?
= link_to status_import_github_path, class: 'btn import_github' do = link_to status_import_github_path, class: 'btn import_github' do
...@@ -43,7 +53,7 @@ ...@@ -43,7 +53,7 @@
%i.fa.fa-github %i.fa.fa-github
GitHub GitHub
= render 'github_import_modal' = render 'github_import_modal'
%div
- if bitbucket_import_enabled? - if bitbucket_import_enabled?
- if bitbucket_import_configured? - if bitbucket_import_configured?
= link_to status_import_bitbucket_path, class: 'btn import_bitbucket', "data-no-turbolink" => "true" do = link_to status_import_bitbucket_path, class: 'btn import_bitbucket', "data-no-turbolink" => "true" do
...@@ -54,7 +64,7 @@ ...@@ -54,7 +64,7 @@
%i.fa.fa-bitbucket %i.fa.fa-bitbucket
Bitbucket Bitbucket
= render 'bitbucket_import_modal' = render 'bitbucket_import_modal'
%div
- if gitlab_import_enabled? - if gitlab_import_enabled?
- if gitlab_import_configured? - if gitlab_import_configured?
= link_to status_import_gitlab_path, class: 'btn import_gitlab' do = link_to status_import_gitlab_path, class: 'btn import_gitlab' do
...@@ -65,27 +75,27 @@ ...@@ -65,27 +75,27 @@
%i.fa.fa-heart %i.fa.fa-heart
GitLab.com GitLab.com
= render 'gitlab_import_modal' = render 'gitlab_import_modal'
%div
- if gitorious_import_enabled? - if gitorious_import_enabled?
= link_to new_import_gitorious_path, class: 'btn import_gitorious' do = link_to new_import_gitorious_path, class: 'btn import_gitorious' do
%i.icon-gitorious.icon-gitorious-small %i.icon-gitorious.icon-gitorious-small
Gitorious.org Gitorious.org
%div
- if google_code_import_enabled? - if google_code_import_enabled?
= link_to new_import_google_code_path, class: 'btn import_google_code' do = link_to new_import_google_code_path, class: 'btn import_google_code' do
%i.fa.fa-google %i.fa.fa-google
Google Code Google Code
%div
- if fogbugz_import_enabled? - if fogbugz_import_enabled?
= link_to new_import_fogbugz_path, class: 'btn import_fogbugz' do = link_to new_import_fogbugz_path, class: 'btn import_fogbugz' do
%i.fa.fa-bug %i.fa.fa-bug
Fogbugz Fogbugz
%div
- if git_import_enabled? - if git_import_enabled?
= link_to "#", class: 'btn js-toggle-button import_git' do = link_to "#", class: 'btn js-toggle-button import_git' do
%i.fa.fa-git %i.fa.fa-git
%span Repo by URL %span Repo by URL
%div
- if gitlab_project_import_enabled? - if gitlab_project_import_enabled?
= link_to new_import_gitlab_project_path, class: 'btn import_gitlab_project project-submit' do = link_to new_import_gitlab_project_path, class: 'btn import_gitlab_project project-submit' do
%i.fa.fa-gitlab %i.fa.fa-gitlab
...@@ -94,17 +104,18 @@ ...@@ -94,17 +104,18 @@
.js-toggle-content.hide .js-toggle-content.hide
= render "shared/import_form", f: f = render "shared/import_form", f: f
.prepend-botton-10
.form-group .form-group
= f.label :description, class: 'control-label' do = f.label :description, class: 'label-light' do
Description Project description
%span.light (optional) %span.light (optional)
.col-sm-10 = f.text_area :description, placeholder: 'Description format', class: "form-control", rows: 3, maxlength: 250
= 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 .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 = f.submit 'Create project', class: "btn btn-create project-submit", tabindex: 4
= link_to 'Cancel', dashboard_projects_path, class: 'btn btn-cancel' = link_to 'Cancel', dashboard_projects_path, class: 'btn btn-cancel'
......
...@@ -10,7 +10,7 @@ class Spinach::Features::NewProject < Spinach::FeatureSteps ...@@ -10,7 +10,7 @@ class Spinach::Features::NewProject < Spinach::FeatureSteps
end end
step 'I see "New Project" page' do 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') expect(page).to have_content('Project name')
end end
......
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