From b228214cd06b15c0a5346e4ae9d1b1c6479148e8 Mon Sep 17 00:00:00 2001 From: Jay Sitter <jsit@users.noreply.github.com> Date: Fri, 16 Jun 2023 09:53:46 -0500 Subject: [PATCH] Re-arrange elements beneath markdown textarea #1057 (#1288) Co-authored-by: SleeplessOne1917 <abias1122@gmail.com> Co-authored-by: Dessalines <dessalines@users.noreply.github.com> --- .../components/common/markdown-textarea.tsx | 98 ++++++++++--------- 1 file changed, 51 insertions(+), 47 deletions(-) diff --git a/src/shared/components/common/markdown-textarea.tsx b/src/shared/components/common/markdown-textarea.tsx index 9318d3b..a4459ac 100644 --- a/src/shared/components/common/markdown-textarea.tsx +++ b/src/shared/components/common/markdown-textarea.tsx @@ -184,53 +184,6 @@ export class MarkdownTextArea extends Component< </div> <div className="row"> <div className="col-sm-12 d-flex flex-wrap"> - {this.props.buttonTitle && ( - <button - type="submit" - className="btn btn-sm btn-secondary mr-2" - disabled={this.isDisabled} - > - {this.state.loading ? ( - <Spinner /> - ) : ( - <span>{this.props.buttonTitle}</span> - )} - </button> - )} - {this.props.replyType && ( - <button - type="button" - className="btn btn-sm btn-secondary mr-2" - onClick={linkEvent(this, this.handleReplyCancel)} - > - {i18n.t("cancel")} - </button> - )} - {this.state.content && ( - <button - className={`btn btn-sm btn-secondary mr-2 ${ - this.state.previewMode && "active" - }`} - onClick={linkEvent(this, this.handlePreviewToggle)} - > - {this.state.previewMode ? i18n.t("edit") : i18n.t("preview")} - </button> - )} - {/* A flex expander */} - <div className="flex-grow-1"></div> - - {this.props.showLanguage && ( - <LanguageSelect - iconVersion - allLanguages={this.props.allLanguages} - selectedLanguageIds={ - languageId ? Array.of(languageId) : undefined - } - siteLanguages={this.props.siteLanguages} - onChange={this.handleLanguageChange} - disabled={this.isDisabled} - /> - )} {this.getFormatButton("bold", this.handleInsertBold)} {this.getFormatButton("italic", this.handleInsertItalic)} {this.getFormatButton("link", this.handleInsertLink)} @@ -283,6 +236,57 @@ export class MarkdownTextArea extends Component< <Icon icon="help-circle" classes="icon-inline" /> </a> </div> + + <div className="col-sm-12 d-flex align-items-center flex-wrap"> + {this.props.showLanguage && ( + <LanguageSelect + iconVersion + allLanguages={this.props.allLanguages} + selectedLanguageIds={ + languageId ? Array.of(languageId) : undefined + } + siteLanguages={this.props.siteLanguages} + onChange={this.handleLanguageChange} + disabled={this.isDisabled} + /> + )} + + {/* A flex expander */} + <div className="flex-grow-1"></div> + + {this.props.buttonTitle && ( + <button + type="submit" + className="btn btn-sm btn-secondary mr-2" + disabled={this.isDisabled} + > + {this.state.loading ? ( + <Spinner /> + ) : ( + <span>{this.props.buttonTitle}</span> + )} + </button> + )} + {this.props.replyType && ( + <button + type="button" + className="btn btn-sm btn-secondary mr-2" + onClick={linkEvent(this, this.handleReplyCancel)} + > + {i18n.t("cancel")} + </button> + )} + {this.state.content && ( + <button + className={`btn btn-sm btn-secondary mr-2 ${ + this.state.previewMode && "active" + }`} + onClick={linkEvent(this, this.handlePreviewToggle)} + > + {this.state.previewMode ? i18n.t("edit") : i18n.t("preview")} + </button> + )} + </div> </div> </form> ); -- 2.44.1