View source | Discuss this page | Page history | Printable version   

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.

Skin2019-Colors-Primary.png

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.

Skin2019-Colors-Secondary.png

Tertiary Colors

The tertiary color use is reduced to secondary popup buttons.

Skin2019-Colors-Tertiary.png

Quaternary Colors

The quaternary color is an auxiliary one, and used in borders, separator lines, hover/active effect, lists, ...

Skin2019-Colors-Quaternary.png

Screen Backgrounds and Surfaces - MainScreen

Skin2019-Colors-ScreenBackgroundsAndSurfaces-MainScreen.png

Screen Backgrounds and Surfaces - Popup

Skin2019-Colors-ScreenBackgroundsAndSurfaces-Popup.png


Openbravo UI Main Components

Toolbar

Inherits: div

CSS class: obUiMultiColumn-leftToolbar / obUiMultiColumn-rightToolbar

Involved CSS variables to change colors

Appearence

Skin2019-Toolbar.png

Toolbar Button

Enyo component: OB.UI.ToolbarButton

Inherits: OB.UI.Button

CSS class: obUiToolbarButton

Involved CSS variables to change colors

Default appearence with states

Skin2019-ToolbarButton.png

Toolbar Button Tab

Enyo component: OB.UI.ToolbarButtonTab

Inherits: OB.UI.Button

CSS class: obUiToolbarButtonTab

Involved CSS variables to change colors

Default appearence with states

Skin2019-ToolbarButtonTab.png


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

Default appearence with states

Skin2019-ActionButton.png

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

Default appearence with states

Skin2019-ModalDialogButton defaultAction.png

Modal Dialog Button - Auxiliar Action

Enyo component: OB.UI.ModalDialogButton

Inherits: OB.UI.Button

CSS class: obUiModalDialogButton

Involved CSS variables to change colors

Default appearence with states

Skin2019-ModalDialogButton.png

Receipt

Receipt Lines

CSS class: obUiOrderView-listOrderLines

Involved CSS variables to change colors

Default appearence with different content

Skin2019-Receipt-DifferentContent.png

Default appearence with states

Skin2019-Receipt-States.png

Receipt Total and Taxes Breakdown

CSS class: obUiOrderView-totalAndBreakdowns

Involved CSS variables to change colors

Default appearence with different content

Skin2019-Receipt-States.png

Browse & Search

Browse: Products list

CSS class: obUiListProducts-productTable

Involved CSS variables to change colors

Default appearence with different content and states

Skin2019-BrowseProductsList.png

Browse: Categories list

CSS class: obUiListCategories-categoryTable

Involved CSS variables to change colors

Default appearence with states

Skin2019-BrowseCategoriesList.png

Search Results

CSS class: obUiSearchProductCharacteristic-results-products

Involved CSS variables to change colors

Default appearence with different content and states

Skin2019-SearchResults.png

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

Skin2019-FormElement-Input-DataEntry.png

Default appearence with different states with 'Data Filter' styling

Skin2019-FormElement-Input-DataFilter.png

Form Element: Select

Enyo component: OB.UI.FormElement.Select

Inherits: enyo.Select

CSS class: obUiFormElementSelect

Default appearence with different states with 'Data Entry' styling

Skin2019-FormElement-Select-DataEntry.png

Default appearence with different states with 'Data Filter' styling

Skin2019-FormElement-Select-DataFilter.png

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

Skin2019-FormElement-Select-Option-DataEntry.png

Default appearence with different states with 'Data Filter' styling

Skin2019-FormElement-Select-Option-DataFilter.png

Form Element: Checkbox

Enyo component: OB.UI.FormElement.Checkbox

Inherits: enyo.Select

CSS class: obUiFormElementCheckbox

Default appearence with different states with 'Data Entry' styling

Skin2019-FormElement-Checkbox-DataEntry.png

Default appearence with different states with 'Data Filter' styling

Skin2019-FormElement-Checkbox-DataFilter.png

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

Skin2019-FormElement-Selector-DataEntry.png

Default appearence with different states with 'Data Filter' styling

Skin2019-FormElement-Selector-DataFilter.png


Popup

Modal

Enyo component: OB.UI.Modal

Inherits: OB.UI.Popup

CSS class: obUiModal

Structure:

Involved CSS variables to change colors

Skin2019-Popup-Modal.png

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

Involved CSS variables to change colors

Skin2019-Popup-Selector.png

Back to Concepts

Retrieved from "http://wiki.openbravo.com/wiki/Retail:Developers_Guide/Web_POS_Skin"

This page has been accessed 4,025 times. This page was last modified on 31 December 2019, at 16:07. Content is available under Creative Commons Attribution-ShareAlike 2.5 Spain License.