Merge branch 'move-disussion-actions-to-the-right' into 'master'

Move discussion and notes actions to the right

Closes #33645

See merge request gitlab-org/gitlab-ce!18476

app/assets/javascripts/notes/components/note_edited_text.vue

@@ -32,17 +32,17 @@ export default {
 <template>
   <div :class="className">
     {{ actionText }}
-    <time-ago-tooltip
-      :time="editedAt"
-      tooltip-placement="bottom"
-    />
     <template v-if="editedBy">
-      by
+      {{ s__('ByAuthor|by') }}
       <a
         :href="editedBy.path"
         class="js-vue-author author_link">
         {{ editedBy.name }}
       </a>
     </template>
+    <time-ago-tooltip
+      :time="editedAt"
+      tooltip-placement="bottom"
+    />
   </div>
 </template>

app/assets/javascripts/notes/components/note_header.vue

@@ -62,6 +62,21 @@ export default {
 
 <template>
   <div class="note-header-info">
+    <div
+      v-if="includeToggle"
+      class="discussion-actions">
+      <button
+        @click="handleToggle"
+        class="note-action-button discussion-toggle-button js-vue-toggle-button"
+        type="button">
+        <i
+          :class="toggleChevronClass"
+          class="fa"
+          aria-hidden="true">
+        </i>
+        {{ __('Toggle discussion') }}
+      </button>
+    </div>
     <a :href="author.path">
       <span class="note-header-author-name">{{ author.name }}</span>
       <span class="note-headline-light">
@@ -95,20 +110,5 @@ export default {
         </i>
       </span>
     </span>
-    <div
-      v-if="includeToggle"
-      class="discussion-actions">
-      <button
-        @click="handleToggle"
-        class="note-action-button discussion-toggle-button js-vue-toggle-button"
-        type="button">
-        <i
-          :class="toggleChevronClass"
-          class="fa"
-          aria-hidden="true">
-        </i>
-        Toggle discussion
-      </button>
-    </div>
   </div>
 </template>

app/assets/stylesheets/pages/notes.scss

@@ -407,10 +407,6 @@ ul.notes {
 .note-header {
   display: flex;
   justify-content: space-between;
-
-  @include notes-media('max', $screen-xs-max) {
-    flex-flow: row wrap;
-  }
 }
 
 .note-header-info {
@@ -473,11 +469,6 @@ ul.notes {
   margin-left: 10px;
   color: $gray-darkest;
 
-  @include notes-media('max', $screen-md-max) {
-    float: none;
-    margin-left: 0;
-  }
-
   .btn-group > .discussion-next-btn {
     margin-left: -1px;
   }

app/views/discussions/_discussion.html.haml

@@ -13,7 +13,7 @@
                 = icon("chevron-up")
               - else
                 = icon("chevron-down")
-              Toggle discussion
+              = _('Toggle discussion')
           = link_to_member(@project, discussion.author, avatar: false)
 
           .inline.discussion-headline-light

changelogs/unreleased/move-disussion-actions-to-the-right.yml

@@ -0,0 +1,5 @@
+---
+title: Move discussion actions to the right for small viewports
+merge_request: 18476
+author: George Tsiolis
+type: changed