UX - Swap "Select Language" and "Cancel/Preview/Reply" button locations around in commentsReverse order of buttons in Reply TextArea (#2730)

* Reverse order of buttons in Reply TextArea

Fixes #1924

* Update markdown-textarea.tsx

Oopsie

* I'm so confused

Reverse last commit

* Update markdown-textarea.tsx

??

* Update markdown-textarea.tsx

* Lint markdown-textarea.tsx
This commit is contained in:
Pastel de N4ta 2024-10-01 17:08:36 +01:00 committed by GitHub
parent 8a500f3ddf
commit 6057c96f0c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -257,29 +257,14 @@ export class MarkdownTextArea extends Component<
</div>
<div className="col-12 d-flex align-items-center flex-wrap mt-2">
{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.replyType && (
{this.props.buttonTitle && (
<button
type="button"
type="submit"
className="btn btn-sm btn-secondary ms-2"
onClick={linkEvent(this, this.handleReplyCancel)}
disabled={this.isDisabled || !this.state.content}
>
{I18NextService.i18n.t("cancel")}
{this.state.loading && <Spinner className="me-1" />}
{this.props.buttonTitle}
</button>
)}
<button
@ -294,16 +279,31 @@ export class MarkdownTextArea extends Component<
? I18NextService.i18n.t("edit")
: I18NextService.i18n.t("preview")}
</button>
{this.props.buttonTitle && (
{this.props.replyType && (
<button
type="submit"
type="button"
className="btn btn-sm btn-secondary ms-2"
disabled={this.isDisabled || !this.state.content}
onClick={linkEvent(this, this.handleReplyCancel)}
>
{this.state.loading && <Spinner className="me-1" />}
{this.props.buttonTitle}
{I18NextService.i18n.t("cancel")}
</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}
/>
)}
</div>
</div>
</form>