fixed autosize textarea heightfloating-issue-comment-field-poc

fixed preview mode height not matching
adding active icon

4 files changed, 21 insertions, 4 deletions

diff --git a/app/assets/javascripts/notes/components/issue_comment_form.vue b/app/assets/javascripts/notes/components/issue_comment_form.vue
index b98fcf1d56d..919505b0047 100644
--- a/app/assets/javascripts/notes/components/issue_comment_form.vue
+++ b/app/assets/javascripts/notes/components/issue_comment_form.vue
@@ -237,7 +237,9 @@
 </script>
 
 <template>
-  <div :class="{ 'is-floating': floatingModeEnabled }">
+  <div
+    :class="{ 'is-floating': floatingModeEnabled }"
+  >
     <issue-note-signed-out-widget v-if="!isLoggedIn" />
     <ul
       v-else
diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue
index 12ed0cce182..fe0034c20e7 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue
@@ -41,6 +41,11 @@
 
         this.$emit('toggleFloatingMode');
       },
+      toggleFullScreen() {
+        if (this.floatingModeEnabled) {
+          this.toggleFloatingMode();
+        }
+      },
     },
     mounted() {
       $(document).on('markdown-preview:show.vue', this.toggleMarkdownPreview);
@@ -122,7 +127,11 @@
             @click="toggleFloatingMode"
           >
             <i
-              class="fa fa-window-restore"
+              class="fa"
+              :class="{
+                'fa-window-restore': !floatingModeEnabled,
+                'fa-window-maximize': floatingModeEnabled,
+              }"
               aria-hidden="true">
             </i>
           </button>
@@ -133,7 +142,9 @@
             data-container="body"
             tabindex="-1"
             title="Go full screen"
-            type="button">
+            type="button"
+            @click="toggleFullScreen"
+          >
             <i
               aria-hidden="true"
               class="fa fa-arrows-alt fa-fw">
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index c6dc97fdf96..82c19f54c08 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -78,7 +78,7 @@
 }
 
 .md-preview-holder {
-  min-height: 167px;
+  min-height: 171px;
   padding: 10px 0;
   overflow-x: auto;
 }
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index ca73767a8e2..b5c34fd43d1 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -836,5 +836,9 @@ ul.notes {
     margin-top: -1px;
     background-color: $white-light;
     border-top: 1px solid $white-normal;
+
+    .note-textarea {
+      height: 140px !important; // Need !important to override inline styles from autosize.js
+    }
   }
 }