Anonymous | Login
Project:
RSS
  
News | My View | View Issues | Roadmap | Summary

View Issue DetailsJump to Notes ] Issue History ] Print ]
ID
0034593
TypeCategorySeverityReproducibilityDate SubmittedLast Update
design defect[Retail Modules] Web POSminoralways2016-11-22 11:312016-12-23 16:11
ReporterdbazView Statuspublic 
Assigned Tomigueldejuana 
PriorityhighResolutionfixedFixed in VersionRR17Q1
StatusclosedFix in branchFixed in SCM revision67da945e519a
ProjectionnoneETAnoneTarget Version
OSAnyDatabaseAnyJava version
OS VersionDatabase versionAnt version
Product VersionSCM revision 
Review Assigned Toguilleaer
Regression level
Regression date
Regression introduced in release
Regression introduced by commit
Triggers an Emergency PackNo
Summary

0034593: [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.
TagsNo tags attached.
Attached Filespng file icon PayButton_Current_1.png [^] (60,184 bytes) 2016-11-22 11:31


png file icon PayButton_Current_2.png [^] (63,465 bytes) 2016-11-22 11:32


png file icon PayButton_Desired.png [^] (61,524 bytes) 2016-11-22 11:32


png file icon PayButton_Desired_2.png [^] (60,900 bytes) 2016-11-22 13:48


png file icon iconPay.png [^] (335 bytes) 2016-11-22 13:49


diff file icon org.openbravo.mobile.core.diff [^] (2,422 bytes) 2016-12-20 23:41 [Show Content]
diff file icon org.openbravo.retail.posterminal.diff [^] (720 bytes) 2016-12-20 23:41 [Show Content]

- Relationships Relation Graph ] Dependency Graph ]
related to defect 0034820 newRetail [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 closedRetail Big total amounts on WebPOS are breaking the layout 

-  Notes
(0091731)
dbaz (developer)
2016-11-22 11:32

Attached screenshots.
(0092100)
hgbot (developer)
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 (developer)
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 (developer)
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 (developer)
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 (developer)
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 (developer)
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 (developer)
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 (developer)
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 (developer)
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 (manager)
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 (manager)
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 (manager)
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 [^]

- Issue History
Date Modified Username Field Change
2016-11-22 11:31 dbaz New Issue
2016-11-22 11:31 dbaz Assigned To => Retail
2016-11-22 11:31 dbaz Triggers an Emergency Pack => No
2016-11-22 11:31 dbaz File Added: PayButton_Current_1.png
2016-11-22 11:32 dbaz File Added: PayButton_Current_2.png
2016-11-22 11:32 dbaz File Added: PayButton_Desired.png
2016-11-22 11:32 dbaz Note Added: 0091731
2016-11-22 11:33 dbaz Relationship added blocks 0034538
2016-11-22 12:37 dbaz Proposed Solution updated
2016-11-22 12:39 dbaz Description Updated View Revisions
2016-11-22 13:48 dbaz Issue Monitored: dbaz
2016-11-22 13:48 dbaz File Added: PayButton_Desired_2.png
2016-11-22 13:49 dbaz File Added: iconPay.png
2016-11-22 13:51 dbaz Description Updated View Revisions
2016-11-22 17:37 mario_castello Assigned To Retail => mario_castello
2016-11-22 17:37 mario_castello Status new => acknowledged
2016-11-23 16:00 mario_castello Status acknowledged => scheduled
2016-12-05 22:28 hgbot Checkin
2016-12-05 22:28 hgbot Note Added: 0092100
2016-12-05 22:32 hgbot Checkin
2016-12-05 22:32 hgbot Note Added: 0092103
2016-12-05 22:32 hgbot Status scheduled => resolved
2016-12-05 22:32 hgbot Resolution open => fixed
2016-12-05 22:32 hgbot Fixed in SCM revision => http://code.openbravo.com/erp/pmods/org.openbravo.retail.posterminal/rev/ece5134fa651dee6196c537306d1e3e52ae1520c [^]
2016-12-05 22:34 mario_castello Note Edited: 0092100 View Revisions
2016-12-07 11:49 dbaz Note Added: 0092171
2016-12-07 11:49 dbaz Status resolved => new
2016-12-07 11:49 dbaz Resolution fixed => open
2016-12-14 15:20 mario_castello Status new => acknowledged
2016-12-14 15:20 mario_castello Status acknowledged => scheduled
2016-12-14 17:24 migueldejuana Note Added: 0092371
2016-12-14 17:27 migueldejuana Note Edited: 0092371 View Revisions
2016-12-15 08:52 hgbot Checkin
2016-12-15 08:52 hgbot Note Added: 0092393
2016-12-15 08:52 hgbot Status scheduled => resolved
2016-12-15 08:52 hgbot Resolution open => fixed
2016-12-15 08:52 hgbot Fixed in SCM revision http://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:53 hgbot Checkin
2016-12-15 08:53 hgbot Note Added: 0092394
2016-12-15 08:53 hgbot Fixed in SCM revision http://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:53 hgbot Checkin
2016-12-15 08:53 hgbot Note Added: 0092396
2016-12-15 08:53 hgbot Fixed in SCM revision http://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:54 marvintm Review Assigned To => marvintm
2016-12-20 13:54 marvintm Status resolved => closed
2016-12-20 13:54 marvintm Fixed in Version => RR17Q1
2016-12-20 16:52 dbaz Note Added: 0092865
2016-12-20 16:52 dbaz Status closed => new
2016-12-20 16:52 dbaz Resolution fixed => open
2016-12-20 16:52 dbaz Fixed in Version RR17Q1 =>
2016-12-20 23:41 dbaz Note Added: 0092879
2016-12-20 23:41 dbaz File Added: org.openbravo.mobile.core.diff
2016-12-20 23:41 dbaz File Added: org.openbravo.retail.posterminal.diff
2016-12-23 11:46 guilleaer Relationship added related to 0034820
2016-12-23 11:47 guilleaer Note Added: 0092967
2016-12-23 13:45 guilleaer Status new => scheduled
2016-12-23 13:46 guilleaer Assigned To mario_castello => migueldejuana
2016-12-23 13:47 guilleaer Note Added: 0092974
2016-12-23 13:47 guilleaer Status scheduled => resolved
2016-12-23 13:47 guilleaer Fixed in Version => RR17Q1
2016-12-23 13:47 guilleaer Resolution open => fixed
2016-12-23 14:30 guilleaer Note Added: 0092978
2016-12-23 15:09 marvintm Review Assigned To marvintm => guilleaer
2016-12-23 16:11 guilleaer Status resolved => closed


Copyright © 2000 - 2009 MantisBT Group
Powered by Mantis Bugtracker