Dokumentation

'Kitchen Sink'-Dokumentation von Style: 'Delos' vom Skin: 'ILIAS'

Main Bar

Description

Purpose: The Main Bar is a unique page section that bundles access to content- based navigational strategies (like the repository tree) as well as navigation to services unrelated to the actual content, like the administrative settings. Since the controls necessary for theses purposes might be quite complex, they are summed up in an easy to grasp Icon or Glyph in conjunction with a short text. Theses reductions form the entries for the Main Bar, which thus is the primary list of navigational options for the user and the usual starting point for the user to explore the system. There are entries in the bar that are never modified by changing context, but may vary according to e.g. the current user's permissions or settings of the installation. There also is the tools-section of entries in the bar that is used to show tools that are opened on request of the user, e.g. the help, or depending on requirements of the content, e.g. a local navigation. However, content actions, like "new item"-actions, the actions-menu (with comments, notes and tags), moving, linking or deleting objects and the like are NOT part of the Main Bar. Also, there should be a differentiation between elements of the Main Bar and elements of e.g., the Personal Dekstop: The Personal Desktop provides access to services and tools and displays further information at first glance (e.g. the calendar). The Main Bar may reference those tools as well, but rather in form of a link than a widget.
Composition: The Main Bar holds Slates and Bulky Buttons. In a desktop environment, a vertical bar is rendered on the left side of the screen covering the full height (minus header- and footer area). Entries are aligned vertically. In a mobile context, the bar will be rendered horizontally on the bottom. When the entries of a Main Bar exceed the available height (mobile: width), remaining buttons will be collected in a "..."-Button. The Main Bar is always visible and available (except in specialized views like the exam mode) as a static screen element unaffected by scrolling.
Effect: Clicking an entry will carry out its configured action. For slates, this is expanding the slate, while for Bulky Buttons this might be, e.g., just changing the page. Buttons in the Main Bar are stateful, i.e. they have a pressed-status that can either be toggled by clicking the same button again or by clicking a different button. This does not apply to Buttons directly changing the context. Opening a slate by clicking an entry will close all other slates in the Main Bar. On desktop, slates open on the right hand of the Main Bar, between bar and content, thus "pushing" the content to the right, if there is not enough room. If the content's width would fall below its defined minimum, the expanded slate is opened above (like in overlay, not "on top of") the content. The slates height equals that of the Main Bar. Also, their position will remain fixed when the page is scrolled. A button to close a slate is rendered underneath the slate. It will close all visible Slates and reset the states of all Main Bar-entries. When a tool (such as the help), whose contents are displayed in a slate, is being triggered, a special entry is rendered as first element of the Main Bar, making the available/invoked tool(s) accessible. Tools can be closed, i.e. removed from the Main Bar, via a Close Button. When the last Tool is closed, the tools-section is removed as well.

Context

The Main Bar is used in the Standard Page.

Rivals

Tab Bar: The Main Bar (and its components) shall not be used to substitute functionality available at objects, such as settings, members or learning progress. Those remain in the Tab Bar.
Meta Bar: Notifications from the system to the user, e.g. new Mail, are placed in Elements of the Meta Bar. The general direction of communication for the Main Bar is "user to system", while the direction is "system to user" with elements of the Meta Bar. However, navigation from both components can lead to the same page.

Rules

Usage

There SHOULD be a Main Bar on the page.
If there is a Main Bar, it MUST be unique for the page.
Entries and Tools in the Main Bar, or for that matter, their respective slate-contents, MUST NOT be used to reflect the outcome of a user's action, e.g., display a success-message.
Contents of the slates, both in Entries and Tools, MUST NOT be used to provide information of a content object if that information cannot be found in the content itself. They MUST NOT be used as a "second screen" to the content-part of the Page.

Composition

The bar MUST NOT contain items other than Bulky Buttons or Slates.
The bar MUST contain at least one Entry.
The bar SHOULD NOT contain more than five Entries.
The bar SHOULD NOT contain more than five Tool-Entries.
Entries and Tools in the Main Bar MUST NOT be enhanced with counters or other notifications drawing the user's attention.

Interaction

Operating elements in the bar MUST either lead to further navigational options within the bar (open a slate) OR actually invoke navigation, i.e. change the location/content of the current page.
Elements in the bar MUST NOT open a modal or new Viewport.

Style

The bar MUST have a fixed width (desktop).

Accessibility

The HTML tag < nav > MUST be used for the Main Bar to be identified as the ARIA Landmark Role "Navigation".
The "aria-label" attribute MUST be set for the Main Bar, which MUST be language-dependant.
The area, where the entries of the Main Bar are placed, MUST bear the ARIA role "menubar".
Bulky Buttons in the Main Bar MUST bear the "aria-pressed" attribute to inform the user if the entry is engaged or disengaged at the moment.
Bulky Buttons in the Main Bar MUST bear the "aria-haspopup" attribute.
Bulky Buttons in the Main Bar MUST bear the ARIA role "menuitem".
Slates in the Main Bar MUST bear the ARIA role "menu".

Example 1: Mainbar

function mainbar()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $mainbar = buildMainbar($f, $renderer);
    return $renderer->render($mainbar);
}
 
function buildMainbar($f, $r)
{
    $tools_btn = $f->button()->bulky(
        $f->symbol()->icon()->custom('./src/UI/examples/Layout/Page/Standard/grid.svg', ''),
        'Tools',
        '#'
    );
    $more_btn = $f->button()->bulky(
        $f->symbol()->icon()->standard('', ''),
        'more',
        '#'
    );
 
    $mainbar = $f->mainControls()->mainbar()
        ->withToolsButton($tools_btn)
        ->withMoreButton($more_btn);
 
    $entries = [];
    $entries['repository'] = getDemoEntryRepository($f);
    $entries['pws'] = getDemoEntryPersonalWorkspace($f);
    $entries['achievements'] = getDemoEntryAchievements($f);
    $entries['communication'] = getDemoEntryCommunication($f);
    $entries['organisation'] = getDemoEntryOrganisation($f);
    $entries['administration'] = getDemoEntryAdministration($f);
 
    foreach ($entries as $id => $entry) {
        $mainbar = $mainbar->withAdditionalEntry($id, $entry);
    }
    $tools = getDemoEntryTools($f);
    foreach ($tools as $id => $entry) {
        $mainbar = $mainbar->withAdditionalToolEntry($id, $entry);
    }
 
    return $mainbar;
}
 
function getDemoEntryRepository($f)
{
    $symbol = $f->symbol()->icon()->custom('./src/UI/examples/Layout/Page/Standard/layers.svg', '')->withSize('small');
    $slate = $f->maincontrols()->slate()->combined('Repository', $symbol, '');
    return $slate;
}
 
function getDemoEntryPersonalWorkspace($f)
{
    $symbol = $f->symbol()->icon()->custom('./src/UI/examples/Layout/Page/Standard/user.svg', '')->withSize('small');
    $slate = $f->maincontrols()->slate()->combined('Personal Workspace', $symbol, '');
    return $slate;
}
 
function getDemoEntryAchievements($f)
{
    $symbol = $f->symbol()->icon()->custom('./src/UI/examples/Layout/Page/Standard/achievements.svg', '')->withSize('small');
    $slate = $f->maincontrols()->slate()->legacy('Achievements', $symbol, $f->legacy('content: Achievements'));
    return $slate;
}
 
function getDemoEntryCommunication($f)
{
    $symbol = $f->symbol()->icon()->custom('./src/UI/examples/Layout/Page/Standard/communication.svg', '')->withSize('small');
    $slate = $f->maincontrols()->slate()->legacy('Communication', $symbol, $f->legacy('content: Communication'));
    return $slate;
}
 
function getDemoEntryOrganisation($f)
{
    $symbol = $f->symbol()->icon()->custom('./src/UI/examples/Layout/Page/Standard/organisation.svg', '')->withSize('small');
    $slate = $f->maincontrols()->slate()->legacy('Organisation', $symbol, $f->legacy('content: Organisation'));
    return $slate;
}
 
function getDemoEntryAdministration($f)
{
    $symbol = $f->symbol()->icon()->custom('./src/UI/examples/Layout/Page/Standard/administration.svg', '')->withSize('small');
    $slate = $f->maincontrols()->slate()->legacy('Administration', $symbol, $f->legacy('content: Administration'));
    return $slate;
}
 
function getDemoEntryTools($f)
{
    $symbol = $f->symbol()->icon()->custom('./src/UI/examples/Layout/Page/Standard/question.svg', '')->withSize('small');
    $slate = $f->maincontrols()->slate()->legacy('Help', $symbol, $f->legacy('<h2>tool 1</h2><p>Some Text for Tool 1 entry</p>'));
    $tools = ['tool1' => $slate];
    return $tools;
}

Relations

Parents

UIComponent
Main Controls