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

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 !