Documentation
Kitchen Sink documentation of style: 'Delos' of skin: 'ILIAS'
Mode Info
Description
- Purpose
- The Mode Info is a section on a page that informs the user that he is in a certain mode (e.g. in the preview as a member of a course).
- Composition
- The Mode Info MUST contain a title explaining the mode. The Mode Info MUST contain a Close Button to leave the mode.
- Effect
- By clicking the Close Button, the user leaves the current (application wide) mode.
- Context
- The Mode Info is used with the Standard Page.
Rivals
- System Info
- use ModeInfo to indicate a certain state in a user context. The SystemInfo on the other hand informs about system-wide information.
Rules
- Usage
- The Mode Info is unique for the page - there MUST be not more than one.
- Interaction
- The Mode Info MUST allow the user to leave the mode.
- Accessibility
- The Mode Info informs about an important circumstance, which must be recognizable in particular also for persons with a handicap.
Example 1: Modeinfo
<?php declare(strict_types=1); namespace ILIAS\UI\examples\MainControls\ModeInfo; use ILIAS\DI\Container; function modeinfo(): string { global $DIC; $f = $DIC->ui()->factory(); $renderer = $DIC->ui()->renderer(); $request_wrapper = $DIC->http()->wrapper()->query(); $icon = $f->symbol()->icon()->standard('root', '')->withSize('large'); $target = new \ILIAS\Data\URI( $DIC->http()->request()->getUri()->__toString() . '&new_mode_info=' . MODE_INFO_ACTIVE ); return $renderer->render([ $f->divider()->horizontal(), $f->link()->bulky($icon, 'See UI in fullscreen-mode', $target), $f->legacy('<p><b>press the link above to init a page with Mode Info</b></p><p><br/></p>'), $f->divider()->horizontal() ]); } const MODE_INFO_ACTIVE = 2; const MODE_INFO_INACTIVE = 1; global $DIC; $request_wrapper = $DIC->http()->wrapper()->query(); $refinery = $DIC->refinery(); if ($request_wrapper->has('new_mode_info') && $request_wrapper->retrieve('new_mode_info', $refinery->kindlyTo()->int()) === MODE_INFO_ACTIVE ) { \ilInitialisation::initILIAS(); echo(renderModeInfoFullscreenMode($DIC)); exit(); } function renderModeInfoFullscreenMode(\ILIAS\DI\Container $dic) { $f = $dic->ui()->factory(); $data_factory = new \ILIAS\Data\Factory(); $renderer = $dic->ui()->renderer(); $panel_content = $f->legacy("Mode Info is Active"); $slate = $f->mainControls()->slate()->legacy( "Mode Info Active", $f->symbol()->glyph()->notification(), $f->legacy("Things todo when special Mode is active") ); $page = $f->layout()->page()->standard( [$f->panel()->standard( 'Mode Info Example', $panel_content )], $f->mainControls()->metaBar()->withAdditionalEntry( 'help', $f->button()->bulky($f->symbol()->glyph()->help(), 'Help', '#') ), $f->mainControls()->mainBar()->withAdditionalEntry("entry1", $slate), $f->breadcrumbs([]), $f->image()->responsive("templates/default/images/logo/HeaderIcon.svg", "ILIAS"), $f->image()->responsive("templates/default/images/logo/HeaderIconResponsive.svg", "ILIAS"), "./templates/default/images/logo/favicon.ico", $dic->ui()->factory()->toast()->container(), $dic->ui()->factory()->mainControls()->footer([], "Footer"), 'UI PAGE MODE INFO DEMO', //page title 'ILIAS', //short title 'Mode Info Demo' //view title ) ->withHeaders(true) ->withUIDemo(true); /** * a Mode Info needs to know what happens when you exit the mode */ $back = str_replace( 'new_mode_info=' . MODE_INFO_ACTIVE, 'new_mode_info=' . MODE_INFO_INACTIVE, $dic->http()->request()->getUri()->getQuery() ); $mode_info = $f->mainControls()->modeInfo( "Active Mode Info", $data_factory->uri($dic->http()->request()->getUri()->withQuery($back)->__toString()) ); /** * the Mode Info is attached to the page */ $page = $page->withModeInfo($mode_info); return $renderer->render($page); }
Relations
- Parents
- UIComponent
- Main Controls