From a6a4cf3fbc90849b864d510da88b5741c02d00f2 Mon Sep 17 00:00:00 2001
From: Toby Zerner <toby.zerner@gmail.com>
Date: Mon, 12 Nov 2018 17:19:37 +1030
Subject: [PATCH] Improve appearance of text editor buttons

- Change preview icon to Font Awesome Regular instead of Solid
- Give the preview button a tooltip
- Change submit button icon to paper plane (shown on mobile)
- Tweak mobile header button touch target
- Scroll overflowing text editor controls horizontally
---
 framework/core/js/src/forum/components/TextEditor.js |  7 ++++---
 framework/core/less/common/App.less                  |  6 ++++++
 framework/core/less/forum/Composer.less              | 11 +++++------
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/framework/core/js/src/forum/components/TextEditor.js b/framework/core/js/src/forum/components/TextEditor.js
index 64def3924..eedd480ea 100644
--- a/framework/core/js/src/forum/components/TextEditor.js
+++ b/framework/core/js/src/forum/components/TextEditor.js
@@ -70,7 +70,7 @@ export default class TextEditor extends Component {
     items.add('submit',
       Button.component({
         children: this.props.submitLabel,
-        icon: 'fas fa-check',
+        icon: 'fas fa-paper-plane',
         className: 'Button Button--primary',
         itemClassName: 'App-primaryControl',
         onclick: this.onsubmit.bind(this)
@@ -80,10 +80,11 @@ export default class TextEditor extends Component {
     if (this.props.preview) {
       items.add('preview',
         Button.component({
-          icon: 'fas fa-eye',
+          icon: 'far fa-eye',
           className: 'Button Button--icon',
           onclick: this.props.preview,
-          title: app.translator.trans('core.forum.composer.preview_tooltip')
+          title: app.translator.trans('core.forum.composer.preview_tooltip'),
+          config: elm => $(elm).tooltip()
         })
       );
     }
diff --git a/framework/core/less/common/App.less b/framework/core/less/common/App.less
index c8af74833..b20588ac8 100644
--- a/framework/core/less/common/App.less
+++ b/framework/core/less/common/App.less
@@ -56,6 +56,9 @@
         opacity: 0.5;
       }
     }
+    > .Button--icon {
+      width: 40px;
+    }
   }
   .App-primaryControl {
     width: auto;
@@ -71,12 +74,15 @@
     }
   }
   .App-primaryControl, .App-backControl {
+    margin: 0 !important;
+
     > .Button {
       color: @header-control-color !important;
 
       .Button-icon {
         display: block;
         font-size: 20px;
+        margin: 0;
       }
       .Button-label {
         display: none;
diff --git a/framework/core/less/forum/Composer.less b/framework/core/less/forum/Composer.less
index 44e1ab2b3..6a2ba93ca 100644
--- a/framework/core/less/forum/Composer.less
+++ b/framework/core/less/forum/Composer.less
@@ -343,11 +343,14 @@
 }
 .TextEditor-controls {
   margin: 0;
-  padding: 15px 0;
+  padding: 10px 0;
   list-style-type: none;
+  overflow-x: auto;
+  white-space: nowrap;
 
-  & li {
+  li {
     display: inline-block;
+    margin-right: 10px;
   }
 }
 
@@ -357,10 +360,6 @@
     padding: 10px 20px;
     border-top: 1px solid @control-bg;
 
-    li {
-      margin-right: 5px;
-    }
-
     .fullScreen & {
       margin: 0;
       border-top: 0;