Project

General

Profile

Feature #2785

Change icons system

Added by Yannick Warnier almost 8 years ago. Updated almost 3 years ago.

Status:
Needs more info
Priority:
Normal
Category:
-
Target version:
Start date:
10/02/2011
Due date:
% Done:

80%

Estimated time:
12.00 h
Spent time:
Complexity:
Easy
SCRUM pts - complexity:
3

Description

Implement an icon system that allows us to choose between icon sizes and define icons per CSS theme.


Files

a_missing_image.png (105 KB) a_missing_image.png Ivan Tcholakov, 15/02/2011 15:58

Associated revisions

Revision 877f074a (diff)
Added by Yannick Warnier almost 8 years ago

Added code for later improvements to icons set (see #2785)

Revision ec2c35e1 (diff)
Added by Yannick Warnier almost 8 years ago

Added placeholders for later improvements to icons set (see #2785)

History

#1

Updated by Yannick Warnier almost 8 years ago

Still commented for efficiency reasons until implemented, but it works (code to check in the CSS, then in img/icons/[size]/, then in img/: http://code.google.com/p/chamilo/source/detail?r=34171d2e137a1b0b369f7ebff6ce55e75f04468a&repo=classic
(note: possible sizes are hardcoded)

Placeholders for the new icons:
http://code.google.com/p/chamilo/source/detail?r=c156cbd9dc912f07becc5ae6eaaf94c3266ab87e&repo=classic

#2

Updated by Juan Carlos Raña Trabado almost 8 years ago

  • Assignee set to Juan Carlos Raña Trabado
#5

Updated by Juan Carlos Raña Trabado almost 8 years ago

Esto va a tardar un tiempo pues hay muchos iconos que hay que crear nuevos y la llamadas a la función en el código antiguo no siempre aparecen correctas

#7

Updated by Juan Carlos Raña Trabado almost 8 years ago

tool description and fix a bug for return
http://code.google.com/p/chamilo/source/detail?r=247a85a84cdea3d3bde29f2fddc1c079ce180d33&repo=classic

as I feared there are more things to go through fixing

#19

Updated by Ivan Tcholakov almost 8 years ago

In the "Documents" tool there is a missing image. I saw this using Opera 11. The tooltip says that the browser does not support SVG. As far as I know Opera supports SVG...

#20

Updated by Juan Carlos Raña Trabado almost 8 years ago

Ivan Tcholakov wrote:

In the "Documents" tool there is a missing image. I saw this using Opera 11. The tooltip says that the browser does not support SVG. As far as I know Opera supports SVG...

thanks Ivan, I go fix typo

#33

Updated by Juan Carlos Raña Trabado almost 8 years ago

  • % Done changed from 10 to 70

attendance tool, thematic advance tool, update some certificates,
documents and wiki icons

http://code.google.com/p/chamilo/source/detail?r=7f58e46f5034d0db66d68298410b71fa4ecb3c01&repo=classic

#46

Updated by Juan Carlos Raña Trabado almost 8 years ago

  • Status changed from New to Needs more info
  • % Done changed from 70 to 80

La tarea está acabada en lo esencial: iconos de los menús a 32 px. Además todos los iconos disponibles tienen su imagen también en 48 px. Creados algunos iconos a 22 y 16 para mantener estilos de las páginas. Sustitución de algunos iconos por otros más simbólicos. Utilización exclusiva de iconos de libre distribución. Adecuación del código de cada una de las herramientas para la carga de iconos y arreglos sobre la marcha. Creación de un listado de la procedencia de los iconos (dentro de carpeta de 48 px)
Más adelante se podría considerar uniformizar los iconos de las tablas, que no está claro que estén mejor a 22 que a 16 (aparecen en ambos indistintamente).
En fin, la tarea fue bastante mayor de lo previsto pero ya ha quedado concluida.

#47

Updated by Juan Carlos Raña Trabado almost 8 years ago

Por cierto, como he pasado por casi todo el código, he ido anotando algunos bugs, algunos más importantes los he subido ya, otros lo haré más tarde.

#48

Updated by Julio Montoya almost 8 years ago

Una pregunta/sugerencia:

No deberíamos de forzar, por ejemplo, un width="32px" para un ícono que no tiene un archivo en 32 px?? por ejemplo para:

Display::return_icon('visible.gif', get_lang('Hide'),array(), 32)

Si el archivo no existe en la carpeta icons/32/

me fuerza una imagen de 22px (si existe en main/img/) a 32px

#49

Updated by Julio Montoya almost 8 years ago

He hecho unos pequenos cambios en los íconos edit/delete de documentos y links

http://code.google.com/p/chamilo/source/detail?r=4d900b70e2306a36203b5972fe24431a46db9e69&repo=classic

#50

Updated by Juan Carlos Raña Trabado almost 8 years ago

Julio Montoya wrote:

Una pregunta/sugerencia:

No deberíamos de forzar, por ejemplo, un width="32px" para un ícono que no tiene un archivo en 32 px?? por ejemplo para:

Display::return_icon('visible.gif', get_lang('Hide'),array(), 32)

Si el archivo no existe en la carpeta icons/32/

me fuerza una imagen de 22px (si existe en main/img/) a 32px

Por un lado, creo que no es una buena práctica forzar de una resolución menor a una mayor, el resultado da una calidad inaceptable. En el caso inverso no supondría un problema por lo general.
Los iconos de la carpeta img/ deben acabar desapareciendo así que si se necesita usar uno que no existe uno en img/icons/32/ lo suyo es o bien crear uno en /32 y si se puede otro en /48. Si no se tiene tiempo para esto directamente usar el icono de img/ y más tarde cambiar el código en la página para llamarlo.

Más adelante, quizá 1.8.8.1 podría hacer una versión a 22 de todos los iconos (podría hacer un batch para esto: resize+comprime+transparent+png, pero primero hay que acabar de fijar los tipos de iconos a 48 y 32 y si fuera necesario en el momento crear el de 22 cuando sea necesario desde la versión de 48 o 32. El objetivo es conseguir un patrón a 32 de todos los iconos, e intentarlo a 48.

Por otro lado para el icon visible, sí existe un icono a 32 px, pero lógicamente está en png así que si se llama a uno gif no se va a encontrar, png es el formato en el que deberían estar todos los iconos.

Si se necesitan iconos nuevos vendría muy bien saber a qué corresponden en los antiguos y en qué lugar se insertan ahora

#51

Updated by Juan Carlos Raña Trabado almost 8 years ago

Julio Montoya wrote:

He hecho unos pequenos cambios en los íconos edit/delete de documentos y links

http://code.google.com/p/chamilo/source/detail?r=4d900b70e2306a36203b5972fe24431a46db9e69&repo=classic

El problema es que sigues usando iconos de img/ cuando sí existen iconos nuevos por ejemplo wizard.gif lo mantienes cuando deberías escribir wizard.png, de esta forma nunca acabaremos teniendo un set de iconos estable y homogéno. Los iconos de img/ deben evitarse usar

#52

Updated by Juan Carlos Raña Trabado almost 8 years ago

Por otro lado en las tablas, como comentaba más arriba, no tengo claro si quedan mejor los iconos a 16 px o a 22 px. En esto me gustaría alguna opinión. El uso de 22 px nos obligará a dejar de lado varios sets de iconos ampliamente usados ahora desde img/ en las tablas.

#53

Updated by Julio Montoya almost 8 years ago

Juan Carlos Raña wrote:

Por otro lado en las tablas, como comentaba más arriba, no tengo claro si quedan mejor los iconos a 16 px o a 22 px. En esto me

gustaría alguna opinión. El uso de 22 px nos obligará a dejar de lado varios sets de iconos ampliamente usados ahora desde img/ en las tablas.

Sobre las tablas prefiero 22px, 16px me parece demasiado pequeno puesto que no hay ningun otro texto al lado es necesario distinguir bien la imagen (peor cuando se usan grandes pantallas), otro asunto offtopic, yo sugiero poner el ícono de "Eliminar" siempre como última opción (pegado a la derecha).

#55

Updated by Juan Carlos Raña Trabado almost 8 years ago

Podríamos añadir en el array que sigue al nombre del icono y antes de su tamaño una llamada a un tooptip especial, entre otros algunos ejemplos:

http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/

http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/

#56

Updated by Juan Carlos Raña Trabado almost 8 years ago

need to clarify some gray because they are not all there is to do it manually in the superior size and then generate the lower

#57

Updated by Juan Carlos Raña Trabado almost 8 years ago

tables: announcements, lesson plans, gradebook, course
description, dropbox, groups, users, attendance, glossary

http://code.google.com/p/chamilo/source/detail?r=5d41b2b1f96cb12966bb6c4f2d1fa20f218a8248&repo=classic

#60

Updated by Juan Carlos Raña Trabado almost 8 years ago

tables: my courses and inscription, calendar, admin languages,
agenda, notebook, social network, survey, works, admin templates .And update
languages

http://code.google.com/p/chamilo/source/detail?r=cbf21609cc55f12f10ab6c8b244edd1d747ccc53&repo=classic

#61

Updated by Yannick Warnier almost 8 years ago

I'm updating the goal to 1.8.8.1. Juan Carlos has already developed most of it, but as commented by e-mail, there should be global settings that allow to say which general size of icons we want (configure constants for example), and these would be automatically applied to all display_icon() calls. I'm considering mostly fixed in 1.8.8 though.

Juan Carlos, sería bueno que contaras tu tiempo en estas tareas globales y lo registraras en la tarea. Lejos de querer vincularlo con algun sistema monetario, me permite sacar anuncios tipo "hemos publicado la versión 1.8.8 que suma 1800 horas hombre de mejoras a destino de todos" etc para impresionar un poco nuestra comunidad. Y además nos da una idea, aunque sea muy imprecisa, del trabajo que representa una nueva versión de Chamilo.

#62

Updated by Yannick Warnier almost 8 years ago

  • Target version changed from 1.8.8 stable to 1.8.8.4
#63

Updated by Juan Carlos Raña Trabado almost 8 years ago

Procuraré la evaluación, son muchas, muchas horas, pues la tarea incluye más cosas de las que parece:

-Identificación de la función lógica que indica el icono
-Adecuación del texto que aparece en el tip
-Búsqueda de icono de código libre, estilo similar y tamaño adecuado a la función lógica que se representa
-Creación de iconos nuevos, partiendo de otros open source cuando no haya iconos adecuados al valor simbólico a representar o este sea manifiestamente mejorable
-Con frecuencia ha implicado el redimensionamiento de los iconos, cambio de fondo a transparente y compresión adecuada para la web
-Búsqueda de los lugares en los que el icono se debe insertar en el código, según la función lógica que debe representar en distintos lugares y sin entrar en conflicto con otras representaciones simbólicas
-Inserción de los iconos en el código, lo que implica con frecuencia arreglos extra necesarios sobre la marcha en el código
-Documentación de los iconos que se han introducido y su procedencia

#64

Updated by Hubert Borderiou almost 8 years ago

Hi,

you've got nice icons for the 1.8.8 beta ^^
But I don't see anymore text labels. On application it is more often the user choice to remove (or not) the text labels. When the user is very familiar with the soft, he may removes text labels, because he knows it by heart.

I think it is really disturbing to add functionnalities + remove text labels at the same time.
I was quite disturbing myself, even if I know the platform very well.

Don't you think it's going to be a good idea to
- (harder) put an option for user if he want to remove texts labels ?
or
- (easiers) put a global option in the platform to display or not text labels for icons ?

best regards,

hubert

#65

Updated by Hubert Borderiou over 7 years ago

I've just installed the 1.8.8beta
Tha administration > configuration page is really hard to understand.
There are still a lot of option in each configuration topic, and it is really hard to find the option you need.
It is still really really harder harder without text labels under icons.

Did you discuss this point ? What doesn the community think about it ?

regards,

#66

Updated by Juan Carlos Raña Trabado over 7 years ago

Do not have enough with the tips?

#67

Updated by Juan Carlos Raña Trabado over 7 years ago

updating and addign some icons: course_progress (lessons_plan) and attendance tools http://code.google.com/p/chamilo/source/detail?r=4ea6401310e5c5731b2cb5064cfcecf89dc314df&repo=classic

#68

Updated by Juan Carlos Raña Trabado over 7 years ago

more consistency between the different sizes

http://code.google.com/p/chamilo/source/detail?r=f0216402b3ec94763274a787a47b261a68d272f0&repo=classic

Aún queda algún icono duplicado en el tamaño 64 px user.png members.png. Sería bueno modificar esto en la página de inicio. Igual ocurre con el icono links.png que debería llamarse link.png, que es el que se usa en la inmensa mayoría de la plataforma; de otra forma de nuevo tendremos otro duplicado.

#70

Updated by Bryan Fuertes Malca over 7 years ago

  • Target version changed from 1.8.8.4 to 1.9 Stable
#71

Updated by Yannick Warnier over 6 years ago

  • Target version changed from 1.9 Stable to 1.9 Beta
#72

Updated by Yannick Warnier over 6 years ago

We've made big improvements, but it doesn't make sense to have this task specifically for 1.9 beta. Moving to 1.10

#73

Updated by Yannick Warnier over 6 years ago

  • Target version changed from 1.9 Beta to 2.0
#74

Updated by Yannick Warnier almost 3 years ago

  • Target version changed from 2.0 to 3.0

Also available in: Atom PDF