Présentation d'une nouvelle mise en page visuelle pour les thèmes et les composants de thèmes

Nous sommes ravis d’annoncer une mise à jour importante de la présentation des thèmes et des composants de thèmes dans Discourse ! Cette mise à jour apporte une expérience plus intuitive et conviviale lors de la navigation, de la sélection et de la gestion des thèmes et des composants de thèmes pour votre communauté.

:information_source: Ce qui a changé

Une expérience de galerie visuelle pour les thèmes

La page des thèmes a été entièrement repensée avec une mise en page plus visuelle qui permet de voir plus facilement à quoi ressemble chaque thème avant de l’appliquer :

  • Aperçus visuels : Des miniatures qui représentent fidèlement chaque thème, soit avec une combinaison de couleurs du thème, soit avec un aperçu ajouté par le développeur du thème.
  • Meilleure organisation : Les thèmes sont désormais affichés dans une vue de galerie avec les informations pertinentes facilement disponibles, rendant la navigation et la sélection plus intuitives.
  • Accès rapide aux détails : Les informations essentielles sont visibles en un coup d’œil, avec des détails supplémentaires à portée de clic.

:light_bulb: Vous souhaitez ajouter des aperçus visuels à vos propres thèmes ? Suivez ce guide.

Une mise en page de tableau pratique pour les composants de thèmes

Les composants de thèmes présentent désormais une mise en page de tableau rationalisée conçue pour l’efficacité :

  • Informations clés en un coup d’œil : Visualisez les détails des composants et les informations d’utilisation dans un format clair et structuré.
  • Tri et filtrage améliorés : Affinez facilement les composants en fonction de vos besoins spécifiques.
  • Contrôles faciles : Contrôlez rapidement l’activation de tous les composants à partir d’une seule vue.

Ces mises à jour font partie de nos efforts continus pour rendre l’administration de Discourse plus intuitive et accessible, en particulier pour les utilisateurs non techniques. La mise en page visuelle des thèmes vous aide à prendre des décisions plus éclairées concernant l’apparence de votre site, tandis que la mise en page de tableau pratique des composants facilite l’extension des fonctionnalités de votre site.

:eyes: Comment voir ces changements

Ces nouvelles pages sont déjà en ligne pour tous les sites Discourse sur notre hébergement. Vous pouvez les trouver en accédant à la page « Thèmes et composants » dans l’administration de votre Discourse. Pour les sites auto-hébergés, vous devrez mettre à jour vers la dernière version avant de pouvoir voir les nouvelles pages en action.

:collision: D’autres améliorations à venir !

Ces nouvelles pages ne sont que le début de nos améliorations continues de l’expérience de gestion des thèmes. Nous continuons à travailler sur des fonctionnalités supplémentaires pour rendre la personnalisation des thèmes encore plus accessible et puissante.

Nous aimerions connaître votre avis sur ces changements ! Répondez à ce sujet pour nous faire savoir ce que vous en pensez.

25 « J'aime »

J’adore cet effort de modernisation dans l’ensemble du produit jusqu’à présent ! C’est fou de regarder en arrière où j’ai commencé en 2021 avec Discourse, continuez comme ça :tada:

6 « J'aime »

Peut-être que cela change lorsqu’il y a des captures d’écran. Mais plus qu’une galerie, je verrais vraiment des noms.

Je ne sais pas pourquoi ni à quoi un administrateur aurait besoin de galeries.

Cependant, le côté composant est bien.

3 « J'aime »

L’affichage est incorrect. Si aucune capture d’écran n’est ajoutée au thème, il devrait afficher un SVG généré à partir de la palette de couleurs du thème. Il devrait également afficher le nom du thème sous cette image. C’est ce qui est montré dans l’annonce ici.

En regardant ce sujet précédent, il semble que vous ayez ajouté du CSS personnalisé pour cette page. Est-ce que cela interfère ici ? Il semble également que votre disposition soit incorrecte car ces cartes de thème s’affichent trop largement et se retournent incorrectement.

Pourriez-vous vérifier si vous avez du CSS qui affecte cette page ?

3 « J'aime »

Je pensais que les images d’aperçu du thème seraient utilisées comme un moyen intelligent de montrer la palette sélectionnée, mais l’image d’aperçu de mon « Thème Crème » continue de changer ?

Quel est le but de l’image d’aperçu ?

Je pensais que l’utiliser pour transmettre le schéma de couleurs sélectionné était une option assez agréable ?

3 « J'aime »

Bien qu’il affiche une image différente à chaque chargement de page, chaque image est générée à partir de la palette de couleurs du thème, il fait donc exactement cela. Il utilise plusieurs formats d’image différents, mais utilise toujours la palette du thème.

Serait-il plus utile pour vous s’il affichait la même image générée pour le thème à chaque rechargement de page ? Nous avons envisagé de le faire, et c’est possible, donc vos commentaires à ce sujet seraient utiles.

3 « J'aime »

Ah, super, nous sommes donc alignés sur l’intention. Laissez-moi l’utiliser un peu plus.

Je ne suis pas contre une certaine variété tant que chaque exemple transmet les couleurs avec à peu près la même efficacité. Merci @hugh !

2 « J'aime »

Continuez à nous faire part de vos commentaires ! Nous avons encore quelques ajustements et mises à jour en préparation pour ces pages, nous y travaillons donc activement en ce moment.

1 « J'aime »

comme l’indique @Jagster, ma principale préoccupation ici concernait l’ajout d’images pour les composants de thème et, bien que cela puisse être très agréable pour certains, leur nombre considérable exclut, à mon avis, une vue de galerie.

La nouvelle liste est un excellent changement ! :heart_eyes:

Peut-être qu’une image pourrait être prise en charge avec une sorte de survol ? Je ne sais pas…

4 « J'aime »

Oui, c’est le cas et le mode sans échec montre ce qu’il devrait montrer. Étrange. Comme je sais que je n’ai rien qui devrait affecter le côté administrateur, mais évidemment j’en ai.

Et je me demande toujours où nous avons besoin d’une galerie. Un administrateur ne fait pas de lèche-vitrine, mais essaie de trouver un thème à configurer. Chose totalement différente si vous faisiez une bibliothèque de thèmes centralisée, similaire à ce que WordPress utilise (je me suis toujours demandé pourquoi vous ne le faites pas).

Mais je vais commencer à creuser pour voir ce qui perturbe ma configuration.

Merci.

4 « J'aime »

Oui - les images dans les composants de thème étaient initialement prévues comme première itération pendant que nous travaillions sur cette nouvelle disposition basée sur un tableau. Nous pensons que cette nouvelle disposition est beaucoup plus pratique et utile et je suis heureux que cela vous plaise !

J’espère que vous pourrez résoudre ce problème !

Eh bien, les thèmes sont intrinsèquement visuels, donc un aperçu visuel de ce à quoi s’attendre est relativement utile, et aide les administrateurs à décider quel thème configurer, même à ce stade du processus.

Avec cette nouvelle disposition, l’aperçu sera soit une image ajoutée par le développeur du thème, soit une image générée à partir des couleurs utilisées dans la palette de couleurs du thème. Dans un cas comme dans l’autre, cela permet aux administrateurs de voir un petit aperçu de ce à quoi s’attendre avant de se lancer.

Comme vous comparez cela à WordPress, la bibliothèque de thèmes dans le tableau de bord WordPress a également des images d’aperçu similaires (bien que leur solution de repli soit juste une image vierge si aucune n’est fournie par le développeur du thème).

Quant à une bibliothèque de thèmes centrale - c’est certainement quelque chose dont nous avons discuté ! Rien n’avance pour le moment, mais c’est sur notre radar.

3 « J'aime »

J’ADORE ÇA :star_struck:

Quelques (petits) points :

Changer les images

Oui, ce serait mieux - l’implémentation actuelle est VRAIMENT confuse pour les gens. Et une fonctionnalité ne devrait être « amusante » que si elle n’altère pas la clarté.

Tri de la liste des composants

Les filtres sont pratiques, mais ce serait encore mieux si l’ordre des colonnes de tri était Activé - Utilisé - Nom.

Utilisé par

Je trouve que cela a l’air un peu désordonné lorsque le nom du thème est réparti sur deux lignes. Peut-être que les noms des thèmes pourraient ressembler à une étiquette, avec une couleur de fond légèrement différente pour les séparer visuellement de « Non utilisé » ?

Et quand je pourrais cliquer sur une étiquette et que cela filtrerait automatiquement afin que je ne voie que les composants utilisés par ce thème spécifique, ce serait génial.

Mais pour l’instant, c’est déjà très proche d’être génial !

9 « J'aime »

Ce sont d’excellents commentaires - merci ! Je suis heureux que vous aimiez la mise en page générale.

Commentaires pris en compte, et nous allons travailler dessus.

C’est juste, et je suis d’accord que l’amélioration de l’ordre par défaut serait certainement une amélioration. Nous allons examiner cela et voir ce qui fonctionne le mieux, mais votre suggestion a beaucoup de sens.

Merci d’avoir souligné cela - votre suggestion semble intéressante ! Nous allons étudier la meilleure façon d’améliorer cet affichage.

Nous avons discuté de l’ajout d’un filtre pour les thèmes comme celui-ci en haut de la page, qui sera probablement bientôt ajouté, et le fait qu’il effectue le même filtre lorsque l’on clique sur le nom du thème dans cette colonne serait un ajout intéressant. C’est certainement quelque chose que nous allons examiner.

Merci pour tout cela - attendez-vous à d’autres améliorations à venir !

5 « J'aime »

Je suis tellement désespérément stupide parfois :man_facepalming:

Le fragment CSS qui a corrigé la toute première et malheureuse tentative d’utiliser une vue galerie pour les composants… eh bien, il a maintenant cassé le côté thème.

Plus besoin de l'utiliser
.admin-config.customize {
  .admin-detail {
    padding: 0;
  }
  .themes-cards-container {
    display: flex;
    flex-direction: column;
    max-width: 500px;
    gap: 0;
  }
  .admin-config-area-card__content {
    flex-grow: 0;
    margin: 0;
    padding: 0;
  }
  .theme-card {
    flex-direction: row;
    margin: 0;
    padding: 0.75rem 0;
    box-shadow: none;
    border: none;
    border-bottom: 1px solid var(--primary-low);
    &__image-wrapper,
    &__content {
      display: none;
    }
    &__footer {
      gap: 1rem;
    }
  }
  .theme-install-card {
    margin-top: 1rem;
  }
}

Je pense que je devrais supprimer ces commentaires. Ils n’aident pas, ils polluent juste le sujet.

4 « J'aime »

Heureux que vous ayez trouvé le problème !

Ne vous inquiétez pas de supprimer les commentaires - nous apprenons tous ensemble ici :slight_smile:

6 « J'aime »

J’ai remarqué que je me retrouve dans l’ancienne interface lorsque je clique sur la notification du tableau de bord. Après un rechargement, je vois la nouvelle.

3 « J'aime »