Added multi editor setting on the profile preferences page

8 files changed, 62 insertions, 1 deletions

diff --git a/app/assets/images/multi-editor-off.png b/app/assets/images/multi-editor-off.png
new file mode 100644
index 00000000000..82a6127f853
--- /dev/null
+++ b/app/assets/images/multi-editor-off.png
diff --git a/app/assets/images/multi-editor-on.png b/app/assets/images/multi-editor-on.png
new file mode 100644
index 00000000000..2bcd29abf13
--- /dev/null
+++ b/app/assets/images/multi-editor-on.png
diff --git a/app/assets/javascripts/profile/profile.js b/app/assets/javascripts/profile/profile.js
index 0dc02f012e4..ba4ac850346 100644
--- a/app/assets/javascripts/profile/profile.js
+++ b/app/assets/javascripts/profile/profile.js
@@ -1,4 +1,5 @@
 /* eslint-disable comma-dangle, no-unused-vars, class-methods-use-this, quotes, consistent-return, func-names, prefer-arrow-callback, space-before-function-paren, max-len */
+import Cookies from 'js-cookie';
 import Flash from '../flash';
 import { getPagePath } from '../lib/utils/common_utils';
 
@@ -7,6 +8,8 @@ import { getPagePath } from '../lib/utils/common_utils';
     constructor({ form } = {}) {
       this.onSubmitForm = this.onSubmitForm.bind(this);
       this.form = form || $('.edit-user');
+      this.newRepoActivated = Cookies.get('new_repo');
+      this.setRepoRadio();
       this.bindEvents();
       this.initAvatarGlCrop();
     }
@@ -25,6 +28,7 @@ import { getPagePath } from '../lib/utils/common_utils';
 
     bindEvents() {
       $('.js-preferences-form').on('change.preference', 'input[type=radio]', this.submitForm);
+      $('input[name="user[multi_file]"]').on('change', this.setNewRepoCookie);
       $('#user_notification_email').on('change', this.submitForm);
       $('#user_notified_of_own_activity').on('change', this.submitForm);
       $('.update-username').on('ajax:before', this.beforeUpdateUsername);
@@ -82,6 +86,23 @@ import { getPagePath } from '../lib/utils/common_utils';
         }
       });
     }
+
+    setNewRepoCookie() {
+      if (this.value === 'off') {
+        Cookies.remove('new_repo');
+      } else {
+        Cookies.set('new_repo', true, { expires_in: 365 });
+      }
+    }
+
+    setRepoRadio() {
+      const multiEditRadios = $('input[name="user[multi_file]"]');
+      if (this.newRepoActivated || this.newRepoActivated === 'true') {
+        multiEditRadios.filter('[value=on]').prop('checked', true);
+      } else {
+        multiEditRadios.filter('[value=off]').prop('checked', true);
+      }
+    }
   }
 
   $(function() {
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 29714e348a0..ad160f37641 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -516,7 +516,7 @@
 .header-user {
   .dropdown-menu-nav {
     width: auto;
-    min-width: 140px;
+    min-width: 160px;
     margin-top: 4px;
     color: $gl-text-color;
     left: auto;
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 1d6c7a5c472..f7853909f56 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -727,3 +727,8 @@ Popup
 $popup-triangle-size: 15px;
 $popup-triangle-border-size: 1px;
 $popup-box-shadow-color: rgba(90, 90, 90, 0.05);
+
+/*
+Multi file editor
+*/
+$border-color-settings: #e1e1e1;
diff --git a/app/assets/stylesheets/pages/profiles/preferences.scss b/app/assets/stylesheets/pages/profiles/preferences.scss
index c197494b152..68d40b56133 100644
--- a/app/assets/stylesheets/pages/profiles/preferences.scss
+++ b/app/assets/stylesheets/pages/profiles/preferences.scss
@@ -20,6 +20,22 @@
   }
 }
 
+.multi-file-editor-options {
+  label {
+    margin-right: 20px;
+    text-align: center;
+  }
+
+  .preview {
+    font-size: 0;
+
+    img {
+      border: 1px solid $border-color-settings;
+      border-radius: 4px;
+    }
+  }
+}
+
 .application-theme {
   label {
     margin-right: 20px;
diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml
index 99e7f3b568d..39eb71c2bac 100644
--- a/app/views/layouts/header/_default.html.haml
+++ b/app/views/layouts/header/_default.html.haml
@@ -56,6 +56,8 @@
                     = link_to "Profile", current_user, class: 'profile-link', data: { user: current_user.username }
                   %li
                     = link_to "Settings", profile_path
+                  %li
+                    = link_to "Turn on multi edit", profile_preferences_path
                   - if current_user
                     %li
                       = link_to "Help", help_path
diff --git a/app/views/profiles/preferences/show.html.haml b/app/views/profiles/preferences/show.html.haml
index 66d1d1e8d44..65328791ce5 100644
--- a/app/views/profiles/preferences/show.html.haml
+++ b/app/views/profiles/preferences/show.html.haml
@@ -3,6 +3,23 @@
 = render 'profiles/head'
 
 = form_for @user, url: profile_preferences_path, remote: true, method: :put, html: { class: 'row prepend-top-default js-preferences-form' } do |f|
+  .col-lg-4
+    %h4.prepend-top-0
+      GitLab multi file editor
+    %p Unlock an additional editing experience which makes it possible to edit and commit multiple files
+  .col-lg-8.multi-file-editor-options
+    = label_tag do
+      .preview.append-bottom-10= image_tag "multi-editor-off.png"
+      = f.radio_button :multi_file, "off", checked: true
+      Off
+    = label_tag do
+      .preview.append-bottom-10= image_tag "multi-editor-on.png"
+      = f.radio_button :multi_file, "on", checked: false
+      On
+
+  .col-sm-12
+    %hr
+
   .col-lg-4.application-theme
     %h4.prepend-top-0
       GitLab navigation theme