Openbravo Issue Tracking System - Retail Modules |
| View Issue Details |
|
| ID | Project | Category | View Status | Date Submitted | Last Update |
| 0036135 | Retail Modules | Web POS | public | 2017-05-30 14:03 | 2017-06-26 15:14 |
|
| Reporter | dbaz | |
| Assigned To | ranjith_qualiantech_com | |
| Priority | high | Severity | minor | Reproducibility | always |
| Status | closed | Resolution | fixed | |
| Platform | | OS | 5 | OS Version | |
| Product Version | | |
| Target Version | | Fixed in Version | RR17Q3 | |
| Merge Request Status | |
| Review Assigned To | marvintm |
| OBNetwork customer | |
| Support ticket | |
| Regression level | |
| Regression date | |
| Regression introduced in release | |
| Regression introduced by commit | |
| Triggers an Emergency Pack | No |
|
| Summary | 0036135: [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 Reproduce | Create a new receipt, and open the "Receipt Properties". |
| Proposed Solution | Attached [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 | |
| Tags | No 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 Files |  ReceiptProperties.png (81,910) 2017-05-30 14:03
https://issues.openbravo.com/file_download.php?file_id=10809&type=bug
iconDropdownArrow.png (842) 2017-05-30 14:03
https://issues.openbravo.com/file_download.php?file_id=10810&type=bug
|
|
| Issue History |
| Date Modified | Username | Field | Change |
| 2017-05-30 14:03 | dbaz | New Issue | |
| 2017-05-30 14:03 | dbaz | Assigned To | => Retail |
| 2017-05-30 14:03 | dbaz | Triggers an Emergency Pack | => No |
| 2017-05-30 14:03 | dbaz | File Added: ReceiptProperties.png | |
| 2017-05-30 14:03 | dbaz | File Added: iconDropdownArrow.png | |
| 2017-05-30 14:08 | dbaz | Relationship added | depends on 0036136 |
| 2017-06-07 12:58 | ranjith_qualiantech_com | Assigned To | Retail => ranjith_qualiantech_com |
| 2017-06-07 12:58 | ranjith_qualiantech_com | Status | new => scheduled |
| 2017-06-09 11:38 | hgbot | Checkin | |
| 2017-06-09 11:38 | hgbot | Note Added: 0097274 | |
| 2017-06-09 11:39 | ranjith_qualiantech_com | Status | scheduled => resolved |
| 2017-06-09 11:39 | ranjith_qualiantech_com | Resolution | open => fixed |
| 2017-06-12 11:45 | dbaz | Note Added: 0097304 | |
| 2017-06-12 11:45 | dbaz | Status | resolved => new |
| 2017-06-12 11:45 | dbaz | Resolution | fixed => open |
| 2017-06-12 14:23 | ranjith_qualiantech_com | Status | new => scheduled |
| 2017-06-13 09:53 | hgbot | Checkin | |
| 2017-06-13 09:53 | hgbot | Note Added: 0097342 | |
| 2017-06-13 09:53 | hgbot | Status | scheduled => resolved |
| 2017-06-13 09:53 | hgbot | Resolution | open => fixed |
| 2017-06-13 09:53 | hgbot | Fixed in SCM revision | => http://code.openbravo.com/erp/pmods/org.openbravo.mobile.core/rev/15ae4b6f2e02aa1a60667ffe1f119d66a23c0c8b [^] |
| 2017-06-13 16:29 | dbaz | Note Added: 0097363 | |
| 2017-06-13 16:29 | dbaz | Status | resolved => new |
| 2017-06-13 16:29 | dbaz | Resolution | fixed => open |
| 2017-06-16 07:37 | ranjith_qualiantech_com | Status | new => scheduled |
| 2017-06-19 07:56 | hgbot | Checkin | |
| 2017-06-19 07:56 | hgbot | Note Added: 0097466 | |
| 2017-06-19 07:56 | hgbot | Status | scheduled => resolved |
| 2017-06-19 07:56 | hgbot | Resolution | open => fixed |
| 2017-06-19 07:56 | hgbot | Fixed in SCM revision | http://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:27 | marvintm | Review Assigned To | => marvintm |
| 2017-06-26 09:27 | marvintm | Status | resolved => closed |
| 2017-06-26 09:27 | marvintm | Fixed in Version | => RR17Q3 |
| 2017-06-26 12:25 | marvintm | Note Added: 0097648 | |
| 2017-06-26 12:25 | marvintm | Status | closed => new |
| 2017-06-26 12:25 | marvintm | Resolution | fixed => open |
| 2017-06-26 12:25 | marvintm | Fixed in Version | RR17Q3 => |
| 2017-06-26 14:06 | ranjith_qualiantech_com | Status | new => scheduled |
| 2017-06-26 14:16 | ranjith_qualiantech_com | Note Added: 0097654 | |
| 2017-06-26 14:16 | ranjith_qualiantech_com | Status | scheduled => resolved |
| 2017-06-26 14:16 | ranjith_qualiantech_com | Resolution | open => fixed |
| 2017-06-26 15:14 | marvintm | Status | resolved => closed |
| 2017-06-26 15:14 | marvintm | Fixed in Version | => RR17Q3 |
| 2017-07-04 15:30 | ranjith_qualiantech_com | Relationship added | causes 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
|
|
|
|
|
|
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. |
|
|
|
|
|