From ebba5bdd80d8c18e72d66d58dd895e103e25a28a Mon Sep 17 00:00:00 2001 From: Jay Sitter <jay@jaysitter.com> Date: Fri, 16 Jun 2023 17:47:42 -0400 Subject: [PATCH] feat: Move text formatting bar above textarea --- src/assets/css/main.css | 12 +-- .../components/common/language-select.tsx | 9 +- .../components/common/markdown-textarea.tsx | 87 +++++++++---------- 3 files changed, 49 insertions(+), 59 deletions(-) diff --git a/src/assets/css/main.css b/src/assets/css/main.css index 82f8433..e316ab9 100644 --- a/src/assets/css/main.css +++ b/src/assets/css/main.css @@ -46,7 +46,7 @@ } .md-div p:last-child { - margin-bottom: 0px; + margin-bottom: 0; } .md-div img { @@ -371,7 +371,7 @@ br.big { } .tribute-container li { - padding: 5px 5px; + padding: 5px; cursor: pointer; } @@ -410,13 +410,7 @@ br.big { -webkit-line-clamp: 3; -webkit-box-orient: vertical; } -.lang-select-action { - width: 100px; -} -.lang-select-action:focus { - width: auto; -} -em-emoji-picker { +.emoji-picker { width: 100%; } diff --git a/src/shared/components/common/language-select.tsx b/src/shared/components/common/language-select.tsx index fac3216..09e9c96 100644 --- a/src/shared/components/common/language-select.tsx +++ b/src/shared/components/common/language-select.tsx @@ -100,12 +100,9 @@ export class LanguageSelect extends Component<LanguageSelectProps, any> { return ( <select - className={classNames( - "lang-select-action", - this.props.iconVersion - ? "btn btn-sm text-muted" - : "form-control custom-select" - )} + className={classNames("lang-select-action", { + "form-control custom-select": !this.props.iconVersion, + })} id={this.id} onChange={linkEvent(this, this.handleLanguageChange)} aria-label={i18n.t("language_select_placeholder")} diff --git a/src/shared/components/common/markdown-textarea.tsx b/src/shared/components/common/markdown-textarea.tsx index a4459ac..7405638 100644 --- a/src/shared/components/common/markdown-textarea.tsx +++ b/src/shared/components/common/markdown-textarea.tsx @@ -143,46 +143,6 @@ export class MarkdownTextArea extends Component< } /> <div className="form-group row"> - <div className={`col-sm-12`}> - <textarea - id={this.id} - className={`form-control ${this.state.previewMode && "d-none"}`} - value={this.state.content} - onInput={linkEvent(this, this.handleContentChange)} - onPaste={linkEvent(this, this.handleImageUploadPaste)} - onKeyDown={linkEvent(this, this.handleKeyBinds)} - required - disabled={this.isDisabled} - rows={2} - maxLength={this.props.maxLength ?? markdownFieldCharacterLimit} - placeholder={this.props.placeholder} - /> - {this.state.previewMode && this.state.content && ( - <div - className="card border-secondary card-body md-div" - dangerouslySetInnerHTML={mdToHtml(this.state.content)} - /> - )} - {this.state.imageUploadStatus && - this.state.imageUploadStatus.total > 1 && ( - <ProgressBar - className="mt-2" - striped - animated - value={this.state.imageUploadStatus.uploaded} - max={this.state.imageUploadStatus.total} - text={i18n.t("pictures_uploded_progess", { - uploaded: this.state.imageUploadStatus.uploaded, - total: this.state.imageUploadStatus.total, - })} - /> - )} - </div> - <label className="sr-only" htmlFor={this.id}> - {i18n.t("body")} - </label> - </div> - <div className="row"> <div className="col-sm-12 d-flex flex-wrap"> {this.getFormatButton("bold", this.handleInsertBold)} {this.getFormatButton("italic", this.handleInsertItalic)} @@ -237,7 +197,46 @@ export class MarkdownTextArea extends Component< </a> </div> - <div className="col-sm-12 d-flex align-items-center flex-wrap"> + <div className="col-sm-12 mt-2"> + <textarea + id={this.id} + className={`form-control ${this.state.previewMode && "d-none"}`} + value={this.state.content} + onInput={linkEvent(this, this.handleContentChange)} + onPaste={linkEvent(this, this.handleImageUploadPaste)} + onKeyDown={linkEvent(this, this.handleKeyBinds)} + required + disabled={this.isDisabled} + rows={2} + maxLength={this.props.maxLength ?? markdownFieldCharacterLimit} + placeholder={this.props.placeholder} + /> + {this.state.previewMode && this.state.content && ( + <div + className="card border-secondary card-body md-div" + dangerouslySetInnerHTML={mdToHtml(this.state.content)} + /> + )} + {this.state.imageUploadStatus && + this.state.imageUploadStatus.total > 1 && ( + <ProgressBar + className="mt-2" + striped + animated + value={this.state.imageUploadStatus.uploaded} + max={this.state.imageUploadStatus.total} + text={i18n.t("pictures_uploded_progess", { + uploaded: this.state.imageUploadStatus.uploaded, + total: this.state.imageUploadStatus.total, + })} + /> + )} + </div> + <label className="sr-only" htmlFor={this.id}> + {i18n.t("body")} + </label> + + <div className="col-sm-12 d-flex align-items-center flex-wrap mt-2"> {this.props.showLanguage && ( <LanguageSelect iconVersion @@ -257,7 +256,7 @@ export class MarkdownTextArea extends Component< {this.props.buttonTitle && ( <button type="submit" - className="btn btn-sm btn-secondary mr-2" + className="btn btn-sm btn-secondary ml-2" disabled={this.isDisabled} > {this.state.loading ? ( @@ -270,7 +269,7 @@ export class MarkdownTextArea extends Component< {this.props.replyType && ( <button type="button" - className="btn btn-sm btn-secondary mr-2" + className="btn btn-sm btn-secondary ml-2" onClick={linkEvent(this, this.handleReplyCancel)} > {i18n.t("cancel")} @@ -278,7 +277,7 @@ export class MarkdownTextArea extends Component< )} {this.state.content && ( <button - className={`btn btn-sm btn-secondary mr-2 ${ + className={`btn btn-sm btn-secondary ml-2 ${ this.state.previewMode && "active" }`} onClick={linkEvent(this, this.handlePreviewToggle)} -- 2.44.1