LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-25 22:01:13 +00:00
Code Issues Projects Releases Wiki Activity

fix: Add focus border to markdown toolbar buttons

Browse source
This commit is contained in:
Jay Sitter 2023-07-04 00:53:31 -04:00
parent b1292b958a
commit 21c8b64cda
2 changed files with 34 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/shared/components/common/emoji-picker.tsx
View file

@ -32,7 +32,7 @@ export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
return ( return (
<span className="emoji-picker"> <span className="emoji-picker">
<button <button
className="btn btn-sm text-muted" className="btn btn-sm btn-link rounded-0 text-muted"
data-tippy-content={I18NextService.i18n.t("emoji")} data-tippy-content={I18NextService.i18n.t("emoji")}
aria-label={I18NextService.i18n.t("emoji")} aria-label={I18NextService.i18n.t("emoji")}
disabled={this.props.disabled} disabled={this.props.disabled}

23
src/shared/components/common/markdown-textarea.tsx
View file

@ -170,21 +170,27 @@ export class MarkdownTextArea extends Component<
<EmojiPicker <EmojiPicker
onEmojiClick={e => this.handleEmoji(this, e)} onEmojiClick={e => this.handleEmoji(this, e)}
></EmojiPicker> ></EmojiPicker>
<form className="btn btn-sm text-muted fw-bold">
<label <label
htmlFor={`file-upload-${this.id}`} htmlFor={`file-upload-${this.id}`}
// TODO: Fix this linting violation className={classNames("mb-0", {
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex pointer: UserService.Instance.myUserInfo,
tabIndex={0} })}
className={`mb-0 ${
UserService.Instance.myUserInfo && "pointer"
}`}
data-tippy-content={I18NextService.i18n.t("upload_image")} data-tippy-content={I18NextService.i18n.t("upload_image")}
> >
{this.state.imageUploadStatus ? ( {this.state.imageUploadStatus ? (
<Spinner /> <Spinner />
) : ( ) : (
<button
type="button"
className="btn btn-sm btn-link rounded-0 text-muted mb-0"
onClick={() => {
document
.getElementById(`file-upload-${this.id}`)
?.click();
}}
>
<Icon icon="image" classes="icon-inline" /> <Icon icon="image" classes="icon-inline" />
</button>
)} )}
</label> </label>
<input <input
@ -197,7 +203,6 @@ export class MarkdownTextArea extends Component<
disabled={!UserService.Instance.myUserInfo} disabled={!UserService.Instance.myUserInfo}
onChange={linkEvent(this, this.handleImageUpload)} onChange={linkEvent(this, this.handleImageUpload)}
/> />
</form>
{this.getFormatButton("header", this.handleInsertHeader)} {this.getFormatButton("header", this.handleInsertHeader)}
{this.getFormatButton( {this.getFormatButton(
"strikethrough", "strikethrough",
@ -348,7 +353,7 @@ export class MarkdownTextArea extends Component<
return ( return (
<button <button
className="btn btn-sm text-muted" className="btn btn-sm btn-link rounded-0 text-muted"
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)}