[MGNLUI-3604] Maximized text area field hides button, causing usability problem Created: 24/Sep/15  Updated: 31/May/16  Resolved: 20/Nov/15

Status: Closed
Project: Magnolia UI
Component/s: forms, user interaction
Affects Version/s: 5.4.2
Fix Version/s: 5.4.4

Type: Bug Priority: Neutral
Reporter: Andreas Weder Assignee: Sang Ngo Huu
Resolution: Fixed Votes: 0
Labels: next, quickwin, support, usability, ux
Remaining Estimate: 0d
Time Spent: 8d 7.5h
Original Estimate: 4d

Attachments: PNG File 1 Full screen.current.png     PNG File 2 Full screen.shouldbe.png    
Issue Links:
Cloners
is cloned by MGNLUI-3899 CLONE - Maximized text area fields hi... Closed
dependency
Template:
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)
Bug DoR:
[ ]* Steps to reproduce, expected, and actual results filled
[ ]* Affected version filled
Date of First Response:
Sprint: Basel 19
Story Points: 8

 Description   

If you maximize a text area, it hides the main buttons "save" and "cancel". Some users are unaware that they have to minimize the text area again, in order to save their changes. They click on the "x" of a dialog to close it. This cancels all changes without asking for confirmation, causing users to loose their work.

I suggest we do the following:

  1. We keep showing the buttons at the bottom edge of the visible area (see attachment), even if a text input area is maximized.
  2. When the user hits one of the buttons, we first minimize the full-height text input area again, then validate the input fields. This way, we can show warnings and errors using existing means.

Ideally, we would also show a confirmation message if the user hits "cancel" or the "x", as we already do when the user hits "ESCAPE". However, I would only add this once we're able to properly detect if a form has non-saved data, and we can't do that currently (see MGNLUI-2884).



 Comments   
Comment by Sang Ngo Huu [ 28/Oct/15 ]

Hi ejervidalo
There is my investigate:

For the suggestion:
We keep showing the buttons at the bottom edge of the visible area (see attachment), even if a text input area is maximized.

I will fix in info.magnolia.ui.vaadin.gwt.client.richtext.TextAreaStretcherConnector. Please see the patch for more detail:
https://gist.github.com/ngohuusang/796b010f72cfcf3891b6

I'm still investigate the suggestion:
When the user hits one of the buttons, we first minimize the full-height text input area again, then validate the input fields. This way, we can show warnings and errors using existing means.

Comment by Aleksandr Pchelintcev [ 28/Oct/15 ]

sang.ngo I quickly went through the patch and gave it a shot:
1) The visuals with the patch aren't aligned properly for me: https://monosnap.com/file/gHu3YFRXS55P7u7ri9GsL9XwrzJDhW
2) The solution is okay iirc logically - it can't be polished perfectly code-wise since the whole extension is hack that plays around with other components' sizes.
– but pls make sure that it works correctly with plain text areas, ckeditors and aceeditors
3) "When the user hits one of the buttons, we first minimize the full-height text input area again, then validate the input fields. This way, we can show warnings and errors using existing means." is not possible to have with current API's. I suggest that in order to avoid new ugly things in the code base - we don't implement it now or find an alternative.

Comment by Sang Ngo Huu [ 02/Nov/15 ]

Hi apchelintcev,

Thanks for your comments!

Regarding patch file, I want to get approval for the approach first, then the completed code will be provided after.

For 3) "When the user hits one of the buttons, we first minimize the full-height text input area again, then validate the input fields. This way, we can show warnings and errors using existing means.", I didn't implement exactly which user want to have due to API limited, but I still support when user click on help button to get description message, or number of errorAmounts is changed, the full-height text will be minimized. I think it is meanful for user.

I created PR, please help me take a look.

Comment by Sang Ngo Huu [ 06/Nov/15 ]

I provided new fix for ticket as patch https://gist.github.com/ngohuusang/796b010f72cfcf3891b6, TextArea and Code editor worked fine, but I still stuck on RichTextArea. The error faced when configuring RichTextArea in form.

Thu Nov 05 14:58:03 GMT+700 2015 com.vaadin.client.ApplicationConfiguration
SEVERE: undefinedjava.lang.ClassCastException
	at Unknown.Ig(info.magnolia.widgetset.MagnoliaWidgetSet-0.js)
	at Unknown.Qg(info.magnolia.widgetset.MagnoliaWidgetSet-0.js)
	at Unknown.gze(info.magnolia.widgetset.MagnoliaWidgetSet-0.js)
	at Unknown.kD(info.magnolia.widgetset.MagnoliaWidgetSet-0.js)
	at Unknown.fbe(info.magnolia.widgetset.MagnoliaWidgetSet-0.js)
	at Unknown.QTb(info.magnolia.widgetset.MagnoliaWidgetSet-0.js)
	at Unknown.ITb(info.magnolia.widgetset.MagnoliaWidgetSet-0.js)
	at Unknown.WTb(info.magnolia.widgetset.MagnoliaWidgetSet-0.js)
	at Unknown.aSb(info.magnolia.widgetset.MagnoliaWidgetSet-0.js)
	at Unknown.aUb(info.magnolia.widgetset.MagnoliaWidgetSet-0.js)
	at Unknown.dUb(info.magnolia.widgetset.MagnoliaWidgetSet-0.js)
	at Unknown.YZb(info.magnolia.widgetset.MagnoliaWidgetSet-0.js)
	at Unknown.k$b(info.magnolia.widgetset.MagnoliaWidgetSet-0.js)
	at Unknown.eval(info.magnolia.widgetset.MagnoliaWidgetSet-0.js)
	at Unknown.pi(info.magnolia.widgetset.MagnoliaWidgetSet-0.js)
	at Unknown.si(info.magnolia.widgetset.MagnoliaWidgetSet-0.js)
	at Unknown.eval(info.magnolia.widgetset.MagnoliaWidgetSet-0.js)

I'm still investigate

Comment by Sang Ngo Huu [ 10/Nov/15 ]

The error come from MGNLUI-3620, thanks apchelintcev for pointing it out.

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