Page Editor » Accordion Editing (outdated)

1 Initial Problem

The accordion is a much used and popular side element. In a revision

1. the add/edit form will be transferred to the new layout of ILIAS with the use of the slate
2. and bigger usability problems will be removed.

1.1 Current Initial Position

1 | Insert Accordion

1. Open Page Editor
2. Click +
3. Insert Accordion
4. Insert Accordion Formular: Choose
   1. Type
      1. Vertical Accordion (Behavior, Alignment)
      2. Horizontal Accordion (Behavior)
      3. Carousel (Alignment, Auto Animation Waiting Time, Random Start)
   2. Number of Panels
   3. Content Width
   4. Content Height
5. Save (or Cancel)

2 | Edit Panels and Properties

Two tabs

1. Panels
   1. Add Panel
   2. Sortation / Position
   3. Title
   4. Multiaction Delete
   5. Save
2. Properties
   1. Type
   2. Content Width
   3. Content Height

1.2 Purpose of the accordion

1.3 Problem Areas

1 | Transfer to Slate

• Transferring the table of the panel tab to the slate is problematic because there are different controls that must be accessible next to the properties form.
• No problems with Properties-Screen

• It is not obvious that with an accordion you could also add a carousel

• Default settings lead to confusion because they are of limited use:
  • e.g. display does not meet expectations (height and width when tray is open)
  • overflowing text has no scrolling option (will be cut off)

• No manual scrolling is possible, respectively possible but not visually indicated. (Somewhat related is Pause Accordion Carousel)

• Nested accordions are difficult to distinguish from each other, so editing an accordion is a great challenge. But this scenario offers a powerful tool.

2 Conceptual Summary

1 | Transfer to Slate

• The Properties tab can be transferred to Slate and is displayed after selecting "Insert Accordion" via + Action.
• There are different variants for the Panel tab
  1. Panel configuration in the content area (properties in the Slate are parallel to panel configuration in the content area)
  2. Panel configuration in the Slate
  3. Modal display triggered by button in Slate
  4. Two edit entries in the dropdown: a) Edit properties b) Edit panels.
  5. Vision: Direct editing of panel titles in the content area (similar to Edit Text). Advantage: Clear differentiation between "Slate for properties" and "Content area for contents".

• Change Label "Insert Accordion" to "Insert Accordion/Carousel"

• Revision Default settings
  1. Standard width with at least 1 open panel: 100%
  2. Width and Height input: Allow not only pixel specifications but also relative specifications (e.g. 50%)
  3. Scrolling function if text or content of the accordion is longer than the height of the accordion.

• Radio Selection Option "Animation":
  • "Auto Animation Waiting Time"
  • "Manual Change"
• Manual Change: If this option is activated, the carousel receives controls (scroll arrows forward/backward, possibly display number of pages) 

• Nested accordions: Klare Auszeichnung welches Akkordeon welche Fächer umfasst.

3 User Interface Modifications

3.1 List of Affected Views

• "Edit" in "Page Editor Mode" > + Dropdown
• "Edit" in "Page Editor Mode" > Accordion
• Insert Accordion > "Properties" tab
• Edit Accordion > "Panels" tab

3.2 User Interface Details

{For each of these views please list all user interface elements that should be modified, added or removed. Please provide the textual appearance of the UI elements and their interactive behaviour.}

3.3 New User Interface Concepts

{If the proposal introduces any completely new user interface elements, you might consult UI Kitchen Sink in order to find the necessary information to propose new UI-Concepts. Note that any maintainer might gladly assist you with this.}

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 Information

{ 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 Implications

{ 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:  Wessels, Karin [karin.wessels], Glaubitz, Marko [mglaubitz], Seiler, Yvonne [yvseiler] in contribution with Page Editor Team (Samoila, Oliver [oliver.samoila] und Co.)
• 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 project, please add your name and institution to this list.

• …

9 Discussion

Working Group Wessels, Karin [karin.wessels], Glaubitz, Marko [mglaubitz], Seiler, Yvonne [yvseiler], 22.4.2020:

Open questions in the concept above:

1 | Transfer to Slate

1. Panel configuration in the content area (properties in the Slate are parallel to panel configuration in the content area) >> wo speichern? sollte nur 1x auftauchen
2. Panel configuration in the Slate >> Fraglich, wie Sortierung und Multiactions im Slate abgebildet werden sollten, Titel-Inputfelder wären relativ kurz; diese Lösung wird nicht empfohlen. Can a form and a table be displayed simultaneously in the slate (or is there a rule for this)?
3. Modal display triggered by button in Slate >> Auch hier ist nicht sehr viel Platz für die Titel-Inputfelder.
4. Two edit entries in the dropdown: a) Edit properties b) Edit panels. >> Offen ob Panels im Content-Bereich oder wo angepasst werden

• Alternative zu Radio Select: "Manual Change" als zusätzliche Option (Checkbox). Würde Kombination "zeitlicher Wechsel" und "Manuelles Wischen" erlauben.
• Steuerelemente: Falls Anzeige Anzahl Seiten: Soll da auch eine beliebige Seite anwählbar sein?

• In ILIAS 5.4 the dropdown "Paragraph format" is offered even if there is only 1 paragraph format. There should be no such option in the form if only 1 paragraph format can be selected. However, this option cannot be found on test6.ilias.de. Has the behaviour already changed here? Generally applies to all forms, not only Page Editor.
• Are all paragraph formats from the stylesheet offered or correctly displayed in the properties tab?

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}.