Documentation

Kitchen Sink documentation of style: 'Delos' of skin: 'ILIAS'

Repository Object

Description

Purpose: Repository Object cards are used in contexts that more visual information about the repository object type is needed.
Composition: Repository Object cards add icons on a darkened layer over the image. This Darkened layer is divided into 4 horizontal cells where the icons can be located. Starting from the left, the icons have the following order: Cell 1: Object type (UI Icon) Cell 2: Learning Progress (UI ProgressMeter in the mini version) or Certificate (UI Icon) Cell 3: Empty Cell 4: Actions (UI Dropdown) Cells and its content are responsively adapted if the size of the screen is changed.

Rivals

Item: Items are used in lists or similar contexts.

Rules

Usage

Repository Object Cards MAY contain a UI Icon displaying the object type.
Repository Object Cards MAY contain a UI ProgressMeter displaying the learning progress of the user.
Repository Object Cards MAY contain a UI Icon displaying a certificate icon if the user finished the task.
Repository Object Cards MAY contain a UI ProgressMeter OR UI Icon certificate, NOT both.

Example 1: Base

RepositoryObject Card Title

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Card\RepositoryObject;
 
/* Copyright (c) 2016 Timon Amstutz <timon.amstutz@ilub.unibe.ch> Extended GPL, see docs/LICENSE */
 
function base()
{
    //Init Factory and Renderer
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $image = $f->image()->responsive(
        "./templates/default/images/logo/HeaderIcon.svg",
        "Thumbnail Example"
    );
 
    $card = $f->card()->repositoryObject("RepositoryObject Card Title", $image);
 
    //Render
    return $renderer->render($card);
}

Example 2: With object icon and actions

Title

Entry 1: Some text
Entry 2: Some more text

Entry 1: Some text
Entry 2: Some more text

Entry 1: Some text
Entry 2: Some more text

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Card\RepositoryObject;
 
/* Copyright (c) 2018 Jesús López <lopez@leifos.com> Extended GPL, see docs/LICENSE */
 
function with_object_icon_and_actions()
{
    //Init Factory and Renderer
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $icon = $f->symbol()->icon()->standard("crs", 'Course');
 
    $items = array(
        $f->button()->shy("Go to Course", "#"),
        $f->button()->shy("Go to Portfolio", "#"),
        $f->divider()->horizontal(),
        $f->button()->shy("ilias.de", "http://www.ilias.de")
    );
 
    $dropdown = $f->dropdown()->standard($items);
 
    $content = $f->listing()->descriptive(
        array(
            "Entry 1" => "Some text",
            "Entry 2" => "Some more text",
        )
    );
 
    $image = $f->image()->responsive(
        "./templates/default/images/logo/HeaderIcon.svg",
        "Thumbnail Example"
    );
 
    $card = $f->card()->repositoryObject(
        "Title",
        $image
    )->withActions(
        $dropdown
    )->withObjectIcon(
        $icon
    )->withSections(
        array(
            $content,
            $content,
            $content
        )
    );
 
    //Render
    return $renderer->render($card);
}

Example 3: With object icon and certificate

Title

Entry 1: Some text
Entry 2: Some more text

Entry 1: Some text
Entry 2: Some more text

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Card\RepositoryObject;
 
/* Copyright (c) 2018 Jesús López <lopez@leifos.com> Extended GPL, see docs/LICENSE */
 
function with_object_icon_and_certificate()
{
    //Init Factory and Renderer
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $icon = $f->symbol()->icon()->standard("crs", 'Course');
 
    $content = $f->listing()->descriptive(
        array(
            "Entry 1" => "Some text",
            "Entry 2" => "Some more text",
        )
    );
 
    $image = $f->image()->responsive(
        "./templates/default/images/logo/HeaderIcon.svg",
        "Thumbnail Example"
    );
 
    $card = $f->card()->repositoryObject(
        "Title",
        $image
    )->withObjectIcon(
        $icon
    )->withCertificateIcon(
        true
    )->withSections(
        array(
            $content,
            $content,
        )
    );
 
    //Render
    return $renderer->render($card);
}

Example 4: With object icon and progressmeter mini

Title

Entry 1: Some text
Entry 2: Some more text

Entry 1: Some text
Entry 2: Some more text

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Card\RepositoryObject;
 
/* Copyright (c) 2018 Jesús López <lopez@leifos.com> Extended GPL, see docs/LICENSE */
 
function with_object_icon_and_progressmeter_mini()
{
    //Init Factory and Renderer
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $icon = $f->symbol()->icon()->standard("crs", 'Course');
    $progressmeter = $f->chart()->progressMeter()->mini(100, 70);
 
    $content = $f->listing()->descriptive(
        array(
            "Entry 1" => "Some text",
            "Entry 2" => "Some more text",
        )
    );
 
    $image = $f->image()->responsive(
        "./templates/default/images/logo/HeaderIcon.svg",
        "Thumbnail Example"
    );
 
    $card = $f->card()->repositoryObject(
        "Title",
        $image
    )->withObjectIcon(
        $icon
    )->withProgress(
        $progressmeter
    )->withSections(
        array(
            $content,
            $content,
        )
    );
 
    //Render
    return $renderer->render($card);
}

Example 5: With object icon

Title

Entry 1: Some text
Entry 2: Some more text

Entry 1: Some text
Entry 2: Some more text

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Card\RepositoryObject;
 
/* Copyright (c) 2018 Jesús López <lopez@leifos.com> Extended GPL, see docs/LICENSE */
 
function with_object_icon()
{
    //Init Factory and Renderer
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $icon = $f->symbol()->icon()->standard("crs", 'Course');
 
    $image = $f->image()->responsive(
        "./templates/default/images/logo/HeaderIcon.svg",
        "Thumbnail Example"
    );
 
    $content = $f->listing()->descriptive(
        array(
            "Entry 1" => "Some text",
            "Entry 2" => "Some more text",
        )
    );
 
    $card = $f->card()->repositoryObject(
        "Title",
        $image
    )->withObjectIcon(
        $icon
    )->withSections(
        array(
            $content,
            $content
        )
    );
    //Render
    return $renderer->render($card);
}

Relations

Parents

UIComponent
Card