Project:
View Issue Details[ Jump to Notes ] | [ Issue History ] [ Print ] | |||||||
ID | ||||||||
0034593 | ||||||||
Type | Category | Severity | Reproducibility | Date Submitted | Last Update | |||
design defect | [Retail Modules] Web POS | minor | always | 2016-11-22 11:31 | 2016-12-23 16:11 | |||
Reporter | dbaz | View Status | public | |||||
Assigned To | migueldejuana | |||||||
Priority | high | Resolution | fixed | Fixed in Version | RR17Q1 | |||
Status | closed | Fix in branch | Fixed in SCM revision | 67da945e519a | ||||
Projection | none | ETA | none | Target Version | ||||
OS | Any | Database | Any | Java version | ||||
OS Version | Database version | Ant version | ||||||
Product Version | SCM revision | |||||||
Review Assigned To | guilleaer | |||||||
Regression level | ||||||||
Regression date | ||||||||
Regression introduced in release | ||||||||
Regression introduced by commit | ||||||||
Triggers an Emergency Pack | No | |||||||
Summary | 0034593: [UX] Pay button text should be adapted to the button width | |||||||
Description | Pay 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 Reproduce | Set 393x700 screen resolution and add lots of products to the receipt to make the amount to pay very big. | |||||||
Proposed Solution | There 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. | |||||||
Tags | No tags attached. | |||||||
Attached Files | PayButton_Current_1.png [^] (60,184 bytes) 2016-11-22 11:31
PayButton_Current_2.png [^] (63,465 bytes) 2016-11-22 11:32 PayButton_Desired.png [^] (61,524 bytes) 2016-11-22 11:32 PayButton_Desired_2.png [^] (60,900 bytes) 2016-11-22 13:48 iconPay.png [^] (335 bytes) 2016-11-22 13:49 org.openbravo.mobile.core.diff [^] (2,422 bytes) 2016-12-20 23:41 [Show Content] org.openbravo.retail.posterminal.diff [^] (720 bytes) 2016-12-20 23:41 [Show Content] | |||||||
Relationships [ Relation Graph ] [ Dependency Graph ] | |||||||||||||||
|
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 |