Openbravo Issue Tracking System - Retail Modules
View Issue Details
IDProjectCategoryView StatusDate SubmittedLast Update
0034593Retail ModulesWeb POSpublic2016-11-22 11:312016-12-23 16:11
Reporterdbaz 
Assigned Tomigueldejuana 
PriorityhighSeverityminorReproducibilityalways
StatusclosedResolutionfixed 
PlatformOS5OS Version
Product Version 
Target VersionFixed in VersionRR17Q1 
Merge Request Status
Review Assigned Toguilleaer
OBNetwork customer
Support ticket
Regression level
Regression date
Regression introduced in release
Regression introduced by commit
Triggers an Emergency PackNo
Summary0034593: [UX] Pay button text should be adapted to the button width
DescriptionPay button text should be adapted to the button width.

Right now, due to the liquid layout of the WebPOS, the pay button can have different widths. Also, the amount to pay can have an undefined number of digits.

The idea is that this button text decrease its font-size if the text (the amount) cannot be in a single line.

The maximum font-size of this button should be the current font-size, that is 30px.

If the font-size would need to be below 16px, it means that the text is not readable enough anymore, so the whole number should be changed by a 'shopping cart' image.

Also, the margin of the text of this button is set as "0px 5px 0px 0px" and it should be "0px 5px 0px 5px"
Steps To ReproduceSet 393x700 screen resolution and add lots of products to the receipt to make the amount to pay very big.
Proposed SolutionThere is no way to do this using only CSS3. Javascript needs to be used.

I have prepared an example, that, of course, needs to be adapted to the WebPOS buttons constructor:

https://jsfiddle.net/0c84u0rg/1/ [^]

In the (near?) future it is possible that this text adjustment needs to be implemented in more buttons, so the solution should have generic enough to be applied programatically to any WebPOS button.

PS: Notice that is should work also when the browser is resized and when the amount of the pay button changes.
Additional Information
TagsNo tags attached.
Relationships
related to defect 0034820 new Retail [UX] A shopping Cart should be shown in the "Total to pay" Button when the amount is very high and it cannot be properly shown 
blocks defect 0034538 closed Retail Big total amounts on WebPOS are breaking the layout 
Attached Filespng PayButton_Current_1.png (60,184) 2016-11-22 11:31
https://issues.openbravo.com/file_download.php?file_id=10087&type=bug
png

png PayButton_Current_2.png (63,465) 2016-11-22 11:32
https://issues.openbravo.com/file_download.php?file_id=10088&type=bug
png

png PayButton_Desired.png (61,524) 2016-11-22 11:32
https://issues.openbravo.com/file_download.php?file_id=10089&type=bug
png

png PayButton_Desired_2.png (60,900) 2016-11-22 13:48
https://issues.openbravo.com/file_download.php?file_id=10090&type=bug
png

png iconPay.png (335) 2016-11-22 13:49
https://issues.openbravo.com/file_download.php?file_id=10091&type=bug
png

diff org.openbravo.mobile.core.diff (2,422) 2016-12-20 23:41
https://issues.openbravo.com/file_download.php?file_id=10199&type=bug
diff org.openbravo.retail.posterminal.diff (720) 2016-12-20 23:41
https://issues.openbravo.com/file_download.php?file_id=10200&type=bug
Issue History
Date ModifiedUsernameFieldChange
2016-11-22 11:31dbazNew Issue
2016-11-22 11:31dbazAssigned To => Retail
2016-11-22 11:31dbazTriggers an Emergency Pack => No
2016-11-22 11:31dbazFile Added: PayButton_Current_1.png
2016-11-22 11:32dbazFile Added: PayButton_Current_2.png
2016-11-22 11:32dbazFile Added: PayButton_Desired.png
2016-11-22 11:32dbazNote Added: 0091731
2016-11-22 11:33dbazRelationship addedblocks 0034538
2016-11-22 12:37dbazProposed Solution updated
2016-11-22 12:39dbazDescription Updatedbug_revision_view_page.php?rev_id=13863#r13863
2016-11-22 13:48dbazIssue Monitored: dbaz
2016-11-22 13:48dbazFile Added: PayButton_Desired_2.png
2016-11-22 13:49dbazFile Added: iconPay.png
2016-11-22 13:51dbazDescription Updatedbug_revision_view_page.php?rev_id=13864#r13864
2016-11-22 17:37mario_castelloAssigned ToRetail => mario_castello
2016-11-22 17:37mario_castelloStatusnew => acknowledged
2016-11-23 16:00mario_castelloStatusacknowledged => scheduled
2016-12-05 22:28hgbotCheckin
2016-12-05 22:28hgbotNote Added: 0092100
2016-12-05 22:32hgbotCheckin
2016-12-05 22:32hgbotNote Added: 0092103
2016-12-05 22:32hgbotStatusscheduled => resolved
2016-12-05 22:32hgbotResolutionopen => fixed
2016-12-05 22:32hgbotFixed in SCM revision => http://code.openbravo.com/erp/pmods/org.openbravo.retail.posterminal/rev/ece5134fa651dee6196c537306d1e3e52ae1520c [^]
2016-12-05 22:34mario_castelloNote Edited: 0092100bug_revision_view_page.php?bugnote_id=0092100#r13957
2016-12-07 11:49dbazNote Added: 0092171
2016-12-07 11:49dbazStatusresolved => new
2016-12-07 11:49dbazResolutionfixed => open
2016-12-14 15:20mario_castelloStatusnew => acknowledged
2016-12-14 15:20mario_castelloStatusacknowledged => scheduled
2016-12-14 17:24migueldejuanaNote Added: 0092371
2016-12-14 17:27migueldejuanaNote Edited: 0092371bug_revision_view_page.php?bugnote_id=0092371#r13995
2016-12-15 08:52hgbotCheckin
2016-12-15 08:52hgbotNote Added: 0092393
2016-12-15 08:52hgbotStatusscheduled => resolved
2016-12-15 08:52hgbotResolutionopen => fixed
2016-12-15 08:52hgbotFixed in SCM revisionhttp://code.openbravo.com/erp/pmods/org.openbravo.retail.posterminal/rev/ece5134fa651dee6196c537306d1e3e52ae1520c [^] => http://code.openbravo.com/erp/pmods/org.openbravo.mobile.core/rev/0e716fc678a1f6362f2202077531db4d707bfecc [^]
2016-12-15 08:53hgbotCheckin
2016-12-15 08:53hgbotNote Added: 0092394
2016-12-15 08:53hgbotFixed in SCM revisionhttp://code.openbravo.com/erp/pmods/org.openbravo.mobile.core/rev/0e716fc678a1f6362f2202077531db4d707bfecc [^] => http://code.openbravo.com/erp/pmods/org.openbravo.retail.posterminal/rev/09b48309b0279eaddd9e5a1351202cf6492a36f2 [^]
2016-12-15 08:53hgbotCheckin
2016-12-15 08:53hgbotNote Added: 0092396
2016-12-15 08:53hgbotFixed in SCM revisionhttp://code.openbravo.com/erp/pmods/org.openbravo.retail.posterminal/rev/09b48309b0279eaddd9e5a1351202cf6492a36f2 [^] => http://code.openbravo.com/erp/pmods/org.openbravo.retail.posterminal/rev/67da945e519aa0fe90299039d40d52537d37c360 [^]
2016-12-20 13:54marvintmReview Assigned To => marvintm
2016-12-20 13:54marvintmStatusresolved => closed
2016-12-20 13:54marvintmFixed in Version => RR17Q1
2016-12-20 16:52dbazNote Added: 0092865
2016-12-20 16:52dbazStatusclosed => new
2016-12-20 16:52dbazResolutionfixed => open
2016-12-20 16:52dbazFixed in VersionRR17Q1 =>
2016-12-20 23:41dbazNote Added: 0092879
2016-12-20 23:41dbazFile Added: org.openbravo.mobile.core.diff
2016-12-20 23:41dbazFile Added: org.openbravo.retail.posterminal.diff
2016-12-23 11:46guilleaerRelationship addedrelated to 0034820
2016-12-23 11:47guilleaerNote Added: 0092967
2016-12-23 13:45guilleaerStatusnew => scheduled
2016-12-23 13:46guilleaerAssigned Tomario_castello => migueldejuana
2016-12-23 13:47guilleaerNote Added: 0092974
2016-12-23 13:47guilleaerStatusscheduled => resolved
2016-12-23 13:47guilleaerFixed in Version => RR17Q1
2016-12-23 13:47guilleaerResolutionopen => fixed
2016-12-23 14:30guilleaerNote Added: 0092978
2016-12-23 15:09marvintmReview Assigned Tomarvintm => guilleaer
2016-12-23 16:11guilleaerStatusresolved => closed

Notes
(0091731)
dbaz   
2016-11-22 11:32   
Attached screenshots.
(0092100)
hgbot   
2016-12-05 22:28   
(edited on: 2016-12-05 22:34)
Repository: erp/pmods/org.openbravo.mobile.core
Changeset: 9a34be49024441e293059ffe33cb680864882d6c
Author: Mario Castello <mario.castello <at> peoplewalking.com>
Date: Fri Dec 02 13:10:41 2016 -0600
URL: http://code.openbravo.com/erp/pmods/org.openbravo.mobile.core/rev/9a34be49024441e293059ffe33cb680864882d6c [^]

Verifies issue 0034593: [UX] Pay button text should be adapted to the button width

- Refactoring the function calculateFontSizes:
- Added array of items
- Changed the values for maxHeight, maxFontSize and minFontSize

---
M web/org.openbravo.mobile.core/source/utils/ob-utilitiesui.js
---
(0092103)
hgbot   
2016-12-05 22:32   
Repository: erp/pmods/org.openbravo.retail.posterminal
Changeset: ece5134fa651dee6196c537306d1e3e52ae1520c
Author: Mario Castello <mario.castello <at> peoplewalking.com>
Date: Fri Dec 02 13:11:05 2016 -0600
URL: http://code.openbravo.com/erp/pmods/org.openbravo.retail.posterminal/rev/ece5134fa651dee6196c537306d1e3e52ae1520c [^]

Fixed issue 0034593: [UX] Pay button text should be adapted to the button width

- Added marging and padding
- Call function OB.UTIL.calculateFontSizes

---
M web/org.openbravo.retail.posterminal/js/components/modalreceipts.js
M web/org.openbravo.retail.posterminal/js/pointofsale/view/toolbar-left.js
---
(0092171)
dbaz   
2016-12-07 11:49   
Three problems:

The price should be centered within the button. Now it is not happening if the font-size is calculated. Maybe because this function is not taking into account the 5px margin of the text.

There is a glitch when the font-size is calculated, and it is shown during few milliseconds the two rows price, and then converted to the proper font-size. Maybe the solution is just set 'display: hidden' in the text while executing calculate font-size function.

The issue description says 'If the font-size would need to be below 16px, it means that the text is not readable enough anymore, so the whole number should be changed by a 'shopping cart' image', and it has not been implemented. The icon is attached to this issue (iconPay.png)

Video showing the three problems: http://screencast.com/t/2FrdfWNIzsbB [^]
(0092371)
migueldejuana   
2016-12-14 17:24   
(edited on: 2016-12-14 17:27)
The issue description says 'If the font-size would need to be below 16px, it means that the text is not readable enough anymore, so the whole number should be changed by a 'shopping cart' image', and it has not been implemented. The icon is attached to this issue (iconPay.png)
* In Resolution 393x700 the font size is 17px, it can be reader better than order line numbers, there is no need to put an icon now. I like the idea, I would include it as a part of a global change to fix all resolution problems.


There is a glitch when the font-size is calculated, and it is shown during few milliseconds the two rows price, and then converted to the proper font-size. Maybe the solution is just set 'display: hidden' in the text while executing calculate font-size function.
* Enyo render the number in 2 lines before resizing the font, there is not enough hidding while resizing. It happens for all resized font in the ui, it has not a simple solution and we will try to solve in the future as a global solution for all components.
(0092393)
hgbot   
2016-12-15 08:52   
Repository: erp/pmods/org.openbravo.mobile.core
Changeset: 0e716fc678a1f6362f2202077531db4d707bfecc
Author: Miguel de Juana <miguel.dejuana <at> openbravo.com>
Date: Wed Dec 14 16:00:20 2016 +0100
URL: http://code.openbravo.com/erp/pmods/org.openbravo.mobile.core/rev/0e716fc678a1f6362f2202077531db4d707bfecc [^]

Fixed issue 0034593: [UX] Pay button text should be adapted to the button width

- Use debounce function of underscore to just execute once the function, replacing created function
- Always take maxWidth when font is maxSize

---
M web/org.openbravo.mobile.core/source/utils/ob-utilitiesui.js
---
(0092394)
hgbot   
2016-12-15 08:53   
Repository: erp/pmods/org.openbravo.retail.posterminal
Changeset: 09b48309b0279eaddd9e5a1351202cf6492a36f2
Author: Miguel de Juana <miguel.dejuana <at> openbravo.com>
Date: Wed Dec 14 15:57:01 2016 +0100
URL: http://code.openbravo.com/erp/pmods/org.openbravo.retail.posterminal/rev/09b48309b0279eaddd9e5a1351202cf6492a36f2 [^]

Fixed issue 0034593: [UX] Pay button text should be adapted to the button width

- Change total component to work properly with resize window

---
M web/org.openbravo.retail.posterminal/js/pointofsale/view/toolbar-left.js
---
(0092396)
hgbot   
2016-12-15 08:53   
Repository: erp/pmods/org.openbravo.retail.posterminal
Changeset: 67da945e519aa0fe90299039d40d52537d37c360
Author: Miguel de Juana <miguel.dejuana <at> openbravo.com>
Date: Wed Dec 14 17:08:54 2016 +0100
URL: http://code.openbravo.com/erp/pmods/org.openbravo.retail.posterminal/rev/67da945e519aa0fe90299039d40d52537d37c360 [^]

Fixed issue 0034593: [UX] Pay button text should be adapted to the button width

- Remove unneeded code

---
M web/org.openbravo.retail.posterminal/js/components/modalreceipts.js
---
(0092865)
dbaz   
2016-12-20 16:52   
>In Resolution 393x700 the font size is 17px, it can be reader better than order line numbers, there is no need to put an icon now. I like the idea, I would include it as a part of a global change to fix all resolution problems.

It is needed for this issue, because this issue is the one that should handle all resolution problems related with the Pay Button.
Currently there are modules that add an extra button in the green top bar, so we have a result like 'PayButton_Desired_2.png', and also, in countries with currency devaluation, it is possible to get this point.

http://screencast.com/t/FTeuaSgv2M [^]
(0092879)
dbaz   
2016-12-20 23:41   
Another point. The function "calculateFontSizes", probably will be properly named as "adaptFontSize", since it not only calculate the font, but also to implement it, and only one element per call.

Also, it would be nice to add a new parameter 'minLengthForCalc' in order to avoid the hardcoded 'currentTextObj.textContent.length >= 10'

Attached diffs with proposal:
* org.openbravo.mobile.core.diff
* org.openbravo.retail.posterminal.diff
(0092967)
guilleaer   
2016-12-23 11:47   
New issue created to show the "Shopping cart" icon proposed by dbaz.

https://issues.openbravo.com/view.php?id=34820 [^]
(0092974)
guilleaer   
2016-12-23 13:47   
Suggestions done by dbaz about function names are already resolved with this commit:
https://code.openbravo.com/erp/pmods/org.openbravo.mobile.core/rev/1dff56facf9b [^]
(0092978)
guilleaer   
2016-12-23 14:30   
Issue reported by dbaz in this video http://www.screencast.com/t/FTeuaSgv2M [^] is also fixed by this commit:
https://code.openbravo.com/erp/pmods/org.openbravo.mobile.core/rev/1dff56facf9b [^]