[FEATURE] UI: add Listing\Inline and Listing\Entity\Grid component.

components/ILIAS/GlobalScreen/tests/Notification/BaseNotificationSetUpTBD.php

@@ -26,7 +26,6 @@
 use ILIAS\GlobalScreen\Services;
 use ILIAS\GlobalScreen\Provider\ProviderFactory;
 use ILIAS\UI\Component as C;
-
 use PHPUnit\Framework\TestCase;
 use ILIAS\UI\Implementation\Component as I;
 use ILIAS\UI\Implementation\Component\Counter\Factory;
@@ -79,7 +78,15 @@ protected function setUp(): void
 
     public function getUIFactory(): NoUIFactory
     {
-        $factory = new class () extends NoUIFactory {
+        $language_mock = $this->createMock(\ILIAS\Language\Language::class);
+        $language_mock->method('txt')->willReturnArgument(0);
+
+        $factory = new class ($language_mock) extends NoUIFactory {
+            public function __construct(
+                protected \ILIAS\Language\Language $language,
+            ) {
+            }
+
             public function item(): ILIAS\UI\Component\Item\Factory
             {
                 return new I\Item\Factory();
@@ -88,7 +95,7 @@ public function symbol(): ILIAS\UI\Component\Symbol\Factory
             {
                 return new I\Symbol\Factory(
                     new I\Symbol\Icon\Factory(),
-                    new I\Symbol\Glyph\Factory(),
+                    new I\Symbol\Glyph\Factory($this->language),
                     new I\Symbol\Avatar\Factory()
                 );
             }
@@ -101,7 +108,7 @@ public function mainControls(): C\MainControls\Factory
                         new Factory(),
                         new I\Symbol\Factory(
                             new I\Symbol\Icon\Factory(),
-                            new I\Symbol\Glyph\Factory(),
+                            new I\Symbol\Glyph\Factory($this->language),
                             new I\Symbol\Avatar\Factory()
                         )
                     )

components/ILIAS/Init/classes/Dependencies/InitUIFramework.php

@@ -206,7 +206,9 @@ public function getRefreshIntervalInMs(): int
             );
         };
         $c["ui.factory.symbol.glyph"] = function ($c) {
-            return new ILIAS\UI\Implementation\Component\Symbol\Glyph\Factory();
+            return new ILIAS\UI\Implementation\Component\Symbol\Glyph\Factory(
+                $c["lng"],
+            );
         };
         $c["ui.factory.symbol.icon"] = function ($c) {
             return new ILIAS\UI\Implementation\Component\Symbol\Icon\Factory();

components/ILIAS/LearningSequence/tests/IliasMocks.php

@@ -1,7 +1,5 @@
 <?php
 
-declare(strict_types=1);
-
 /**
  * This file is part of ILIAS, a powerful learning management system
  * published by ILIAS open source e-Learning e.V.
@@ -18,6 +16,8 @@
  *
  *********************************************************************/
 
+declare(strict_types=1);
+
 use ILIAS\UI\Factory as UIFactory;
 use ILIAS\UI\Implementation\Component as CImpl;
 use ILIAS\UI\Implementation\Component\SignalGenerator;
@@ -36,7 +36,7 @@ protected function mockUIFactory(): UIFactory
     {
         $ui_reflection = new ReflectionClass(UIFactory::class);
         $methods = array_map(
-            fn ($m) => $m->getName(),
+            fn($m) => $m->getName(),
             $ui_reflection->getMethods()
         );
 
@@ -57,10 +57,12 @@ protected function mockUIFactory(): UIFactory
             );
         $ui_factory->method('link')
             ->willReturn(new CImpl\Link\Factory());
+        $language_mock = $this->createMock(\ILIAS\Language\Language::class);
+        $language_mock->method('txt')->willReturnArgument(0);
         $ui_factory->method('symbol')
             ->willReturn(new CImpl\Symbol\Factory(
                 new CImpl\Symbol\Icon\Factory(),
-                new CImpl\Symbol\Glyph\Factory(),
+                new CImpl\Symbol\Glyph\Factory($language_mock),
                 new CImpl\Symbol\Avatar\Factory()
             ));
 

components/ILIAS/Test/tests/Scoring/Settings/ScoreSettingsTest.php

@@ -227,12 +227,20 @@ public function testScoreSettingsSectionScoring(): void
 
     public function getUIFactory(): NoUIFactory
     {
-        return new class () extends NoUIFactory {
+        $language_mock = $this->createMock(\ILIAS\Language\Language::class);
+        $language_mock->method('txt')->willReturnArgument(0);
+
+        return new class ($language_mock) extends NoUIFactory {
+            public function __construct(
+                protected \ILIAS\Language\Language $language,
+            ) {
+            }
+
             public function symbol(): C\Symbol\Factory
             {
                 return new S\Factory(
                     new S\Icon\Factory(),
-                    new S\Glyph\Factory(),
+                    new S\Glyph\Factory($this->language),
                     new S\Avatar\Factory()
                 );
             }

components/ILIAS/UI/src/Component/Entity/Entity.php

@@ -21,14 +21,14 @@
 namespace ILIAS\UI\Component\Entity;
 
 use ILIAS\UI\Component\Component;
-use ILIAS\UI\Component\Image\Image;
-use ILIAS\UI\Component\Symbol\Symbol;
 use ILIAS\UI\Component\Symbol\Glyph\Glyph;
+use ILIAS\UI\Component\Button\Standard as StandardButton;
 use ILIAS\UI\Component\Button\Shy;
 use ILIAS\UI\Component\Button\Tag;
 use ILIAS\UI\Component\Legacy\Legacy;
 use ILIAS\UI\Component\Listing\Property as PropertyListing;
 use ILIAS\UI\Component\Link\Standard as StandardLink;
+use ILIAS\UI\Component\Listing\Workflow;
 
 /**
  * This describes an Entity
@@ -70,15 +70,14 @@ public function withMainDetails(
      * Another way of distinguishing Reactions might be the availability/significance
      * for everybody in contrast to the current user (e.g. rating vs. my favorite)
      */
-    public function withPrioritizedReactions(Glyph | Tag ...$prio_reactions): self;
-
+    public function withPrioritizedReactions(Glyph | Tag | StandardButton | Shy ...$prio_reactions): self;
 
     //Further Areas
 
     /**
      * Reactions that are less prominent than Prioritized Reactions go here.
      */
-    public function withReactions(Glyph | Tag ...$reactions): self;
+    public function withReactions(Glyph | Tag | Shy | StandardButton ...$reactions): self;
 
     /**
      * Properties that could potentially limit a users access to the object
@@ -98,8 +97,13 @@ public function withDetails(
     ): self;
 
     /**
-     * Actions are the things you can actually _do_ with the entity,
-     * e.g. in context of repository items: view, copy, delete, etc.
+     * ManagingActions are the things an owner or admin can actually do _with_ the entity,
+     * e.g. in context of repository items: view, copy, delete, set online etc.
+     */
+    public function withManagingActions(Shy ...$managing_actions): static;
+
+    /**
+     * @deprecated for semantic reasons, "actions" is not precise enough.
      */
     public function withActions(Shy ...$actions): self;
 
@@ -111,4 +115,11 @@ public function withActions(Shy ...$actions): self;
     public function withPersonalStatus(
         PropertyListing | Legacy ...$personal_status
     ): self;
+
+    /**
+     * This Workflow is used to create buttons on the entity.
+     * Only Workflow Steps which are AVAILABLE and either NOT_STARTED or IN_PROGRESS
+     * will be rendered as buttons.
+     */
+    public function withWorkflow(Workflow\Linear $workflow): static;
 }

components/ILIAS/UI/src/Component/Listing/Entity/Factory.php

@@ -29,11 +29,36 @@ interface Factory
      * ---
      * description:
      *   purpose: >
-     *     The Entity Listing yields uniform Entities according to a consumer
-     *     defined concept and lists them one after the other.
+     *      The Entity Listing yields uniform Entities according to a consumer
+     *      defined concept and lists them one after the other.
+     *   composition: >
+     *      Entities are stacked one after the other. On very large screens the layout will have multiple columns to use
+     *      the space optimally. The design of the entity is one that favors a more horizontal representation.
      *
      * ---
+     * @param \ILIAS\UI\Component\Listing\Entity\RecordToEntity $entity_mapping
      * @return \ILIAS\UI\Component\Listing\Entity\Standard
      */
     public function standard(RecordToEntity $entity_mapping): Standard;
+
+    /**
+     * ---
+     * description:
+     *  purpose: >
+     *      The Entity Listing yields uniform Entities according to a consumer
+     *      defined concept and lists them in a grid.
+     *  composition:
+     *      Shows a grid of many entities in a card-style design. Images, Symbols and other secondary identifiers are
+     *      stacked to favor a vertical representation.
+     * rules:
+     *  usage:
+     *      1: >
+     *          If you want all entity secondary identifier images to take on the same height, you must provide images
+     *          with the same height.
+     *
+     * ---
+     * @param \ILIAS\UI\Component\Listing\Entity\RecordToEntity $entity_mapping
+     * @return \ILIAS\UI\Component\Listing\Entity\Grid
+     */
+    public function grid(RecordToEntity $entity_mapping): Grid;
 }

components/ILIAS/UI/src/Component/Listing/Entity/Grid.php

@@ -0,0 +1,25 @@
+<?php
+
+/**
+ * This file is part of ILIAS, a powerful learning management system
+ * published by ILIAS open source e-Learning e.V.
+ *
+ * ILIAS is licensed with the GPL-3.0,
+ * see https://www.gnu.org/licenses/gpl-3.0.en.html
+ * You should have received a copy of said license along with the
+ * source code, too.
+ *
+ * If this is not the case or you just want to try ILIAS, you'll find
+ * us at:
+ * https://www.ilias.de
+ * https://github.com/ILIAS-eLearning
+ *
+ *********************************************************************/
+
+declare(strict_types=1);
+
+namespace ILIAS\UI\Component\Listing\Entity;
+
+interface Grid extends EntityListing
+{
+}

components/ILIAS/UI/src/Component/Listing/Factory.php

@@ -20,6 +20,9 @@
 
 namespace ILIAS\UI\Component\Listing;
 
+use ILIAS\UI\Component;
+use ILIAS\UI\Component\Symbol\Symbol;
+
 /**
  * This is how a factory for listings looks like.
  */
@@ -52,6 +55,42 @@ public function unordered(array $items): Unordered;
      */
     public function ordered(array $items): Ordered;
 
+    /**
+     * ---
+     * description:
+     *   purpose: >
+     *     Inline Lists are used to display a set of elements next to each other when the available
+     *     space allows for it. The elements belong to a group of similar items and have about equal
+     *     relevance.
+     *   composition: >
+     *     Inline Lists string up the items horizontally breaking into the next line if necessary.
+     *     They are separated by a comma.
+     *   rivals:
+     *     Unordered List, Ordered Listing: >
+     *       If there is enough space for a vertical list, Unordered and Ordered Listing should
+     *       be preferred. Line by line items are better suited when the user is expected to be
+     *       exploring or engaging with the list for longer than a casual glance.
+     *     Property Listing: >
+     *       To display key-value pairs in a row, use the Property Listing.
+     *
+     * context:
+     *   - Inline Listings can be used as values in a Property Listing.
+     *
+     * rules:
+     *   usage:
+     *     - You MUST use the Inline Listing only when another component around it gives it a
+     *       context or headline clarifying what is being listed.
+     *     - You MUST only add items belonging to the same group or type.
+     *     - The Inline Listing MAY be the value of a property listing item.
+     *     - You MUST NOT use this component as a layout tool to force unrelated components next
+     *       to each other.
+     *     - You MAY change the comma delimiter in your component using CSS.
+     * ----
+     * @param array<Component\Component|string> $items
+     * @return  \ILIAS\UI\Component\Listing\Inline
+     */
+    public function inline(array $items): Inline;
+
     /**
      * ---
      * description:
@@ -160,16 +199,38 @@ public function entity(): Entity\Factory;
      *     Entries are listed as label/value pair in one line.
      *     Since the focus is strongly on the value, which might be
      *     self-explaining, visibility of the label is optional.
-     *     The value is a string, or one or several Symbols, Links or Legacy Components.
+     *     The label is a string. A Symbol may be shown in its place.
+     *     The value is a string, Links or Legacy Components.
+     *     A Symbol may be shown as the value.
+     *     Very long value strings will turn into a truncated paragraph
+     *     with a clickable Show more/less toggle.
      *   rivals:
      *      Characteristic Value: >
-     *        In Charakteristic Values, label/value pairs are displayed in a
+     *        In Characteristic Values, label/value pairs are displayed in a
      *        tabular way; labels cannot be omitted for display.
      *      Descriptive: >
      *        The Descriptive's (visual) emphasis is on the key, not the value.
+     *
      * context:
-     *   - Property Listing is used in Entities
+     * - Property Listing is used in Entities
      *
+     * rules:
+     *   usage:
+     *     - You MUST NOT use html code as a value string as it may get truncated in
+     *       unexpected ways.
+     *     - With more than 6 properties, you SHOULD use multiple Property Listing's
+     *       to segment properties into multiple visual groups/lines. Each new
+     *       property component starts a new line.
+     *     - You SHOULD use properties with short values (e.g. not full paragraphs).
+     *       You SHOULD split off long properties into their own Property component so
+     *       it will always start a new line.
+     *     - When using a Symbol as a label and/or value, the chosen icon
+     *       MUST be self-explanatory and easily understood by users.
+     *     - When using a Symbol as a label, it SHOULD not have an action.
+     *   accessibility:
+     *      - When using a Symbol, you still MUST enter a label with a text that can
+     *        be understood when read through a screen reader independently of any
+     *        visuals. This label is passed onto the Symbol as the aria-label.
      * ----
      * @return \ILIAS\UI\Component\Listing\Property
      */

components/ILIAS/UI/src/Component/Listing/Inline.php

@@ -0,0 +1,24 @@
+<?php
+
+/**
+ * This file is part of ILIAS, a powerful learning management system
+ * published by ILIAS open source e-Learning e.V.
+ *
+ * ILIAS is licensed with the GPL-3.0,
+ * see https://www.gnu.org/licenses/gpl-3.0.en.html
+ * You should have received a copy of said license along with the
+ * source code, too.
+ *
+ * If this is not the case or you just want to try ILIAS, you'll find
+ * us at:
+ * https://www.ilias.de
+ * https://github.com/ILIAS-eLearning
+ */
+
+declare(strict_types=1);
+
+namespace ILIAS\UI\Component\Listing;
+
+interface Inline extends Listing
+{
+}

components/ILIAS/UI/src/Component/Listing/Property.php

@@ -23,6 +23,7 @@
 use ILIAS\UI\Component\Symbol\Symbol;
 use ILIAS\UI\Component\Legacy\Legacy;
 use ILIAS\UI\Component\Link\Standard as StandardLink;
+use ILIAS\UI\Component\Listing\Inline;
 
 /**
  * Interface Property
@@ -31,8 +32,8 @@
 interface Property extends Listing
 {
     public function withProperty(
-        string $label,
-        string | Symbol | Legacy | StandardLink $value,
-        bool $show_label = true
+        string | Symbol $label,
+        string | Symbol | Legacy | StandardLink | Inline $value,
+        bool $show_label = true,
     ): self;
 }

components/ILIAS/UI/src/Component/Symbol/Glyph/Glyph.php

@@ -87,6 +87,11 @@ interface Glyph extends Symbol, Clickable
     public const TILE_VIEW = "tileView";
     public const DRAG_HANDLE = "dragHandle";
 
+    /**
+     * Override the default label text with a more specific one
+     */
+    public function withLabel(string $label): Glyph;
+
     /**
      * Get the type of the glyph.
      */