fix weird borders when markdown textarea is disabled

This commit is contained in:
Alec Armbruster 2023-06-27 12:59:06 -04:00
parent 934cabcec4
commit 9cf3c33823
No known key found for this signature in database
GPG key ID: 52BC7C84E960FD1B

View file

@ -159,13 +159,16 @@ export class MarkdownTextArea extends Component<
<div className="mb-3 row"> <div className="mb-3 row">
<div className="col-12"> <div className="col-12">
<div className="rounded bg-light border"> <div className="rounded bg-light border">
<div className="d-flex flex-wrap border-bottom"> <div
className={`d-flex flex-wrap border-bottom ${
this.isDisabled ? "no-click" : ""
}`}
>
{this.getFormatButton("bold", this.handleInsertBold)} {this.getFormatButton("bold", this.handleInsertBold)}
{this.getFormatButton("italic", this.handleInsertItalic)} {this.getFormatButton("italic", this.handleInsertItalic)}
{this.getFormatButton("link", this.handleInsertLink)} {this.getFormatButton("link", this.handleInsertLink)}
<EmojiPicker <EmojiPicker
onEmojiClick={e => this.handleEmoji(this, e)} onEmojiClick={e => this.handleEmoji(this, e)}
disabled={this.isDisabled}
></EmojiPicker> ></EmojiPicker>
<form className="btn btn-sm text-muted fw-bold"> <form className="btn btn-sm text-muted fw-bold">
<label <label
@ -188,9 +191,7 @@ export class MarkdownTextArea extends Component<
name="file" name="file"
className="d-none" className="d-none"
multiple multiple
disabled={ disabled={!UserService.Instance.myUserInfo}
!UserService.Instance.myUserInfo || this.isDisabled
}
onChange={linkEvent(this, this.handleImageUpload)} onChange={linkEvent(this, this.handleImageUpload)}
/> />
</form> </form>
@ -352,7 +353,6 @@ export class MarkdownTextArea extends Component<
data-tippy-content={I18NextService.i18n.t(type)} data-tippy-content={I18NextService.i18n.t(type)}
aria-label={I18NextService.i18n.t(type)} aria-label={I18NextService.i18n.t(type)}
onClick={linkEvent(this, handleClick)} onClick={linkEvent(this, handleClick)}
disabled={this.isDisabled}
> >
<Icon icon={iconType} classes="icon-inline" /> <Icon icon={iconType} classes="icon-inline" />
</button> </button>