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

View Issue DetailsJump to Notes ] Issue History ] Print ]
ID
0034619
TypeCategorySeverityReproducibilityDate SubmittedLast Update
defect[Retail Modules] Web POSminoralways2016-11-24 17:312016-12-30 21:58
ReporterdbazView Statuspublic 
Assigned Toguilleaer 
PrioritynormalResolutionfixedFixed in VersionRR17Q1
StatusclosedFix in branchFixed in SCM revisionf4f3d7fc65c9
ProjectionnoneETAnoneTarget Version
OSAnyDatabaseAnyJava version
OS VersionDatabase versionAnt version
Product VersionSCM revision 
Review Assigned Todbaz
Regression level
Regression date
Regression introduced in release
Regression introduced by commit
Triggers an Emergency PackNo
Summary

0034619: [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/ [^] ).
TagsNo tags attached.
Attached Filespng file icon Current.png [^] (116,855 bytes) 2016-11-24 17:32


png file icon ProductButton_Smartphone_noBestSellers.png [^] (129,288 bytes) 2016-11-24 17:33


png file icon ProductButton_Smartphone.png [^] (135,151 bytes) 2016-11-24 17:33


png file icon ProductButton_4-3.png [^] (221,623 bytes) 2016-11-24 17:33


png file icon ProductButton_4-3_ContextualMenuAreaOfInfluence.png [^] (221,999 bytes) 2016-11-24 17:34


png file icon ProductButton_16-9.png [^] (242,242 bytes) 2016-11-24 17:34


png file icon ProductButton_16-9_SEARCH.png [^] (191,650 bytes) 2016-11-24 17:34


? file icon issue34619Core.commit [^] (916 bytes) 2016-12-02 13:53
? file icon issue34619Posterminal.commit [^] (5,817 bytes) 2016-12-02 13:53
jpg file icon IMG_20161207_131551-01.jpg [^] (1,384,099 bytes) 2016-12-07 13:19

- Relationships Relation Graph ] Dependency Graph ]
has duplicate defect 0033091 closedRetail [UX] The product button is not readable at all with small aspect ratios 
has duplicate defect 0034468 closedRetail [SER-QA 2013] In Search tab prices are misaligned 
related to defect 0034818 newRetail [UX] Font Resize Mechanism used by "Render Product Line" component is not the same used by "Render Order Line" component 
related to defect 0035679 closedranjith_qualiantech_com [UX] coin amounts are not correct displayed in Open Till session 
blocks defect 0034538 closedRetail Big total amounts on WebPOS are breaking the layout 

-  Notes
(0092099)
hgbot (developer)
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 (developer)
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 (developer)
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 (manager)
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 (developer)
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 (developer)
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 (developer)
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 (developer)
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 (developer)
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 (manager)
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 (manager)
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 (developer)
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 (developer)
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 (developer)
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 (developer)
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 (developer)
2016-12-29 13:18

Reviewed @ changeset: 7758 - f4f3d7fc65c9

- Issue History
Date Modified Username Field Change
2016-11-24 17:31 dbaz New Issue
2016-11-24 17:31 dbaz Assigned To => Retail
2016-11-24 17:31 dbaz Triggers an Emergency Pack => No
2016-11-24 17:32 dbaz Relationship added has duplicate 0033091
2016-11-24 17:32 dbaz File Added: Current.png
2016-11-24 17:33 dbaz File Added: ProductButton_Smartphone_noBestSellers.png
2016-11-24 17:33 dbaz File Added: ProductButton_Smartphone.png
2016-11-24 17:33 dbaz File Added: ProductButton_4-3.png
2016-11-24 17:34 dbaz File Added: ProductButton_4-3_ContextualMenuAreaOfInfluence.png
2016-11-24 17:34 dbaz File Added: ProductButton_16-9.png
2016-11-24 17:34 dbaz File Added: ProductButton_16-9_SEARCH.png
2016-11-24 17:35 dbaz Relationship added blocks 0034538
2016-11-24 17:50 psarobe Type feature request => defect
2016-12-01 17:24 marvintm Assigned To Retail => migueldejuana
2016-12-01 17:24 marvintm Status new => scheduled
2016-12-02 13:53 migueldejuana File Added: issue34619Core.commit
2016-12-02 13:53 migueldejuana File Added: issue34619Posterminal.commit
2016-12-05 22:28 hgbot Checkin
2016-12-05 22:28 hgbot Note Added: 0092099
2016-12-05 22:28 hgbot Status scheduled => resolved
2016-12-05 22:28 hgbot Resolution open => fixed
2016-12-05 22:28 hgbot Fixed in SCM revision => http://code.openbravo.com/erp/pmods/org.openbravo.mobile.core/rev/88be6aa4ded21aaf14a73d0b8c382eda8ace085a [^]
2016-12-05 22:32 hgbot Checkin
2016-12-05 22:32 hgbot Note Added: 0092102
2016-12-05 22:32 hgbot Fixed in SCM revision http://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:55 marvintm Relationship added has duplicate 0034468
2016-12-07 12:28 dbaz Note Added: 0092181
2016-12-07 12:28 dbaz Status resolved => new
2016-12-07 12:28 dbaz Resolution fixed => open
2016-12-07 13:18 guilleaer Note Added: 0092185
2016-12-07 13:19 guilleaer File Added: IMG_20161207_131551-01.jpg
2016-12-07 13:20 guilleaer Note Edited: 0092185 View Revisions
2016-12-16 08:36 hgbot Checkin
2016-12-16 08:36 hgbot Note Added: 0092428
2016-12-16 08:38 hgbot Checkin
2016-12-16 08:38 hgbot Note Added: 0092432
2016-12-16 08:38 hgbot Checkin
2016-12-16 08:38 hgbot Note Added: 0092433
2016-12-16 08:38 hgbot Status new => resolved
2016-12-16 08:38 hgbot Resolution open => fixed
2016-12-16 08:38 hgbot Fixed in SCM revision http://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:38 hgbot Status new => resolved
2016-12-16 08:46 guilleaer Note Deleted: 0092433
2016-12-20 13:53 marvintm Review Assigned To => marvintm
2016-12-20 13:53 marvintm Status resolved => closed
2016-12-20 13:53 marvintm Fixed in Version => RR17Q1
2016-12-20 20:38 dbaz Note Added: 0092877
2016-12-20 20:38 dbaz Status closed => new
2016-12-20 20:38 dbaz Resolution fixed => open
2016-12-20 20:38 dbaz Fixed in Version RR17Q1 =>
2016-12-21 11:18 hgbot Checkin
2016-12-21 11:18 hgbot Note Added: 0092897
2016-12-21 11:18 hgbot Status new => resolved
2016-12-21 11:18 hgbot Resolution open => fixed
2016-12-21 11:18 hgbot Fixed in SCM revision http://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:18 hgbot Checkin
2016-12-21 11:18 hgbot Note Added: 0092898
2016-12-23 11:11 guilleaer Relationship added related to 0034818
2016-12-23 11:11 guilleaer Note Added: 0092964
2016-12-23 13:59 guilleaer Assigned To migueldejuana => guilleaer
2016-12-23 15:08 marvintm Note Added: 0092980
2016-12-23 15:08 marvintm Status resolved => closed
2016-12-23 15:08 marvintm Fixed in Version => RR17Q1
2016-12-26 16:09 dbaz Note Added: 0092994
2016-12-26 16:09 dbaz Status closed => new
2016-12-26 16:09 dbaz Resolution fixed => open
2016-12-26 16:09 dbaz Fixed in Version RR17Q1 =>
2016-12-27 17:55 hgbot Checkin
2016-12-27 17:55 hgbot Note Added: 0093027
2016-12-27 17:55 hgbot Status new => resolved
2016-12-27 17:55 hgbot Resolution open => fixed
2016-12-27 17:55 hgbot Fixed in SCM revision http://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:41 dbaz Note Added: 0093045
2016-12-28 19:41 dbaz Status resolved => new
2016-12-28 19:41 dbaz Resolution fixed => open
2016-12-28 23:06 hgbot Checkin
2016-12-28 23:06 hgbot Note Added: 0093047
2016-12-28 23:06 hgbot Status new => resolved
2016-12-28 23:06 hgbot Resolution open => fixed
2016-12-28 23:06 hgbot Fixed in SCM revision http://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:05 guilleaer Review Assigned To marvintm => dbaz
2016-12-29 13:18 dbaz Note Added: 0093051
2016-12-29 13:18 dbaz Status resolved => closed
2016-12-29 13:18 dbaz Fixed in Version => RR17Q2
2016-12-30 21:58 dbaz Fixed in Version RR17Q2 => RR17Q1
2017-04-03 18:23 malsasua Relationship added related to 0035679


Copyright © 2000 - 2009 MantisBT Group
Powered by Mantis Bugtracker