Resolve "Simplified Repository Settings page"

3 files changed, 31 insertions, 1 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));
+  });
+}