Show Advanced KnowledgeHide Advanced Knowledge

Improve Content-Style-Editor

1 Initial Problem

The CSS-Editor is by equal measure powerful and difficult to work. 

2 Conceptual Summary

2.1 Tabs: Media Queries | Settings | Export

Separate "Export" Tab 

• The export should be extracted from the "Settings"-tab and become a separate tab like everywhere else in ILIAS. Then one would have an Export-table to save serveral versions of one's work. 

New Order of Tabs 

• 'Media Queries' tab should be moved to left of 'Templates'.
• New order would be: Style Classes | Colours | Images | Media Queries | Templates | Settings | Export    » see JF decision from 23 OCT 2017

2.2 Images

• In the tab 'Images' the column 'Thumbnails'  should always display a thumbnail, regardless whether it prexisted or was just uploaded. 
• Formats .png, .jpg, .gif and .svg should be supported. 

2.3 Type of Style Class

• Adding a Style Class in 'Media' should allow to select the 'Type' of 'Media Container' or 'Media Caption'. Thus it is possible to create more different looks for Media. 
• Types should be selectable which is not always the case. 

2.4 Style Attributes

• Background »»  Adding a by-line to Style-Attributes that the background image has to be uploaded before being available for selection here. 

2.5 Copying

• We should be able to copy a style class a) within one and the same style and b) to another style with options to overwrite existing styleclass or add the copied styleclass to existing style.
• Option to overwrite an exisitng styleclass in the same style while copying should abandon. That makes no sense. 

    
Process

• Select style via checkbox and select "Copy" via multi-action and click "Execute".  (Status quo)
• Green message box: "The style classes have been copied. Please switch to the desired target style and select "Paste style classes". (Status quo)
• Option 1: Click "Paste style classes" within the same style.
  • Call a new page with form or a modal with form.
  • Enter a technical title "class name" and a meaningful title "Title" for the new style class.
    • If the "class name" is already used, ILIAS reports this via a red message box and indicates that another "class name" must be entered.
  • Click on "Save" at the end of the form.
  • The new style class is created. ILIAS confirms with a green message box "The style class was copied successfully.
• Option 2: Click on "Insert style class" in another style.
  • Call a new page with form or a modal with form.
  • Radio Group: "create new style class | overwrite existing style class".
  • Case 1: "Create new style class" shows two input fields on the second form level: 
    • The two input fields "class name" (for the technical title) and "title" (for the meaningful title) must be defined for the new style class....
    • Click on "Save" at the end of the form.
    • The new style class is created. ILIAS confirms with a green message box "The style class was successfully copied.
  • Case 2: "overwrite existing style class" shows a dropdown of all existing classes on second form level.
    • Select the style class to be overwritten.
    • Click on "Save" at the end of the form.
    • The existing style class is overwritten. ILIAS acknowledges with a green message box "The style class has been successfully overwritten."

2.6 Changing titles

Adding an additional title of a style class should be possible. Titles should tolerate spaces without being kaputt. 

• The current Names are actually the classes technical name and cannot be changed without breaking it. We would like to add an additional title which can be changed , entail spaces and can carry translations. 
• The technical title is presented to users as "class name", this must not be changebale because it would break. However users can add a Title which is changeable. 

2.7 Translation

• The titles can be maintained in several languages. This is made in the specific style class. 
• When a style is created initially, the titles from the language file are used for the default style classes. 

2.8 Deprecate / Outdated

The deprecated status allows for deprecating Style Classes.

• It should be possible to set a certain Style Classes of a style to "Deprecated". 
• There should be a multi-action for setting the "Deprecated" Action. 
• If a Style Class is set to "Deprecated" it is no longer offered to users to be applied. 
• The Style Class set to "Deprecated" is still applied to the content element and the content does not revert to Standard or similar. If a content element is assigned with another Style Class the deprecated one is no longer offered. 
• If users roll back to old states in the history-tab ILIAS will also present any deprecated Stlye Classes that were applied at that state. 
• If an object is copied along with its stlye and a deprecated Content Style Class applied to a content element will just stay this way. 

Killing, Alexander [alex], 2 June 2021: Instead of "deprecated" I am using the term "Outdated" (German "Veraltet") since this is common in ILIAS for similar life-cycle related states (e.g. in the competence management).

2.9 Sorting 

• The sub-tabs for the Style Classes where users have an "Add Style Class"-Button in the Toolbar get an extra column for sorting the style classes. The so used sorting is shown in the user interface in the page editor.

2.10 Resizing Images

• It would also be helpful to be able to resize images in the Content Style Editor. So far, it is not possible to edit images in the Content Style Editor. If you have not estimated the right size of an icon correctly, you have to delete the uploaded image file, rescale the image with an image editor and re-upload the file.

2.11 More than one List Entry

• It should be possible to have more than only one "List Entry" (de: Listeneintrag). We want an option to create an alternative type of list entry in "List".
  It requires an additional button in the toolbar, which then provides the formatting options for the list entry.

3 User Interface Modifications

3.1 List of Affected Views

Content-Style with its tabs and sub-tabs

3.2 User Interface Details

Killing, Alexander [alex], 7 June 2021: I deactivatated a very misleading mockup here that included things not mentioned and specified (description for style classes, a "deactivated" status). It was also missing the translated title feature.

Killing, Alexander [alex], 7 June 2021: I replaced another misleading mocktup here that included (copy paste from media object) lots of properties which are note existing for style class images (URL, titles, caption, ...).

3.3 New User Interface Concepts

no

4 Technical Information

Killing, Alexander [alex], 29 July 2020

• When spaces should be supported in style names they need to be transformed into a different character during output.
• Renaming style classes will break all references in content to the style class, do we want this? It will be impossible to update masses of content in the background when a class is renamed.

Samoila, Oliver [oliver.samoila], 02 Feb 2021

• Both comments are reflected in the revised article.

5 Privacy Information

No privacy implications.

6 Security Implications

No security issues.

7 Contact

• Author of the Request: Tödt, Alexandra [atoedt], Revised by Samoila, Oliver [oliver.samoila]
• Maintainer: Killing, Alexander [alex]
• 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.

• Interkantonale Hochschule für Heilpädagogik Zürich (HfH) is interested in funding parts of this improvement.

• Funded by: DHBW Karlsruhe, but in the meantime extensions have been added to the request.

More Informations: Page Editor Revision - Step 2 (Crowdfunding for ILIAS 8)

9 Discussion

JourFixe, ILIAS [jourfixe], 25 JAN 2021: We still want this feature request very much. But before scheduling the request finally we need one final description of the request in chap. 2 that adapts the several changes, modifications and extension made and decided since the very beginning of the request in 2017. Please present the request again when this feature page has been updated accordingly.

Samoila, Oliver [oliver.samoila], 02 FEB 2021
In the accordion above, all previous discussions and scheduling are included.

• Included in the current state of the article are:
  • copying of style classes (inside and outside the original style)
  • To be able to create more list items
  • The deprecate status for style classes
• The New Colour Picker is dealt with in a separate request.
• Not included at the moment are the following items, the relevance of which I am not sure about:
  • several classes for links, as it is not clear to me where I should be able to select this format in editing
  • Problems with change of the title of a colour
  • Deleting images from content style without confirmation dialogue. (Bug or Refactoring?)

JourFixe, ILIAS [jourfixe], 08 FEB 2021: We highly appreciate this suggestion and accept the feature request for ILIAS 8. Concerning 2.11: there should be two buttons in the tool bar labeled as "Add List Style" and "Add Item Style".

10 Implementation

Killing, Alexander [alex] 7 June 2021: The implementation is missing the "more than one list item" part, since it is a) not part of the funded offer and b) not specified how the editor should offer these additional classes.

Test Cases

Test cases completed at 2022-01-12 by Tödt, Alexandra [atoedt]

• 49268 : Content-Style exportieren
• 49269 : Bilder hinzufügen (eigentlich nur Miniaturansicht) : Styleklasse für Medien hinzufügen
• 49271 : Styleklasse kopieren und im gleichen Content Style einfügen
• 49272 : Einzelne Styleklasse kopieren und in anderem Content Style einfügen
• 49273 : Titel einer Styleklasse ändern
• 49274 : Übersetzung zum Titel einer Styleklasse hinzufügen
• 49275 : Styleklasse auf "veraltet " setzen
• 49276 : Styleklassen sortieren
• 49277 : Bildgröße ändern

Following test cases were created for community testing, but strictly speaking they do not belong to this project

• 49264 : Content-Style anlegen
• 49265 : Content-Style importieren
• 49267 : Content-Style kopieren

Approval

Approved at 2022–01–26 by Samoila, Oliver [oliver.samoila] as agreed with DHBW Karlsruhe.