LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

SimpleMDE: Add character-count display and standardize look with basic editor's.

Browse source
This commit is contained in:
infiinte-persistence 2020-06-13 05:58:53 +02:00 committed by Sean Yesmunt
parent 805904360e
commit fe431c30a7
2 changed files with 19 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
ui/component/common/form-components/form-field.jsx
View file

@ -154,6 +154,15 @@ export class FormField extends React.PureComponent<Props> {
});
};
// Ideally, the character count should (and can) be appended to the
// SimpleMDE's "options::status" bar. However, I couldn't figure out how
// to pass the current value to it's callback, nor query the current
// text length from the callback. So, we'll use our own widget.
const hasCharCount = charCount !== undefined && charCount >= 0;
const countInfo = hasCharCount && (
<span className="comment__char-count-mde">{`${charCount || '0'}/${textAreaMaxLength}`}</span>
);
input = (
<div className="form-field--SimpleMDE" onContextMenu={stopContextMenu}>
<fieldset-section>
@ -178,6 +187,7 @@ export class FormField extends React.PureComponent<Props> {
},
}}
/>
{countInfo}
</fieldset-section>
</div>
);

10
ui/scss/component/_comments.scss
View file

@ -78,7 +78,15 @@
.comment__char-count {
align-self: flex-end;
font-size: var(--font-small);
font-size: var(--font-xsmall);
padding-top: var(--spacing-xs);
}
.comment__char-count-mde {
align-self: flex-end;
font-size: var(--font-xsmall);
padding-right: var(--spacing-xs); // Align with SimpleMDE's status bar
padding-bottom: 0;
}
.comment__menu-option {