editable-text min/max-lines attributes (#3649)

- min/max-lines attribute on editable-text determines how tall the field
can/has to be
- if max-lines is not specified (or is below 1), the textarea will expand
as much as needed without overflow
- removed hardcoded height and variables from css, substituted them with
usage of these attributes for consistency
- No fields have any max-lines at this point, so all fields will expand as
needed
This commit is contained in:
abaevbog 2024-02-02 03:53:23 -05:00 committed by GitHub
parent c10dabcbba
commit 4a3a80b4f8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 49 additions and 26 deletions

View file

@ -41,7 +41,9 @@
'aria-labelledby',
'value',
'nowrap',
'autocomplete'
'autocomplete',
'min-lines',
'max-lines'
];
get noWrap() {
@ -52,6 +54,15 @@
this.toggleAttribute('nowrap', noWrap);
}
get minLines() {
return this.getAttribute('min-lines') || 0;
}
get maxLines() {
return this.getAttribute('max-lines') || 0;
}
get multiline() {
return this.hasAttribute('multiline');
}
@ -266,6 +277,20 @@
}
this._input.readOnly = this.readOnly;
this._input.placeholder = this.placeholder;
if (this._input.tagName == "textarea") {
// Reset to initial state
this.style.removeProperty("--min-visible-lines");
this.style.removeProperty("--max-visible-lines");
// Set how tall the textarea can/must be
if (this.minLines > 0) {
this.style.setProperty("--min-visible-lines", this.minLines);
}
if (this.maxLines > 0) {
this.style.setProperty("--max-visible-lines", this.maxLines);
}
}
if (this.ariaLabel.length) {
this._input.setAttribute('aria-label', this.ariaLabel);
}

View file

@ -1629,6 +1629,11 @@
async showEditor(elem) {
Zotero.debug(`Showing editor for ${elem.getAttribute('fieldname')}`);
var fieldName = elem.getAttribute('fieldname');
// Multiline field will be at least 6 lines
if (Zotero.ItemFields.isMultiline(fieldName)) {
elem.setAttribute("min-lines", 6);
}
var [field, creatorIndex, creatorField] = fieldName.split('-');
let value;
if (field == 'creator') {
@ -1977,6 +1982,10 @@
var fieldName = textbox.getAttribute('fieldname');
// Multiline fields go back to occupying as much space as needed
if (Zotero.ItemFields.isMultiline(fieldName)) {
textbox.setAttribute("min-lines", 1);
}
var value = textbox.value.trim();
var [field, creatorIndex, creatorField] = fieldName.split('-');

View file

@ -161,10 +161,6 @@
// allow input to be shrunk by other elements when the itemBox is narrow
min-width: 0;
}
// keep multiline fields as tall as they have to be unless they're focused
&[multiline] textarea:not(:focus) {
min-height: 1em;
}
}
.meta-label {

View file

@ -9,17 +9,9 @@
}
editable-text {
--min-visible-lines: 0;
--max-visible-lines: 6;
&[multiline] {
--min-visible-lines: 5;
--max-visible-lines: 20;
}
&[nowrap] {
--min-visible-lines: 1;
}
// Default variables overriden by max-lines, min-lines attribute
--min-visible-lines: 1;
--max-visible-lines: 1;
&[tight] {
@include comfortable {
@ -56,16 +48,23 @@ editable-text {
font: inherit;
line-height: inherit;
overflow: hidden;
scrollbar-gutter: stable;
}
&:not([nowrap])::after, &:not([nowrap]) .input {
grid-area: 1 / 1 / 2 / 2;
overflow-wrap: anywhere;
white-space: pre-wrap;
max-height: calc(2ex * var(--max-visible-lines));
// Somehow this hides scroll arrows on windows when the content is short or empty
scrollbar-width: thin;
scrollbar-width: none;
}
&[max-lines] {
&::after, .input {
max-height: calc(2ex * var(--max-visible-lines));
scrollbar-width: auto;
}
&::after {
scrollbar-gutter: stable;
}
}
.input {
@ -104,12 +103,6 @@ editable-text {
color: var(--fill-tertiary);
}
}
&[multiline] {
.input {
min-height: 5em;
}
}
&[nowrap] {
.input:not(:focus, :hover) {
text-overflow: ellipsis;