Wiped old page and started on new UI

Completed new project page

Updated CHANGELOG

Corrected 'Create project' button

Made responsive

Added gitlab export button

Changed Spinach test to match updated UI

reverted test changes and fixed UI

Corrected 'Repo by URL' text

Fixed static namespace style

Added errors partial

Added padding to bottom of page-with-sidebar
This commit is contained in:
Luke "Jared" Bennett 2016-06-08 02:10:55 +01:00
parent c9a4626333
commit 957143347c
No known key found for this signature in database
GPG Key ID: 8B91010378F2851F
5 changed files with 176 additions and 102 deletions

View File

@ -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

View File

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

View File

@ -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 {

View File

@ -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
.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 '#', class: 'how_to_import_link btn import_github' do
%i.fa.fa-github
GitHub
= render 'github_import_modal'
.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 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 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
- 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'
.js-toggle-content.hide
= render "shared/import_form", f: f
- if gitorious_import_enabled?
= link_to new_import_gitorious_path, class: 'btn import_gitorious' do
%i.icon-gitorious.icon-gitorious-small
Gitorious.org
.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
- if google_code_import_enabled?
= link_to new_import_google_code_path, class: 'btn import_google_code' do
%i.fa.fa-google
Google Code
.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)
- 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
.form-actions
= f.submit 'Create project', class: "btn btn-create project-submit", tabindex: 4
= link_to 'Cancel', dashboard_projects_path, class: 'btn btn-cancel'

View File

@ -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