diff --git a/css/80_app.css b/css/80_app.css index 998ed6bba..49fba507d 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -2338,6 +2338,7 @@ div.combobox { .form-field-input-wrap > input:focus + span.length-indicator-wrap, .form-field-input-wrap > textarea:focus + span.length-indicator-wrap, +.form-field-input-wrap > input:focus + div.combobox-caret + span.length-indicator-wrap, .form-field-input-wrap > textarea:focus + div.combobox-caret + span.length-indicator-wrap { visibility: visible; } diff --git a/data/core.yaml b/data/core.yaml index 481f2b3cc..aaff253bf 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -782,7 +782,7 @@ en: foot: ft # abbreviation of inches inch: in - max_length_reached: "Please keep in mind that texts cannot be longer than a maximum of {maxChars} characters. Anything exceeding that length will be truncated." + max_length_reached: "This string is longer than the maximum length of {maxChars} characters. Anything exceeding that length will be truncated." background: title: Background description: Background Settings diff --git a/modules/ui/fields/combo.js b/modules/ui/fields/combo.js index d27198bdd..27dc5a965 100644 --- a/modules/ui/fields/combo.js +++ b/modules/ui/fields/combo.js @@ -12,6 +12,7 @@ import { svgIcon } from '../../svg/icon'; import { utilKeybinding } from '../../util/keybinding'; import { utilArrayUniq, utilGetSetValue, utilNoAuto, utilRebind, utilTotalExtent, utilUnicodeCharsCount } from '../../util'; +import { uiLengthIndicator } from '../length_indicator'; export { uiFieldCombo as uiFieldManyCombo, @@ -52,6 +53,7 @@ export function uiFieldCombo(field, context) { var _container = d3_select(null); var _inputWrap = d3_select(null); var _input = d3_select(null); + var _lengthIndicator = uiLengthIndicator(context.maxCharsForTagValue()); var _comboData = []; var _multiData = []; var _entityIDs = []; @@ -447,6 +449,8 @@ export function uiFieldCombo(field, context) { .call(initCombo, selection) .merge(_input); + _container.call(_lengthIndicator); + if (_isNetwork) { var extent = combinedEntityExtent(); var countryCode = extent && countryCoder.iso1A2Code(extent.center()); @@ -457,7 +461,9 @@ export function uiFieldCombo(field, context) { .on('change', change) .on('blur', change) .on('input', function() { - updateIcon(utilGetSetValue(_input)); + const val = utilGetSetValue(_input); + updateIcon(val); + _lengthIndicator.update(val); }); _input @@ -688,6 +694,10 @@ export function uiFieldCombo(field, context) { if (!Array.isArray(tags[field.key])) { updateIcon(tags[field.key]); } + + if (!isMixed) { + _lengthIndicator.update(tags[field.key]); + } } };