Openbravo Issue Tracking System - Retail Modules
View Issue Details
IDProjectCategoryView StatusDate SubmittedLast Update
0036135Retail ModulesWeb POSpublic2017-05-30 14:032017-06-26 15:14
Reporterdbaz 
Assigned Toranjith_qualiantech_com 
PriorityhighSeverityminorReproducibilityalways
StatusclosedResolutionfixed 
PlatformOS5OS Version
Product Version 
Target VersionFixed in VersionRR17Q3 
Merge Request Status
Review Assigned Tomarvintm
OBNetwork customerNo
Support ticket
Regression level
Regression date
Regression introduced in release
Regression introduced by commit
Triggers an Emergency PackNo
Summary0036135: [UX] "Receipt Properties" popup inputs look ugly
Description"Receipt Properties" popup inputs look ugly:
* Depending if it is an input, a checkbox, or a combo, they do not have the same lenght.
* The input/combo text is not aligned with its description label.
* There is a border in the inputs/combos that looks strange.

There are also smaller details already handled in the "Proposed Solution".

The problem is severe, because it is generating a 'snowball effect' in other popups, like in the new 'Create OTF Product' one.
Steps To ReproduceCreate a new receipt, and open the "Receipt Properties".
Proposed SolutionAttached [ReceiptProperties.png] with a mockup showing how it should look like.

As you can see:
* The description takes 40% and the inputs/combos the 60%.
* All the inputs/combos reach the end of the popup
* The inputs/combos text is aligned with its description label
* The inputs/combos have no border, so the only UI component that delimits its size is the grey separator between rows.
* The combo dropdown arrow has been modified (attached the new image) to have an uniform look&feel between different OS. Note: its css size should be 13x7 px.
* The focus effect has been modified (2px #0078d7) to have a uniform look&feel between different OS. Note: once a input/combo is focused, the text and the dropdown arrow icon position should not change.

Important note: all the styles generated for this fix, should be in the CSS file (not harcoded as 'style: ' in the javascript). Also, these CSS classes should be used only in these *green* popups, so, it should not be used in other places like, for example, the 'Advanced Search' of the selectors.

PS: Here you can find a JSFiddle with some CSS clues: http://jsfiddle.net/7f5bsfb4/ [^]
Additional Information
TagsNo tags attached.
Relationships
depends on defect 0036136 closed rqueralta [UX] "Receipt Properties" popup inputs area should be taller 
causes defect 0036401 closed ranjith_qualiantech_com Edit Profile Popup Fields are not displaying properly 
Attached Filespng ReceiptProperties.png (81,910) 2017-05-30 14:03
https://issues.openbravo.com/file_download.php?file_id=10809&type=bug
png

png iconDropdownArrow.png (842) 2017-05-30 14:03
https://issues.openbravo.com/file_download.php?file_id=10810&type=bug
png
Issue History
Date ModifiedUsernameFieldChange
2017-05-30 14:03dbazNew Issue
2017-05-30 14:03dbazAssigned To => Retail
2017-05-30 14:03dbazOBNetwork customer => No
2017-05-30 14:03dbazTriggers an Emergency Pack => No
2017-05-30 14:03dbazFile Added: ReceiptProperties.png
2017-05-30 14:03dbazFile Added: iconDropdownArrow.png
2017-05-30 14:08dbazRelationship addeddepends on 0036136
2017-06-07 12:58ranjith_qualiantech_comAssigned ToRetail => ranjith_qualiantech_com
2017-06-07 12:58ranjith_qualiantech_comStatusnew => scheduled
2017-06-09 11:38hgbotCheckin
2017-06-09 11:38hgbotNote Added: 0097274
2017-06-09 11:39ranjith_qualiantech_comStatusscheduled => resolved
2017-06-09 11:39ranjith_qualiantech_comResolutionopen => fixed
2017-06-12 11:45dbazNote Added: 0097304
2017-06-12 11:45dbazStatusresolved => new
2017-06-12 11:45dbazResolutionfixed => open
2017-06-12 14:23ranjith_qualiantech_comStatusnew => scheduled
2017-06-13 09:53hgbotCheckin
2017-06-13 09:53hgbotNote Added: 0097342
2017-06-13 09:53hgbotStatusscheduled => resolved
2017-06-13 09:53hgbotResolutionopen => fixed
2017-06-13 09:53hgbotFixed in SCM revision => http://code.openbravo.com/erp/pmods/org.openbravo.mobile.core/rev/15ae4b6f2e02aa1a60667ffe1f119d66a23c0c8b [^]
2017-06-13 16:29dbazNote Added: 0097363
2017-06-13 16:29dbazStatusresolved => new
2017-06-13 16:29dbazResolutionfixed => open
2017-06-16 07:37ranjith_qualiantech_comStatusnew => scheduled
2017-06-19 07:56hgbotCheckin
2017-06-19 07:56hgbotNote Added: 0097466
2017-06-19 07:56hgbotStatusscheduled => resolved
2017-06-19 07:56hgbotResolutionopen => fixed
2017-06-19 07:56hgbotFixed in SCM revisionhttp://code.openbravo.com/erp/pmods/org.openbravo.mobile.core/rev/15ae4b6f2e02aa1a60667ffe1f119d66a23c0c8b [^] => http://code.openbravo.com/erp/pmods/org.openbravo.mobile.core/rev/c8a01615dd373860ef5e2c195b4fae30f6208f27 [^]
2017-06-26 09:27marvintmReview Assigned To => marvintm
2017-06-26 09:27marvintmStatusresolved => closed
2017-06-26 09:27marvintmFixed in Version => RR17Q3
2017-06-26 12:25marvintmNote Added: 0097648
2017-06-26 12:25marvintmStatusclosed => new
2017-06-26 12:25marvintmResolutionfixed => open
2017-06-26 12:25marvintmFixed in VersionRR17Q3 =>
2017-06-26 14:06ranjith_qualiantech_comStatusnew => scheduled
2017-06-26 14:16ranjith_qualiantech_comNote Added: 0097654
2017-06-26 14:16ranjith_qualiantech_comStatusscheduled => resolved
2017-06-26 14:16ranjith_qualiantech_comResolutionopen => fixed
2017-06-26 15:14marvintmStatusresolved => closed
2017-06-26 15:14marvintmFixed in Version => RR17Q3
2017-07-04 15:30ranjith_qualiantech_comRelationship addedcauses 0036401

Notes
(0097274)
hgbot   
2017-06-09 11:38   
Repository: erp/pmods/org.openbravo.mobile.core
Changeset: 6011c6e4e979143c8986791f8eb3abab05767d2d
Author: Ranjith S R <ranjith <at> qualiantech.com>
Date: Fri Jun 09 15:07:58 2017 +0530
URL: http://code.openbravo.com/erp/pmods/org.openbravo.mobile.core/rev/6011c6e4e979143c8986791f8eb3abab05767d2d [^]

Related to issue 36135 : Changed CSS for Receipt Properties

---
M web/org.openbravo.mobile.core/assets/css/ob-standard.css
M web/org.openbravo.mobile.core/source/component/dialog/ob-properties.js
A web/org.openbravo.mobile.core/assets/img/iconDropdownArrow.png
---
(0097304)
dbaz   
2017-06-12 11:45   
Now it looks really better, but still some small points are pending/wrong

This "properties-component .modal-dialog-receipt-properties-text input:focus" and this "properties-component .modal-dialog-receipt-properties-text select:focus" should have
  padding: 0px 0px 0px 5px;
instead of
  padding: 0px 0px 0px 6px;
in order to avoid the text moving while focusing

This "properties-component .modal-dialog-receipt-properties-text select:focus" should have
  background-position: calc(100% - 6px) center;
instead of
  background-position: calc(100% - 7px) center;
in order to avoid the combo arrow moving while focusing

This point "The focus effect has been modified (2px #0078d7) to have a uniform look&feel between different OS. Note: once a input/combo is focused, the text and the dropdown arrow icon position should not change." is missing in the checkbox and in the selectors. Right now while focusing, the default Chrome blurry blue border is shown.
(0097342)
hgbot   
2017-06-13 09:53   
Repository: erp/pmods/org.openbravo.mobile.core
Changeset: 15ae4b6f2e02aa1a60667ffe1f119d66a23c0c8b
Author: Ranjith S R <ranjith <at> qualiantech.com>
Date: Tue Jun 13 13:23:02 2017 +0530
URL: http://code.openbravo.com/erp/pmods/org.openbravo.mobile.core/rev/15ae4b6f2e02aa1a60667ffe1f119d66a23c0c8b [^]

Fixed issue 36135 : Changed CSS for Receipt Properties

* Added Border for Receipt Properties(Input Box, Select Box, Buttons)

---
M web/org.openbravo.mobile.core/assets/css/ob-standard.css
M web/org.openbravo.mobile.core/source/component/dialog/ob-properties.js
---
(0097363)
dbaz   
2017-06-13 16:29   
Almost perfect, just:

Apply / Cancel 'button type' inputs should follow also the same logic, so 2px border focus with #0078d7 color and remove the default Chrome blurry blue border.
(0097466)
hgbot   
2017-06-19 07:56   
Repository: erp/pmods/org.openbravo.mobile.core
Changeset: c8a01615dd373860ef5e2c195b4fae30f6208f27
Author: Ranjith S R <ranjith <at> qualiantech.com>
Date: Mon Jun 19 11:25:54 2017 +0530
URL: http://code.openbravo.com/erp/pmods/org.openbravo.mobile.core/rev/c8a01615dd373860ef5e2c195b4fae30f6208f27 [^]

Fixed issue 36135 : Changed CSS for Receipt Properties

* Added Border for Receipt Properties Apply/Cancel buttons

---
M web/org.openbravo.mobile.core/assets/css/ob-standard.css
---
(0097648)
marvintm   
2017-06-26 12:25   
The changes are correct for the Receipt Properties popup, but they have broken the attributes verified returns popup. To see it, the following steps can be followed:

- configure this preference to ‘Y’: Web POS Enable support for product attributes
- then in the Web POS, create a ticket with product “Balaclava cap”. In the popup which is shown, enter any value, it doesn’t matter
- then in the Web POS, do “Verified returns”, and select the ticket you just created, and select the line

The attributes popup will be raised, and currently it's quite broken.
(0097654)
ranjith_qualiantech_com   
2017-06-26 14:16   
Reopened Note https://issues.openbravo.com/view.php?id=36135#c97648 [^] got fixed in
https://code.openbravo.com/erp/pmods/org.openbravo.retail.returns/rev/52228f1bf8ef [^]