PnX-SI / GeoNature-atlas

Application WEB permettant de générer des fiches espèces publiques à partir d'observations faune/flore
GNU General Public License v3.0
44 stars 46 forks source link

Ajout de pages externes dans la barre latérale #520

Open geobrun opened 2 months ago

geobrun commented 2 months ago

Bonjour tout le monde,

Pour notre atlas, j'ai réutilisé le paramètre STATIC_PAGES pour rajouter des pages externes dans la sidebar (cela fonctionne en spécifiant un attribut url). Par contre, je ne vois pas comment ajouter un SVG perso pour les icônes de ces nouvelles pages dans le bandeau. Par défaut, on dirait que ce paramètre appelle une bibliothèque de SVG externes via l'attribut picto. Est-il possible d'appeler son propre fichier SVG stocké sur le serveur hébergeant sa instance ?

TheoLechemia commented 2 months ago

Salut, Il est seulement possible d'ajouter des picto issu de la librairie font-awesome (en version 5) https://fontawesome.com/v5/search?m=free

geobrun commented 2 months ago

Ok, c'est ce que je pensais. Dans ce cas, pour personnaliser les icônes, voilà ce que je peux proposer comme petite amélioration. On pourrait modifier le fichier core\sidebar.html comme ceci :

    {% for page_key, page_values in configuration.STATIC_PAGES.items()|sort(attribute='1.order') %}
        {% if 'url' in page_values %}
            <a href="{{ page_values.url }}" target="_blank" data-toggle="tooltip"
               data-original-title="{{ page_values.title }}" data-placement="right">
                <li class="sidebar-brand"><span><img src="/static/custom/images/{{ page_values.picto }}" height="{{ page_values.picto_height}}"></img></span></li>
            </a>
        {% else %}
            <a href="{{ url_for('main.get_staticpages', page=page_key) }}" data-toggle="tooltip"
               data-original-title="{{ page_values.title }}" data-placement="right">
                <li class="sidebar-brand"><span class="fas {{ page_values.picto }}"></span></li>
            </a>
        {% endif %}
    {% endfor %}

De cette manière, si la page ajoutée dans la sidebar est servie par l'atlas, cela permet de continuer à utiliser le même mécanisme qu'auparavant (rien n'a été changé dans cette partie du code). Et si la page en question provient d'un site externe, on pourrait rajouter une image personnalisée (comme un logo). Dans le fichier config.py, ce code fonctionne avec :

STATIC_PAGES = {
    'presentation': {'title': "Présentation de l'atlas", 'picto': 'fa-question-circle', 'order': 0, 'template': 'static/custom/templates/presentation.html'},
    'page_externe': {'url':'https://www.page-externe.fr', 'title': "Site internet de la page externe", 'picto': 'logo_page_externe.png', 'picto_height': 24, 'order': 1}
}

Si c'est ok, je peux envoyer ça dans une PR. J'ai mis la gestion de la taille de l'icône en attribut car cela me paraissait plus compliqué de la gérer en CSS (du fait de la boucle) et arbitraire de fixer la même taille pour toutes les icônes dans le fichier HTML (elle pourrait varier légèrement selon la forme de l'icône choisie).

TheoLechemia commented 2 months ago

Ok oui pourquoi pas. Par contre je vois pas forcément le lien entre le fait que la page ai un attribut "url" et le fait qu'elle ai un picto qui ne soit pas font-awesome ? Peut être trouver mettre un autre booléen ?

geobrun commented 2 months ago

Effectivement, tu as raison, j'ai fait ça un peu rapidement. Mais si tu es ok sur le principe, je peux retravailler ça pour s'adapter à tous les cas !

geobrun commented 2 months ago

Je n'ai pas choisi la meilleure de solution je pense car j'ai privilégié une solution pour que tout le monde puisse bénéficier le l'amélioration sans avoir à changer son paramètre STATIC_PAGES.

Grosso modo, la présence de l'attribut url gère l'ajout d'une page externe ou d'une page de l'atlas et l'attribut customized_picto permet de gérer l'appel à font-awesome ou à un picto provenant du serveur de l'atlas.