Retail:Developers Guide/Web POS Skin

Contents 1 Openbravo UI Landscape vs Portrait display 2 Openbravo UI Colors 2.1 Primary Colors 2.2 Secondary Colors 2.3 Tertiary Colors 2.4 Quaternary Colors 2.5 Screen Backgrounds and Surfaces - MainScreen 2.6 Screen Backgrounds and Surfaces - Popup 3 Openbravo UI Main Components 3.1 Toolbar 3.1.1 Toolbar Button 3.1.2 Toolbar Button Tab 3.2 Buttons 3.2.1 Action Button 3.2.2 Modal Dialog Button - Default Action 3.2.3 Modal Dialog Button - Auxiliar Action 3.3 Receipt 3.3.1 Receipt Lines 3.3.2 Receipt Total and Taxes Breakdown 3.4 Browse & Search 3.4.1 Browse: Products list 3.4.2 Browse: Categories list 3.4.3 Search Results 3.5 Form Element 3.5.1 Form Element: Data Entry 3.5.2 Form Element: Data Filter 3.5.3 Form Element: Input 3.5.4 Form Element: Select 3.5.5 Form Element: Select Option 3.5.6 Form Element: Checkbox 3.5.7 Form Element: Selector 3.6 Popup 3.6.1 Modal 3.6.2 Selector

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: content of scrollable table
          • CSS class: obUiScrollableTable-tlimit
          • CSS class: obUiScrollableTable-tinfo
          • CSS class: obUiScrollableTable-tempty
• footer
  • CSS class: obUiModal-footer
    • CSS class: obUiModal-footer-secondaryButtons
    • CSS class: obUiModal-footer-mainButtons

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

Categories: Retail Developers Guide | Mobile Developers Guide