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:
parent
c10dabcbba
commit
4a3a80b4f8
4 changed files with 49 additions and 26 deletions
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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('-');
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue