Panel - Diseño flexible: poder mezclar líneas de 1, 2 y 3 columnas

¡Hola a todos!

Este tema está ahora en desarrollo.

Se ha abierto una PR para permitir un diseño flexible de los paneles de control:

No dudes en seguir la PR, probarla tan pronto como sea posible y dar tus comentarios aquí.

¡Avance en el desarrollo!

En tableta, es ultra agradable:

Con varios nuevos widgets:

  • « Pastillas » (la línea superior con el nivel de CO2, el « todo cerrado », etc.)
  • Un widget « Acciones rápidas » que puede mezclar escenas, dispositivos, etc.
  • Vista de la casa: visualización de una imagen de tu casa con pastillas en ciertas partes de la casa.

El selector de panel de control ya no requiere 2 clics, sino un solo clic, a menos que tengas muchas escenas. Las escenas siguientes son accesibles a través de un « … » que se muestra al final en las pantallas pequeñas:

La pantalla de edición también ha sido completamente revisada:

También es muy agradable en móvil:

Bueno… ¡Tengo que admitir que estoy sorprendido! :astonished_face:

Durante mucho tiempo pensé que la interfaz estaba deliberadamente congelada, por lo que nunca pedí muchas mejoras en ese aspecto.

Tengo que admitir que estos renders me gustan MUCHO (quizás un poco demasiado estilo Apple para mi gusto :squinting_face_with_tongue:, pero estoy siendo quisquilloso).

¡Si mi Gladys se viera así, sería un gran fan! :+1: :tada:

¿Sería posible tener un widget en 1, 2 o 3 columnas si entiendo bien?

El diseño no es contractual @guim31 :rofl:

¡Es literalmente el título de la solicitud! :joy:

Totalmente contractual, la implementación es real, probada, incluso puedes probarla, ya está en vivo en la rama, ¡e incluso hay una imagen Docker! :wink:

:warning: ¡No lo pruebes en tu producción, no es reversible!

Vale, vale, lo siento, he tenido un día largo y el segundo empieza ahora mismo :rofl:

Y me imagino que no es culpa tuya las imágenes ^^ Es refrescante esta nueva interfaz

Fable ha reescrito completamente el drag & drop eliminando react-dnd y haciéndolo nativo en el navegador, y es increíble :star_struck:

No, pero este teaser está loco :zany_face:

¡La próxima versión va a ser increíble! Me encanta el nuevo tema y las posibilidades que llegarán. ¡No puedo esperar! :smiley:

Se puede decir que este nuevo diseño es una pasada :star_struck:

¿Cuándo nos tomamos un día libre para jugar con las futuras 100 innovaciones?? :stuck_out_tongue_winking_eye:

He avanzado mucho y es increíble lo que Fable me ha propuesto :heart_eyes:

El nuevo panel de control:

Hay muchos pequeños detalles muy agradables de usar que son simplemente increíbles.

El panel de control ahora está dividido en « Secciones », y cada sección contiene una o más columnas.

La edición del panel de control está completamente rediseñada:

Si hago clic en « ajustes »:

Para editar un widget, puedo hacer clic en su engranaje:

Me parece que este nuevo diseño es realmente refrescante y muy agradable de usar.

En móvil, también está muy bien optimizado:

¡Tengo ganas de poner todo esto en producción! !

Tengo ganas de tener este tipo de panel de control en mi tableta :star_struck:

Es bonito y vende mucho, pero no es muy eficaz, ¿no? Algunos widgets son enormes y no sirven para mucho. :thinking:

Otro punto, va a chocar mucho con el resto de la interfaz de usuario, ¿también planeas una reforma en el mismo sentido?

Pregunta tonta, pero ¿cómo podemos ver la demo build en Cloudflare? Me pide identificadores cuando abro el enlace, supongo que son identificadores de desarrollo, ¿pero cuáles?

Quizás sea posible tener widgets de varios tamaños: por ejemplo, para el clima, una versión con solo el clima del día y otra más grande con las previsiones

Diseño muy bonito :wink:

¿Hay posibilidad de poner la barra de menú arriba en lugar de a la izquierda con una opción?

Son las credenciales de Gladys Plus

¿Qué tal el modo oscuro? :thinking:

PG lo muestra más arriba en la discusión.

@pierre-gilles, no pude esperar y acabo de probar los últimos commits que publicaste.

Tengo un comentario sobre el ancho del panel de control.

En mi pantalla, el ancho en modo Edición y en modo normal no son iguales.
El modo normal es menos ancho, por lo que los widgets están más ajustados y no es lo ideal.

Aquí tienes algunas imágenes:

Panel de control en modo normal, los widgets no son lo suficientemente anchos y el widget de la cuarta columna tiene demasiado alto

En modo Edición: La visualización es correcta

Por cierto, obtengo el mismo resultado si solo pongo 3 columnas.

Otro punto: Vi que agregaste la posibilidad de poner un icono para los nombres de los paneles de control.


image

Si queremos eliminarlos, ¿cómo lo hacemos?

@pierre-gilles

  • Efectivamente, para ganar espacio, sería bueno poder eliminarlos
  • como no puedo probar, ¿se conserva el antiguo menú desplegable de los dashboards además de los botones de acceso directo?