Openbravo Issue Tracking System - POS2
View Issue Details
0050926POS2Corepublic2022-11-16 22:212022-11-28 11:54
dbaz 
Triage Platform Base 
highmajoralways
closedfixed 
5
 
23Q1 
No
0050926: [UX] Wrong "Configurable Layout" definition in several UI components which leads to content overflows the viewport in some cases
Most of the UI components have a 'exotic' "Configurable Layout" definition.

For example, the main layout. It has 4 components:
* ButtonBar 1: its height should be dynamic based on its content
* Ticket Lines: it should fullfill the remaining space
* ButtonBar 2: its height is based on the height defined explicitly inside its component
* obpos2MainPOSApp-content: its height is the full second (right) column

Currently it is defined as a 12 row layout, with 1fr of height for each row, and then with rowspan the content is adjusted. In this particular example
* ButtonBar 1: 1fr
* Ticket Lines: 10 x 1fr (rowspan 10)
* ButtonBar 2: 1fr

On the one hand, there are elements (buttonbar 1 and 2) pushing beyond their assigned 1fr (or Xfr if there is rowspan) height, that cause problems which are difficult to prevent:

https://stackoverflow.com/questions/52785750/prevent-grid-area-from-expanding-causing-whole-page-to-scroll [^]

On the other hand, there is a second problem. If the relative height of the viewport is increased, if the height of the component is less than its asigned row span it generate an undesired behavior.

For example:

Current viewport relative height is 768px. That means that the available height for the main layout is 680px (substacting the 56px of the top status bar and the 32px of top/bottom margins). This entails that 1fr will be (if there are not elements pushing) 68px each one. The height of ButtonBar 2 is 112px, so we are fine. It enters in its assigned 1fr, and also will be pushing the other rows upwards.

Now, if we increase this relative height to 1288px, the height for the main layout will be 1200px, so each 1fr of the 12 defined will be 120px. Since the height of ButtonBar 2 is 112px, there will be a 8px gap between the end of the receipt (the total and tax section) and this ButtonBar 2

Both problems lead to a structure of chained configurable layout that is difficult to maintain.

Configurable layout should be revisited, and use only the needed number of rows on each case, and also, set the template-row property to "auto" in those rows where this is the expected behavior, and use 1fr for the row where there remaining space needs to be fulfilled.

Another related point is that the current keymap implementation has elements that are outside the boundaries of the own keymap (buttons to move to next/previous page using carousel). This leads also to make the content overflows the viewport, depending on the margins surrounding the keymap itself. These component should be moved inside the boundaries of the keymap, to avoid this potential problem.

Both problems ('exotic' Configurable Layouts configuration and components of the keymap outside its boundaries) should be fixed together, because fixing only problem make worst the other one, and the other way around.
Read Description
No tags attached.
Issue History
2022-11-16 22:21dbazNew Issue
2022-11-16 22:21dbazAssigned To => Triage Platform Base
2022-11-16 22:21dbazTriggers an Emergency Pack => No
2022-11-16 22:30dbazSummary[UX] Wrong "Configurable Layout" definition in several UI components => [UX] Wrong "Configurable Layout" definition in several UI components which leads to content overflows the viewport in some cases
2022-11-16 22:30dbazDescription Updatedbug_revision_view_page.php?rev_id=25126#r25126
2022-11-16 22:35hgbotNote Added: 0143754
2022-11-16 22:55hgbotNote Added: 0143756
2022-11-24 17:41hgbotResolutionopen => fixed
2022-11-24 17:41hgbotStatusnew => closed
2022-11-24 17:41hgbotFixed in Version => 23Q1
2022-11-24 17:41hgbotNote Added: 0144125
2022-11-24 17:41hgbotNote Added: 0144126
2022-11-24 17:41hgbotNote Added: 0144127
2022-11-24 17:41hgbotNote Added: 0144128
2022-11-28 11:37hgbotNote Added: 0144192
2022-11-28 11:54hgbotNote Added: 0144194

Notes
(0143754)
hgbot   
2022-11-16 22:35   
Merge Request created: https://gitlab.com/openbravo/product/pmods/org.openbravo.core2/-/merge_requests/917 [^]
(0143756)
hgbot   
2022-11-16 22:55   
Merge Request created: https://gitlab.com/openbravo/product/pmods/org.openbravo.pos2/-/merge_requests/1374 [^]
(0144125)
hgbot   
2022-11-24 17:41   
Directly closing issue as related merge request is already approved.

Repository: https://gitlab.com/openbravo/product/pmods/org.openbravo.core2 [^]
Changeset: 8b846be327df99cd5e97446c5577d7a6af345177
Author: David Baz <david.baz@openbravo.com>
Date: 24-11-2022 16:41:37
URL: https://gitlab.com/openbravo/product/pmods/org.openbravo.core2/-/commit/8b846be327df99cd5e97446c5577d7a6af345177 [^]

Fixed ISSUE-50926: Adapted Configurable Layout definitions to the proper usage of its elements

Also added as part of this issue:
TicketLineWindow overflow:auto in order to allow Scrolling in Ticketlines component

---
A web-jspack/org.openbravo.core2/src/components/Window/Window.scss
M web-jspack/org.openbravo.core2/src/components/AppBar/AppBar.scss
M web-jspack/org.openbravo.core2/src/components/AppBar/config/AppBar.portrait.config.json
M web-jspack/org.openbravo.core2/src/components/BaseKeymap/BaseKeymap.scss
M web-jspack/org.openbravo.core2/src/components/Carousel/CarouselButton/CarouselButton.scss
M web-jspack/org.openbravo.core2/src/components/Carousel/Pager/Pager.scss
M web-jspack/org.openbravo.core2/src/components/MainApp/MainApp.config.json
M web-jspack/org.openbravo.core2/src/components/MainApp/config/MainApp.portrait.config.json
M web-jspack/org.openbravo.core2/src/components/Window/Window.jsx
---
(0144126)
hgbot   
2022-11-24 17:41   
Merge request merged: https://gitlab.com/openbravo/product/pmods/org.openbravo.core2/-/merge_requests/917 [^]
(0144127)
hgbot   
2022-11-24 17:41   
Merge request merged: https://gitlab.com/openbravo/product/pmods/org.openbravo.pos2/-/merge_requests/1374 [^]
(0144128)
hgbot   
2022-11-24 17:41   
Directly closing issue as related merge request is already approved.

Repository: https://gitlab.com/openbravo/product/pmods/org.openbravo.pos2 [^]
Changeset: 986c4ac9106f6d06acf71c2ca47d441804851fe7
Author: David Baz <david.baz@openbravo.com>
Date: 24-11-2022 16:41:39
URL: https://gitlab.com/openbravo/product/pmods/org.openbravo.pos2/-/commit/986c4ac9106f6d06acf71c2ca47d441804851fe7 [^]

Fixed ISSUE-50926: Adapted Configurable Layout definitions to the proper usage of its elements

Also implements the following:
- TicketArea overflow:auto in order to allow Scrolling in Ticketlines component
- Proper sizing in the TicketLinesWindow

---
M web-jspack/org.openbravo.pos2/src/components/AddProductPanel/AddProductPanel.config.json
M web-jspack/org.openbravo.pos2/src/components/AddProductPanel/AddProductPanel.scss
M web-jspack/org.openbravo.pos2/src/components/ButtonBar1/ButtonBar1.scss
M web-jspack/org.openbravo.pos2/src/components/MainPOSApp/MainPOSApp.config.json
M web-jspack/org.openbravo.pos2/src/components/MainPOSApp/MainPOSApp.scss
M web-jspack/org.openbravo.pos2/src/components/MainPOSApp/config/MainPOSApp.portrait.config.json
M web-jspack/org.openbravo.pos2/src/components/ProductBrowse/ProductBrowse.config.json
M web-jspack/org.openbravo.pos2/src/components/ProductBrowse/ProductBrowse.scss
M web-jspack/org.openbravo.pos2/src/components/ProductCategoryButton/ProductCategoryButton.scss
M web-jspack/org.openbravo.pos2/src/components/ProductScan/ProductScan.config.json
M web-jspack/org.openbravo.pos2/src/components/ProductScan/ProductScanProductInfo/ProductScanProductInfo.scss
M web-jspack/org.openbravo.pos2/src/components/ProductSearch/ProductSearchContent/ProductSearchContent.config.json
M web-jspack/org.openbravo.pos2/src/components/ProductSearch/ProductSearchContent/ProductSearchContent.scss
M web-jspack/org.openbravo.pos2/src/components/ProductSearch/ProductSorting/ProductSorting.scss
M web-jspack/org.openbravo.pos2/src/components/Ticket/TicketArea/TicketArea.scss
M web-jspack/org.openbravo.pos2/src/components/Ticket/TicketArea/config/TicketLinesWindow.config.json
---
(0144192)
hgbot   
2022-11-28 11:37   
Merge Request created: https://gitlab.com/openbravo/product/pmods/org.openbravo.pos2/-/merge_requests/1391 [^]
(0144194)
hgbot   
2022-11-28 11:54   
Merge request merged: https://gitlab.com/openbravo/product/pmods/org.openbravo.pos2/-/merge_requests/1391 [^]