From fffd2f157632e00ab282e357d7842c742cf4dcd5 Mon Sep 17 00:00:00 2001
From: infiinte-persistence <inf.persistence@gmail.com>
Date: Thu, 21 May 2020 15:25:37 +0800
Subject: [PATCH] FormField: add an optional quick-action button for 'markdown'
 and 'textarea'.

Technically, the other modes can have a quick-action button as well, but for now it's not implemented since it's unlikely to be used.

The first usage will be to house the "toggle markdown editor" button, but it can be used for anything. The caller will handle the action.

It will be located at the upper-right, which is a better place for such a button. Putting the "toggle markdown editor" button on the bottom seems too far away and seems to make the 'Done|Cancel' area too busy/cluttered.
---
 .../common/form-components/form-field.jsx     | 26 +++++++++++++++++--
 ui/scss/component/_form-field.scss            | 10 +++++++
 ui/scss/component/_markdown-editor.scss       |  4 +--
 3 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/ui/component/common/form-components/form-field.jsx b/ui/component/common/form-components/form-field.jsx
index 8a481201d..01e58c165 100644
--- a/ui/component/common/form-components/form-field.jsx
+++ b/ui/component/common/form-components/form-field.jsx
@@ -7,6 +7,7 @@ import MarkdownPreview from 'component/common/markdown-preview';
 import { openEditorMenu, stopContextMenu } from 'util/context-menu';
 import { MAX_CHARACTERS_IN_COMMENT as defaultTextAreaLimit } from 'constants/comments';
 import 'easymde/dist/easymde.min.css';
+import Button from 'component/button';
 
 type Props = {
   name: string,
@@ -35,6 +36,8 @@ type Props = {
   range?: number,
   min?: number,
   max?: number,
+  quickActionLabel?: string,
+  quickActionHandler?: any => any,
 };
 
 export class FormField extends React.PureComponent<Props> {
@@ -78,6 +81,8 @@ export class FormField extends React.PureComponent<Props> {
       blockWrap,
       charCount,
       textAreaMaxLength = defaultTextAreaLimit,
+      quickActionLabel,
+      quickActionHandler,
       ...inputProps
     } = this.props;
     const errorMessage = typeof error === 'object' ? error.message : error;
@@ -85,6 +90,13 @@ export class FormField extends React.PureComponent<Props> {
       ? ({ children: innerChildren }) => <fieldset-section class="radio">{innerChildren}</fieldset-section>
       : ({ children: innerChildren }) => <span className="radio">{innerChildren}</span>;
 
+    const quickAction =
+      quickActionLabel && quickActionHandler ? (
+        <div className="form-field__quick-action">
+          <Button button="link" onClick={quickActionHandler} label={quickActionLabel} />
+        </div>
+      ) : null;
+
     let input;
     if (type) {
       if (type === 'radio') {
@@ -127,7 +139,12 @@ export class FormField extends React.PureComponent<Props> {
         input = (
           <div className="form-field--SimpleMDE" onContextMenu={stopContextMenu}>
             <fieldset-section>
-              <label htmlFor={name}>{label}</label>
+              <div className="form-field__two-column">
+                <div>
+                  <label htmlFor={name}>{label}</label>
+                </div>
+                {quickAction}
+              </div>
               <SimpleMDE
                 {...inputProps}
                 id={name}
@@ -152,7 +169,12 @@ export class FormField extends React.PureComponent<Props> {
         );
         input = (
           <fieldset-section>
-            <label htmlFor={name}>{label}</label>
+            <div className="form-field__two-column">
+              <div>
+                <label htmlFor={name}>{label}</label>
+              </div>
+              {quickAction}
+            </div>
             <textarea type={type} id={name} maxLength={textAreaMaxLength} ref={this.input} {...inputProps} />
             {countInfo}
           </fieldset-section>
diff --git a/ui/scss/component/_form-field.scss b/ui/scss/component/_form-field.scss
index 8a2578f89..e66898658 100644
--- a/ui/scss/component/_form-field.scss
+++ b/ui/scss/component/_form-field.scss
@@ -135,6 +135,16 @@ fieldset-group {
   padding-top: 1rem;
 }
 
+.form-field__two-column {
+  column-count: 2;
+}
+
+.form-field__quick-action {
+  float: right;
+  font-size: var(--font-xsmall);
+  margin-top: 2.5%;
+}
+
 fieldset-section {
   .form-field__internal-option {
     margin-top: var(--spacing-small);
diff --git a/ui/scss/component/_markdown-editor.scss b/ui/scss/component/_markdown-editor.scss
index 66d4bb029..ce5b3f89d 100644
--- a/ui/scss/component/_markdown-editor.scss
+++ b/ui/scss/component/_markdown-editor.scss
@@ -54,12 +54,12 @@
 
 .form-field--SimpleMDE {
   margin-top: var(--spacing-large);
-  
+
   // Override hyperlink styles
   .cm-s-easymde .cm-link {
     color: inherit;
   }
-    
+
   // Overriding the lbry/components form styling
   .editor-toolbar {
     button:not(.button) {