Floating mode for comment form

Allows the comment form to be toggled into a floating mode.
Floating mode allows the comment form to always stay attached to the
bottom of the browser & follow the user as they scroll through the page.

[ci skip]

Closes #38093

4 files changed, 42 insertions, 2 deletions

diff --git a/app/assets/javascripts/notes/components/issue_comment_form.vue b/app/assets/javascripts/notes/components/issue_comment_form.vue
index fa7ac994058..5761273ae54 100644
--- a/app/assets/javascripts/notes/components/issue_comment_form.vue
+++ b/app/assets/javascripts/notes/components/issue_comment_form.vue
@@ -23,6 +23,7 @@
         issueState: this.$store.getters.getIssueData.state,
         isSubmitting: false,
         isSubmitButtonDisabled: true,
+        floatingModeEnabled: false,
       };
     },
     components: {
@@ -219,6 +220,9 @@
           autosize.update(this.$refs.textarea);
         });
       },
+      toggleFloatingMode() {
+        this.floatingModeEnabled = !this.floatingModeEnabled;
+      },
     },
     mounted() {
       // jQuery is needed here because it is a custom event being dispatched with jQuery.
@@ -233,7 +237,7 @@
 </script>
 
 <template>
-  <div>
+  <div :class="{ 'is-floating': floatingModeEnabled }">
     <issue-note-signed-out-widget v-if="!isLoggedIn" />
     <ul
       v-else
@@ -262,6 +266,7 @@
                 :quick-actions-docs-path="quickActionsDocsPath"
                 :add-spacing-classes="false"
                 :is-confidential-issue="isConfidentialIssue"
+                :toggle-floating-mode="toggleFloatingMode"
                 ref="markdownField">
                 <textarea
                   id="note-body"
diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue
index 759d30c9c7c..614875f749b 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/field.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue
@@ -23,6 +23,11 @@
         type: String,
         required: false,
       },
+      toggleFloatingMode: {
+        type: Function,
+        required: false,
+        default: () => {},
+      },
     },
     data() {
       return {
@@ -103,7 +108,9 @@
     ref="gl-form">
     <markdown-header
       :preview-markdown="previewMarkdown"
-      @toggle-markdown="toggleMarkdownPreview" />
+      @toggle-markdown="toggleMarkdownPreview"
+      @toggleFloatingMode="toggleFloatingMode"
+    />
     <div
       class="md-write-holder"
       v-show="!previewMarkdown">
diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue
index 5bf2a90cc3b..5ce2d57c5ef 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue
@@ -25,6 +25,10 @@
 
         this.$emit('toggle-markdown');
       },
+      toggleFloatingMode() {
+        this.$refs.floatingModeBtn.blur();
+        this.$emit('toggleFloatingMode');
+      },
     },
     mounted() {
       $(document).on('markdown-preview:show.vue', this.toggleMarkdownPreview);
@@ -95,6 +99,21 @@
         <div class="toolbar-group">
           <button
             v-tooltip
+            data-container="body"
+            aria-label="Toggle floating mode"
+            title="Toggle floating mode"
+            class="toolbar-btn"
+            type="button"
+            ref="floatingModeBtn"
+            @click="toggleFloatingMode"
+          >
+            <i
+              class="fa fa-window-restore"
+              aria-hidden="true">
+            </i>
+          </button>
+          <button
+            v-tooltip
             aria-label="Go full screen"
             class="toolbar-btn js-zen-enter"
             data-container="body"
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 46d31e41ada..8c6bbc27e91 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -827,3 +827,12 @@ ul.notes {
     position: relative;
   }
 }
+
+.is-floating {
+  position: -webkit-sticky;
+  position: sticky;
+  bottom: 0;
+  margin-top: -1px;
+  background-color: $white-light;
+  border-top: 1px solid $white-normal;
+}