Refactored 'Toggle discussion' button55221-username-wrapping

On the small screens it should be placed below body to relate to
expanded content. Onb the larger screens it is absolutely positioned
just like note-actions for regular notes

3 files changed, 26 insertions, 30 deletions

diff --git a/app/assets/javascripts/notes/components/note_header.vue b/app/assets/javascripts/notes/components/note_header.vue
index f59c3c0073f..8e7a7ddfdde 100644
--- a/app/assets/javascripts/notes/components/note_header.vue
+++ b/app/assets/javascripts/notes/components/note_header.vue
@@ -27,16 +27,6 @@ export default {
       required: false,
       default: null,
     },
-    includeToggle: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    expanded: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
     noTruncate: {
       type: Boolean,
       required: false,
@@ -44,9 +34,6 @@ export default {
     },
   },
   computed: {
-    toggleChevronClass() {
-      return this.expanded ? 'fa-chevron-up' : 'fa-chevron-down';
-    },
     noteTimestampLink() {
       return `#note_${this.noteId}`;
     },
@@ -75,16 +62,6 @@ export default {
       'mr-0': noTruncate,
     }"
   >
-    <div v-if="includeToggle" class="discussion-actions">
-      <button
-        class="note-action-button discussion-toggle-button js-vue-toggle-button"
-        type="button"
-        @click="handleToggle"
-      >
-        <i :class="toggleChevronClass" class="fa" aria-hidden="true"></i>
-        {{ __('Toggle discussion') }}
-      </button>
-    </div>
     <a
       v-if="hasAuthor"
       v-once
diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue
index b9153fce849..4bdfb01a5a5 100644
--- a/app/assets/javascripts/notes/components/noteable_discussion.vue
+++ b/app/assets/javascripts/notes/components/noteable_discussion.vue
@@ -208,6 +208,9 @@ export default {
     resolveWithIssuePath() {
       return !this.discussionResolved ? this.discussion.resolve_with_issue_path : '';
     },
+    toggleChevronClass() {
+      return this.isExpanded ? 'fa-chevron-up' : 'fa-chevron-down';
+    },
   },
   created() {
     eventHub.$on('startReplying', this.onStartReplying);
@@ -326,9 +329,6 @@ Please check your network connection and try again.`;
               :author="author"
               :created-at="firstNote.created_at"
               :note-id="firstNote.id"
-              :include-toggle="true"
-              :expanded="discussion.expanded"
-              :no-truncate="true"
               @toggleHandler="toggleDiscussionHandler"
             >
               <span v-html="actionText"></span>
@@ -347,6 +347,17 @@ Please check your network connection and try again.`;
               action-text="Last updated"
               class-name="discussion-headline-light js-discussion-headline"
             />
+
+            <div class="discussion-actions">
+              <button
+                class="note-action-button discussion-toggle-button js-vue-toggle-button"
+                type="button"
+                @click="toggleDiscussionHandler"
+              >
+                <i :class="toggleChevronClass" class="fa" aria-hidden="true"></i>
+                {{ __('Toggle discussion') }}
+              </button>
+            </div>
           </div>
         </div>
         <div v-if="!shouldHideDiscussionBody" class="discussion-body">
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index f904d6d68b9..a7ad0a08a18 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -555,9 +555,6 @@ $note-form-margin-left: 72px;
   @media (min-width: map-get($grid-breakpoints, sm)) {
     margin-right: 200px;
   }
-  @media (min-width: map-get($grid-breakpoints, md)) {
-    margin-right: 0;
-  }
 }
 
 .note-header-author-name {
@@ -573,6 +570,11 @@ $note-form-margin-left: 72px;
 
   .note-header-info {
     padding-bottom: 0;
+    margin-right: 0;
+
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      margin-right: 10em;
+    }
   }
 
   .timeline-content {
@@ -648,14 +650,20 @@ $note-form-margin-left: 72px;
  */
 
 .discussion-actions {
-  float: right;
   color: $gray-darkest;
+  padding-top: $gl-padding;
 
   @include media-breakpoint-down(xs) {
     width: 100%;
     margin: $gl-padding-8 0;
   }
 
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    position: absolute;
+    top: 0;
+    right: $gl-padding;
+  }
+
   .btn-group > .discussion-next-btn {
     margin-left: -1px;
   }