Resolve "Simplified Repository Settings page"

9 files changed, 154 insertions, 22 deletions

diff --git a/app/assets/javascripts/deploy_keys/components/app.vue b/app/assets/javascripts/deploy_keys/components/app.vue
index 5f6eed0c67c..285124e9515 100644
--- a/app/assets/javascripts/deploy_keys/components/app.vue
+++ b/app/assets/javascripts/deploy_keys/components/app.vue
@@ -75,7 +75,7 @@
 </script>
 
 <template>
-  <div class="col-lg-9 col-lg-offset-3 append-bottom-default deploy-keys">
+  <div class="append-bottom-default deploy-keys">
     <loading-icon
       v-if="isLoading && !hasKeys"
       size="2"
diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index aa0871eb771..c3e096561e4 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -55,6 +55,7 @@ import UsersSelect from './users_select';
 import RefSelectDropdown from './ref_select_dropdown';
 import GfmAutoComplete from './gfm_auto_complete';
 import ShortcutsBlob from './shortcuts_blob';
+import initSettingsPanels from './settings_panels';
 
 (function() {
   var Dispatcher;
@@ -381,6 +382,8 @@ import ShortcutsBlob from './shortcuts_blob';
           // Initialize Protected Tag Settings
           new ProtectedTagCreate();
           new ProtectedTagEditList();
+          // Initialize expandable settings panels
+          initSettingsPanels();
           break;
         case 'projects:ci_cd:show':
           new gl.ProjectVariables();
diff --git a/app/assets/javascripts/settings_panels.js b/app/assets/javascripts/settings_panels.js
new file mode 100644
index 00000000000..e67f449e1a2
--- /dev/null
+++ b/app/assets/javascripts/settings_panels.js
@@ -0,0 +1,27 @@
+function expandSection($section) {
+  $section.find('.js-settings-toggle').text('Close');
+  $section.find('.settings-content').addClass('expanded').off('scroll').scrollTop(0);
+}
+
+function closeSection($section) {
+  $section.find('.js-settings-toggle').text('Expand');
+  $section.find('.settings-content').removeClass('expanded').on('scroll', () => expandSection($section));
+}
+
+function toggleSection($section) {
+  const $content = $section.find('.settings-content');
+  $content.removeClass('no-animate');
+  if ($content.hasClass('expanded')) {
+    closeSection($section);
+  } else {
+    expandSection($section);
+  }
+}
+
+export default function initSettingsPanels() {
+  $('.settings').each((i, elm) => {
+    const $section = $(elm);
+    $section.on('click', '.js-settings-toggle', () => toggleSection($section));
+    $section.find('.settings-content:not(.expanded)').on('scroll', () => expandSection($section));
+  });
+}
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index 3889deee21a..6c2686a03d9 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -1,3 +1,90 @@
+@keyframes expandMaxHeight {
+  0% {
+    max-height: 0;
+  }
+
+  99% {
+    max-height: 100vh;
+  }
+
+  100% {
+    max-height: none;
+  }
+}
+
+@keyframes collapseMaxHeight {
+  0% {
+    max-height: 100vh;
+  }
+
+  100% {
+    max-height: 0;
+  }
+}
+
+.settings {
+  overflow: hidden;
+  border-bottom: 1px solid $gray-darker;
+
+  &:first-of-type {
+    margin-top: 10px;
+  }
+}
+
+.settings-header {
+  position: relative;
+  padding: 20px 110px 10px 0;
+
+  h4 {
+    margin-top: 0;
+  }
+
+  button {
+    position: absolute;
+    top: 20px;
+    right: 6px;
+    min-width: 80px;
+  }
+}
+
+.settings-content {
+  max-height: 1px;
+  overflow-y: scroll;
+  margin-right: -20px;
+  padding-right: 130px;
+  animation: collapseMaxHeight 300ms ease-out;
+
+  &.expanded {
+    max-height: none;
+    overflow-y: hidden;
+    animation: expandMaxHeight 300ms ease-in;
+  }
+
+  &.no-animate {
+    animation: none;
+  }
+
+  @media(max-width: $screen-sm-max) {
+    padding-right: 20px;
+  }
+
+  &::before {
+    content: ' ';
+    display: block;
+    height: 1px;
+    overflow: hidden;
+    margin-bottom: 4px;
+  }
+
+  &::after {
+    content: ' ';
+    display: block;
+    height: 1px;
+    overflow: hidden;
+    margin-top: 20px;
+  }
+}
+
 .settings-list-icon {
   color: $gl-text-color-secondary;
   font-size: $settings-icon-size;
diff --git a/app/views/projects/deploy_keys/_form.html.haml b/app/views/projects/deploy_keys/_form.html.haml
index 1421da72418..edaa3a1119e 100644
--- a/app/views/projects/deploy_keys/_form.html.haml
+++ b/app/views/projects/deploy_keys/_form.html.haml
@@ -2,7 +2,7 @@
   = form_errors(@deploy_keys.new_key)
   .form-group
     = f.label :title, class: "label-light"
-    = f.text_field :title, class: 'form-control', autofocus: true, required: true
+    = f.text_field :title, class: 'form-control', required: true
   .form-group
     = f.label :key, class: "label-light"
     = f.text_area :key, class: "form-control", rows: 5, required: true
diff --git a/app/views/projects/deploy_keys/_index.html.haml b/app/views/projects/deploy_keys/_index.html.haml
index 74756b58439..6e038ffd9c0 100644
--- a/app/views/projects/deploy_keys/_index.html.haml
+++ b/app/views/projects/deploy_keys/_index.html.haml
@@ -1,13 +1,15 @@
-.row.prepend-top-default
-  .col-lg-3.profile-settings-sidebar
-    %h4.prepend-top-0
+- expanded = Rails.env.test?
+%section.settings
+  .settings-header
+    %h4
       Deploy Keys
+    %button.btn.js-settings-toggle
+      = expanded ? 'Close' : 'Expand'
     %p
       Deploy keys allow read-only or read-write (if enabled) access to your repository. Deploy keys can be used for CI, staging or production servers. You can create a deploy key or add an existing one.
-  .col-lg-9
+  .settings-content.no-animate{ class: ('expanded' if expanded) }
     %h5.prepend-top-0
       Create a new deploy key for this project
     = render @deploy_keys.form_partial_path
-  .col-lg-9.col-lg-offset-3
     %hr
-  #js-deploy-keys{ data: { endpoint: namespace_project_deploy_keys_path } }
+    #js-deploy-keys{ data: { endpoint: namespace_project_deploy_keys_path } }
diff --git a/app/views/projects/protected_branches/_index.html.haml b/app/views/projects/protected_branches/_index.html.haml
index 2d8c519c025..9af67649741 100644
--- a/app/views/projects/protected_branches/_index.html.haml
+++ b/app/views/projects/protected_branches/_index.html.haml
@@ -1,20 +1,25 @@
+- expanded = Rails.env.test?
 - content_for :page_specific_javascripts do
   = page_specific_javascript_bundle_tag('protected_branches')
 
-.row.prepend-top-default.append-bottom-default
-  .col-lg-3
-    %h4.prepend-top-0
+%section.settings
+  .settings-header
+    %h4
       Protected Branches
-    %p Keep stable branches secure and force developers to use merge requests.
-    %p.prepend-top-20
+    %button.btn.js-settings-toggle
+      = expanded ? 'Close' : 'Expand'
+    %p
+      Keep stable branches secure and force developers to use merge requests.
+  .settings-content.no-animate{ class: ('expanded' if expanded) }
+    %p
       By default, protected branches are designed to:
       %ul
         %li prevent their creation, if not already created, from everybody except Masters
         %li prevent pushes from everybody except Masters
         %li prevent <strong>anyone</strong> from force pushing to the branch
         %li prevent <strong>anyone</strong> from deleting the branch
-      %p.append-bottom-0 Read more about #{link_to "protected branches", help_page_path("user/project/protected_branches"), class: "underlined-link"} and #{link_to "project permissions", help_page_path("user/permissions"), class: "underlined-link"}.
-  .col-lg-9
+      %p Read more about #{link_to "protected branches", help_page_path("user/project/protected_branches"), class: "underlined-link"} and #{link_to "project permissions", help_page_path("user/permissions"), class: "underlined-link"}.
+
     - if can? current_user, :admin_project, @project
       = render 'projects/protected_branches/create_protected_branch'
 
diff --git a/app/views/projects/protected_tags/_index.html.haml b/app/views/projects/protected_tags/_index.html.haml
index 663cbd7cd64..976e1d7e93f 100644
--- a/app/views/projects/protected_tags/_index.html.haml
+++ b/app/views/projects/protected_tags/_index.html.haml
@@ -1,18 +1,25 @@
+- expanded = Rails.env.test?
 - content_for :page_specific_javascripts do
   = page_specific_javascript_bundle_tag('protected_tags')
 
-.row.prepend-top-default.append-bottom-default
-  .col-lg-3
-    %h4.prepend-top-0
+%section.settings
+  .settings-header
+    %h4
       Protected Tags
-    %p.prepend-top-20
+    %button.btn.js-settings-toggle
+      = expanded ? 'Close' : 'Expand'
+    %p
+      Limit access to creating and updating tags.
+  .settings-content.no-animate{ class: ('expanded' if expanded) }
+    %p
       By default, protected tags are designed to:
       %ul
         %li Prevent tag creation by everybody except Masters
         %li Prevent <strong>anyone</strong> from updating the tag
         %li Prevent <strong>anyone</strong> from deleting the tag
-      %p.append-bottom-0 Read more about #{link_to "protected tags", help_page_path("user/project/protected_tags"), class: "underlined-link"}.
-  .col-lg-9
+
+    %p Read more about #{link_to "protected tags", help_page_path("user/project/protected_tags"), class: "underlined-link"}.
+
     - if can? current_user, :admin_project, @project
       = render 'projects/protected_tags/create_protected_tag'
 
diff --git a/app/views/projects/settings/repository/show.html.haml b/app/views/projects/settings/repository/show.html.haml
index 4e59033c4a3..40ea02abce9 100644
--- a/app/views/projects/settings/repository/show.html.haml
+++ b/app/views/projects/settings/repository/show.html.haml
@@ -1,10 +1,11 @@
 - page_title "Repository"
+- @content_class = "limit-container-width" unless fluid_layout
 = render "projects/settings/head"
 
 - content_for :page_specific_javascripts do
   = page_specific_javascript_bundle_tag('common_vue')
   = page_specific_javascript_bundle_tag('deploy_keys')
 
-= render @deploy_keys
 = render "projects/protected_branches/index"
 = render "projects/protected_tags/index"
+= render @deploy_keys