Prettify performance_bar notes and profile modules

3 files changed, 96 insertions, 83 deletions

diff --git a/app/assets/javascripts/profile/account/components/delete_account_modal.vue b/app/assets/javascripts/profile/account/components/delete_account_modal.vue
index 974629fa2af..99b57f4c9d5 100644
--- a/app/assets/javascripts/profile/account/components/delete_account_modal.vue
+++ b/app/assets/javascripts/profile/account/components/delete_account_modal.vue
@@ -1,78 +1,78 @@
 <script>
-  import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
-  import { __, s__, sprintf } from '~/locale';
-  import csrf from '~/lib/utils/csrf';
+import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
+import { __, s__, sprintf } from '~/locale';
+import csrf from '~/lib/utils/csrf';
 
-  export default {
-    components: {
-      DeprecatedModal,
+export default {
+  components: {
+    DeprecatedModal,
+  },
+  props: {
+    actionUrl: {
+      type: String,
+      required: true,
     },
-    props: {
-      actionUrl: {
-        type: String,
-        required: true,
-      },
-      confirmWithPassword: {
-        type: Boolean,
-        required: true,
-      },
-      username: {
-        type: String,
-        required: true,
-      },
+    confirmWithPassword: {
+      type: Boolean,
+      required: true,
     },
-    data() {
-      return {
-        enteredPassword: '',
-        enteredUsername: '',
-      };
+    username: {
+      type: String,
+      required: true,
     },
-    computed: {
-      csrfToken() {
-        return csrf.token;
-      },
-      inputLabel() {
-        let confirmationValue;
-        if (this.confirmWithPassword) {
-          confirmationValue = __('password');
-        } else {
-          confirmationValue = __('username');
-        }
+  },
+  data() {
+    return {
+      enteredPassword: '',
+      enteredUsername: '',
+    };
+  },
+  computed: {
+    csrfToken() {
+      return csrf.token;
+    },
+    inputLabel() {
+      let confirmationValue;
+      if (this.confirmWithPassword) {
+        confirmationValue = __('password');
+      } else {
+        confirmationValue = __('username');
+      }
 
-        confirmationValue = `<code>${confirmationValue}</code>`;
+      confirmationValue = `<code>${confirmationValue}</code>`;
 
-        return sprintf(
-          s__('Profiles|Type your %{confirmationValue} to confirm:'),
-          { confirmationValue },
-          false,
-        );
-      },
-      text() {
-        return sprintf(
-          s__(`Profiles|
+      return sprintf(
+        s__('Profiles|Type your %{confirmationValue} to confirm:'),
+        { confirmationValue },
+        false,
+      );
+    },
+    text() {
+      return sprintf(
+        s__(`Profiles|
 You are about to permanently delete %{yourAccount}, and all of the issues, merge requests, and groups linked to your account.
 Once you confirm %{deleteAccount}, it cannot be undone or recovered.`),
-          {
-            yourAccount: `<strong>${s__('Profiles|your account')}</strong>`,
-            deleteAccount: `<strong>${s__('Profiles|Delete Account')}</strong>`,
-          },
-          false,
-        );
-      },
+        {
+          yourAccount: `<strong>${s__('Profiles|your account')}</strong>`,
+          deleteAccount: `<strong>${s__('Profiles|Delete Account')}</strong>`,
+        },
+        false,
+      );
     },
-    methods: {
-      canSubmit() {
-        if (this.confirmWithPassword) {
-          return this.enteredPassword !== '';
-        }
+  },
+  methods: {
+    canSubmit() {
+      if (this.confirmWithPassword) {
+        return this.enteredPassword !== '';
+      }
 
-        return this.enteredUsername === this.username;
-      },
-      onSubmit() {
-        this.$refs.form.submit();
-      },
+      return this.enteredUsername === this.username;
+    },
+    onSubmit() {
+      this.$refs.form.submit();
     },
-  };
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/profile/gl_crop.js b/app/assets/javascripts/profile/gl_crop.js
index af134881f31..befe91c332f 100644
--- a/app/assets/javascripts/profile/gl_crop.js
+++ b/app/assets/javascripts/profile/gl_crop.js
@@ -4,20 +4,35 @@ import $ from 'jquery';
 import 'cropper';
 import _ from 'underscore';
 
-((global) => {
+(global => {
   // Matches everything but the file name
   const FILENAMEREGEX = /^.*[\\\/]/;
 
   class GitLabCrop {
-    constructor(input, { filename, previewImage, modalCrop, pickImageEl, uploadImageBtn, modalCropImg,
-        exportWidth = 200, exportHeight = 200, cropBoxWidth = 200, cropBoxHeight = 200 } = {}) {
+    constructor(
+      input,
+      {
+        filename,
+        previewImage,
+        modalCrop,
+        pickImageEl,
+        uploadImageBtn,
+        modalCropImg,
+        exportWidth = 200,
+        exportHeight = 200,
+        cropBoxWidth = 200,
+        cropBoxHeight = 200,
+      } = {},
+    ) {
       this.onUploadImageBtnClick = this.onUploadImageBtnClick.bind(this);
       this.onModalHide = this.onModalHide.bind(this);
       this.onModalShow = this.onModalShow.bind(this);
       this.onPickImageClick = this.onPickImageClick.bind(this);
       this.fileInput = $(input);
       this.modalCropImg = _.isString(this.modalCropImg) ? $(this.modalCropImg) : this.modalCropImg;
-      this.fileInput.attr('name', `${this.fileInput.attr('name')}-trigger`).attr('id', `${this.fileInput.attr('id')}-trigger`);
+      this.fileInput
+        .attr('name', `${this.fileInput.attr('name')}-trigger`)
+        .attr('id', `${this.fileInput.attr('id')}-trigger`);
       this.exportWidth = exportWidth;
       this.exportHeight = exportHeight;
       this.cropBoxWidth = cropBoxWidth;
@@ -59,7 +74,7 @@ import _ from 'underscore';
         btn = this;
         return _this.onActionBtnClick(btn);
       });
-      return this.croppedImageBlob = null;
+      return (this.croppedImageBlob = null);
     }
 
     onPickImageClick() {
@@ -94,9 +109,9 @@ import _ from 'underscore';
             width: cropBoxWidth,
             height: cropBoxHeight,
             left: (container.width - cropBoxWidth) / 2,
-            top: (container.height - cropBoxHeight) / 2
+            top: (container.height - cropBoxHeight) / 2,
           });
-        }
+        },
       });
     }
 
@@ -116,7 +131,7 @@ import _ from 'underscore';
       var data, result;
       data = $(btn).data();
       if (this.modalCropImg.data('cropper') && data.method) {
-        return result = this.modalCropImg.cropper(data.method, data.option);
+        return (result = this.modalCropImg.cropper(data.method, data.option));
       }
     }
 
@@ -127,7 +142,7 @@ import _ from 'underscore';
     readFile(input) {
       var _this, reader;
       _this = this;
-      reader = new FileReader;
+      reader = new FileReader();
       reader.onload = () => {
         _this.modalCropImg.attr('src', reader.result);
         return _this.modalCrop.modal('show');
@@ -145,7 +160,7 @@ import _ from 'underscore';
         array.push(binary.charCodeAt(i));
       }
       return new Blob([new Uint8Array(array)], {
-        type: 'image/png'
+        type: 'image/png',
       });
     }
 
@@ -157,11 +172,13 @@ import _ from 'underscore';
     }
 
     setBlob() {
-      this.dataURL = this.modalCropImg.cropper('getCroppedCanvas', {
-        width: 200,
-        height: 200
-      }).toDataURL('image/png');
-      return this.croppedImageBlob = this.dataURLtoBlob(this.dataURL);
+      this.dataURL = this.modalCropImg
+        .cropper('getCroppedCanvas', {
+          width: 200,
+          height: 200,
+        })
+        .toDataURL('image/png');
+      return (this.croppedImageBlob = this.dataURLtoBlob(this.dataURL));
     }
 
     getBlob() {
diff --git a/app/assets/javascripts/profile/profile.js b/app/assets/javascripts/profile/profile.js
index e49c67ffb5c..8704a655b28 100644
--- a/app/assets/javascripts/profile/profile.js
+++ b/app/assets/javascripts/profile/profile.js
@@ -26,11 +26,7 @@ export default class Profile {
   }
 
   bindEvents() {
-    $('.js-preferences-form').on(
-      'change.preference',
-      'input[type=radio]',
-      this.submitForm,
-    );
+    $('.js-preferences-form').on('change.preference', 'input[type=radio]', this.submitForm);
     $('#user_notification_email').on('change', this.submitForm);
     $('#user_notified_of_own_activity').on('change', this.submitForm);
     this.form.on('submit', this.onSubmitForm);