SVG como ícono de ToggleButton


(Pochy) #1

Estoy en el desarrollo de un complemento con unos amigos, el cual maneja una valor asociado a un usuario que debe actualizar en algún intervalo de tiempo, la manera que lo tenemos ahora mismo es un icono de tipo (ToggleButton) y por encima un badge que tiene la cantidad representativa, también comentar que anteriormente creo que se usaba el módulo widget pero ya no tiene soporte, mis preguntas son:

Para lanzar los ToggleButton, se pone siempre un ícono, ese ícono puede ser un SVG?

Lo otro es que se me a ocurrido aunque no se si puede hacer, dinámicamente no se puede modificar ese SVG estando ubicado en el navegador en ese tipo de funciones?

MI idea es hacer una SVG como si fuera un numero en 0 por ejemplo y cuando obtenga la cantidad que necesito mostrar modificar dinamicamente el SVG y poner lo valores?

Como lo ven?, pongo copia a @jorgev que siempre puede opinar en estos temas y a @erick y a @yunier que estamos trabajando en este complemento juntos.

Si alguien más puede comentar algo, agradecido.


(Jorge) #2

Sí es posible hacer botones SVG, y también es posible modificarlos dinámicamente. Sin embargo la facilidad de hacer eso depende del API que se esté usando. Supongo que no es tan sencillo con el SDK, pero igual debería ser posible. Creo que basta con que el CSS apunte al SVG. En cuanto al contador, creo que lo mejor es tener dos cajas, una encima de otra. Una con el SVG y otra con el contador, para no tener que modificar el SVG directamente. Tal vez sea necesario hacer un binding de XBL para que funcione bien.


(Pochy) #3

Hola jorge

Para dar un poco más de detalles y para que se entienda mejor la idea, al principio lo que teniamos con widget era esto

Y luego que se elimino el módulo ahora lo que se tiene es esto

http://firefoxmania.uci.cu/wp-content/uploads/2015/03/150x202xcuentafox-3.0-diferentes-estados.png.pagespeed.ic.NCtQD92f03.jpg

Aunque se mejoró la tipografía el badge y se ve más claro siempre se vería chiquito, nos interesaría algo como lo primero, que los número del consumo se ve mejor…
Si se pudiera hacer con el Addon-SDK mejor pues me estoy iniciando y solo eh hecho un par de complementos sencillos y eh colaborado en otros, pero si no se puede igual indicame de la forma que lo harias con XBL, que no conosco mucho sobre él, pero lo intento.

Saludos


(Jorge) #4

El problema es que el botón quedaría con un tamaño no estándar, que no es lo ideal. Sin embargo, es posible.

La documentación de XBL explica cómo funciona. Lo útil del XBL es que se puede encapsular un elemento complejo usando solo CSS. En este caso, se haría un elemento que herede las propiedades del toolbarbutton pero que además pueda tener una imagen en el fondo y un contador en el frente. Por medio de CSS se puede hacer que ese binding quede ligado a ese botón en particular.