Project settings UI update

app/assets/stylesheets/pages/profile.scss

@@ -134,14 +134,6 @@
   }
 }
 
-.change-username-title {
-  color: $gl-warning;
-}
-
-.remove-account-title {
-  color: $gl-danger;
-}
-
 .provider-btn-group {
   display: inline-block;
   margin-right: 10px;

app/assets/stylesheets/pages/projects.scss

@@ -10,7 +10,7 @@
   margin-bottom: 0;
 }
 .new_project,
-.edit_project {
+.edit-project {
   fieldset.features {
     .control-label {
       font-weight: normal;

app/assets/stylesheets/pages/settings.scss

@@ -12,3 +12,11 @@
   border: 1px solid $warning-message-border;
   border-radius: $border-radius-base;
 }
+
+.warning-title {
+  color: $gl-warning;
+}
+
+.danger-title {
+  color: $gl-danger;
+}

app/views/profiles/accounts/show.html.haml

@@ -70,7 +70,7 @@
 - if current_user.can_change_username?
   .row.prepend-top-default
     .col-lg-3.profile-settings-sidebar
-      %h4.prepend-top-0.change-username-title
+      %h4.prepend-top-0.warning-title
         Change username
       %p
         Changing your username will change path to all personal projects!
@@ -94,7 +94,7 @@
 - if signup_enabled?
   .row.prepend-top-default
     .col-lg-3.profile-settings-sidebar
-      %h4.prepend-top-0.remove-account-title
+      %h4.prepend-top-0.danger-title
         Remove account
     .col-lg-9
       - if @user.can_be_removed?

app/views/projects/_builds_settings.html.haml

 %fieldset.builds-feature
-  %legend
-    Builds:
-
+  %h5.prepend-top-0
+    Builds
   - unless @repository.gitlab_ci_yml
     .form-group
-      .col-sm-offset-2.col-sm-10
       %p Builds need to be configured before you can begin using Continuous Integration.
       = link_to 'Get started with Builds', help_page_path('ci/quick_start', 'README'), class: 'btn btn-info'
-        %hr
-
   .form-group
-    .col-sm-offset-2.col-sm-10
     %p Get recent application code using the following command:
     .radio
       = f.label :build_allow_git_fetch_false do
@@ -26,13 +21,11 @@
         %span.descr Faster
 
   .form-group
-    = f.label :build_timeout_in_minutes, 'Timeout', class: 'control-label'
-    .col-sm-10
+    = f.label :build_timeout_in_minutes, 'Timeout', class: 'label-light'
     = f.number_field :build_timeout_in_minutes, class: 'form-control', min: '0'
     %p.help-block per build in minutes
   .form-group
-    = f.label :build_coverage_regex, "Test coverage parsing", class: 'control-label'
-    .col-sm-10
+    = f.label :build_coverage_regex, "Test coverage parsing", class: 'label-light'
     .input-group
       %span.input-group-addon /
       = f.text_field :build_coverage_regex, class: 'form-control', placeholder: '\(\d+.\d+\%\) covered'
@@ -60,15 +53,13 @@
           %code ^Statements\s*:\s*([^%]+)
 
   .form-group
-    .col-sm-offset-2.col-sm-10
     .checkbox
       = f.label :public_builds do
         = f.check_box :public_builds
         %strong Public builds
       .help-block Allow everyone to access builds for Public and Internal projects
 
-  .form-group
-    = f.label :runners_token, "Runners token", class: 'control-label'
-    .col-sm-10
+  .form-group.append-bottom-0
+    = f.label :runners_token, "Runners token", class: 'label-light'
     = f.text_field :runners_token, class: "form-control", placeholder: 'xEeFCaDAB89'
     %p.help-block The secure token used to checkout project.

app/views/projects/edit.html.haml

-.project-edit-container.prepend-top-default
-  .project-edit-errors
-  .project-edit-content
-    .panel.panel-default
-      .panel-heading
+.project-edit-container
+  .row.prepend-top-default
+    .col-lg-3.profile-settings-sidebar
+      %h4.prepend-top-0
         Project settings
-      .panel-body
-        = form_for [@project.namespace.becomes(Namespace), @project], remote: true, html: { multipart: true, class: "edit_project form-horizontal fieldset-form" }, authenticity_token: true do |f|
-
-          %fieldset
-            .form-group.project_name_holder
-              = f.label :name, class: 'control-label' do
+    .col-lg-9
+      = form_for [@project.namespace.becomes(Namespace), @project], remote: true, html: { multipart: true, class: "edit-project" }, authenticity_token: true do |f|
+        %fieldset.append-bottom-0
+          .form-group
+            = f.label :name, class: 'label-light' do
               Project name
-              .col-sm-10
             = f.text_field :name, class: "form-control", id: "project_name_edit"
-
-
           .form-group
-              = f.label :description, class: 'control-label' do
+            = 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
 
           - unless @project.empty_repo?
             .form-group
-                = f.label :default_branch, "Default Branch", class: 'control-label'
-                .col-sm-10= f.select(:default_branch, @project.repository.branch_names, {}, {class: 'select2 select-wide'})
-
-
-          = render 'shared/visibility_level', f: f, visibility_level: @project.visibility_level, can_change_visibility_level: can_change_visibility_level?(@project, current_user), form_model: @project
-
+              = f.label :default_branch, "Default Branch", class: 'label-light'
+              = f.select(:default_branch, @project.repository.branch_names, {}, {class: 'select2 select-wide'})
+        .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")
+          - if can_change_visibility_level?(@project, current_user)
+            = render('shared/visibility_radios', model_method: :visibility_level, form: f, selected_level: @project.visibility_level, form_model: @project)
+          - else
+            .info
+              = visibility_level_icon(@project.visibility_level)
+              %strong
+                = visibility_level_label(@project.visibility_level)
+              .light= visibility_level_description(@project.visibility_level, @project)
         .form-group
-            = f.label :tag_list, "Tags", class: 'control-label'
-            .col-sm-10
+          = f.label :tag_list, "Tags", class: 'label-light'
           = f.text_field :tag_list, value: @project.tag_list.to_s, maxlength: 2000, class: "form-control"
           %p.help-block Separate tags with commas.
-
-          %fieldset.features
-            %legend
-              Features:
+        %hr
+        %fieldset.features.append-bottom-0
+          %h5.prepend-top-0
+            Features
           .form-group
-              .col-sm-offset-2.col-sm-10
             .checkbox
               = f.label :issues_enabled do
                 = f.check_box :issues_enabled
                 %strong Issues
                 %br
                 %span.descr Lightweight issue tracking system for this project
-
           .form-group
-              .col-sm-offset-2.col-sm-10
             .checkbox
               = f.label :merge_requests_enabled do
                 = f.check_box :merge_requests_enabled
                 %strong Merge Requests
                 %br
                 %span.descr Submit changes to be merged upstream
-
           .form-group
-              .col-sm-offset-2.col-sm-10
             .checkbox
               = f.label :builds_enabled do
                 = f.check_box :builds_enabled
                 %strong Builds
                 %br
                 %span.descr Test and deploy your changes before merge
-
           .form-group
-              .col-sm-offset-2.col-sm-10
             .checkbox
               = f.label :wiki_enabled do
                 = f.check_box :wiki_enabled
                 %strong Wiki
                 %br
                 %span.descr Pages for project documentation
-
           .form-group
-              .col-sm-offset-2.col-sm-10
             .checkbox
               = f.label :snippets_enabled do
                 = f.check_box :snippets_enabled
                 %strong Snippets
                 %br
                 %span.descr Share code pastes with others out of git repository
-
           - if Gitlab.config.registry.enabled
             .form-group
-                .col-sm-offset-2.col-sm-10
               .checkbox
                 = f.label :container_registry_enabled do
                   = f.check_box :container_registry_enabled
                   %strong Container Registry
                   %br
                   %span.descr Enable Container Registry for this repository
-
+        %hr
         = render 'builds_settings', f: f
-
-          %fieldset.features
-            %legend
-              Project avatar:
+        %hr
+        %fieldset.features.append-bottom-default
+          %h5.prepend-top-0
+            Project avatar
           .form-group
-              .col-sm-offset-2.col-sm-10
             - if @project.avatar?
               = project_icon("#{@project.namespace.to_param}/#{@project.to_param}", alt: '', class: 'avatar project-avatar s160')
             %p.light
               - if @project.avatar_in_git
                 Project avatar in repository: #{ @project.avatar_in_git }
-                %p.light
-                  - if @project.avatar?
-                    You can change your project avatar here
-                  - else
-                    You can upload a project avatar here
-                %a.choose-btn.btn.btn-sm.js-choose-project-avatar-button
-                  %i.icon-paper-clip
-                  %span Choose File ...
-                 
-                %span.file_name.js-avatar-filename File name...
+            %a.choose-btn.btn.js-choose-project-avatar-button
+              Browse file...
+            %span.file_name.prepend-left-default.js-avatar-filename No file chosen
             = f.file_field :avatar, class: "js-project-avatar-input hidden"
-                .light The maximum file size allowed is 200KB.
+            .help-block The maximum file size allowed is 200KB.
             - if @project.avatar?
               %hr
               = link_to 'Remove avatar', namespace_project_avatar_path(@project.namespace, @project), data: { confirm: "Project avatar will be removed. Are you sure?"}, method: :delete, class: "btn btn-remove btn-sm remove-avatar"
-
-
-          .form-actions
         = f.submit 'Save changes', class: "btn btn-save"
-
-
-
-    .danger-settings
-      .panel.panel-default
-        .panel-heading Housekeeping
-        .errors-holder
-        .panel-body
+  .row.prepend-top-default
+  %hr
+  .row.prepend-top-default
+    .col-lg-3
+      %h4.prepend-top-0
+        Housekeeping
+      %p.append-bottom-0
         %p
           Runs a number of housekeeping tasks within the current repository,
           such as compressing file revisions and removing unreachable objects.
-            %br
-
-          .form-actions
+    .col-lg-9
       = link_to 'Housekeeping', housekeeping_namespace_project_path(@project.namespace, @project),
-                method: :post, class: "btn btn-default"
-
+          method: :post, class: "btn btn-save"
+  %hr
   - if can? current_user, :archive_project, @project
+    .row.prepend-top-default
+      .col-lg-3
+        %h4.warning-title.prepend-top-0
           - if @project.archived?
-          .panel.panel-success
-            .panel-heading
             Unarchive project
-            .panel-body
+          - else
+            Archive project
+        %p.append-bottom-0
+          - if @project.archived?
+            Unarchiving the project will mark its repository as active. The project can be committed to.
+          - else
+            Archiving the project will mark its repository as read-only. It is hidden from the dashboard and doesn't show up in searches.
+      .col-lg-9
+        - if @project.archived?
           %p
-                Unarchiving the project will mark its repository as active.
-                %br
-                The project can be committed to.
-                %br
             %strong Once active this project shows up in the search and on the dashboard.
-
-              .form-actions
           = link_to 'Unarchive project', unarchive_namespace_project_path(@project.namespace, @project),
               data: { confirm: "Are you sure that you want to unarchive this project?\nWhen this project is unarchived it is active and can be committed to again." },
               method: :post, class: "btn btn-success"
         - else
-          .panel.panel-warning
-            .panel-heading
-              Archive project
-            .panel-body
           %p
-                Archiving the project will mark its repository as read-only.
-                %br
-                It is hidden from the dashboard and doesn't show up in searches.
-                %br
             %strong Archived projects cannot be committed to!
-
-              .form-actions
           = link_to 'Archive project', archive_namespace_project_path(@project.namespace, @project),
               data: { confirm: "Are you sure that you want to archive this project?\nAn archived project cannot be committed to." },
               method: :post, class: "btn btn-warning"
-      - else
-        .nothing-here-block Only the project owner can archive a project
-
-      .panel.panel-default.panel.panel-warning
-        .panel-heading Rename repository
-        .errors-holder
-        .panel-body
-          = form_for([@project.namespace.becomes(Namespace), @project], html: { class: 'form-horizontal' }) do |f|
+  %hr
+  .row.prepend-top-default
+    .col-lg-3
+      %h4.prepend-top-0.warning-title
+        Rename repository
+    .col-lg-9
+      = form_for([@project.namespace.becomes(Namespace), @project]) do |f|
         .form-group.project_name_holder
-              = f.label :name, class: 'control-label' do
+          = f.label :name, class: 'label-light' do
             Project name
-              .col-sm-9
           .form-group
             = f.text_field :name, class: "form-control"
         .form-group
-              = f.label :path, class: 'control-label' do
+          = f.label :path, class: 'label-light' do
             %span Path
-              .col-sm-9
           .form-group
             .input-group
               .input-group-addon
@@ -201,19 +167,18 @@
           %ul
             %li Be careful. Renaming a project's repository can have unintended side effects.
             %li You will need to update your local repositories to point to the new location.
-            .form-actions
         = f.submit 'Rename project', class: "btn btn-warning"
-
   - if can?(current_user, :change_namespace, @project)
-        .panel.panel-default.panel.panel-danger
-          .panel-heading Transfer project
-          .errors-holder
-          .panel-body
-            = form_for([@project.namespace.becomes(Namespace), @project], url: transfer_namespace_project_path(@project.namespace, @project), method: :put, remote: true, html: { class: 'transfer-project form-horizontal' }) do |f|
+    %hr
+    .row.prepend-top-default
+      .col-lg-3
+        %h4.prepend-top-0.danger-title
+          Transfer project
+      .col-lg-9
+        = form_for([@project.namespace.becomes(Namespace), @project], url: transfer_namespace_project_path(@project.namespace, @project), method: :put, remote: true) do |f|
           .form-group
-                = label_tag :new_namespace_id, nil, class: 'control-label' do
+            = label_tag :new_namespace_id, nil, class: 'label-light' do
               %span Namespace
-                .col-sm-9
             .form-group
               = select_tag :new_namespace_id, namespaces_options(@project.namespace_id), { prompt: 'Choose a project namespace', class: 'select2' }
             %ul
@@ -221,41 +186,36 @@
               %li You can only transfer the project to namespaces you manage.
               %li You will need to update your local repositories to point to the new location.
               %li Project visibility level will be changed to match namespace rules when transfering to a group.
-              .form-actions
           = f.submit 'Transfer project', class: "btn btn-remove js-confirm-danger", data: { "confirm-danger-message" => transfer_project_message(@project) }
-      - else
-        .nothing-here-block Only the project owner can transfer a project
-
-      - if @project.forked?
-        - if can?(current_user, :remove_fork_project, @project)
-          = form_for([@project.namespace.becomes(Namespace), @project], url: remove_fork_namespace_project_path(@project.namespace, @project), method: :delete, remote: true, html: { class: 'transfer-project form-horizontal' }) do |f|
-            .panel.panel-default.panel.panel-danger
-              .panel-heading Remove fork relationship
-              .panel-body
+  - if @project.forked? && can?(current_user, :remove_fork_project, @project)
+    %hr
+    .row.prepend-top-default.append-bottom-default
+      .col-lg-3
+        %h4.prepend-top-0.danger-title
+          Remove fork relationship
+        %p.append-bottom-0
           %p
             This will remove the fork relationship to source project
-                  #{link_to @project.forked_from_project.name_with_namespace, project_path(@project.forked_from_project)}.
-                  %br
+            = succeed "." do
+              = link_to @project.forked_from_project.name_with_namespace, project_path(@project.forked_from_project)
+      .col-lg-9
+        = form_for([@project.namespace.becomes(Namespace), @project], url: remove_fork_namespace_project_path(@project.namespace, @project), method: :delete, remote: true, html: { class: 'transfer-project' }) do |f|
+          %p
             %strong Once removed, the fork relationship cannot be restored and you will no longer be able to send merge requests to the source.
-                .form-actions
           = button_to 'Remove fork relationship', '#', class: "btn btn-remove js-confirm-danger", data: { "confirm-danger-message" => remove_fork_project_message(@project) }
-        - else
-          .nothing-here-block Only the project owner can remove the fork relationship.
-
   - if can?(current_user, :remove_project, @project)
-        .panel.panel-default.panel.panel-danger
-          .panel-heading Remove project
-          .panel-body
-            = form_tag(namespace_project_path(@project.namespace, @project), method: :delete, class: 'form-horizontal') do
-              %p
+    %hr
+    .row.prepend-top-default.append-bottom-default
+      .col-lg-3
+        %h4.prepend-top-0.danger-title
+          Remove project
+        %p.append-bottom-0
           Removing the project will delete its repository and all related resources including issues, merge requests etc.
-                %br
+      .col-lg-9
+        = form_tag(namespace_project_path(@project.namespace, @project), method: :delete) do
+          %p
             %strong Removed projects cannot be restored!
-              .form-actions
           = button_to 'Remove project', '#', class: "btn btn-remove js-confirm-danger", data: { "confirm-danger-message" => remove_project_message(@project) }
-      - else
-        .nothing-here-block Only the project owner can remove a project.
-
 
 .save-project-loader.hide
   .center
@@ -264,5 +224,4 @@
       Saving project.
     %p Please wait a moment, this page will automatically refresh when ready.
 
-
 = render 'shared/confirm_modal', phrase: @project.path