From 6ef0e98f4e07efd1fba36e8315d53559e22a9a8f Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Tue, 7 Jul 2020 02:18:01 +0200
Subject: [PATCH] DEV: flexify post actions (#9926)

* DEV: flexify post actions

* more tweaks
---
 .../javascripts/discourse/app/widgets/post-menu.js     |  4 ++--
 app/assets/stylesheets/common/components/buttons.scss  |  5 +++++
 app/assets/stylesheets/common/printer-friendly.scss    |  2 +-
 app/assets/stylesheets/desktop/topic-post.scss         | 10 +++++++---
 app/assets/stylesheets/mobile/topic-post.scss          |  2 ++
 5 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/widgets/post-menu.js b/app/assets/javascripts/discourse/app/widgets/post-menu.js
index d014a67e60f..be4bc896ac2 100644
--- a/app/assets/javascripts/discourse/app/widgets/post-menu.js
+++ b/app/assets/javascripts/discourse/app/widgets/post-menu.js
@@ -395,7 +395,7 @@ function replaceButton(buttons, find, replace) {
 }
 
 export default createWidget("post-menu", {
-  tagName: "section.post-menu-area.clearfix",
+  tagName: "section.post-menu-area",
 
   settings: {
     collapseButtons: true,
@@ -573,7 +573,7 @@ export default createWidget("post-menu", {
 
     const contents = [
       h(
-        "nav.post-controls.clearfix" +
+        "nav.post-controls" +
           (this.state.collapsed ? ".collapsed" : ".expanded"),
         postControls
       )
diff --git a/app/assets/stylesheets/common/components/buttons.scss b/app/assets/stylesheets/common/components/buttons.scss
index 643975ec508..cc2a7d06dbb 100644
--- a/app/assets/stylesheets/common/components/buttons.scss
+++ b/app/assets/stylesheets/common/components/buttons.scss
@@ -264,6 +264,11 @@
   .d-icon {
     color: $primary-low-mid;
   }
+
+  .d-button-label + .d-icon {
+    margin-left: 0.5em;
+  }
+
   @include hover {
     .d-icon {
       color: $primary;
diff --git a/app/assets/stylesheets/common/printer-friendly.scss b/app/assets/stylesheets/common/printer-friendly.scss
index ce0d4687d36..8fb6348b01b 100644
--- a/app/assets/stylesheets/common/printer-friendly.scss
+++ b/app/assets/stylesheets/common/printer-friendly.scss
@@ -6,7 +6,7 @@
   header,
   .topic-above-post-stream-outlet.topic-above-post-stream,
   .topic-map,
-  .post-menu-area.clearfix,
+  .post-menu-area,
   div#topic-footer-buttons,
   div.suggested-topics,
   div#progress-topic-wrapper,
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index ed1b906a302..5b7a77ae401 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -52,11 +52,15 @@ section.post-menu-area {
 
 nav.post-controls {
   padding: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 
   .actions {
-    text-align: right;
-    float: right;
-    display: inline-block;
+    display: flex;
+    justify-content: flex-end;
+    margin-left: auto;
+
     .more-actions {
       display: none;
       overflow: hidden;
diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss
index 7031810bc01..7dea3abf4e6 100644
--- a/app/assets/stylesheets/mobile/topic-post.scss
+++ b/app/assets/stylesheets/mobile/topic-post.scss
@@ -28,6 +28,8 @@ span.badge-posts {
 
 .topic-post {
   nav.post-controls {
+    display: flex;
+
     color: dark-light-choose($primary-low-mid, $secondary-high);
     .actions {
       display: flex;