Picto ajouter une photo dans les documents

Ça fait un moment que j’avais noté d’en parler sur les forums.

En haut à droite de chaque document en mode connecté. Le dernier est très intuitif. Je remets en cause les deux premiers.

Le second propose d’ajouter des images associées au document.

Il me semble que ce picto :

serait plus pour consulter les images

et moins pertinent et intuitif que :

pour signaler une fonctionnalité d’ajout d’image.

2 Likes

J’aime bien l’actuel qui est assez explicite selon moi.

1 Like

A noter qu’on peut composer des icones parmi celles dispo sur fontawesome. Par exemple rajouter un plus rond.

C’est par exemple le cas de l’icone sortie qui est faite avec un nugae et un soleil.

L’actuel est suffisamment explicite selon moi aussi (@Thomas_C, désolé si tu as l’impression d’entendre de l’écho).

Si vraiment il était question de changer, il y aurait éventuellement ça (fichier-photo, comme quoi on télécharge un fichier) :



ou ça (montré plus haut : superposition de photos, traduit l’idée qu’on en ajoute) :

On encore : [quote=« CharlesB, post:3, topic:247250 »]
A noter qu’on peut composer des icones parmi celles dispo sur fontawesome. Par exemple rajouter un plus rond.
[/quote]
serait une bonne idée également.

Mais plus encore que les icones utilisées, c’est leur place qui me chagrine : en haut à droite, alors que toutes les infos pratiques sur le document sont synthétisées dans la colonne de gauche (y compris les versions, bouton qui s’utilise souvent conjointement à l’édition). Pour moi, il y a un manque d’ergonomie assez net dans le positionnement de ces 3 icones. Mais c’est encore un autre sujet, vous me direz… Je scinde si besoin !

<span class="fa-stack fa-5x">
  <i class="fa fa-image fa-stack-2x"></i>
  <i class="fa fa-plus fa-stack-1x fa-inverse" style="color:C2C_orange"></i>
</span>


On ne peut faire que du monochrome je crois…

Il s’agit de l’empilage de deux icônes FA. C’est une fonction prévue, chaque icône est effectivement monochromatique.

Dans ce cas, pourquoi pas… Mais est-ce que l’icone est assez grand pour distinguer tous ces détails ?

Plus petit avec le plus excentré :

<span class="fa-stack fa-2x">
  <i class="fa fa-image fa-stack-3x"></i>
  <i class="fa fa-plus fa-stack-1x" style="color:#FFAA45"></i>
</span>

Voire tout petit

En fait, c’est rigolo ! On peut vraiment faire ce que l’on veut ! Comment on s’en sert sur un site internet ? Surtout la fonction fa-stack ?

si un « + » se superpose à une icone, il est plus conventionnel que ce soit en haut à droite.
Exemple que j’ai devant les yeux, sur la barre de recherche de firefox :

data-fa-transform=« shrink-10 up-2 right-4 »

Ça doit le faire.

@gros, t’as une ame de geek, he comprend pas pourquoi t’a pas fait encore de code sur c2c :wink:
En effet, on peut mettre en couleur une icone et la superposer à une autre. Et on peut choisir la position du plus.

Il y a pas mal de façon d’integrer cela dans un site. Il y en a des tres simple (deux lignes dans le header, et ton code), et d’autre plus complexe. Sur c2c, c’est assez complexe car on optimize au max le poid de la page.

Mais au final, à l’utilisation c’est assez simple. Pour exemple, l’icone de sortie qui est complexe, ca se fait en trois lignes:

  <fa-layers>
    <fa-icon class="sun" icon="sun" transform="shrink-4 up-2 left-2" spin /> <!-- soleil qui tourne -->
    <fa-icon icon="cloud" :style="{ color: 'white' }" transform="shrink-3 flip-h left-1 down-3" /> <!-- bordure du nuage-->
    <fa-icon icon="cloud" transform="shrink-5 flip-h left-1 down-3" /> <!--  nuage -->
  </fa-layers>

Pour info, le code de cette image :

<fa-layers>
  <fa-icon icon="image" />
  <fa-icon icon="circle" :style="{ color: 'white' }" transform="shrink-5 right-5 up-6" /> <!-- fond du plus qui reste blanc-->
  <fa-icon icon="plus-circle" :style="{ color: 'green' }" transform="shrink-5 right-5 up-6" /> <!-- plus dans rond-->
</fa-layers>
```
1 Like