UI Components, Inner and Outer Content

1 Initial Problem

Currently the UI Components lack components specifying the layout and rules for the part which currently often refered to as outer and inner content. This is an issue, since we need a place and named components for according rules and specifications on how those components should behave and what they should look like.

We already noted in the Roadmap of the UI Components, that we desperately need those parts (see: https://github.com/ILIAS-eLearning/ILIAS/blob/trunk/src/UI/ROADMAP.md ). However, since they also might spawn some feature like chance with changed behaviours, we decided to also create a FW Page to document and discuss those.

2 Conceptual Summary

The introduced parts should give a clear description of the purpose and behaviour of the tackled sections. Since this FR is mostly center around those UI Components, see bellow for a more detailed description.

3 User Interface Modifications

3.1 List of Affected Views

• All pages in ILIAS.

3.2 User Interface Details

@Todo: Name and list changes to UI here.

3.3 New User Interface Concepts

Outer Content
This Component is basically what could be hooked into the Standard Layout as content (currently provided as array of Legacy Components). Most Probably it should be able to hold the title section (not yet part of the UI Components, see below), the Tabs (not yet Part of the UI Components, see below) and the Inner Content holding the workspace for the current context (not yet Part of the UI Components, see below).


Title Section
This Component will probably hold the Icon, title, description and the actions (maybe along with the used glyphs) of the current context. Note that a major part of the work for this components will be to setup a comprehensive set of rules on when to provide an Icon, restrictions of the Title (lengths, nouns vs verbs etc.), restrictions of the description (lengths, when to use etc.) and nature, amount of the actions etc. 


Tabs and Sub Tabs
Note that a major part of the work for this Components will be to setup a comprehensive set of rules on the naming of Tabs and Sub Tabs (noun vs verbs, length, amount of words etc.) and rules for the usage of Tabs vs Sub Tabs vs Sections in Forms shown in Tabs. Also, one would have to look into the issue that currently "<-- Back" actions are mixed into the Tabs. We will need to decide, whether we will still use this concept in the future.

Inner Content
This will most probably mainly contain an array of Components used in the Content Section. An interesting point here will be the question, whether this Component should also offer something like withToolbar, to make sure only one or no Toolbar can be provided and whether there would be different types of Inner Content Components (such as one with a Sidebar).

Toolbar
This Component will probably need to be designed as new Input Container. An important part of the work here will be to devise a set of rules of what the toolbar should be used for and what not.

3.4 Accessibility Implications

All elements MUST adhere to WCAG 2.0 Guidelines. Especially a quick navigation by keyboard will be key.

4 Technical Information

{ The maintainer has to provide necessary technical information, e.g. dependencies on other ILIAS components, necessary modifications in general services/architecture, potential security or performance issues. }

5 Privacy

{ Please list all personal data that will need to be stored or processed to implement this feature. For each date give a short explanation why it is necessary to use that date. }

6 Security

{ Does the feature include any special security relevant changes, e.g. the introducion of new endpoints or other new possible attack vectors. If yes, please explain these implications and include a commitment to deliver a written security concept as part of the feature development. This concept will need an additional approvement by the JourFixe. }

7 Contact

• Author of the Request: {Please add your name.}
• Maintainer: {Please add your name before applying for an initial workshop or a Jour Fixe meeting.}
• Implementation of the feature is done by: {The maintainer must add the name of the implementing developer.}

8 Funding

If you are interest in funding this feature, please add your name and institution to this list.

• …

9 Discussion

10 Implementation

{ The maintainer has to give a description of the final implementation and add screenshots if possible. }

Test Cases

Test cases completed at {date} by {user}

• {Test case number linked to Testrail} : {test case title}

Approval

Approved at {date} by {user}.