ks: section dropdown

[alex40724]

This is a follow up of #7837

This PR changes the Section View Control to allow Dropdowns as middle items.

Use cases are navigational elements like here:
https://docu.ilias.de/goto_docu_wiki_wpage_7518_1357.html

Docu Changes:
https://github.com/ILIAS-eLearning/ILIAS/pull/7837/files#diff-4cefcd552bb8e4cb0bf88461b0ea86defb16d82fe86477c3738bc0efcaea6697

Currently the Section View Control documentation includes "Split Buttons" which do not exist, so this part is removed. However the Month Buttons are already allows, so this is added.

This PR already includes an implementation. The correspdoning methods already allow to pass any component, the following check has been extended to check for the Dropdowns.

[alex40724]

I am quoting the last feedback from the previous pull request.

Hi @alex40724

Thx for proposing this enhancement of the Section View Control. We discussed your change with our UI Expert @yvseiler and the conceptual changes authority @catenglaender.

For the Public Interface Part to be discussed with the JF. Please:

* [ ]  Usage Rule: Please narrow down the purpose of the usage of Dropdowns here. "Dropdowns MUST NOT be used for any other purpose than skipping a section of the navigation (e.g. jumping from Chapter 1 to Chapter 5)".

For the implementation. Please change as follows or explain why not:

* [ ]  Default behavior: Use a min (e.g. 100px) and max width (e.g. 400px) to prevent the change of the size of the button for all cases below 100px and have a fixed max width (as already the case).

* [ ]  Responsive behavior: Please change the behavior for everything below md to 95vw. We believe that making the control larger on a smaller screen will improve its usability.

Please change:

* [ ]  Test Case: Add one to make sure, Dropdowns can be added now and in the future.

* [ ]  Union-types: please change the type-hint of the middle button to a union type Button|Dropdown|Month from factory all the way down to the corresponding properties and getters. This way we can also get rid of the instanceof checks.

thx @Amstutz, @thibsy, @catenglaender, @yvseiler

[alex40724]

I made all the requested changes, with one modification:

"Responsive behavior: Please change the behavior for everything below md to 95vw. We believe that making the control larger on a smaller screen will improve its usability."

This will lead to horizontal scrolling on small devices, even in the KS example. If we have less space, we can't make things larger. If we prefer to use "vw" then 50vw is the max that works on smaller screens.

95vw:

50vw:

[alex40724]

Bwt, I do not know, why the css comes with all these changes again. I used the local sass bin

./node_modules/.bin/sass templates/default/delos.scss templates/default/delos.css

[catenglaender]

Thanks for the fixes! Very much appreciated! SCSS compile is correct. We had one wrong compile in trunk and pieces of it keep coming back from hasty rebases and merges. Should be resolved once this (and/or) my recent PRs are merged.

[thibsy]

Hi @alex40724

Thx for implementing the requested changes.

There are some things left to do before we can merge this.

Please consider the following suggestions. You do not need to follow them, but please indicate shortly why you prefer to do otherwise:

• Unit test: you are tightly coupling the rendered HTML of the newly accepted dropdown to this test. We prefer to use rendering stubs to avoid this. Please have a look into our documentation for an example.

Please implement the following changes:

• Union-type: please update the type-hints all the way down to the implementation and properties to get rid of the instanceof checks inside the constructor.
• Examples: your new examples are missing a description entry, please provide them with one.

Kind regards,
@klees and @thibsy