Project

General

Profile

Evolution #4406

Icônes barre édition : passage en svg + rafraichissement

Added by tcharlss (*´_ゝ`) 4 months ago. Updated 8 days ago.

Status:
En cours
Priority:
Normal
Assignee:
-
Target version:
Start date:
11/27/2019
Due date:
% Done:

0%

Resolution:

Description

Avec le svg qui est officiellement supporté dans la future 3.3, ça peut être l'occasion de passer les icônes de la barre d'édition en svg et de les rafraichir un peu.

Après un tour d'horizon de ce qui se fait ailleurs, j'ai commencé des tests dans un fork, dans la branche icones_svg : https://git.spip.net/tcharlss/porte_plume
Je trouve celle de gitlab bien faite, sobre et sans chichi, donc je m'en suis inspiré. Ce n'est pas une proposition définitive, juste pour montrer une direction :

D'autres barres pour comparer :

gitlab :

github :

stackoverflow :

wordpress :

github.png View - github (7.17 KB) tcharlss (*´_ゝ`), 11/27/2019 11:29 AM

gitlab.png View - gitlab (6.16 KB) tcharlss (*´_ゝ`), 11/27/2019 11:29 AM

spip_v1.png View - spip v1 (8.74 KB) tcharlss (*´_ゝ`), 11/27/2019 11:29 AM

spip_v1_hover1.png View - spip v1 hover 1 (19.7 KB) tcharlss (*´_ゝ`), 11/27/2019 11:29 AM

spip_v1_hover2.png View - spip v1 hover 2 (13.9 KB) tcharlss (*´_ゝ`), 11/27/2019 11:29 AM

stackoverflow.png View - stackoverflow (12.7 KB) tcharlss (*´_ゝ`), 11/27/2019 11:29 AM

wordpress.png View - wordpress (12.7 KB) tcharlss (*´_ゝ`), 11/27/2019 11:29 AM

wikipedia2.png View - wikipedia (20.5 KB) tcharlss (*´_ゝ`), 11/27/2019 10:17 PM

spip_v3.png View (2.94 KB) tcharlss (*´_ゝ`), 12/02/2019 05:36 PM

History

#1 Updated by b b 4 months ago

  • Status changed from Nouveau to En cours

Bonne idée, surtout que ça permet d'utiliser une icone bien plus adaptée pour les liens, +1 donc :)

#2 Updated by nicod _ 4 months ago

Chouette idée, ça a l'air de bien rendre.

Je suis juste un peu chiffonné avec les initiales anglaises (H pour heading, B pour bold).
Je sais bien que c'est déjà le cas pour B / bold, et qu'on ne peut pas (il me semble) décliner les icônes par langue.
Mais bon, si on trouvait une astuce...

#3 Updated by tcharlss (*´_ゝ`) 4 months ago

Ah oui bonne suggestion, dans la barre de wikipedia (très réussie), ils utilisent aussi "G" pour le gras.
Qu'est-ce que tu suggererais pour les intertitres ? Un "T" par exemple ?

Nb : hors sujet par rapport à ce ticket, mais la barre de wikipedia est vraiment bien pensée en ce qui concerne les sous-menus : chaque icône a un intitulé et ses raccourcis affichés, plus pratique que d'avoir ces infos au survol.

#4 Updated by tcharlss (*´_ゝ`) 4 months ago

Nouvelle itération du coup, spéciale dédicace @nicod_ :

#5 Updated by b b 4 months ago

Super la dernière proposition, peut-être le i de italique mériterait lui aussi une majuscule, comme chez wikipedia ?

#6 Updated by nicod _ 4 months ago

Hum... quitte à couper les cheveux en quatre, je verrais plutôt le G (de gras) en minuscule aussi, comme le i
Du coup, le T en majuscule aurait plus de sens, ou en tout cas serait plus compréhensible, il me semble.

J'aime bien cette proposition en tout cas.

Pour la 3.3 ? avec des icones en svg ?

#7 Updated by b b 4 months ago

Hum... quitte à couper les cheveux en quatre, je verrais plutôt le G (de gras) en minuscule aussi, comme le i

+1

Pour la 3.3 ? avec des icones en svg ?

C'est bien la version cible du ticket :)

#8 Updated by tcharlss (*´_ゝ`) 4 months ago

Oui pour le coup suite à vos remarques, je me dis qu'il vaut mieux toutes les avoir dans la même casse, plutôt qu'un mélange des 2.
Et à choisir, j'ai une nette préférence pour les majuscules : ça fait des symboles aux formes plus simples, moins "maniérées". Du coup je suis plus pour la prop de b_b : remettre le "i" en majuscule, et voilà.

Aussi je me demandais : dans le dossier des icônes du porte plume, c'est l'image complète qui est utilisée en mode sprite (avant spt-v1.png, maintenent spt-v1.svg) : https://git.spip.net/tcharlss/porte_plume/src/branch/master/icones_barre
Mais il y a aussi les fichiers individuels de chaque icône : quelle est leur utilité ? Est-ce qu'il faut les garder ceux-là ?

Nb : bizarre, les images insérées dans le texte ont sauté (je les avais mises sur git.spip.net)

#9 Updated by tcharlss (*´_ゝ`) 4 months ago

Ps : et oui s'il y a moyen de squeezer ça dans la 3.1, ça pourrait être chouette. Avant de faire un PR il reste juste 2 choses :

  • Valider la tronche des icônes
  • Optimiser le svg. Ça doit être possible de le passer en dessous de 20ko (pour l'instant on est à 21.7 ko avec optimisation dans svgo).

#10 Updated by tcharlss (*´_ゝ`) 4 months ago

Dernière prop :

De mon côté, c'est prêt à pull requester

#12 Updated by tcharlss (*´_ゝ`) 9 days ago

J'ai testé depuis avec quelques autres plugins qui ajoutent des icônes dans la barre d'édition (codes informatiques, enluminures typographiques, intertitres hiérarchisés), et il s'avère que certains réutilisent parfois 1 ou 2 icônes, en plus d'ajouter les leurs.

Sauf que la version png de ces icônes n'existe plus. Du coup est-ce qu'il ne vaudrait pas mieux remettre ces png juste pour une version, le temps que les plugins se mettent à la page ? Et par contre lors d'une prochaine release, ça dispatrait pour de bon. Des avis ?

#13 Updated by RastaPopoulos ♥ 9 days ago

Ça pourrait oui… Ou bien sinon on dit que c'est à eux de faire les quelques modifs d'images nécessaires pour se dire compatibles 3.3. C'est pas non plus comme s'il fallait recoder les plugins, c'est un changement assez minime, mettre à jour quelques images.

#14 Updated by tcharlss (*´_ゝ`) 8 days ago

Ouais ok, faudra penser à documenter ça dans l'article de release.
Le ticket peut-être fermé pour ma part.

Also available in: Atom PDF