Feature Wiki

Information about planned and released features

Tabs

DR 5.1 - Issue 02: Keep Drop-Downs in Viewport / Overlay handling

Page Overview

[Hide]

Copy from feature page Design Revision 5.1

1 Requirements

Standard bootstrap drop downs do not stay in viewport. The current solution (il.Util.fixPosition) should be checked and improved. The function originally comes from the ILIAS Overlay component (Services/UICOmponent/Overlay) which should be completely replaced by a bootstrap implementation.

1.1 Services/UIComponent/Overlay Usage in ILIAS 5.0

Module/DataCollection (2 usages)

  • Overlay for new reference (il.UICore.showRightPanel();, see Screenshot 1), Schmid, Fabian [fschmid], 30.7.2015, suggestion: Modal
  • self-implemented popover for multiple selected references (see Screehot 2), Schmid, Fabian [fschmid], 30.7.2015, suggestion: Popover

Module/Exercise

  • ilOverlayGUI (comment for learner): , 27.7.2015, suggestion: Popover
Module/TestModule/Blog
  • ilOverlayGUI (get exercise info): , 27.7.2015, suggestion: Popover
Module/Portfolio
  • ilOverlayGUI (get exercise info): , 27.7.2015, suggestion: Popover
Module/Scorm2004Services/COPageServices/HelpServices/Notes (Done 5.1)Services/Rating
  • ilOverlaGUI (rating overlays): , 27.7.2015, suggestion: Popover
Services/SearchServices/Tagging (Done 5.1)Services/Table
  • Delete/Create Views/Templates: , 27.7.2015, suggestion: Popover
Sercies/Tracking
  • il.Overlay (object statistics): , 27.7.2015, suggestion: Modal

2 Additional Information

3 Discussion

JourFixe, ILIAS [jourfixe], 6 July 2015: Somebody should make a list of all uses of the overlay class in ILIAS. Whenever possible it should be replaced by bootstrap "Modal" or "DropDown" concepts. For the online help we may need an OffCanvas implementation. The fixPosition code should be centralized and generalized as far as possible.

Killing, Alexander [alex], 21 July 2015: I made a list of ilOverlay usages (see above). I think this may need some discussion for the different occurences and find on an agreement to which bootstrap element they should be migrated. And I think Bootstrap Popovers are a third option, e.g. usefuly for the glossary term popovers used in the scorm editor.

Edit, 27. July 2015: We (leifos) added suggestions for all our components. @JF: Please discuss with Databay (Test) and S&R (Data Collection) their preferences.

Amstutz, Timon [amstutz], August 03, 2015: @Alex: Thank you Alex for the list.

Do we agree that we should have exactly one modal and popover service with exactly two sets of templates (one set for popovers and one for modals) that each of the entries in the list is using?

Is it possible to have a general rule among the lines: If only metadata/information is displayed -> use a popover. If data manipulation is involved -> use a modal. Or do you think it is more a question of the amount of data displayed wheter to use a modal or popover? I would like to have some kind of rule or at least some indication we all agree upon at which point to use the one or the other if somehow possible. 

JourFixe, ILIAS [jourfixe], August 03, 2015: Thanks to Alex, Fabian and Björn for adding the suggestions for replacing ilOverlay in the listed classes above. Thanks to Alex, Fabian and Björn for adding the suggestions for replacing ilOverlay in the listed classes above. While we already have Bootstrap modals and dropdowns in ILIAS, an implementation for using Bootstrap popovers is still needed. Substituting all appearances of ilOverlay can also be completed during beta1. We agree with Timon's suggestion to set up a (soft) guideline:

  • Popovers should be used when displaying information or metadata.
  • Modals should be used when manipulating data in forms or when presenting long text (that cannot be shown in popover).
  • Dropdowns should be used when items have to be selected.

4 Implementation

Please note that due to time limitations we are not able to address all issues for 5.1. All addressed issues will be listed here.

4.1 Services/Notes: Notes and Comments

Kitchensink AT, 2016-02-15: Since this is a small workflow, this was duly implemented and qualifies asKS-Entry: Round-Trip Modal.

Kitchensink AT, 2016-02-15: Since this is a small workflow, this was duly implemented and qualifies asKS-Entry: Round-Trip Modal.

Test Cases

Feature is covered by existing test cases, Killing, Alexander [alex] 26 Aug 2015:

  • S33 : Test Suite Comments
  • S34 : Test Suite Notes

Approval

Approved at 26 Aug 2015 by Kunkel, Matthias [mkunkel].

4.2 Services/Tagging: Tags

Test Cases

Feature is covered by existing test cases, Killing, Alexander [alex], 27 Aug 2015:

Approval

Approved at 27 Aug 2015 by Kunkel, Matthias [mkunkel].

Kitchensink Comment AT, 2016-02-15: 

Module/DataCollection

  • Citation from Article: Overlay for new reference (il.UICore.showRightPanel();, see Screenshot 1), Schmid, Fabian [fschmid], 30.7.2015, suggestion: Modal
  • Kitchensink AT: 
  1. step: generating of content directly in the form while the content is to be used in the form >> Roundtrip Modal captures data the modal is triggered by a default button “Add…”
  2. step: display generated data in selection list: New option shows up in form underneath control of step 1. Identifier “Select from label-step-1”. It is a text input field and as soon as the cursor is in the input field the full list of all user generated options is displayed in a small overlay
  3. step: m:n select from user.-generated content: typing narrows down selection and user can pick.
  4. step: display picks: picks are boxed in grey as in Long menue question. 

  • Citation from Article: self-implemented popover for multiple selected references (see Screehot 2), Schmid, Fabian [fschmid], 30.7.2015, suggestion: Popover
  • Kitchensink AT: Popover

Module/Test

  • Cited from Article: il.Overlay.add (Adjust Answer Aggregation): Heyser, Björn [bheyser], 03.08.2015, suggestion: Modal
  • Kitchensink AT: This form needs information to be filled in, the form has to be edited at same time additional information has to be visible
    • information that related to the entirety of the form the information is presented as a non-editable part of the form on to of the form.
    • information that relates only to a specific setting of a form is displayed as a collapsible by-line [more…].
  • or it is done as KS-Entry: Instructional Overlay
  •  

  • Cited from Article: il.Overlay.add (Manual Scoring by Question): Heyser, Björn [bheyser], 03.08.2015, suggestion: Modal
  • Kitchensink AT: This  is suppoed to be implemented as a KS-Entry: Lightbox Modal since it shows the full data set upon click. 

  • Cited from Article: extended ilOverlayGUI (Logical Answer Compare Input): Heyser, Björn [bheyser], 03.08.2015, suggestion: Modal
  • Kitchensink AT: This is supposed to be implemented as a KS-Entry: Instructional Overlay. The link that is currently triggering the popover is very easily missed. Upon opening the working instruction it covers the very screen users need to operate on to fullfill the working instructions. The content to be displayed is need to give way for the screen to works upon and persist even when navigatiing in ILIAS.

Module/Exercise

  • Cited from Article: ilOverlayGUI (comment for learner): , 27.7.2015, suggestion: Popover
  • Kitchesink AT: This is supposed to be an KS-Entry: Interaction Popover since it opens an input fields and features a "Save"-Button. I would like to add, that this screen is way too crowded, threats similar things in different fashions and desparately needs a redesign. Nevertheless for the pupose of this specifc Redesign project making a Popover has to suffice. 

Module/Blog

  • Citation from Article: ilOverlayGUI (get exercise info): , 27.7.2015, suggestion: Popover
  • Kitchensink AT: This is supposed to be implemented as a KS-Entry: Instructional Overlay. The link that is currently triggering the popover is very easily missed. Upon opening the working instruction it covers the very screen users need to operate on to fullfill the working instructions. The content to be displayed is need to give way for the screen to works upon and persist even when navigatiing in ILIAS.  

Module/Portfolio

  • Citation from Article: ilOverlayGUI (get exercise info): , 27.7.2015, suggestion: Popover
  • Kitchensink AT: This is supposed to be implemented as a KS-Entry: Instructional Overlay. The link that is currently triggering the popover is very easily missed. Upon opening the working instruction it covers the very screen users need to operate on to fullfill the working instructions. The content to be displayed is need to give way for the screen to works upon and persist even when navigatiing in ILIAS.  

Module/SCORM 2004

Services/COPage

  • Citation from Article: il.Overlay (editor menues): Killing, Alexander [alex], 27.7.2015, suggestion: DropDown
  • Kitchensink AT: This is to be implemented as a KS-Entry: Contextual Dropdown. Upon click on an entry this control will close itself. It is special because it has a special trigger: either the dotted rectangle or the content piece.  

Services/Help

  • Citation from Article: il.Overlay (help panel): Killing, Alexander [alex], 27.7.2015, suggestion: No suggestion yet.
  • Kitchensink AT: This is supposed to be implemented as a KS-Entry: Instructional Overlay. It is not a Dropdown since it does not close upon click. The Popover it currently is, covers content that the content displayed is referring to, which is bad. The content displayed it supposed to be persistently displayed while navigating ILIAS.  

Services/Rating

  • Citation from Article: ilOverlaGUI (rating overlays): Lützenkirchen, Jörg [jluetzen], 27.7.2015, suggestion: Popover, Timon Popover
  • Kitchesink AT: This is supposed to be an KS-Entry: Interaction Popover since it opens a picker and features "Remove Rating"-Button looking like a link.

Services/Search

  • Cited from Article: ilOverlaGUI (main menu search, ?): Killing, Alexander [alex], 27.7.2015, suggestion: DropDown (should already be one?)
  • Kitchensink AT: This is supposed to be an KS-Entry: Interaction Popover since
    • it has an entry field (which Dropdowns do not have)
    • it does not close upon clicking an entry but on clicking the "Go"-Button. 

  • Cited from Article: il.Overlay (search options, search area): Killing, Alexander [alex], 27.7.2015, suggestion: DropDown
  • Kitchensink AT: This is supposed to be an KS-Entry: Interaction Popover since it opens a picker and features a "Reset"-Button looking like a link. I say so with gritted teeth, since I am not happy with this control but am struggling to suggest something better. 

Services /Table 

  • Cited from Article: Delete/Create Views/Templates: , 27.7.2015, suggestion: Popover
  • Kitchensink AT: This is supposed to be an KS-Entry: Interaction Popover since it opens an input fields and features a "Save"-Button.

Services/Tracking

  • il.Overlay (object statistics): , 27.7.2015, suggestion: Modal

Last edited: 19. Apr 2023, 12:27, Kunkel, Matthias [mkunkel]