Problème de Dark Mode #5

New Issue

Sulley · 2021-12-20T13:42:05+01:00

Sulley commented

2021-12-20 13:42:05 +01:00

Certains éléments d'interface (autocomplete, div.alert-secundary, ...) ne semblent pas supporter le "dark mode".

Les autocomplete ont leur propre CSS.
Les alert-secundary viennent du black-dashboard.css

Certains éléments d'interface (autocomplete, div.alert-secundary, ...) ne semblent pas supporter le "dark mode". * Les autocomplete ont leur propre CSS. * Les alert-secundary viennent du black-dashboard.css

Capture d’écran 2021-12-20 à 13.40.49.png

120 KiB

Sulley added the

bug

label 2021-12-20 13:42:14 +01:00

Sulley commented

2022-01-03 08:38:24 +01:00

Le problème du div.alert-secundary se présente surtout pour les skill.
J'ai donc créé un nouvelle classe CSS dans le fichier app2.css :

.skill-info {
    color: #f4f5f7;
    background-color: #1B1D2B !important;
    border-color: #1B1D2B !important;
}

Et j'ai ajouter une condition dans mon template :

<div class="col-md-6 alert {% if request.session.template == 0 %}skill-info{% else %}alert-secondary{% endif %} mr-0">

Ce qui résoud mon problème pour l'affichage détaillé des skill.
Il faudra voir si ce problème se présente dans d'autres circonstances. Si c'est le cas, il faudra adapter le nom de la classe.

Il reste encore le problème d'autocomplete à régler.

Le problème du `div.alert-secundary` se présente surtout pour les skill. J'ai donc créé un nouvelle classe CSS dans le fichier app2.css : ``` .skill-info { color: #f4f5f7; background-color: #1B1D2B !important; border-color: #1B1D2B !important; } ``` Et j'ai ajouter une condition dans mon template : ``` <div class="col-md-6 alert {% if request.session.template == 0 %}skill-info{% else %}alert-secondary{% endif %} mr-0"> ``` Ce qui résoud mon problème pour l'affichage détaillé des skill. Il faudra voir si ce problème se présente dans d'autres circonstances. Si c'est le cas, il faudra adapter le nom de la classe. Il reste encore le problème d'autocomplete à régler.

Sulley commented

2022-01-03 08:59:27 +01:00

Contrairement à ce que je pensais au départ, les autocomplete ne se base pas sur le propre CSS mais sur le CSS black-dashboard.

L'autocomplete se base sur les éléments ul li, ol li. Le soucis c'est que ces éléments sont sencés être blancs quand un user utilise le thème sombre.

Le soucis donc c'est que lorsqu'un autocomplete est utilisé, le fond est blanc... aussi. On a donc du blanc sur blanc et les propositions sont illisibles.

Si je change la couleur des éléments ul li, ol li, cela changera partout ailleurs dans le thème, ce n'est donc pas la meilleure solution. Il faudrait réussir à changer la couleur de fond de l'autocomplète soit en fonction du thème, soit pour une couleur qui s'adapterait aux deux modes (sombre/clair).

Contrairement à ce que je pensais au départ, les autocomplete ne se base pas sur le propre CSS mais sur le CSS black-dashboard. L'autocomplete se base sur les éléments `ul li, ol li`. Le soucis c'est que ces éléments sont sencés être blancs quand un user utilise le thème sombre. Le soucis donc c'est que lorsqu'un autocomplete est utilisé, le fond est blanc... aussi. On a donc du blanc sur blanc et les propositions sont illisibles. Si je change la couleur des éléments `ul li, ol li`, cela changera partout ailleurs dans le thème, ce n'est donc pas la meilleure solution. Il faudrait réussir à changer la couleur de fond de l'autocomplète soit en fonction du thème, soit pour une couleur qui s'adapterait aux deux modes (sombre/clair).

Sulley commented

2022-01-31 09:39:31 +01:00

Deux solutions sont possibles :

L'ajout d'une classe uniquement au moment de l'affichage des résultats:

$('#skill').autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: '/skill/lookup/?pattern=' + request.term,
                    dataType: "json",
                    success: function(data) {
                        $('#skill').addClass('ma_classe_qui_va_bien');	<-----------------
                        if(data.length != 0) {
                            response($.map(data, function(item) {
                                return {
                                    label: item.Name,
                                    value: item.Name,
                                    skillid: item.ID,
                                    notation: item.Notation,
                                }
                            }))
                        } else {
                            response([{ label: 'No result found.', value: '' }]);
                        };
                    },

Utiliser une alternative à l'autocomplete : Select2 (par exemple, mais il y en a d'autre). L'inconvénient est que nous chargons tous les records d'une table (ou une grand partie si une fenêtre de selection (temps, quantité, …) peut-être mise en place). L'avantage, c'est que ca devient un <SELECT>plus facilement intégrable dans le Black Dashboard Template.

Deux solutions sont possibles : 1. L'ajout d'une classe uniquement au moment de l'affichage des résultats: ``` $('#skill').autocomplete({ source: function(request, response) { $.ajax({ url: '/skill/lookup/?pattern=' + request.term, dataType: "json", success: function(data) { $('#skill').addClass('ma_classe_qui_va_bien'); <----------------- if(data.length != 0) { response($.map(data, function(item) { return { label: item.Name, value: item.Name, skillid: item.ID, notation: item.Notation, } })) } else { response([{ label: 'No result found.', value: '' }]); }; }, ``` 2. Utiliser une alternative à l'autocomplete : Select2 (par exemple, mais il y en a d'autre). L'inconvénient est que nous chargons tous les records d'une table (ou une grand partie si une fenêtre de selection (temps, quantité, …) peut-être mise en place). L'avantage, c'est que ca devient un `<SELECT>`plus facilement intégrable dans le Black Dashboard Template.

Sulley commented

2022-01-31 16:37:16 +01:00

J'utilise l'option classes pour ajouter mes propres classes dans l'autocomplete.

        classes: {
            "ui-widget-content": "custom_autocomplete_ul",
            "ui-autocomplete": "custom_autocomplete_ul",
            "ui-menu-item-wrapper": "custom_autocomplete_li",
            "ui-menu-item": "custom_autocomplete_li",
        },

J'utilise l'option `classes` pour ajouter mes propres classes dans l'autocomplete. ``` classes: { "ui-widget-content": "custom_autocomplete_ul", "ui-autocomplete": "custom_autocomplete_ul", "ui-menu-item-wrapper": "custom_autocomplete_li", "ui-menu-item": "custom_autocomplete_li", }, ```

Sulley closed this issue

2022-01-31 16:37:16 +01:00

Sign in to join this conversation.