Merge pull request #1334 from jsit/feat/markdown-format-bar-above

feat: Move text formatting bar above textarea
This commit is contained in:
SleeplessOne1917 2023-06-17 02:19:02 +00:00 committed by GitHub
commit 19b3de1bc2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 126 additions and 110 deletions

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

View file

@ -19,6 +19,7 @@
--warning: #f39c12;
--danger: #e74c3c;
--light: #303030;
--medium-light: var(--secondary);
--dark: #dee2e6;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;

View file

@ -19,6 +19,7 @@
--warning: #ffc107;
--danger: #873208;
--light: #f8f9fa;
--medium-light: var(--bs-gray-300);
--dark: #343a40;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;

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

View file

@ -1,4 +1,5 @@
import autosize from "autosize";
import classNames from "classnames";
import { NoOptionI18nKeys } from "i18next";
import { Component, linkEvent } from "inferno";
import { Language } from "lemmy-js-client";
@ -144,47 +145,19 @@ 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="col-12">
<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">
className="rounded bg-light overflow-hidden"
style={{
border: "1px solid var(--medium-light)",
}}
>
<div
className="d-flex flex-wrap"
style={{
"border-bottom": "1px solid var(--medium-light)",
}}
>
{this.getFormatButton("bold", this.handleInsertBold)}
{this.getFormatButton("italic", this.handleInsertItalic)}
{this.getFormatButton("link", this.handleInsertLink)}
@ -213,7 +186,9 @@ export class MarkdownTextArea extends Component<
name="file"
className="d-none"
multiple
disabled={!UserService.Instance.myUserInfo || this.isDisabled}
disabled={
!UserService.Instance.myUserInfo || this.isDisabled
}
onChange={linkEvent(this, this.handleImageUpload)}
/>
</form>
@ -226,7 +201,10 @@ export class MarkdownTextArea extends Component<
{this.getFormatButton("list", this.handleInsertList)}
{this.getFormatButton("code", this.handleInsertCode)}
{this.getFormatButton("subscript", this.handleInsertSubscript)}
{this.getFormatButton("superscript", this.handleInsertSuperscript)}
{this.getFormatButton(
"superscript",
this.handleInsertSuperscript
)}
{this.getFormatButton("spoiler", this.handleInsertSpoiler)}
<a
href={markdownHelpUrl}
@ -238,7 +216,52 @@ export class MarkdownTextArea extends Component<
</a>
</div>
<div className="col-sm-12 d-flex align-items-center flex-wrap">
<div>
<textarea
id={this.id}
className={classNames("form-control border-0 rounded-0", {
"d-none": this.state.previewMode,
})}
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>
<div className="col-12 d-flex align-items-center flex-wrap mt-2">
{this.props.showLanguage && (
<LanguageSelect
iconVersion
@ -258,7 +281,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 ? (
@ -271,7 +294,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")}
@ -279,7 +302,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)}