Project:
| View Issue Details[ Jump to Notes ] | [ Issue History ] [ Print ] | |||||||
| ID | ||||||||
| 0050926 | ||||||||
| Type | Category | Severity | Reproducibility | Date Submitted | Last Update | |||
| design defect | [POS2] Core | major | always | 2022-11-16 22:21 | 2022-11-28 11:54 | |||
| Reporter | dbaz | View Status | public | |||||
| Assigned To | Triage Platform Base | |||||||
| Priority | high | Resolution | fixed | Fixed in Version | 23Q1 | |||
| Status | closed | Fix in branch | Fixed in SCM revision | |||||
| Projection | none | ETA | none | Target Version | ||||
| OS | Any | Database | Any | Java version | ||||
| OS Version | Database version | Ant version | ||||||
| Product Version | SCM revision | |||||||
| Review Assigned To | ||||||||
| Regression level | ||||||||
| Regression date | ||||||||
| Regression introduced in release | ||||||||
| Regression introduced by commit | ||||||||
| Triggers an Emergency Pack | No | |||||||
| Summary | 0050926: [UX] Wrong "Configurable Layout" definition in several UI components which leads to content overflows the viewport in some cases | |||||||
| Description | 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. | |||||||
| Steps To Reproduce | Read Description | |||||||
| Tags | No tags attached. | |||||||
| Attached Files | ||||||||
 Relationships [ Relation Graph ]
[ Dependency Graph ]
|
|
 Relationships |
|
Notes |
|
|
(0143754) hgbot (developer) 2022-11-16 22:35 |
Merge Request created: https://gitlab.com/openbravo/product/pmods/org.openbravo.core2/-/merge_requests/917 [^] |
|
(0143756) hgbot (developer) 2022-11-16 22:55 |
Merge Request created: https://gitlab.com/openbravo/product/pmods/org.openbravo.pos2/-/merge_requests/1374 [^] |
|
(0144125) hgbot (developer) 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 (developer) 2022-11-24 17:41 |
Merge request merged: https://gitlab.com/openbravo/product/pmods/org.openbravo.core2/-/merge_requests/917 [^] |
|
(0144127) hgbot (developer) 2022-11-24 17:41 |
Merge request merged: https://gitlab.com/openbravo/product/pmods/org.openbravo.pos2/-/merge_requests/1374 [^] |
|
(0144128) hgbot (developer) 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 (developer) 2022-11-28 11:37 |
Merge Request created: https://gitlab.com/openbravo/product/pmods/org.openbravo.pos2/-/merge_requests/1391 [^] |
|
(0144194) hgbot (developer) 2022-11-28 11:54 |
Merge request merged: https://gitlab.com/openbravo/product/pmods/org.openbravo.pos2/-/merge_requests/1391 [^] |
|
Notes |
|
Issue History |
|||
| Date Modified | Username | Field | Change |
| 2022-11-16 22:21 | dbaz | New Issue | |
| 2022-11-16 22:21 | dbaz | Assigned To | => Triage Platform Base |
| 2022-11-16 22:21 | dbaz | Triggers an Emergency Pack | => No |
| 2022-11-16 22:30 | dbaz | Summary | [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:30 | dbaz | Description Updated | View Revisions |
| 2022-11-16 22:35 | hgbot | Note Added: 0143754 | |
| 2022-11-16 22:55 | hgbot | Note Added: 0143756 | |
| 2022-11-24 17:41 | hgbot | Resolution | open => fixed |
| 2022-11-24 17:41 | hgbot | Status | new => closed |
| 2022-11-24 17:41 | hgbot | Fixed in Version | => 23Q1 |
| 2022-11-24 17:41 | hgbot | Note Added: 0144125 | |
| 2022-11-24 17:41 | hgbot | Note Added: 0144126 | |
| 2022-11-24 17:41 | hgbot | Note Added: 0144127 | |
| 2022-11-24 17:41 | hgbot | Note Added: 0144128 | |
| 2022-11-28 11:37 | hgbot | Note Added: 0144192 | |
| 2022-11-28 11:54 | hgbot | Note Added: 0144194 | |
|
Issue History |
| Copyright © 2000 - 2009 MantisBT Group |
 |