Dokumentation

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

Standard

Description

Purpose: Standard Icons represent ILIAS Objects. In their outlined version, they are used to be layered upon a picture or if the Standard Icon should not catch too much of the users attention.
Composition: A Standard Icon is displayed as a block-element with a background-graphic. By default, a fallback icon will be rendered; this is until a background image is defined in the icon's CSS-class. The outlined version is the silhouette of the Standard Icon. This outlined version therefore attracts less attention.

Rivals

Custom Icon: Custom Icons are constructed with a path to an (uploaded) image.

Rules

Usage

If they are layered upon a picture, the outlined version MUST be used.
In any other case, the non-outlined version SHOULD be used except for scenarios where the icon should not draw too much attention.

Style

CSS-Filters MAY be used for Standard Icons in their outlined version to manipulate the stroke to fit the context.
In their outlined version, Standard Icons MUST only use white as color for the stroke, to make filter easily applicable.

Accessibility

Icons MUST have aria-labels.

Example 1: Default icon

Small Example with Short Abbreviation

Medium Example with Short Abbreviation

Large Example with Short Abbreviation

Small Example with Long Abbreviation

Medium Example with Long Abbreviation

Large Example with Long Abbreviation

function default_icon()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $buffer = array();
 
    $ico = $f->symbol()->icon()->standard('someExample', 'Example');
    $ico = $ico->withAbbreviation('E');
 
    $buffer[] = $renderer->render($ico)
        . ' Small Example with Short Abbreviation';
 
    $buffer[] = $renderer->render($ico->withSize('medium'))
        . ' Medium Example with Short Abbreviation';
 
    $buffer[] = $renderer->render($ico->withSize('large'))
        . ' Large Example with Short Abbreviation';
 
 
    $ico = $f->symbol()->icon()->standard('someOtherExample', 'Example');
    $ico = $ico->withAbbreviation('LA');
 
    $buffer[] = $renderer->render($ico->withSize('small'))
        . ' Small Example with Long Abbreviation';
 
    $buffer[] = $renderer->render($ico->withSize('medium'))
        . ' Medium Example with Long Abbreviation';
 
    $buffer[] = $renderer->render($ico->withSize('large'))
        . ' Large Example with Long Abbreviation';
 
 
    return implode('<br><br>', $buffer);
}

Example 2: Disabled icon

Large Group Enabled

Large Group Disabled

Large Group Enabled Outlined

Large Group Disabled Outlined

function disabled_icon()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $buffer = array();
 
    $ico = $f->symbol()->icon()->standard('grp', 'Group', 'large', false);
 
    $buffer[] = $renderer->render($ico) . ' Large Group Enabled';
    $buffer[] = $renderer->render($ico->withDisabled(true)) . ' Large Group Disabled';
    $buffer[] = $renderer->render($ico->withIsOutlined(true)) . ' Large Group Enabled Outlined';
    $buffer[] = $renderer->render($ico->withDisabled(true)->withIsOutlined(true)) . ' Large Group Disabled Outlined';
 
    return implode('<br><br>', $buffer);
}

Example 3: Std course icon

Small Course

Medium Course

Large Course

function std_course_icon()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $buffer = array();
 
    $ico = $f->symbol()->icon()->standard('crs', 'Course', 'small');
 
    $buffer[] = $renderer->render($ico)
        . ' Small Course';
 
    $buffer[] = $renderer->render($ico->withSize('medium'))
        . ' Medium Course';
 
    $buffer[] = $renderer->render($ico->withSize('large'))
        . ' Large Course';
 
 
    return implode('<br><br>', $buffer);
}

Example 4: Std icons

grp - Gruppe

cat - Kategorie

crs - Kurs

mob - Medienobjekt

mail - Mail

sahs - Lernmodul SCORM

adm - Administration

usrf - Benutzerverwaltung

rolf - Rollen

usr - Benutzer

rolt - Rollenvorlage

lngf - Sprachen

lng - Sprache

role - Rolle

glo - Glossar

root - Magazin - Einstiegsseite

lm - Lernmodul ILIAS

frm - Forum

exc - Übung

auth - Authentifizierung / Neuanmeldung

fold - Ordner

file - Datei

tst - Test

qpl - Fragenpool für Tests

recf - Wiederhergestellte Objekte

mep - Medienpool

htlm - Lernmodul HTML

svy - Umfrage

spl - Fragenpool für Umfragen

cals - Kalender

trac - Zugriffsstatistiken und Lernfortschritt

assf - Test und Assessment

stys - Layout

webr - Weblink

seas - Suche

extt - Software von Drittanbietern

adve - Editor

ps - Datenschutz und Serversicherheit

nwss - Neuigkeiten und Webfeeds

feed - Webfeed

mcst - Mediacast

rcrs - ECS-Kurs

mds - Metadaten

cmps - Plugins

facs - Dateien

svyf - Umfragen

sess - Sitzung

mcts - Mediacast

wiki - Wiki

crsr - Kurslink

catr - Kategorielink

tags - Tagging

cert - Zertifikate

lrss - Lernmodule

accs - Barrierefreiheit

mobs - Medienobjekte und -pools

frma - Forum

book - Buchungspool

skmg - Kompetenzmanagement

blga - Blog

prfa - Portfolio

chtr - Chatraum

chta - Chat

otpl - Didaktische Vorlagen

blog - Blog

dcl - Datensammlung

poll - Abstimmung

hlps - Online-Hilfe

itgr - Objekteblock

rcat - ECS-Kategorie

rwik - ECS-Wiki

rlm - ECS-Lernmodul

rglo - ECS-Glossar

rfil - ECS-Datei

rgrp - ECS-Gruppe

rtst - ECS-Test

ecss - ECS

tos - Nutzungsvereinbarungen

bibl - Literaturliste

sysc - System Check

cld - Cloud-Objekt

reps - Magazin

crss - Kurs

grps - Gruppe

wbrs - Weblink

prtt - Portfoliovorlage

orgu - Organisationseinheit

wiks - Wiki

excs - Übung

taxs - Taxonomie

bibs - Literaturliste

awra - „Wer ist online?“-Anzeige

logs - Protokollierung

prg - Studienprogramm

prgs - Studienprogramme

cadm - Benutzerkontakte

grpr - Gruppenlink

bdga - Badges

wfe - Workflow Engine

iass - Individuelle Bewertung

copa - Inhaltsseite

bgtk - Hintergrundaufgabe

mme - Hauptmenü

pdfg - PDF-Erstellung

dshs - Dashboard

prss - Persönliche Ressourcen

nots - Notizen

lhts - Lernverlauf

coms - Kommentare

ltis - LTI

cmis - xAPI/cmi5

task - To-Do

rep - Magazin

function std_icons()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
    $lng = $DIC->language();
 
    $i = $f->symbol()->icon()->standard('NONE', 'DummyIcon');
    $default_icons = $i->getAllStandardHandles();
    $buffer = array();
 
    foreach ($default_icons as $icon) {
        $i = $f->symbol()->icon()->standard($icon, $icon, 'medium');
        $buffer[] = $renderer->render($i)
        . ' '
        . $icon
        . ' - '
        . $lng->txt("obj_$icon");
    }
 
    return implode('<br><br>', $buffer);
}

Example 5: Std outlined icons