Presentando un nuevo diseño visual para temas y componentes de temas

Nos complace anunciar una actualización importante sobre cómo se presentan los temas y los componentes de temas en Discourse. Esta actualización ofrece una experiencia más intuitiva y fácil de usar al navegar, seleccionar y administrar temas y componentes de temas para tu comunidad.

:information_source: Qué ha cambiado

Una experiencia de galería visual para temas

La página de temas ha sido completamente rediseñada con un diseño más visual que facilita más que nunca ver cómo se ve cada tema antes de aplicarlo:

  • Vistas previas visuales: Miniaturas que representan con precisión cada tema, ya sea con una combinación de colores del tema o una vista previa agregada por el desarrollador del tema.
  • Mejor organización: Los temas ahora se muestran en una vista de galería con información relevante fácilmente disponible, lo que hace que la navegación y la selección sean más intuitivas.
  • Acceso rápido a los detalles: La información esencial es visible de un vistazo, con detalles adicionales a solo un clic de distancia.

:light_bulb: ¿Quieres agregar vistas previas visuales a tus propios temas? Sigue esta guía.

Un diseño de tabla práctico para componentes de temas

Los componentes de temas ahora presentan un diseño de tabla optimizado diseñado para la eficiencia:

  • Información clave de un vistazo: Ve los detalles del componente y la información de uso en un formato claro y estructurado.
  • Ordenación y filtrado mejorados: Reduce fácilmente los componentes según tus necesidades particulares.
  • Controles sencillos: Controla rápidamente la activación de todos los componentes desde una sola vista.

Estas actualizaciones son parte de nuestros esfuerzos continuos para hacer que la administración de Discourse sea más intuitiva y accesible, especialmente para usuarios no técnicos. El diseño visual de los temas te ayuda a tomar decisiones más informadas sobre la apariencia de tu sitio, mientras que el diseño de tabla práctico para los componentes facilita la extensión de la funcionalidad de tu sitio.

:eyes: Cómo ver estos cambios

Estas nuevas páginas ya están disponibles para todos los sitios de Discourse en nuestro hosting. Puedes encontrarlas yendo a la página “Temas y componentes” en tu administración de Discourse. Para sitios autohospedados, deberás actualizar a la última versión antes de poder ver las nuevas páginas en acción.

:collision: ¡Más mejoras por venir!

Estas nuevas páginas son solo el comienzo de nuestras mejoras continuas en la experiencia de administración de temas. Continuamos trabajando en funciones adicionales para hacer que la personalización de temas sea aún más accesible y potente.

¡Nos encantaría conocer tu opinión sobre estos cambios! Responde a este tema para hacernos saber lo que piensas.

25 Me gusta

¡Me encanta este esfuerzo de modernización en todo el producto hasta ahora! Es una locura mirar atrás a dónde empecé en 2021 con Discourse, ¡sigan así! :tada:

6 Me gusta

Quizás esto cambie cuando haya capturas de pantalla. Pero más que una galería, realmente me gustaría ver nombres.

No sé por qué ni para qué un administrador necesitaría galerías.

Sin embargo, el lado del componente se ve bien.

3 Me gusta

Eso se muestra incorrectamente. Si no se agrega ninguna captura de pantalla al tema, debería mostrar un SVG generado a partir de la paleta de colores del tema. También debería mostrar el nombre del tema debajo de esa imagen. Eso es lo que se muestra en el anuncio aquí.

Mirando este tema anterior, parece que has agregado CSS personalizado para esa página. ¿Quizás eso está interfiriendo aquí? También parece que tu diseño es incorrecto, ya que esas tarjetas de tema se muestran demasiado anchas y se envuelven incorrectamente.

¿Podrías verificar si tienes algún CSS que afecte a esta página?

3 Me gusta

Pensé que las imágenes de vista previa del tema se utilizarían como una forma inteligente de mostrar la paleta seleccionada, pero la imagen de vista previa de mi "Tema Crema" sigue cambiando.

¿Cuál es el propósito de la imagen de vista previa?

¿Pensé que usarla para transmitir el esquema de color seleccionado era una opción bastante agradable?

3 Me gusta

Aunque mostrará una imagen generada diferente cada vez que se cargue la página, cada imagen se genera con la propia paleta de colores del tema, por lo que hace exactamente eso. Utiliza algunos formatos de imagen diferentes, pero siempre utiliza la paleta del tema.

¿Le resultaría más útil si mostrara la misma imagen generada para el tema en cada recarga de página? Consideramos hacerlo, y es posible, por lo que sus comentarios al respecto serían útiles.

3 Me gusta

Ah, genial, entonces estamos alineados en la intención. Déjame usarlo un poco más.

No me importa un poco de variedad, siempre y cuando cada ejemplo transmita los colores con aproximadamente la misma eficacia. ¡Gracias @hugh!

2 Me gusta

¡Sigan enviando sus comentarios! Todavía tenemos algunos ajustes y actualizaciones más en preparación para estas páginas, así que estamos trabajando activamente en todo en este momento.

1 me gusta

como dice @Jagster, mi principal preocupación aquí fue la adición de imágenes para los Componentes de Tema y, si bien eso podría ser muy bueno para algunos, la gran cantidad de ellas impide una vista de galería en mi opinión.

¡La nueva lista es un cambio excelente! :heart_eyes:

¿Quizás una imagen podría ser compatible con algún tipo de desplazamiento del ratón? No sé…

4 Me gusta

Sí, lo hace y el modo seguro muestra lo que debería mostrar. Extraño. Como sé que no tengo nada que deba afectar el lado del administrador, obviamente lo tengo.

Y todavía me pregunto dónde necesitamos una galería. Un administrador no está mirando escaparates, sino tratando de encontrar un tema para configurar. Es algo totalmente diferente si ustedes hicieran una biblioteca de temas centralizada, similar a la que usa WordPress (siempre me he preguntado por qué no lo hacen).

Pero empezaré a investigar qué está interfiriendo con mi configuración.

Gracias.

4 Me gusta

Sí, las imágenes en los componentes de tema fueron inicialmente la primera iteración mientras trabajábamos en este nuevo diseño basado en tablas. Creemos que este nuevo diseño es mucho más práctico y útil, ¡y me alegra que te guste!

¡Espero que puedas solucionar eso!

Bueno, los temas son intrínsecamente visuales, por lo que una vista previa visual de lo que se puede esperar es relativamente útil y ayuda a los administradores a decidir qué tema configurar, incluso en esta etapa del proceso.

Con este nuevo diseño, la vista previa será una imagen agregada por el desarrollador del tema o una imagen generada a partir de los colores utilizados en la paleta de colores del tema. De cualquier manera, permite a los administradores ver una pequeña vista previa de lo que pueden esperar antes de sumergirse.

Dado que lo comparas con WordPress, la biblioteca de temas en el panel de WordPress también tiene imágenes de vista previa como esta (aunque su respaldo es solo una imagen en blanco si el desarrollador del tema no proporciona ninguna).

En cuanto a una biblioteca de temas central, ¡eso es ciertamente algo que hemos discutido! No hay avances por el momento, pero está en nuestro radar.

3 Me gusta

ME ENCANTA ESTO :star_struck:

Algunas cosas (menores):

Cambiar imágenes

Sí, eso sería mejor. La implementación actual es REALMENTE confusa para la gente. Y una función solo debe ser “divertida” cuando no disminuye la claridad.

Ordenación de la lista de componentes

Los filtros son útiles, pero sería aún mejor si el orden de las columnas de ordenación fuera Habilitado - Usado - Nombre.

Usado por

Creo que esto se ve un poco desordenado donde el nombre del tema se divide en dos líneas. ¿Quizás los nombres de los temas podrían verse también como una etiqueta, con un color de fondo ligeramente diferente para separarlo visualmente de “No usado”?

Y cuando pudiera hacer clic en una etiqueta y filtrara automáticamente para ver solo los componentes utilizados por ese tema específico, sería increíble.

Pero ahora mismo, ¡ya está muy cerca de ser increíble!

9 Me gusta

Esta es una gran opinión, ¡gracias! Me alegra que te guste la disposición general.

Opinión tenida en cuenta y trabajaremos en ello.

Es justo, y estoy de acuerdo en que mejorar el orden predeterminado sin duda sería una mejora. Investigaremos esto y veremos qué funciona mejor, pero tu sugerencia tiene mucho sentido.

Gracias por señalar esto. ¡Tu sugerencia suena interesante! Investigaremos la mejor manera de mejorar esta visualización.

Discutimos agregar un filtro para temas como este en la parte superior de la página, que probablemente se agregará pronto, y que haga lo mismo al hacer clic en el nombre del tema en esta columna sería una adición interesante. Definitivamente es algo que investigaremos.

¡Gracias por todo esto, espera más mejoras!

5 Me gusta

A veces soy tan estúpidamente tonto :man_facepalming:

El fragmento CSS que arregló el primer y desafortunado intento de usar una vista de galería para los componentes… bueno, ahora rompió el lado del tema.

Ya no es necesario usarlo
.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;
  }
}

Creo que debería eliminar estos comentarios. No ayudan, solo contaminan el tema.

4 Me gusta

¡Me alegra que hayas encontrado el problema!

No te preocupes por eliminar los comentarios, todos estamos aprendiendo juntos aquí :slight_smile:

6 Me gusta

Acabo de notar que termino en la interfaz antigua cuando hago clic en la notificación en el panel. Después de una recarga, veo la nueva.

3 Me gusta