LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-12-23 11:21:26 +00:00
Code Issues Projects Releases Wiki Activity

feat: Move text formatting bar above textarea

Browse source
This commit is contained in:
Jay Sitter 2023-06-16 17:47:42 -04:00
parent afcffce572
commit ebba5bdd80
3 changed files with 49 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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%;
}

9
src/shared/components/common/language-select.tsx
View file

@ -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")}

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

@ -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)}