Widgets de integración externa: elegir la disposición de los recuadros y asignarles un color de acento

Solicitud de función
1

Título : Widgets de integración externa : elegir la disposición de los recuadros y darles un color de acento

Hola,

Estoy desarrollando la integración externa Precios de Combustibles. Un usuario me ha hecho dos comentarios sobre la tarjeta « Mi estación » que no puedo resolver desde la integración, ya que dependen de la visualización de los widgets en Gladys.

1. Disposición de los recuadros

Actualmente, los recuadros (value / gauge) pasan a la siguiente línea cuando no hay suficiente espacio (flex-wrap, ancho mínimo de 96 px). Con 3 recuadros en una tarjeta estrecha, obtenemos 2 recuadros a media anchura y 1 recuadro a anchura completa debajo. El usuario encontraría más claro tener 3 recuadros del mismo ancho, uno debajo del otro.

Gladys no envía el ancho de la pantalla a la integración, por lo que la integración no puede elegir.

Propuesta : un campo opcional en el contenido del widget, por ejemplo tiles_layout :

  • auto : como hoy (por defecto) ;
  • row : todos los recuadros en una sola línea, mismo ancho ;
  • stack : un recuadro por línea, a anchura completa.

Un valor desconocido vuelve a auto, por lo que no cambia nada para las integraciones existentes.

2. Color de acento por recuadro

Los colores permitidos son colores « de sentido » : neutral, primary, success, warning, danger, info. Es muy bien para decir « ok / atención / error », pero no se puede usar para identificar un recuadro de un vistazo. Por ejemplo, el usuario le gustaría recuperar los colores de los surtidores de combustible. Y el naranja (warning) ya se usa, en mi tarjeta, para señalar una ruptura : usar los mismos colores para los dos mezclaría los dos sentidos.

Propuesta : un campo opcional accent sobre los recuadros, mostrado como una pequeña barra o un punto de color, separado de color (que conserva su papel actual sobre el valor). Dos opciones posibles :

  • un color libre #RRGGBB, verificado por Gladys ;
  • o, para mantener la coherencia con los temas claro y oscuro, una pequeña lista de colores nombrados : green, yellow, blue, orange, red, purple, gray.

Para terminar

Las dos adiciones son opcionales y no cambian nada a los widgets existentes. Puedo proponer un PR si la idea les conviene.

¡Gracias !

2

Este tema llega en el momento justo, tuve este problema hoy :+1:

3

Hola @prohand,

¡Gracias por este comentario tan bien documentado (¡y gracias @Lokkye por la confirmación)!

Los dos problemas son reales. Pero en ambos casos, creo que la solución debe venir de Gladys en lugar de un nuevo campo en la integración. Es el principio básico de los widgets de integración: la integración describe qué mostrar, Gladys decide cómo. Esto es lo que nos permite garantizar que todos los widgets permanezcan coherentes en el tema claro, en el tema oscuro, con Horizon, y en todas las anchuras de pantalla.

1. La disposición de las casillas

Has señalado un error real, y tu propio argumento da la clave: la integración no conoce el ancho de la pantalla, por lo que está en la peor posición para elegir la disposición. El mismo widget se muestra en un teléfono y en una tableta mural. row con 6 casillas en un teléfono daría valores truncados, y stack en una tarjeta ancha daría una tarjeta muy alta sin razón. Una elección fija será necesariamente incorrecta en algún lugar.

El problema proviene de nuestro renderizado: cuando falta espacio, una casilla pasa a la siguiente línea y se estira a lo ancho. Con 3 casillas en una tarjeta estrecha, esto da exactamente el « 2 + 1 » que describes, y afecta a todas las integraciones, no solo a la tuya.

Por lo tanto, vamos a corregir esto directamente en Gladys, sin un nuevo campo: una cuadrícula equilibrada, que elige el número de columnas según el número de casillas y el ancho real de la tarjeta, y que nunca más estira una casilla aislada. Tu widget se beneficiará sin cambiar nada, al igual que todos los demás.

2. El color de acento

Color hexadecimal libre: no. Es una decisión tomada desde el principio: no podríamos garantizar el contraste en modo oscuro o con Horizon, y sería la puerta abierta a los colores de marca.

Una paleta nombrada, en cambio, es una pregunta real. Tienes razón de no desviar warning: color expresa un estado (ok / atención / problema), mientras que tú quieres expresar una identidad (qué combustible). Y la necesidad va más allá de los combustibles: los contenedores de reciclaje (amarillo, verde, azul…) están típicamente en el mismo caso.

Tengo dos reservas:

  • Para el usuario, un color sigue siendo un color: una barra roja o naranja será leída como una alerta, sin importar el nombre del campo. La confusión que quieres evitar (naranja = ruptura) volvería visualmente.
  • El riesgo de « arcoíris »: seis casillas de seis colores es exactamente el desorden que buscamos evitar.

Si vamos a hacerlo, sería bajo estas condiciones:

  • una lista cerrada de colores, que Gladys adapta ella misma al tema claro, al tema oscuro y a Horizon (incluido el contraste: un amarillo sobre fondo blanco no es legible tal cual);
  • mostrado únicamente como una pequeña pastilla de identidad, nunca como color del valor o del fondo (eso sigue siendo el rol de color);
  • disponible en cualquier lugar donde una pastilla identifique algo: las casillas, pero también las líneas de status (un widget de reciclaje usaría más bien una lista);
  • simplemente ignorado por una versión antigua de Gladys.

Como sería un segundo sistema de colores que afecta a todos los widgets, prefiero tratar este punto por separado y especificarlo antes de codificarlo, en lugar de agregarlo al mismo tiempo que la corrección de disposición. Si otros tienen casos de uso, no duden en compartirlos aquí, eso ayudará a decidir :slightly_smiling_face:

Mientras tanto, para Prix Carburants, el texto y el icono de cada casilla son suficientes para identificar el combustible, y tienes toda la razón de mantener warning para las rupturas.

¡Gracias de nuevo por la propuesta y por la oferta de PR! Para el acento, esperemos a haber decidido aquí antes de empezar a codificar.

4

Ticket :