34060 Simply general project settings to use expanded panels

app/assets/javascripts/dispatcher.js

@@ -329,6 +329,8 @@ import GpgBadges from './gpg_badges';
           break;
         case 'projects:edit':
           setupProjectEdit();
+          // Initialize expandable settings panels
+          initSettingsPanels();
           break;
         case 'projects:pipelines:builds':
         case 'projects:pipelines:failures':

app/assets/stylesheets/pages/projects.scss

@@ -36,7 +36,6 @@
   }
 
   select {
-    background: transparent;
     transition: background 2s ease-out;
 
     &.highlight-changes {

app/assets/stylesheets/pages/settings.scss

@@ -54,8 +54,7 @@
 .settings-content {
   max-height: 1px;
   overflow-y: scroll;
-  margin-right: -20px;
-  padding-right: 130px;
+  padding-right: 110px;
   animation: collapseMaxHeight 300ms ease-out;
 
   &.expanded {
@@ -87,6 +86,18 @@
     overflow: hidden;
     margin-top: 20px;
   }
+
+  .sub-section {
+    margin-bottom: 32px;
+    padding: 16px;
+    border: 1px solid $border-color;
+    background-color: $gray-light;
+  }
+
+  .bs-callout,
+  .checkbox:first-child {
+    margin-top: 0;
+  }
 }
 
 .settings-list-icon {

app/views/projects/_merge_request_settings.html.haml

 - form = local_assigns.fetch(:form)
 
-%fieldset.features.merge-requests-feature.append-bottom-default
-  %hr
+= render 'projects/merge_request_merge_settings', form: form
\ No newline at end of file
-  %h5.prepend-top-0
-    Merge Requests
-
-  = render 'projects/merge_request_merge_settings', form: form

app/views/projects/edit.html.haml

+- page_title "General"
 - @content_class = "limit-container-width" unless fluid_layout
+- expanded = Rails.env.test?
 
 = render "projects/settings/head"
-.project-edit-container
-  .row.prepend-top-default
-    .col-lg-4.profile-settings-sidebar
-      %h4.prepend-top-0
-        Project settings
-    .col-lg-8
+
+%section.settings.general-settings
+  .settings-header
+    %h4
+      General project settings
+    %button.btn.js-settings-toggle
+      = expanded ? 'Collapse' : 'Expand'
+    %p
+      Update your project name, description, avatar, and other general settings.
+  .settings-content.no-animate{ class: ('expanded' if expanded) }
     .project-edit-errors
       = form_for [@project.namespace.becomes(Namespace), @project], remote: true, html: { multipart: true, class: "edit-project" }, authenticity_token: true do |f|
         %fieldset
@@ -35,11 +41,37 @@
           = f.label :tag_list, "Tags", class: 'label-light'
           = f.text_field :tag_list, value: @project.tag_list.sort.join(', '), maxlength: 2000, class: "form-control"
           %p.help-block Separate tags with commas.
-        %hr
-        %fieldset
+        %fieldset.features
           %h5.prepend-top-0
-            Sharing & Permissions
-          .form_group.prepend-top-20.sharing-and-permissions
+            Project avatar
+          .form-group
+            - if @project.avatar?
+              .avatar-container.s160
+                = project_icon(@project.full_path, alt: '', class: 'avatar project-avatar s160')
+            %p.light
+              - if @project.avatar_in_git
+                Project avatar in repository: #{ @project.avatar_in_git }
+            %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"
+            .help-block The maximum file size allowed is 200KB.
+            - if @project.avatar?
+              %hr
+              = link_to 'Remove avatar', project_avatar_path(@project), data: { confirm: "Project avatar will be removed. Are you sure?"}, method: :delete, class: "btn btn-remove btn-sm remove-avatar"
+        = f.submit 'Save changes', class: "btn btn-save"
+
+%section.settings.sharing-permissions
+  .settings-header
+    %h4
+      Sharing and permissions
+    %button.btn.js-settings-toggle
+      = expanded ? 'Collapse' : 'Expand'
+    %p
+      Enable or disable certain project features and choose access levels.
+  .settings-content.no-animate{ class: ('expaneded' if expanded) }
+    = form_for [@project.namespace.becomes(Namespace), @project], remote: true, html: { multipart: true, class: "sharing-permissions-form" }, authenticity_token: true do |f|
+      .form_group.sharing-and-permissions
         .row.js-visibility-select
           .col-md-8
             .label-light
@@ -94,12 +126,11 @@
       .form-group
         = render 'shared/allow_request_access', form: f
       - if Gitlab.config.lfs.enabled && current_user.admin?
-            .row.js-lfs-enabled
+        .row.js-lfs-enabled.form-group.sharing-and-permissions
           .col-md-8
-                = f.label :lfs_enabled, 'LFS', class: 'label-light'
-                %span.help-block
-                  Git Large File Storage
+            = f.label :lfs_enabled, 'Git Large File Storage', class: 'label-light'
             = link_to icon('question-circle'), help_page_path('workflow/lfs/manage_large_binaries_with_git_lfs')
+            %span.help-block Manages large files such as audio, video and graphics files.
           .col-md-4
             .select-wrapper
               = f.select :lfs_enabled, [%w(Enabled true), %w(Disabled false)], {}, selected: @project.lfs_enabled?, class: 'pull-right form-control project-repo-select select-control', data: { field: 'lfs_enabled' }
@@ -113,65 +144,31 @@
               %br
               %span.descr Enable Container Registry for this project
               = link_to icon('question-circle'), help_page_path('user/project/container_registry'), target: '_blank'
+      = f.submit 'Save changes', class: "btn btn-save"
 
-        = render 'merge_request_settings', form: f
 
-        %hr
-        %fieldset.features.append-bottom-default
-          %h5.prepend-top-0
-            Project avatar
-          .form-group
-            - if @project.avatar?
-              .avatar-container.s160
-                = project_icon(@project.full_path, alt: '', class: 'avatar project-avatar s160')
-            %p.light
-              - if @project.avatar_in_git
-                Project avatar in repository: #{ @project.avatar_in_git }
-            %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"
-            .help-block The maximum file size allowed is 200KB.
-            - if @project.avatar?
-              %hr
-              = link_to 'Remove avatar', project_avatar_path(@project), data: { confirm: "Project avatar will be removed. Are you sure?"}, method: :delete, class: "btn btn-remove btn-sm remove-avatar"
+%section.settings.merge-request-settings{ style: ("display: none;" if @project.project_feature.send(:merge_requests_access_level) == 0) }
+  .settings-header
+    %h4
+      Merge request settings
+    %button.btn.js-settings-toggle
+      = expanded ? 'Collapse' : 'Expand'
+    %p
+      Customize your merge request restrictions.
+  .settings-content.no-animate{ class: ('expanded' if expanded) }
+    = form_for [@project.namespace.becomes(Namespace), @project], remote: true, html: { multipart: true, class: "merge-request-settings" }, authenticity_token: true do |f|
+      = render 'merge_request_settings', form: f
       = f.submit 'Save changes', class: "btn btn-save"
 
-  .row.prepend-top-default
-  %hr
-  .row.prepend-top-default
-    .col-lg-4
-      %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.
-    .col-lg-8
-      = link_to 'Housekeeping', housekeeping_project_path(@project),
-          method: :post, class: "btn btn-default"
-  %hr
-  .row.prepend-top-default
-    .col-lg-4
-      %h4.prepend-top-0
+%section.settings
+  .settings-header
+    %h4
       Export project
-      %p.append-bottom-0
+    %button.btn.js-settings-toggle
+      = expanded ? 'Collapse' : 'Expand'
     %p
       Export this project with all its related data in order to move your project to a new GitLab instance. Once the export is finished, you can import the file from the "New Project" page.
-        %p
-          Once the exported file is ready, you will receive a notification email with a download link.
-
-    .col-lg-8
-
-      - if @project.export_project_path
-        = link_to 'Download export',  download_export_project_path(@project),
-                rel: 'nofollow', download: '', method: :get, class: "btn btn-default"
-        = link_to 'Generate new export',  generate_new_export_project_path(@project),
-                method: :post, class: "btn btn-default"
-      - else
-        = link_to 'Export project', export_project_path(@project),
-                method: :post, class: "btn btn-default"
-
+  .settings-content.no-animate{ class: ('expanded' if expanded) }
     .bs-callout.bs-callout-info
       %p.append-bottom-0
         %p
@@ -189,39 +186,58 @@
           %li Container registry images
           %li CI variables
           %li Any encrypted tokens
+    %p
+      Once the exported file is ready, you will receive a notification email with a download link.
+    - if @project.export_project_path
+      = link_to 'Download export',  download_export_project_path(@project),
+              rel: 'nofollow', download: '', method: :get, class: "btn btn-default"
+      = link_to 'Generate new export',  generate_new_export_project_path(@project),
+              method: :post, class: "btn btn-default"
+    - else
+      = link_to 'Export project', export_project_path(@project),
+              method: :post, class: "btn btn-default"
+
+%section.settings.advanced-settings
+  .settings-header
+    %h4
+      Advanced settings
+    %button.btn.js-settings-toggle
+      = expanded ? 'Collapse' : 'Expand'
+    %p
+      Perform advanced options such as housekeeping, exporting, archiveing, renameing, transfering, or removeing your project.
+  .settings-content.no-animate{ class: ('expanded' if expanded) }
+    .sub-section
+      %h4 Housekeeping
+      %p
+        Runs a number of housekeeping tasks within the current repository, such as compressing file revisions and removing unreachable objects.
+      = link_to 'Housekeeping', housekeeping_project_path(@project),
+          method: :post, class: "btn btn-default"
     - if can? current_user, :archive_project, @project
-    %hr
-    .row.prepend-top-default
-      .col-lg-4
-        %h4.warning-title.prepend-top-0
+      .sub-section
+        %h4.warning-title
           - if @project.archived?
             Unarchive project
           - 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-8
         - if @project.archived?
           %p
+            Unarchiving the project will mark its repository as active. The project can be committed to.
             %strong Once active this project shows up in the search and on the dashboard.
           = link_to 'Unarchive project', unarchive_project_path(@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
           %p
+            Archiving the project will mark its repository as read-only. It is hidden from the dashboard and doesn't show up in searches.
             %strong Archived projects cannot be committed to!
           = link_to 'Archive project', archive_project_path(@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"
-  %hr
-  .row.prepend-top-default
-    .col-lg-4
-      %h4.prepend-top-0.warning-title
+    .sub-section.rename-respository
+      %h4.warning-title
         Rename repository
-    .col-lg-8
+      %p
+        Export this project with all its related data in order to move your project to a new GitLab instance. Once the export is finished, you can import the file from the "New Project" page.
       = render 'projects/errors'
       = form_for([@project.namespace.becomes(Namespace), @project]) do |f|
         .form-group.project_name_holder
@@ -243,15 +259,11 @@
             - if @project.deployment_services.any?
               %li Your deployment services will be broken, you will need to manually fix the services after renaming.
         = f.submit 'Rename project', class: "btn btn-warning"
+
     - if can?(current_user, :change_namespace, @project)
-    %hr
-    .row.prepend-top-default
-      .col-lg-4
-        %h4.prepend-top-0.danger-title
-          Transfer project to new group
-        %p.append-bottom-0
-          Please select the group you want to transfer this project to in the dropdown to the right.
-      .col-lg-8
+      .sub-section
+        %h4.danger-title
+          Transfer project
         = form_for([@project.namespace.becomes(Namespace), @project], url: transfer_project_path(@project), method: :put, remote: true, html: { class: 'js-project-transfer-form' } ) do |f|
           .form-group
             = label_tag :new_namespace_id, nil, class: 'label-light' do
@@ -265,30 +277,23 @@
               %li Project visibility level will be changed to match namespace rules when transfering to a group.
           = f.submit 'Transfer project', class: "btn btn-remove js-confirm-danger", data: { "confirm-danger-message" => transfer_project_message(@project) }
     - if @project.forked? && can?(current_user, :remove_fork_project, @project)
-    %hr
-    .row.prepend-top-default.append-bottom-default
-      .col-lg-4
-        %h4.prepend-top-0.danger-title
+      .sub-section
+        %h4.danger-title
           Remove fork relationship
-        %p.append-bottom-0
         %p
           This will remove the fork relationship to source project
           = succeed "." do
             = link_to @project.forked_from_project.name_with_namespace, project_path(@project.forked_from_project)
-      .col-lg-8
         = form_for([@project.namespace.becomes(Namespace), @project], url: remove_fork_project_path(@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.
           = button_to 'Remove fork relationship', '#', class: "btn btn-remove js-confirm-danger", data: { "confirm-danger-message" => remove_fork_project_message(@project) }
     - if can?(current_user, :remove_project, @project)
-    %hr
-    .row.prepend-top-default.append-bottom-default
-      .col-lg-4
-        %h4.prepend-top-0.danger-title
+      .sub-section
+        %h4.danger-title
           Remove project
-        %p.append-bottom-0
+        %p
           Removing the project will delete its repository and all related resources including issues, merge requests etc.
-      .col-lg-8
         = form_tag(project_path(@project), method: :delete) do
           %p
             %strong Removed projects cannot be restored!