© 2021 Leviy

Overlays

Overlays are layers on top of the user interface that provide extra information or actions. Different types of overlays that support different types of user cases are used in the Leviy Platform, some more interruptive than others.

Modals

A modal shifts the user’s attention from the page and requires user interaction to continue with the main workflow. Modals always contain at least two buttons, one to confirm and one to cancel. Modals should only be closed when interacting with these buttons, not when clicking or tapping outside the dialog. To focus attention to a modal, backgrounds behind modals are scrimmed.

Leviy knows the following modals:

  • Alert dialogs contain urgent information that require immediate attention
  • Confirmation dialogs require input and confirmation of a choice before dismissal
  • Modals cover a part of the screen or the entire screen (mainly mobile) and may contain multiple actions

Alert dialog

Some potentially destructive actions should be confirmed by the user before they are executed. The alert dialog can be used to ask for this confirmation.

The confirmation dialog is based on Material's Dialogs, and implemented using Daemonite's Material Dialogs. See Usage to choose between a Dialog, Banner or Snackbar.

Static examples

Below are some static examples of alert dialogs.

With a title
Without a title

Using data attributes on a form

To use an alert dialog to ask for user confirmation before submitting a form, use the data-alert-dialog-* attributes on your form element:

With a title
<form data-alert-dialog-title="Dialog title"
    data-alert-dialog-body="Dialog body"
    data-alert-dialog-dismiss="Cancel"
    data-alert-dialog-confirm="Confirm">
    <button class="btn btn-primary text-wide" type="submit">Submit</button>
</form>
Without a title
<form data-alert-dialog-body="Dialog body"
    data-alert-dialog-dismiss="Cancel"
    data-alert-dialog-confirm="Confirm">
    <button class="btn btn-primary text-wide" type="submit">Submit</button>
</form>

Confirmation dialog

Heads up: automatically enabling and disabling the confirm button after checking confirmations will only work when confirmation dialog is opened and initialized by creating an instance of the ConfirmationDialog component. This can also be achieved by using data attributes on a form element.

Using data attributes on a form

To use a confirmation dialog to ask for user confirmation before submitting a form, use the data-confirmation-dialog-* attributes on your form element:

{% set confirmations = [
    'All files and underlying versions will be deleted',
    'The file category will be removed from the chosen scope'
] %}

<form data-confirmation-dialog-title="Delete file category"
    data-confirmation-dialog-body="Deleting a file category cannot be undone. I understand that:"
    data-confirmation-dialog-confirmations="{{ confirmations|json_encode }}"
    data-confirmation-dialog-dismiss="Cancel"
    data-confirmation-dialog-confirm="Delete">
    <button class="btn btn-primary text-wide" type="submit">Delete category</button>
</form>

Default layout

{% include '@leviy-components/modal/modal.html.twig' with {
    'title': 'Modal title',
    'body': 'Modal body',
    'dismiss': 'Cancel',
    'confirm': 'Confirm'
} %}

Customized layout

To customize the rendering of header, body or footer you can use embed to overwrite the default layout of the corresponding blocks. The template will be rendered just like an include, even parameters can be defined, but all blocks defined within the embed will be used instead of the predefined blocks.

{% embed '@leviy-components/modal/modal.html.twig' with {
    'dismiss': 'No',
    'confirm': 'Yes'
} %}
    {% block header %}
        <h1 class="w-100 text-center font-weight-bold">Do you want to continue?</h1>
    {% endblock %}

    {% block body %}
        <div class="display-2 text-center text-danger">
            <i class="material-icons-round">report_problem</i>
        </div>
    {% endblock %}
{% endembed %}

Tooltips

Tooltips are floating labels that contain informative text triggered by hover, focus, tap or click. When activated, tooltips provide the user of explanation of an element. Tooltips are always paired with an interactive element.

<button type="button" class="btn btn-secondary" data-toggle="tooltip" title="This is a tooltip">
    Button with tooltip
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum posuere, augue a ornare cursus.">
    Button with a long tooltip
</button>

Menus contain a list of choices applicable for the content on the page and appear after interaction with a form element, button or an icon. In the Leviy Platform there are two types of menus; dropdown menus and the app switcher. Menu items may contain system or product icons to support the proposed action. If it is not possible to show all items, the menu can become scrollable. Menu’s have certain motion standards, read more about this at behaviour of menus of the Material Design Guidelines.

Dropdown menus appear after interaction with a textfield, button or an icon. In the case of a textfield the selected menu item(s) will show up in the textfield. See multiple select for an example of this. Dropdown menus may contain icons and vary in size. Menus that appear after an interaction with a textfield, adopt the same width as the textfield.

Administrator Backoffice Employee Cleaner Cluster Manager 
{% import '@leviy-templates/macros/buttons.html.twig' as buttons %}

{{ buttons.button('Primary', 'primary', 'submit', false, {'toggle': 'dropdown'}, 'dropdownMenu') }}

{{ buttons.icon('outdoor_grill', '', '', '', false, {'toggle': 'dropdown'}, 'dropdownMenu') }}

<div class="dropdown-menu" aria-labelledby="dropdownMenu">
    <a class="dropdown-item" href="#">Administrator</a>
    <a class="dropdown-item" href="#">Backoffice Employee</a>
    <a class="dropdown-item" href="#">Cleaner</a>
    <a class="dropdown-item" href="#">Cluster Manager</a>
</div>

Text only items

Administrator Backoffice Employee Cleaner Cluster Manager 
<div class="dropdown-menu">
    <a class="dropdown-item" href="#">Administrator</a>
    <a class="dropdown-item" href="#">Backoffice Employee</a>
    <a class="dropdown-item" href="#">Cleaner</a>
    <a class="dropdown-item" href="#">Cluster Manager</a>
</div>

Text items with system icons

cloud_download Menu item 1 edit Menu item 2 forward Menu item 3 delete Menu item 4 
<div class="dropdown-menu">
    <a class="dropdown-item" href="#"><i class="material-icons-round">cloud_download</i> Menu item 1</a>
    <a class="dropdown-item" href="#"><i class="material-icons-round">edit</i> Menu item 2</a>
    <a class="dropdown-item" href="#"><i class="material-icons-round">forward</i> Menu item 3</a>
    <a class="dropdown-item" href="#"><i class="material-icons-round">delete</i> Menu item 4</a>
</div>

App switcher

The app switcher is a dropdown menu with differently styled items. Each item contains a system icon and title that represent the app/service.

account_circle
Accounts
dashboard
Dashboard
description
Files 
{% include '@leviy-templates/components/toolbar/app-switcher-container.html.twig' with {
    'service': { 'id': 'accounts' },
    'apps': [
        { 'id': 'accounts', 'url': '#' },
        { 'id': 'dashboard', 'url': '#' },
        { 'id': 'files', 'url': '#' }
    ]
} %}

Mobile app

Heads up: The following overlays are specificly for the use in our mobile app and the examples only provide a user interface and templating structure without the necessary components to make them work in the app. Implementation details and how to initialize and interact with these overlays can be found in the mobile app.

Message

check_circle

Cancelled

You have cancelled the audit 
{% include '@leviy-components/mobile_app/overlay/message_overlay.html.twig' with {
    'icon': 'check_circle',
    'title': 'Cancelled',
    'subtitle': 'You have cancelled the audit'
} %}

Form

  

{% embed '@leviy-components/mobile_app/overlay/modal_overlay.html.twig' %}
    {% block body %}
        <div class="flex-grow-1 px-3 d-flex ">
            <div class="d-flex align-item-stretch flex-column w-100">
                <label class="header-2">Why can’t you start?</label>
                <textarea class="flex-grow-1" placeholder="Type your reason here"></textarea>
            </div>
        </div>
    {% endblock %}

    {% block footer %}
        <button class="btn btn-primary btn-block">Send</button>
    {% endblock %}
{% endembed %}

Buttons

Selecteer DKS 

{% embed '@leviy-components/mobile_app/overlay/modal_overlay.html.twig' with {
    'title': 'Selecteer DKS'
} %}
    {% block body %}
        <div class="px-3 pt-1">
            <button class="btn btn-light mb-3 py-3 w-100 inspection">DKS Food</button>
            <button class="btn btn-light mb-3 py-3 w-100 inspection">DKS Hospital</button>
        </div>
    {% endblock %}
{% endembed %}

Buttons

Perform audit 

{% embed '@leviy-components/mobile_app/overlay/button_overlay.html.twig' with {
    'title': 'Perform audit'
} %}
    {% block body %}
        <div class="d-flex flex-column">
            <button class="btn btn-primary mb-4 start-audit">Start audit</button>
            <button class="btn btn-light mb-4 cancel-audit">I can't start</button>
        </div>
    {% endblock %}
{% endembed %}