Improve user expirience while create/edit project settings

7 files changed, 209 insertions, 213 deletions

diff --git a/app/views/projects/_errors.html.haml b/app/views/projects/_errors.html.haml
new file mode 100644
index 00000000000..bb9759353a3
--- /dev/null
+++ b/app/views/projects/_errors.html.haml
@@ -0,0 +1,4 @@
+- if @project.errors.any?
+  .alert.alert-error
+    %button{ type: "button", class: "close", "data-dismiss" => "alert"} ×
+    = @project.errors.full_messages.first
diff --git a/app/views/projects/_form.html.haml b/app/views/projects/_form.html.haml
deleted file mode 100644
index 0e1fd238005..00000000000
--- a/app/views/projects/_form.html.haml
+++ /dev/null
@@ -1,151 +0,0 @@
-.row
-  .span3
-    %ul.nav.nav-pills.nav-stacked
-      %li.active
-        = link_to 'Settings', '#tab-settings', 'data-toggle' => 'tab'
-      %li
-        = link_to 'Transfer', '#tab-transfer', 'data-toggle' => 'tab'
-      %li
-        = link_to 'Remove', '#tab-remove', 'data-toggle' => 'tab'
-
-  .span9
-    .tab-content
-      .tab-pane.active#tab-settings
-        .ui-box.white
-          %h5.title Settings:
-          .form-holder
-            = form_for(@project, remote: true) do |f|
-              - if @project.errors.any?
-                .alert.alert-error
-                  %ul
-                    - @project.errors.full_messages.each do |msg|
-                      %li= msg
-
-              %fieldset
-                .clearfix.project_name_holder
-                  = f.label :name do
-                    Project name is
-                  .input
-                    = f.text_field :name, placeholder: "Example Project", class: "span5"
-
-
-                .clearfix
-                  = f.label :description do
-                    Project description
-                    %span.light (optional)
-                  .input
-                    = f.text_area :description, placeholder: "awesome project", class: "span5", rows: 3, maxlength: 250
-
-                - unless @project.empty_repo?
-                  .clearfix
-                    = f.label :default_branch, "Default Branch"
-                    .input= f.select(:default_branch, @repository.branch_names, {})
-
-
-              - if can?(current_user, :change_public_mode, @project)
-                %fieldset.public-mode
-                  %legend
-                    Public mode:
-                  .control-group
-                    = f.label :public, class: 'control-label' do
-                      %span Public access
-                    .controls
-                      = f.check_box :public
-                      %span.descr
-                        If checked, this project can be cloned
-                        %em without any
-                        authentication.
-                        It will also be listed on the #{link_to "public access directory", public_root_path}.
-                        %em Any
-                        user will have #{link_to "Guest", help_permissions_path} permissions on the repository.
-
-              %fieldset.features
-                %legend
-                  Labels:
-                .control-group
-                  = f.label :label_list, "Labels", class: 'control-label'
-                  .controls
-                    = f.text_field :label_list, maxlength: 2000, class: "span5"
-                    %p.hint Separate with comma.
-
-              %fieldset.features
-                %legend
-                  Features:
-                .control-group
-                  = f.label :issues_enabled, "Issues", class: 'control-label'
-                  .controls
-                    = f.check_box :issues_enabled
-                    %span.descr Lightweight issue tracking system for this project
-
-                - if Project.issues_tracker.values.count > 1
-                  .control-group
-                    = f.label :issues_tracker, "Issues tracker", class: 'control-label'
-                    .input= f.select(:issues_tracker, Project.issues_tracker.values, {}, { disabled: !@project.issues_enabled })
-
-                  .clearfix
-                    = f.label :issues_tracker_id, "Project name or id in issues tracker", class: 'control-label'
-                    .input= f.text_field :issues_tracker_id, disabled: !@project.can_have_issues_tracker_id?
-
-                .control-group
-                  = f.label :merge_requests_enabled, "Merge Requests", class: 'control-label'
-                  .controls
-                    = f.check_box :merge_requests_enabled
-                    %span.descr Submit changes to be merged upstream.
-
-                .control-group
-                  = f.label :wiki_enabled, "Wiki", class: 'control-label'
-                  .controls
-                    = f.check_box :wiki_enabled
-                    %span.descr Pages for project documentation
-
-                .control-group
-                  = f.label :wall_enabled, "Wall", class: 'control-label'
-                  .controls
-                    = f.check_box :wall_enabled
-                    %span.descr Simple chat system for broadcasting inside project
-
-                .control-group
-                  = f.label :snippets_enabled, "Snippets", class: 'control-label'
-                  .controls
-                    = f.check_box :snippets_enabled
-                    %span.descr Share code pastes with others out of git repository
-
-
-              .form-actions
-                = f.submit 'Save', class: "btn btn-save"
-
-      .tab-pane#tab-transfer
-        - if can?(current_user, :change_namespace, @project)
-          .ui-box.ui-box-danger
-            %h5.title Transfer project
-            .errors-holder
-            .form-holder
-              = form_for(@project, url: transfer_project_path(@project), remote: true, html: { class: 'transfer-project' }) do |f|
-                .control-group
-                  = f.label :namespace_id do
-                    %span Namespace
-                  .controls
-                    .clearfix
-                      = f.select :namespace_id, namespaces_options(@project.namespace_id || Namespace::global_id), {prompt: 'Choose a project namespace'}, {class: 'chosen'}
-                    %ul
-                      %li Be careful. Changing project namespace can have unintended side effects
-                      %li You can transfer project only to namespaces you can manage
-                      %li You will need to update your local repositories to point to the new location.
-                .form-actions
-                  = f.submit 'Transfer', class: "btn btn-remove"
-        - else
-          %p.nothing_here_message Only project owner can transfer a project
-
-      .tab-pane#tab-remove
-        - if can?(current_user, :remove_project, @project)
-          .ui-box.ui-box-danger
-            %h5.title Remove project
-            .ui-box-body
-              %p
-                Remove of project will cause removing repository and all related resources like issues, merge requests etc.
-              %p
-                %strong Removed project can not be restored!
-
-              = link_to 'Remove project', @project, confirm: 'Removed project can not be restored! Are you sure?', method: :delete, class: "btn btn-remove btn-small"
-        - else
-          %p.nothing_here_message Only project owner can remove a project
diff --git a/app/views/projects/_new_form.html.haml b/app/views/projects/_new_form.html.haml
deleted file mode 100644
index b6503636890..00000000000
--- a/app/views/projects/_new_form.html.haml
+++ /dev/null
@@ -1,48 +0,0 @@
-= form_for(@project, remote: true) do |f|
-  - if @project.errors.any?
-    .alert.alert-error
-      %span= @project.errors.full_messages.first
-  .clearfix.project_name_holder
-    = f.label :name do
-      Project name is
-    .input
-      = f.text_field :name, placeholder: "Example Project", class: "xxlarge"
-      = f.submit 'Create project', class: "btn btn-create project-submit"
-
-  - if current_user.can_select_namespace?
-    .clearfix
-      = f.label :namespace_id do
-        %span Namespace
-      .input
-        = f.select :namespace_id, namespaces_options(params[:namespace_id] || :current_user), {}, {class: 'chosen'}
-
-
-  .clearfix
-    .input
-      = link_to "#", class: 'appear-link' do
-        %i.icon-upload-alt
-        %span Import existing repository?
-  .clearfix.appear-data
-    = f.label :import_url do
-      %span Import existing repo
-    .input
-      = f.text_field :import_url, class: 'xlarge', placeholder: 'https://github.com/randx/six.git'
-      .light
-        URL must be clonable
-
-  %p.padded
-    New projects are private by default. You choose who can see the project and commit to repository.
-  %hr
-
-  - if current_user.can_create_group?
-    .clearfix
-      .input.light
-        Need a group for several dependent projects?
-        = link_to new_group_path, class: "btn btn-tiny" do
-          Create a group
-  - if current_user.can_create_team?
-    .clearfix
-      .input.light
-        Want to share a project between team?
-        = link_to new_team_path, class: "btn btn-tiny" do
-          Create a team
diff --git a/app/views/projects/create.js.haml b/app/views/projects/create.js.haml
index 296c8688f47..52e61f47283 100644
--- a/app/views/projects/create.js.haml
+++ b/app/views/projects/create.js.haml
@@ -3,8 +3,6 @@
     location.href = "#{project_path(@project)}";
 - else
   :plain
-    $('.project_new_holder').show();
-    $("#new_project").replaceWith("#{escape_javascript(render('new_form'))}");
+    $(".project-edit-errors").html("#{escape_javascript(render('errors'))}");
     $('.save-project-loader').hide();
-    new Projects();
-    $('select.chosen').chosen()
+    $('.project-edit-container').show();
diff --git a/app/views/projects/edit.html.haml b/app/views/projects/edit.html.haml
index e215ad6fd73..dd087100e4c 100644
--- a/app/views/projects/edit.html.haml
+++ b/app/views/projects/edit.html.haml
@@ -1,10 +1,157 @@
 = render "projects/settings_nav"
 
-.project_edit_holder
+.project-edit-container
   %h3.page_title Edit Project
   %hr
-  = render "projects/form"
-%div.save-project-loader.hide
+  .project-edit-errors
+  .project-edit-content
+    .row
+      .span3
+        %ul.nav.nav-pills.nav-stacked
+          %li.active
+            = link_to 'Settings', '#tab-settings', 'data-toggle' => 'tab'
+          %li
+            = link_to 'Transfer', '#tab-transfer', 'data-toggle' => 'tab'
+          %li
+            = link_to 'Remove', '#tab-remove', 'data-toggle' => 'tab'
+
+      .span9
+        .tab-content
+          .tab-pane.active#tab-settings
+            .ui-box.white
+              %h5.title Settings:
+              .form-holder
+                = form_for(@project, remote: true) do |f|
+                  %fieldset
+                    .clearfix.project_name_holder
+                      = f.label :name do
+                        Project name is
+                      .input
+                        = f.text_field :name, placeholder: "Example Project", class: "span5"
+
+
+                    .clearfix
+                      = f.label :description do
+                        Project description
+                        %span.light (optional)
+                      .input
+                        = f.text_area :description, placeholder: "awesome project", class: "span5", rows: 3, maxlength: 250
+
+                    - unless @project.empty_repo?
+                      .clearfix
+                        = f.label :default_branch, "Default Branch"
+                        .input= f.select(:default_branch, @repository.branch_names, {}, {class: 'chosen'})
+
+
+                  - if can?(current_user, :change_public_mode, @project)
+                    %fieldset.public-mode
+                      %legend
+                        Public mode:
+                      .control-group
+                        = f.label :public, class: 'control-label' do
+                          %span Public access
+                        .controls
+                          = f.check_box :public
+                          %span.descr
+                            If checked, this project can be cloned
+                            %em without any
+                            authentication.
+                            It will also be listed on the #{link_to "public access directory", public_root_path}.
+                            %em Any
+                            user will have #{link_to "Guest", help_permissions_path} permissions on the repository.
+
+                  %fieldset.features
+                    %legend
+                      Labels:
+                    .control-group
+                      = f.label :label_list, "Labels", class: 'control-label'
+                      .controls
+                        = f.text_field :label_list, maxlength: 2000, class: "span5"
+                        %p.hint Separate with comma.
+
+                  %fieldset.features
+                    %legend
+                      Features:
+                    .control-group
+                      = f.label :issues_enabled, "Issues", class: 'control-label'
+                      .controls
+                        = f.check_box :issues_enabled
+                        %span.descr Lightweight issue tracking system for this project
+
+                    - if Project.issues_tracker.values.count > 1
+                      .control-group
+                        = f.label :issues_tracker, "Issues tracker", class: 'control-label'
+                        .input= f.select(:issues_tracker, Project.issues_tracker.values, {}, { disabled: !@project.issues_enabled })
+
+                      .clearfix
+                        = f.label :issues_tracker_id, "Project name or id in issues tracker", class: 'control-label'
+                        .input= f.text_field :issues_tracker_id, disabled: !@project.can_have_issues_tracker_id?
+
+                    .control-group
+                      = f.label :merge_requests_enabled, "Merge Requests", class: 'control-label'
+                      .controls
+                        = f.check_box :merge_requests_enabled
+                        %span.descr Submit changes to be merged upstream.
+
+                    .control-group
+                      = f.label :wiki_enabled, "Wiki", class: 'control-label'
+                      .controls
+                        = f.check_box :wiki_enabled
+                        %span.descr Pages for project documentation
+
+                    .control-group
+                      = f.label :wall_enabled, "Wall", class: 'control-label'
+                      .controls
+                        = f.check_box :wall_enabled
+                        %span.descr Simple chat system for broadcasting inside project
+
+                    .control-group
+                      = f.label :snippets_enabled, "Snippets", class: 'control-label'
+                      .controls
+                        = f.check_box :snippets_enabled
+                        %span.descr Share code pastes with others out of git repository
+
+
+                  .form-actions
+                    = f.submit 'Save', class: "btn btn-save"
+
+          .tab-pane#tab-transfer
+            - if can?(current_user, :change_namespace, @project)
+              .ui-box.ui-box-danger
+                %h5.title Transfer project
+                .errors-holder
+                .form-holder
+                  = form_for(@project, url: transfer_project_path(@project), remote: true, html: { class: 'transfer-project' }) do |f|
+                    .control-group
+                      = f.label :namespace_id do
+                        %span Namespace
+                      .controls
+                        .clearfix
+                          = f.select :namespace_id, namespaces_options(@project.namespace_id || Namespace::global_id), {prompt: 'Choose a project namespace'}, {class: 'chosen'}
+                        %ul
+                          %li Be careful. Changing project namespace can have unintended side effects
+                          %li You can transfer project only to namespaces you can manage
+                          %li You will need to update your local repositories to point to the new location.
+                    .form-actions
+                      = f.submit 'Transfer', class: "btn btn-remove"
+            - else
+              %p.nothing_here_message Only project owner can transfer a project
+
+          .tab-pane#tab-remove
+            - if can?(current_user, :remove_project, @project)
+              .ui-box.ui-box-danger
+                %h5.title Remove project
+                .ui-box-body
+                  %p
+                    Remove of project will cause removing repository and all related resources like issues, merge requests etc.
+                  %p
+                    %strong Removed project can not be restored!
+
+                  = link_to 'Remove project', @project, confirm: 'Removed project can not be restored! Are you sure?', method: :delete, class: "btn btn-remove btn-small"
+            - else
+              %p.nothing_here_message Only project owner can remove a project
+
+.save-project-loader.hide
   %center
     = image_tag "ajax_loader.gif"
     %h3 Saving project. Please wait a moment, this page will automatically refresh when ready.
diff --git a/app/views/projects/new.html.haml b/app/views/projects/new.html.haml
index 8ff873aac65..ad4f89bb5b3 100644
--- a/app/views/projects/new.html.haml
+++ b/app/views/projects/new.html.haml
@@ -1,9 +1,54 @@
-.project_new_holder
-  %h3.page_title
-    New Project
+.project-edit-container
+  %h3.page_title New Project
   %hr
-  = render 'new_form'
-%div.save-project-loader.hide
+  .project-edit-errors
+  .project-edit-content
+    = form_for @project, remote: true do |f|
+      .clearfix.project_name_holder
+        = f.label :name do
+          Project name is
+        .input
+          = f.text_field :name, placeholder: "Example Project", class: "xxlarge", tabindex: 1
+          = f.submit 'Create project', class: "btn btn-create project-submit", tabindex: 3
+
+      - if current_user.can_select_namespace?
+        .clearfix
+          = f.label :namespace_id do
+            %span Namespace
+          .input
+            = f.select :namespace_id, namespaces_options(params[:namespace_id] || :current_user), {}, {class: 'chosen', tabindex: 2}
+
+      .clearfix
+        .input
+          = link_to "#", class: 'appear-link' do
+            %i.icon-upload-alt
+            %span Import existing repository?
+      .clearfix.appear-data.import-url-data
+        = f.label :import_url do
+          %span Import existing repo
+        .input
+          = f.text_field :import_url, class: 'xlarge', placeholder: 'https://github.com/randx/six.git'
+          .light
+            URL must be clonable
+
+      %p.padded
+        New projects are private by default. You choose who can see the project and commit to repository.
+      %hr
+
+      - if current_user.can_create_group?
+        .clearfix
+          .input.light
+            Need a group for several dependent projects?
+            = link_to new_group_path, class: "btn btn-tiny" do
+              Create a group
+      - if current_user.can_create_team?
+        .clearfix
+          .input.light
+            Want to share a project between team?
+            = link_to new_team_path, class: "btn btn-tiny" do
+              Create a team
+
+.save-project-loader.hide
   %center
     = image_tag "ajax_loader.gif"
     %h3 Creating project & repository. Please wait a moment, this page will automatically refresh when ready.
diff --git a/app/views/projects/update.js.haml b/app/views/projects/update.js.haml
index f44ed529182..cbb21f2b9fb 100644
--- a/app/views/projects/update.js.haml
+++ b/app/views/projects/update.js.haml
@@ -3,6 +3,7 @@
     location.href = "#{edit_project_path(@project)}";
 - else
   :plain
-    $('.project_edit_holder').show();
-    $(".edit_project").replaceWith("#{escape_javascript(render('form'))}");
+    $(".project-edit-errors").html("#{escape_javascript(render('errors'))}");
     $('.save-project-loader').hide();
+    $('.project-edit-container').show();
+    $('.project-edit-content .btn-save').enableButton();