disable floating mode on mobile

added active state
disable floating mode in edit form

5 files changed, 32 insertions, 8 deletions

diff --git a/app/assets/javascripts/notes/components/issue_comment_form.vue b/app/assets/javascripts/notes/components/issue_comment_form.vue
index 5761273ae54..b98fcf1d56d 100644
--- a/app/assets/javascripts/notes/components/issue_comment_form.vue
+++ b/app/assets/javascripts/notes/components/issue_comment_form.vue
@@ -267,6 +267,7 @@
                 :add-spacing-classes="false"
                 :is-confidential-issue="isConfidentialIssue"
                 :toggle-floating-mode="toggleFloatingMode"
+                :enabled-floating-mode="true"
                 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 614875f749b..5cd5fa62f29 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,
       },
+      enabledFloatingMode: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
       toggleFloatingMode: {
         type: Function,
         required: false,
@@ -108,6 +113,7 @@
     ref="gl-form">
     <markdown-header
       :preview-markdown="previewMarkdown"
+      :enabled-floating-mode="enabledFloatingMode"
       @toggle-markdown="toggleMarkdownPreview"
       @toggleFloatingMode="toggleFloatingMode"
     />
diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue
index 5ce2d57c5ef..12ed0cce182 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue
@@ -3,11 +3,21 @@
   import toolbarButton from './toolbar_button.vue';
 
   export default {
+    data() {
+      return {
+        floatingModeEnabled: false,
+      };
+    },
     props: {
       previewMarkdown: {
         type: Boolean,
         required: true,
       },
+      enabledFloatingMode: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
     },
     directives: {
       tooltip,
@@ -26,7 +36,9 @@
         this.$emit('toggle-markdown');
       },
       toggleFloatingMode() {
+        this.floatingModeEnabled = !this.floatingModeEnabled;
         this.$refs.floatingModeBtn.blur();
+
         this.$emit('toggleFloatingMode');
       },
     },
@@ -98,11 +110,13 @@
         </div>
         <div class="toolbar-group">
           <button
+            v-if="enabledFloatingMode"
             v-tooltip
             data-container="body"
             aria-label="Toggle floating mode"
             title="Toggle floating mode"
-            class="toolbar-btn"
+            class="toolbar-btn hidden-xs"
+            :class="{ active: floatingModeEnabled }"
             type="button"
             ref="floatingModeBtn"
             @click="toggleFloatingMode"
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index e3920b5d3d9..c6dc97fdf96 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -145,7 +145,8 @@
   outline: 0;
 
   &:hover,
-  &:focus {
+  &:focus,
+  &.active {
     color: $gl-link-color;
   }
 }
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 8c6bbc27e91..ca73767a8e2 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -829,10 +829,12 @@ ul.notes {
 }
 
 .is-floating {
-  position: -webkit-sticky;
-  position: sticky;
-  bottom: 0;
-  margin-top: -1px;
-  background-color: $white-light;
-  border-top: 1px solid $white-normal;
+  @media (min-width: $screen-sm-min) {
+    position: -webkit-sticky;
+    position: sticky;
+    bottom: 0;
+    margin-top: -1px;
+    background-color: $white-light;
+    border-top: 1px solid $white-normal;
+  }
 }