fedi/lemmy-ui
1
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-26 07:52:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: Use Bootstrap file upload form control styles

Browse source
This commit is contained in:
Jay Sitter 2023-06-26 18:42:44 -04:00
parent 8e2f83eb4e
commit b2b6f4521f
5 changed files with 16 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/assets/css/main.css
View file

@ -88,15 +88,6 @@
color: var(--bs-gray) !important; color: var(--bs-gray) !important;
} }
input[type="file"]::file-selector-button {
font: inherit;
border: 0;
padding: 0.375em 0.75em;
border-radius: var(--bs-border-radius);
background-color: var(--bs-secondary);
color: var(--bs-white);
}
.icon { .icon {
display: inline-grid; display: inline-grid;
display: inline-flex; display: inline-flex;

2
src/shared/components/common/image-upload-form.tsx
View file

@ -59,7 +59,7 @@ export class ImageUploadForm extends Component<
id={this.id} id={this.id}
type="file" type="file"
accept="image/*,video/*" accept="image/*,video/*"
className="small" className="small form-control"
name={this.id} name={this.id}
disabled={!UserService.Instance.myUserInfo} disabled={!UserService.Instance.myUserInfo}
onChange={linkEvent(this, this.handleImageUpload)} onChange={linkEvent(this, this.handleImageUpload)}

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

@ -170,6 +170,9 @@ export class MarkdownTextArea extends Component<
<form className="btn btn-sm text-muted fw-bold"> <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
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
tabIndex={0}
className={`mb-0 ${ className={`mb-0 ${
UserService.Instance.myUserInfo && "pointer" UserService.Instance.myUserInfo && "pointer"
}`} }`}

1
src/shared/components/home/emojis-form.tsx
View file

@ -133,6 +133,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
)} )}
{cv.image_url.length === 0 && ( {cv.image_url.length === 0 && (
<label <label
// TODO: Fix this linting violation
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
tabIndex={0} tabIndex={0}
className="btn btn-sm btn-secondary pointer" className="btn btn-sm btn-secondary pointer"

20
src/shared/components/post/post-form.tsx
View file

@ -390,15 +390,17 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
{capitalizeFirstLetter(I18NextService.i18n.t("image"))} {capitalizeFirstLetter(I18NextService.i18n.t("image"))}
<Icon icon="image" classes="icon-inline ms-1" /> <Icon icon="image" classes="icon-inline ms-1" />
</label> </label>
<input <div className="col-sm-10">
id="file-upload" <input
type="file" id="file-upload"
accept="image/*,video/*" type="file"
name="file" accept="image/*,video/*"
className="small col-sm-10" name="file"
disabled={!UserService.Instance.myUserInfo} className="small col-sm-10 form-control"
onChange={linkEvent(this, handleImageUpload)} disabled={!UserService.Instance.myUserInfo}
/> onChange={linkEvent(this, handleImageUpload)}
/>
</div>
{this.state.imageLoading && <Spinner />} {this.state.imageLoading && <Spinner />}
{url && isImage(url) && ( {url && isImage(url) && (
<img src={url} className="img-fluid" alt="" /> <img src={url} className="img-fluid" alt="" />