Openbravo Issue Tracking System - Retail Modules
View Issue Details
IDProjectCategoryView StatusDate SubmittedLast Update
0034619Retail ModulesWeb POSpublic2016-11-24 17:312016-12-30 21:58
Reporterdbaz 
Assigned Toguilleaer 
PrioritynormalSeverityminorReproducibilityalways
StatusclosedResolutionfixed 
PlatformOS5OS Version
Product Version 
Target VersionFixed in VersionRR17Q1 
Merge Request Status
Review Assigned Todbaz
OBNetwork customer
Support ticket
Regression level
Regression date
Regression introduced in release
Regression introduced by commit
Triggers an Emergency PackNo
Summary0034619: [UX] The product button is not readable with small aspect ratios or high prices
DescriptionWith the current design, the product button present in the BROWSE and SEARCH tabs could be not readable at all with small aspect ratios or high product prices. [View attached 'Current.png']

Also, due to recent projects, additional items have been added to these buttons (best sellers icons, contextual menu button, ...) so the situation could be even worse.
Steps To ReproduceIn the WebPOS, set 393x700 screen resolution and open the BROWSE tab.
Proposed SolutionThere are attached several mockups with several examples about how these buttons should look like.

The changes are:
* The padding should be set as "padding: 8px;" instead of "padding: 8px 10px 8px 10px;"
* The product name should be in the first line left-aligned.
* The product name should take a maximum of 4 lines. If this maximum is reached, ellipsis (...) should be used.
* The price should be in a line next to the 'product name' and right-aligned.
* The best seller icons, should be in the left of the price if they fit. If they don't fit next to the price, they should be at the end of the 'product name'. PS: all best seller/favorite icons should go altogether (in pack).
* The contextual menu button should be replaced. View issue: https://issues.openbravo.com/view.php?id=34617 [^]
* The contextual menu button should be in the top of the price (right-aligned), at the same height of the 'product name'.

With this restrictions, there should be no problem in having a 9 digit price displayed in the product button, even in the BROWSE view at 393x700. If there are more than 9 digits, the font-size should decrease to ensure that the price fits a single line ( fex: https://jsfiddle.net/0c84u0rg/1/ [^] ).
Additional Information
TagsNo tags attached.
Relationships
has duplicate defect 0033091 closed Retail [UX] The product button is not readable at all with small aspect ratios 
has duplicate defect 0034468 closed Retail [SER-QA 2013] In Search tab prices are misaligned 
related to defect 0034818 new Retail [UX] Font Resize Mechanism used by "Render Product Line" component is not the same used by "Render Order Line" component 
related to defect 0035679 closed ranjith_qualiantech_com [UX] coin amounts are not correct displayed in Open Till session 
blocks defect 0034538 closed Retail Big total amounts on WebPOS are breaking the layout 
Attached Filespng Current.png (116,855) 2016-11-24 17:32
https://issues.openbravo.com/file_download.php?file_id=10106&type=bug
png

png ProductButton_Smartphone_noBestSellers.png (129,288) 2016-11-24 17:33
https://issues.openbravo.com/file_download.php?file_id=10107&type=bug
png

png ProductButton_Smartphone.png (135,151) 2016-11-24 17:33
https://issues.openbravo.com/file_download.php?file_id=10108&type=bug
png

png ProductButton_4-3.png (221,623) 2016-11-24 17:33
https://issues.openbravo.com/file_download.php?file_id=10109&type=bug
png

png ProductButton_4-3_ContextualMenuAreaOfInfluence.png (221,999) 2016-11-24 17:34
https://issues.openbravo.com/file_download.php?file_id=10110&type=bug
png

png ProductButton_16-9.png (242,242) 2016-11-24 17:34
https://issues.openbravo.com/file_download.php?file_id=10111&type=bug
png

png ProductButton_16-9_SEARCH.png (191,650) 2016-11-24 17:34
https://issues.openbravo.com/file_download.php?file_id=10112&type=bug
png

? issue34619Core.commit (916) 2016-12-02 13:53
https://issues.openbravo.com/file_download.php?file_id=10152&type=bug
? issue34619Posterminal.commit (5,817) 2016-12-02 13:53
https://issues.openbravo.com/file_download.php?file_id=10153&type=bug
jpg IMG_20161207_131551-01.jpg (1,384,099) 2016-12-07 13:19
https://issues.openbravo.com/file_download.php?file_id=10162&type=bug
Issue History
Date ModifiedUsernameFieldChange
2016-11-24 17:31dbazNew Issue
2016-11-24 17:31dbazAssigned To => Retail
2016-11-24 17:31dbazTriggers an Emergency Pack => No
2016-11-24 17:32dbazRelationship addedhas duplicate 0033091
2016-11-24 17:32dbazFile Added: Current.png
2016-11-24 17:33dbazFile Added: ProductButton_Smartphone_noBestSellers.png
2016-11-24 17:33dbazFile Added: ProductButton_Smartphone.png
2016-11-24 17:33dbazFile Added: ProductButton_4-3.png
2016-11-24 17:34dbazFile Added: ProductButton_4-3_ContextualMenuAreaOfInfluence.png
2016-11-24 17:34dbazFile Added: ProductButton_16-9.png
2016-11-24 17:34dbazFile Added: ProductButton_16-9_SEARCH.png
2016-11-24 17:35dbazRelationship addedblocks 0034538
2016-11-24 17:50psarobeTypefeature request => defect
2016-12-01 17:24marvintmAssigned ToRetail => migueldejuana
2016-12-01 17:24marvintmStatusnew => scheduled
2016-12-02 13:53migueldejuanaFile Added: issue34619Core.commit
2016-12-02 13:53migueldejuanaFile Added: issue34619Posterminal.commit
2016-12-05 22:28hgbotCheckin
2016-12-05 22:28hgbotNote Added: 0092099
2016-12-05 22:28hgbotStatusscheduled => resolved
2016-12-05 22:28hgbotResolutionopen => fixed
2016-12-05 22:28hgbotFixed in SCM revision => http://code.openbravo.com/erp/pmods/org.openbravo.mobile.core/rev/88be6aa4ded21aaf14a73d0b8c382eda8ace085a [^]
2016-12-05 22:32hgbotCheckin
2016-12-05 22:32hgbotNote Added: 0092102
2016-12-05 22:32hgbotFixed in SCM revisionhttp://code.openbravo.com/erp/pmods/org.openbravo.mobile.core/rev/88be6aa4ded21aaf14a73d0b8c382eda8ace085a [^] => http://code.openbravo.com/erp/pmods/org.openbravo.retail.posterminal/rev/cd26e0a257c51f2cf59e759b965b3d0f71d5074e [^]
2016-12-06 19:55marvintmRelationship addedhas duplicate 0034468
2016-12-07 12:28dbazNote Added: 0092181
2016-12-07 12:28dbazStatusresolved => new
2016-12-07 12:28dbazResolutionfixed => open
2016-12-07 13:18guilleaerNote Added: 0092185
2016-12-07 13:19guilleaerFile Added: IMG_20161207_131551-01.jpg
2016-12-07 13:20guilleaerNote Edited: 0092185bug_revision_view_page.php?bugnote_id=0092185#r13964
2016-12-16 08:36hgbotCheckin
2016-12-16 08:36hgbotNote Added: 0092428
2016-12-16 08:38hgbotCheckin
2016-12-16 08:38hgbotNote Added: 0092432
2016-12-16 08:38hgbotCheckin
2016-12-16 08:38hgbotNote Added: 0092433
2016-12-16 08:38hgbotStatusnew => resolved
2016-12-16 08:38hgbotResolutionopen => fixed
2016-12-16 08:38hgbotFixed in SCM revisionhttp://code.openbravo.com/erp/pmods/org.openbravo.retail.posterminal/rev/cd26e0a257c51f2cf59e759b965b3d0f71d5074e [^] => http://code.openbravo.com/erp/pmods/org.openbravo.retail.posterminal/rev/55a1eb86bc404633180f134dcb571c8afa9afa5d [^]
2016-12-16 08:38hgbotStatusnew => resolved
2016-12-16 08:46guilleaerNote Deleted: 0092433
2016-12-20 13:53marvintmReview Assigned To => marvintm
2016-12-20 13:53marvintmStatusresolved => closed
2016-12-20 13:53marvintmFixed in Version => RR17Q1
2016-12-20 20:38dbazNote Added: 0092877
2016-12-20 20:38dbazStatusclosed => new
2016-12-20 20:38dbazResolutionfixed => open
2016-12-20 20:38dbazFixed in VersionRR17Q1 =>
2016-12-21 11:18hgbotCheckin
2016-12-21 11:18hgbotNote Added: 0092897
2016-12-21 11:18hgbotStatusnew => resolved
2016-12-21 11:18hgbotResolutionopen => fixed
2016-12-21 11:18hgbotFixed in SCM revisionhttp://code.openbravo.com/erp/pmods/org.openbravo.retail.posterminal/rev/55a1eb86bc404633180f134dcb571c8afa9afa5d [^] => http://code.openbravo.com/erp/pmods/org.openbravo.mobile.core/rev/e05e1dcab1e391d6c27b1cb95742f3c2cd4431c4 [^]
2016-12-21 11:18hgbotCheckin
2016-12-21 11:18hgbotNote Added: 0092898
2016-12-23 11:11guilleaerRelationship addedrelated to 0034818
2016-12-23 11:11guilleaerNote Added: 0092964
2016-12-23 13:59guilleaerAssigned Tomigueldejuana => guilleaer
2016-12-23 15:08marvintmNote Added: 0092980
2016-12-23 15:08marvintmStatusresolved => closed
2016-12-23 15:08marvintmFixed in Version => RR17Q1
2016-12-26 16:09dbazNote Added: 0092994
2016-12-26 16:09dbazStatusclosed => new
2016-12-26 16:09dbazResolutionfixed => open
2016-12-26 16:09dbazFixed in VersionRR17Q1 =>
2016-12-27 17:55hgbotCheckin
2016-12-27 17:55hgbotNote Added: 0093027
2016-12-27 17:55hgbotStatusnew => resolved
2016-12-27 17:55hgbotResolutionopen => fixed
2016-12-27 17:55hgbotFixed in SCM revisionhttp://code.openbravo.com/erp/pmods/org.openbravo.mobile.core/rev/e05e1dcab1e391d6c27b1cb95742f3c2cd4431c4 [^] => http://code.openbravo.com/erp/pmods/org.openbravo.retail.posterminal/rev/fe44cab38ad179fa619fd35dabfe65c8a4440f45 [^]
2016-12-28 19:41dbazNote Added: 0093045
2016-12-28 19:41dbazStatusresolved => new
2016-12-28 19:41dbazResolutionfixed => open
2016-12-28 23:06hgbotCheckin
2016-12-28 23:06hgbotNote Added: 0093047
2016-12-28 23:06hgbotStatusnew => resolved
2016-12-28 23:06hgbotResolutionopen => fixed
2016-12-28 23:06hgbotFixed in SCM revisionhttp://code.openbravo.com/erp/pmods/org.openbravo.retail.posterminal/rev/fe44cab38ad179fa619fd35dabfe65c8a4440f45 [^] => http://code.openbravo.com/erp/pmods/org.openbravo.retail.posterminal/rev/f4f3d7fc65c91f496f321ba803fd1580b0b9abfc [^]
2016-12-29 10:05guilleaerReview Assigned Tomarvintm => dbaz
2016-12-29 13:18dbazNote Added: 0093051
2016-12-29 13:18dbazStatusresolved => closed
2016-12-29 13:18dbazFixed in Version => RR17Q2
2016-12-30 21:58dbazFixed in VersionRR17Q2 => RR17Q1
2017-04-03 18:23malsasuaRelationship addedrelated to 0035679

Notes
(0092099)
hgbot   
2016-12-05 22:28   
Repository: erp/pmods/org.openbravo.mobile.core
Changeset: 88be6aa4ded21aaf14a73d0b8c382eda8ace085a
Author: Miguel de Juana <miguel.dejuana <at> openbravo.com>
Date: Fri Dec 02 12:23:49 2016 +0100
URL: http://code.openbravo.com/erp/pmods/org.openbravo.mobile.core/rev/88be6aa4ded21aaf14a73d0b8c382eda8ace085a [^]

Fixed issue 0034619: [UX] The product button is not readable with small aspect ratios or high prices

- Set padding

---
M web/org.openbravo.mobile.core/source/retail/component/ob-retail-product-browser.js
---
(0092102)
hgbot   
2016-12-05 22:32   
Repository: erp/pmods/org.openbravo.retail.posterminal
Changeset: cd26e0a257c51f2cf59e759b965b3d0f71d5074e
Author: Mario Castello <mario.castello <at> peoplewalking.com>
Date: Mon Dec 05 11:27:16 2016 -0600
URL: http://code.openbravo.com/erp/pmods/org.openbravo.retail.posterminal/rev/cd26e0a257c51f2cf59e759b965b3d0f71d5074e [^]

Fixed issue 0034619: [UX] The product button is not readable with small aspect ratios or high prices

- Use flex container class and remove some unneeded styles
- Set some styles depending on what is shown and adjust large numbers font

---
M web/org.openbravo.retail.posterminal/js/components/renderproduct.js
---
(0092181)
dbaz   
2016-12-07 12:28   
Three issues:

The padding between the product image and the product name+price should be 8px instead of 5px

The vertical separation between the product name and the product price should be always the same, that is the one that currently the 2+ lines product name have. I don't know why, but now in the single line for the product name cases, the height is higher

There should be a dynamic calculation for the price font-size. Right now it seems that is fixed. In case it cannot be done, due to performance issues, I would suggest two different aproaches:
* Calculate the maximum length in a dummy hidden product button, and change the font-size only in the buttons with this length or a higher one.
* Add several more rules having more ranges of screen aspect ratio and price length (even add 'calc' functions).

Video: http://screencast.com/t/MGrmQliKD [^]
(0092185)
guilleaer   
2016-12-07 13:18   
(edited on: 2016-12-07 13:20)
Code review apart from the David baz
1. I think that this changeset [http://code.openbravo.com/erp/pmods/org.openbravo.mobile.core/rev/88be6aa4ded21aaf14a73d0b8c382eda8ace085a [^]] is not doing nothing
2. If we use flex, why dont't use it for the whole render product line?
3. there are some fixed widths already defined. In general it does not make sense using flexbox
4. I have attached an image with the layout that I'm propose
5. I don't really know when filterAttr component is used but we should think on it in the design

I have attached an image[IMG_20161207_131551-01.jpg] (handmade) including the layout that I would do if we want to use flexbox
(0092428)
hgbot   
2016-12-16 08:36   
Repository: erp/pmods/org.openbravo.mobile.core
Changeset: 740090ed403c4168ef61f27221eb117b4d588089
Author: Guillermo Alvarez de Eulate <guillermo.alvarez <at> openbravo.com>
Date: Wed Dec 14 14:10:14 2016 +0100
URL: http://code.openbravo.com/erp/pmods/org.openbravo.mobile.core/rev/740090ed403c4168ef61f27221eb117b4d588089 [^]

Related to issue 34619: Add new styles required by flexbox

---
M web/org.openbravo.mobile.core/assets/css/ob-standard.css
---
(0092432)
hgbot   
2016-12-16 08:38   
Repository: erp/pmods/org.openbravo.retail.posterminal
Changeset: 55a1eb86bc404633180f134dcb571c8afa9afa5d
Author: Guillermo Alvarez de Eulate <guillermo.alvarez <at> openbravo.com>
Date: Thu Dec 15 18:19:55 2016 +0100
URL: http://code.openbravo.com/erp/pmods/org.openbravo.retail.posterminal/rev/55a1eb86bc404633180f134dcb571c8afa9afa5d [^]

Fixed issue 34619: Refactor of product browser component using flexbox

- Fixed padding
- Price font is resized when conditions requires it. (narrow screen and big price)
- The whole component has been refactored using flexbox which makes the component simpler.
- Redraw function is just executed one time when it is called many times
- Check that component is not being destroyed when redraw function is executed

---
M web/org.openbravo.retail.posterminal/css/obpos-main.css
M web/org.openbravo.retail.posterminal/js/components/renderproduct.js
---
(0092877)
dbaz   
2016-12-20 20:38   
The left and top product image borders are missig now.

Also, this part is not solved:

There should be a dynamic calculation for the price font-size. Right now it seems that is fixed. In case it cannot be done, due to performance issues, I would suggest two different aproaches:
* Calculate the maximum length in a dummy hidden product button, and change the font-size only in the buttons with this length or a higher one.
* Add several more rules having more ranges of screen aspect ratio and price length (even add 'calc' functions).

Video: http://screencast.com/t/DI6UY9duHNGN [^]

In the current approach
https://code.openbravo.com/erp/pmods/org.openbravo.retail.posterminal/rev/55a1eb86bc404633180f134dcb571c8afa9afa5d#l2.166 [^]
it seems that only length > 11 and width <= 874 are being taked into account to determine the font-size, whose possible values are fixed to 12px or 16px.

Probably this
  this.$.price.addStyles('font-size: 12px;');
could be turned into something like
   var adjustedFontSize = f(this.model.get('standardPrice').length, document.body.clientWidth);
   this.$.price.addStyles('font-size: ' + adjustedFontSize);
where adjustedFontSize should be modelized, in a similar way it was done in these calcs:
https://code.openbravo.com/erp/pmods/org.openbravo.retail.posterminal/rev/80b0433fad39092f61b92d35efd6ca22d714dd00#l1.76 [^]

As said before, another less accurate but easier to implement solution could be add more intervals, like:

length > 11 and width <= 874 -> font-size: 12px;
length > 12 and width <= AAA -> font-size: XXpx;
length > 13 and width <= BBB -> font-size: YYpx;
length > 14 and width <= CCC -> font-size: ZZpx;
length > 15 and width <= DDD -> font-size: TTpx;
length > 16 and width <= EEE -> font-size: UUpx;
length > 17 and width <= FFF -> font-size: VVpx;
length > 18 and width <= GGG -> font-size: WWpx;
(0092897)
hgbot   
2016-12-21 11:18   
Repository: erp/pmods/org.openbravo.mobile.core
Changeset: e05e1dcab1e391d6c27b1cb95742f3c2cd4431c4
Author: Guillermo Alvarez de Eulate <guillermo.alvarez <at> openbravo.com>
Date: Wed Dec 21 11:00:50 2016 +0100
URL: http://code.openbravo.com/erp/pmods/org.openbravo.mobile.core/rev/e05e1dcab1e391d6c27b1cb95742f3c2cd4431c4 [^]

Fixed issue 34619: Product image border is now correctly shown

---
M web/org.openbravo.mobile.core/assets/css/ob-standard.css
M web/org.openbravo.mobile.core/source/utils/ob-utilitiesui.js
---
(0092898)
hgbot   
2016-12-21 11:18   
Repository: erp/pmods/org.openbravo.retail.posterminal
Changeset: 0628560f418eb8f248efd1e4d46fa1e162870973
Author: Guillermo Alvarez de Eulate <guillermo.alvarez <at> openbravo.com>
Date: Wed Dec 21 11:00:30 2016 +0100
URL: http://code.openbravo.com/erp/pmods/org.openbravo.retail.posterminal/rev/0628560f418eb8f248efd1e4d46fa1e162870973 [^]

Related to issue 34619: Product image border is now correctly shown

---
M web/org.openbravo.retail.posterminal/js/components/renderproduct.js
---
(0092964)
guilleaer   
2016-12-23 11:11   
New issue created related to this one:

[ 0034818: Font Resize Mechanism used by "Render Product Line" component is not the same used by "Render Order Line" component] - > https://issues.openbravo.com/view.php?id=34818 [^]
(0092980)
marvintm   
2016-12-23 15:08   
After discussing with the team involved in deploying the solution for the affected customer, we have concluded that the current solution allows to display every possible real price we may encounter. However, just for consistency we will change the current implementation to use the same FitText classes which the rest of the POS components now use. An issue has been reported for this:

https://issues.openbravo.com/view.php?id=34818 [^]

The current solution is considered correct, though, so we will close this issue for now.
(0092994)
dbaz   
2016-12-26 16:09   
There is one pending point mentioned in the "Proposed Solution" section:
* The product name should take a maximum of 4 lines. If this maximum is reached, ellipsis (...) should be used.

Also, with the current implementation (max-height) there is a UI issue, because some characters of the 4th line could be clipped.

In the following video it is shown how the "g" character of the 4th line is clipped. Also, a CSS solution is proposed to get the ellipsis in the fourth line.

http://screencast.com/t/pVPSFPruuvOH [^]

PS: The suggested solution is only valid for webkit browsers (the currently supported ones). In the future, if more browsers are supported, this solution should be reviewed.
(0093027)
hgbot   
2016-12-27 17:55   
Repository: erp/pmods/org.openbravo.retail.posterminal
Changeset: fe44cab38ad179fa619fd35dabfe65c8a4440f45
Author: Guillermo Alvarez de Eulate <guillermo.alvarez <at> openbravo.com>
Date: Tue Dec 27 17:54:34 2016 +0100
URL: http://code.openbravo.com/erp/pmods/org.openbravo.retail.posterminal/rev/fe44cab38ad179fa619fd35dabfe65c8a4440f45 [^]

Fixed issue 34619: Ellipsis is shown when product identifier requires more than 4 lines to render

---
M web/org.openbravo.retail.posterminal/css/obpos-main.css
M web/org.openbravo.retail.posterminal/js/components/renderproduct.js
---
(0093045)
dbaz   
2016-12-28 19:41   
The 4 lines trim and the ellipsis are ok.

Regarding to price visualization, 9 digit prices ('Baby carrier' in the video) are experiencing problems in 393x700.
Even more, due to the changes of the last changeset, now there are also visualization problems with 8 digit prices ('Alpine skiing backpack 27 L' in the video) in 393x700.
The affected customer needs at least 9 digits, so these both cases need to be fixed.

Video: http://screencast.com/t/yZweupUSy [^]
(0093047)
hgbot   
2016-12-28 23:06   
Repository: erp/pmods/org.openbravo.retail.posterminal
Changeset: f4f3d7fc65c91f496f321ba803fd1580b0b9abfc
Author: Guillermo Alvarez de Eulate <guillermo.alvarez <at> openbravo.com>
Date: Wed Dec 28 23:05:37 2016 +0100
URL: http://code.openbravo.com/erp/pmods/org.openbravo.retail.posterminal/rev/f4f3d7fc65c91f496f321ba803fd1580b0b9abfc [^]

Fixed issue 34619: Prices with strlenght < 14 are correctly shown in all resolutions

---
M web/org.openbravo.retail.posterminal/js/components/renderproduct.js
---
(0093051)
dbaz   
2016-12-29 13:18   
Reviewed @ changeset: 7758 - f4f3d7fc65c9