[1.0.1] Add Display theme mode ("Paramètre d'affichage")

Looking at the markup, I don't think we need new components.

Link:

<button class="fr-btn fr-icon-theme-fill" aria-controls="fr-theme-modal" data-fr-opened="false">Paramètres d'affichage</button>

<button class="fr-footer__bottom-link fr-icon-theme-fill fr-btn--icon-left" aria-controls="fr-theme-modal" data-fr-opened="false">Paramètres d'affichage</button>

We already have https://git.drupalcode.org/project/ui_suite_dsfr/-/tree/1.0.x/templates/...

Modal:

<dialog id="fr-theme-modal" class="fr-modal" role="dialog" aria-labelledby="fr-theme-modal-title">
  ...
</dialog>

We already have https://git.drupalcode.org/project/ui_suite_dsfr/-/tree/1.0.x/templates/...

So, we need to find a way of using those components in Drupal (in header, but also footer). Maybe, we will need to do some non-breaking changes to those components.

Musa.thomas → changed the visibility of the branch 1.0.x to hidden.

Hello I added two new components, I follow the same way as the consent banner feature. I still have some issue but I don't find/ find a good way to resolve it. Here the issues :

• didn't implement yet the mechanism of the button being inside footer or header (also change his own class)
• the button with the class fr-button is themed as button with blue background (maybe it's the fact of it's not in header when you look it inside patterns library)
• the modal and radios work well but the feature to switch the theme seem not working (I try to debug the JS but it's very complicated and I'm not confonrtable with javascript,but also the event seems to be well trigger @see libraries/dsfr/dist/dsfr.module.js line 6385 the function set scheme)
• I'm not sure if the svg of radios are in right place (inside the twig pattern), also I used the attributes of the links to set the svg name (not sure it's good pratice)
• the system theme option needs to have html inside the label, I don't know if it's possible (try to nested some pattern/type inside the title settings but didn't work)

Some proposals:

• Rename display_manager component to display because the CSS classname is "fr-display"
• It is OK to have hardcoded stuff (fieldset, radio, artwork...) in the template of this component
• Remove display_button component, it must be enough to use the existing btn component (with some special attributes injected)
• The content of display_button template (modal + button) must move to pattern-display--preview.html.twig

I did what you said.

• didn't implement yet the mechanism of the button being inside footer or header (also change his own class)
• fix when it's inside header
• the modal and radios work well but the feature to switch the theme seem not working (I try to debug the JS but it's very complicated and I'm not confonrtable with javascript,but also the event seems to be well trigger @see libraries/dsfr/dist/dsfr.module.js line 6385 the function set scheme) not fix even if inside header
• I'm not sure if the svg of radios are in right place (inside the twig pattern), also I used the attributes of the links to set the svg name (not sure it's good pratice)
• the system theme option needs to have html inside the label, I don't know if it's possible (try to nested some pattern/type inside the title settings but didn't work)
• final issue how to integrate inside top links, is it allowed to have multiple menu (ul) inside tools links? do we need to alter or add new block ? If we need only one ul how to merge links and button inside drupal ?
• also this feature need to be render inside two different regions, header for the button, content for the moda, if the modal is set inside the header, so it will be always display (also on other example site they put the modal outside header)

Here the new situation :

The pattern is ok and work well if the attribute "data-fr-scheme" is set inside html tag so do we add inside the override html template
<html{{ html_attributes.setAttribute('data-fr-scheme','') }}> ?

• About the integration inside the web site we need to change multiple things:
• change the settings inside aparence page (theme settings), also there is a conflicts with ui_skings chich alter the form after the theme
  • get the settings and insert the button and modal if the feature is enable
  • the way of inserting the pattern: I think we can "hardcoded" inside region top links and content template (the button need to be in header and modal outside of the header)
• About the theme settings :
  • For me we need first a checkboxe to enable or not the display settings mod:
  • if not check display the theme option of ui skins
  • if check display new checkboxes to set the button inside hearder or footer or both.

To resume I need to know how we can we can manage conflicts with ui skins
Validate the way of enable it (theme settings)
Validate we hard code the pattern inside twig tempalte

I push the code wich is working right now, need to be validate how the pattern are inserted inside the template (validate preprocess and twig)
I still have 2 remaining issue:

• The button pattern add class "fr-btn" by default and we need to remove it when it's inside the footer
• The feature of ui skins display theme doesn't work anymorer

Commit and push the code for the pattern, all the features has been moved inside the https://www.drupal.org/project/ui_suite_dsfr_ft → module

It is way better like that, only 2-3 feedbacks ;)

I remove all the path of svg also in other side of module ui suite dsfr ft, I added an autocomplete on file name searching inside librariries pictogram diretory (@see the picture)

Definition:

• Split URL from description: "Allows the user to define his preferences on the display settings theme. https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/parametre-d-affichage"
• Tell about SVG URL in description: "A links structure with attributes.id and attributes.title."
• Does it work without the initial dot url: ./libraries/dsfr/dist/artwork/pictograms/environment/sun.svg ?

Twig:

• Remaining theme.attributes.svg
• What is happening if no title ? Empty legend or default value?
• What is happening if no theme.attributes.id ?