Retail:Developers Guide/Web POS Skin
Contents |
Openbravo UI Landscape vs Portrait display
Openbravo layout is automatically adapted depending on if it is being displayed in landscape or portrait mode.
In landscape mode it displays two columns, and in portait mode just one, with an enhaced toolbar to be able to reach all views from just one single column.
The switch is made when the aspect ratio of the screen is larger (or smaller) than 9/8.
In landscape, the content is compressed horizontally until the UI reaches the mentioned 9/8 aspect ratio. From this point, it switch to portrait mode.
In portrait mode, the content is compressed horizontally until the UI reaches the 9/16 aspect ratio. From this point, the UI starts to be "taller", but components width remain the same.
What can be extracted from all this information, is that all Openbravo modules should be rendered properly in a 9/16 aspect ratio, because this is the aspect ratio where the components will have the smaller size, and they should display properly even with this size.
The choice of 9/8 aspect ratio as the point from where the UI moves from landscape to portait mode, is because this aspect ratio is in reallity 18/16, which is the same than two 9/16 columns rendered side by side. Taking into account the previous constraint, the UI cannot guarantee that below this aspect ratio components will display properly, so the switch is made at this point.
Openbravo UI Colors
Primary Colors
The primary color is the color displayed most frequently.
It is present in the top toolbar bar as well as in most of the main screen buttons.
Secondary Colors
The secondary color is mainly used to accent the application.
It is present in some controls, headlines and in popup default action buttons.
Tertiary Colors
The tertiary color use is reduced to secondary popup buttons.
Quaternary Colors
The quaternary color is an auxiliary one, and used in borders, separator lines, hover/active effect, lists, ...
Screen Backgrounds and Surfaces - MainScreen
Screen Backgrounds and Surfaces - Popup
Openbravo UI Main Components
Toolbar
Inherits: div
CSS class: obUiMultiColumn-leftToolbar / obUiMultiColumn-rightToolbar
Involved CSS variables to change colors
- background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0%, transparent 9%), linear-gradient(var(--color-primary-variant), var(--color-primary));
Appearence
Toolbar Button
Enyo component: OB.UI.ToolbarButton
Inherits: OB.UI.Button
CSS class: obUiToolbarButton
Involved CSS variables to change colors
- font-size: var(--font-medium-small);
- background-color: var(--color-primary);
- color: var(--color-on-primary);
Default appearence with states
Toolbar Button Tab
Enyo component: OB.UI.ToolbarButtonTab
Inherits: OB.UI.Button
CSS class: obUiToolbarButtonTab
Involved CSS variables to change colors
- font-size: var(--font-medium-small);
- background-color: var(--color-primary);
- color: var(--color-on-primary);
Default appearence with states
Buttons
Three different styles are provided out of the box: "Action Button", "Modal Dialog Button (Default Action)" and "Modal Dialog Button (Auxiliar Action)". The three of them will be reviewed in the following sub-chapter.
In order to create any new custom button, "OB.UI.Button" should be inherited, the create a CSS grid structure with 'obUiButton-components' CSS class, set an icon in 'obUiButton-components-icon' CSS class and style the label in 'obUiButton-components-label' CSS class.
Action Button
Enyo component: OB.UI.ActionButton
Inherits: OB.UI.Button
CSS class: obUiActionButton
Involved CSS variables to change colors
- font-size: var(--font-medium);
- background-color: var(--color-primary);
- color: var(--color-on-primary);
Default appearence with states
Modal Dialog Button - Default Action
Enyo component: OB.UI.ModalDialogButton (Default Action)
Inherits: OB.UI.Button
CSS class: obUiModalDialogButton_defaultAction
Involved CSS variables to change colors
- font-size: var(--font-medium);
- background-color: var(--color-secondary);
- color: var(--color-on-secondary);
Default appearence with states
Modal Dialog Button - Auxiliar Action
Enyo component: OB.UI.ModalDialogButton
Inherits: OB.UI.Button
CSS class: obUiModalDialogButton
Involved CSS variables to change colors
- font-size: var(--font-medium);
- background-color: var(--color-tertiary);
- color: var(--color-on-tertiary);
Default appearence with states
Receipt
Receipt Lines
CSS class: obUiOrderView-listOrderLines
Involved CSS variables to change colors
- font-size: var(--font-medium);
- background-color: var(--color-surface);
- color: var(--color-on-surface);
- color: var(--color-on-surface-secondary);
Default appearence with different content
Default appearence with states
Receipt Total and Taxes Breakdown
CSS class: obUiOrderView-totalAndBreakdowns
Involved CSS variables to change colors
- font-size: var(--font-medium);
- background-color: var(--color-secondary);
- color: var(--color-on-secondary);
Default appearence with different content
Browse & Search
Browse: Products list
CSS class: obUiListProducts-productTable
Involved CSS variables to change colors
- font-size: var(--font-medium);
- background-color: var(--color-surface);
- color: var(--color-on-surface);
- color: var(--color-on-surface-secondary);
Default appearence with different content and states
Browse: Categories list
CSS class: obUiListCategories-categoryTable
Involved CSS variables to change colors
- font-size: var(--font-medium);
- background-color: var(--color-surface);
- color: var(--color-on-surface);
Default appearence with states
Search Results
CSS class: obUiSearchProductCharacteristic-results-products
Involved CSS variables to change colors
- font-size: var(--font-medium);
- background-color: var(--color-surface);
- color: var(--color-on-surface);
- color: var(--color-on-surface-secondary);
Default appearence with different content and states
Form Element
The form element is the container for an input. It has the label, icon, erase icon, message and the input/select/textarea/selector itself.
Two different styles are provided out of the box: "Data Entry" and "Data Filter". Its required CSS class should be indicated at "OB.UI.FormElement" level, because it styles not only the input, butt the label, icon, etc.
Enyo component: OB.UI.FormElement
Inherits: div
CSS class: obUiFormElement
Form Element: Data Entry
CSS class: obUiFormElement_dataEntry
Form Element: Data Filter
CSS class: obUiFormElement_dataFilter
Form Element: Input
Enyo component: OB.UI.FormElement.Input
Inherits: enyo.Input
CSS class: obUiFormElementInput
Default appearence with different states with 'Data Entry' styling
Default appearence with different states with 'Data Filter' styling
Form Element: Select
Enyo component: OB.UI.FormElement.Select
Inherits: enyo.Select
CSS class: obUiFormElementSelect
Default appearence with different states with 'Data Entry' styling
Default appearence with different states with 'Data Filter' styling
Form Element: Select Option
Enyo component: OB.UI.FormElement.Select.Option
Inherits: enyo.Option
CSS class: obUiFormElementSelect
Default appearence with different states with 'Data Entry' styling
Default appearence with different states with 'Data Filter' styling
Form Element: Checkbox
Enyo component: OB.UI.FormElement.Checkbox
Inherits: enyo.Select
CSS class: obUiFormElementCheckbox
Default appearence with different states with 'Data Entry' styling
Default appearence with different states with 'Data Filter' styling
Form Element: Selector
Enyo component: OB.UI.FormElement.Selector
Inherits: OB.UI.BaseButton
CSS class: obUiFormElementSelector
Default appearence with different states with 'Data Entry' styling
Default appearence with different states with 'Data Filter' styling
Popup
Modal
Enyo component: OB.UI.Modal
Inherits: OB.UI.Popup
CSS class: obUiModal
Structure:
- header
- body
- footer
Involved CSS variables to change colors
- background-color: var(--color-surface-variant)
- font-size: var(--font-large);
- color: var(--color-secondary);
- font-size: var(--font-medium);
- color: var(--color-on-surface-variant);
Selector
Enyo component: OB.UI.ModalSelector
Inherits: OB.UI.Modal
CSS class: obUiModalSelector
Structure: Since this kind of components are custom, it is recommended to follow the following html/css structure in order to achieve a similar look & feel in all of them
- header
- CSS class: obUiModal-header
- body
- CSS class: obUiModal-body
- CSS class: obUiGenericReceiptsList (it could be a different one, the height must be calc(100% - 1px))
- CSS class: obUiGenericReceiptsList-container1 (it could be a different one, the height must be 100%)
- CSS class: obUiScrollableTable
- CSS class: obUiScrollableTable-theader
- CSS class: obUiScrollableTableHeader
- CSS class: obUiFilterSelectorTableHeader
- CSS class: obUiScrollableTableHeader
- CSS class: content of scrollable table
- CSS class: obUiScrollableTable-tlimit
- CSS class: obUiScrollableTable-tinfo
- CSS class: obUiScrollableTable-tempty
- CSS class: obUiScrollableTable-theader
- CSS class: obUiScrollableTable
- CSS class: obUiGenericReceiptsList-container1 (it could be a different one, the height must be 100%)
- CSS class: obUiGenericReceiptsList (it could be a different one, the height must be calc(100% - 1px))
- CSS class: obUiModal-body
- footer
- CSS class: obUiModal-footer
- CSS class: obUiModal-footer-secondaryButtons
- CSS class: obUiModal-footer-mainButtons
- CSS class: obUiModal-footer
Involved CSS variables to change colors
- background-color: var(--color-surface-variant)
- font-size: var(--font-large);
- color: var(--color-secondary);
- font-size: var(--font-medium);
- color: var(--color-on-surface-variant);
Back to Concepts