[MGNLUI-3296] Show remaining length on input fields Created: 15/Dec/14  Updated: 06/Aug/15  Resolved: 17/Apr/15

Status: Closed
Project: Magnolia UI
Component/s: dialogs, user interaction
Affects Version/s: 5.3.5
Fix Version/s: 5.3.9

Type: Improvement Priority: Neutral
Reporter: Stefan Jahn Assignee: Christoph Meier
Resolution: Fixed Votes: 1
Labels: 5.3.9, support, ux
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: Java Source File ExtendedTextField.java     Text File ExtendedTextFieldDefinition.java     Java Source File ExtendedTextFieldFactory.java     PNG File availableLength.png    
Issue Links:
relation
Template:
Patch included:
Yes
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Date of First Response:

 Description   

Use case:
as an editor i want to know how many signs left when there is a hard or soft border of signs in an input field.

The recommended length is useful because sometimes you will not restrict the editor to a hard limit. We needed this recommendation so that the design is still looking good on mobile devices and the text doesn't broke it too much.

This feature works with TextField and TextArea. I didn't try with a richTextEditor.
An also nice feature would be an async implementation for updating the value of the label.

I included the necessary java implementation files, 1 screenshot and here a small adjustment for css.

.extended-textfield-label

{ text-align: right; color: #666666; white-space: nowrap; line-height: 25px; right: 2px; position: relative; font-size: 10px; top: -12px; height: 18px; }

 Comments   
Comment by Mikaël Geljić [ 19/Feb/15 ]

Hi Stefan,

This was indeed validated by UX group; we will simply make it a Vaadin Extension (not an extended field). This allows for nicer composition in the field factory, and has a lower component/layout foot-print.

Thanks for the work!

Comment by Stefan Jahn [ 30/Mar/15 ]

Hi,
i added a new version of the ExtendedTextField. In the old version there was a bug (it didn't read the maxValue property correct)

Comment by Christoph Meier [ 02/Apr/15 ]

As proposed above vaadin extension has been implemented (extending com.vaadin.server.AbstractExtension).
The new extension MaxLengthIndicator can be applied to an AbstractTextField. In the magnolia context it is applied automatically if TextFieldDefinition has set a maxLength.

Comment by Christoph Meier [ 02/Apr/15 ]

Commit is on branch "MGNLUI-3296_v2"

Comment by Aleksandr Pchelintcev [ 15/Apr/15 ]

Some things worth considering:

  • getLastSibbling() method looks redundant to me - wouldn't textWidget.getElement().getParentElement().appendChild(indicatorElem); do the trick? (also "sibling" has only one B =))
  • MaxLengthIndicatorConnector#onUnregister method should be implemented for the case when the extension is removed from the server-side.
  • "// No way found to remove the eventListener from the textWidget element." - when registering and event handler an instance of com.google.gwt.event.shared.HandlerRegistration is returned, you can remove the event listener via it.
  • Ideally the extension should add a state change listener to the parent connector (via addStateChangeHandler) in order to detect the change of max length.
Comment by Christoph Meier [ 17/Apr/15 ]

Improvements added according to review.

Generated at Mon Feb 12 09:05:11 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.