Open Time - Mot-clé - SVG<p>Open time, open mind, open eyes</p>2024-03-29T07:16:30+01:00Franck Paulurn:md5:61070eb8c883ae7581f861faefddecbfDotclearUn peu de superfluurn:md5:9f1a81b9e4a4559fae1763e919d17bfa2022-10-19T06:30:00+02:002022-10-19T05:41:29+02:00FranckBrèvesCSSdotcleardéveloppementSVG <p>J’ai fait une pause avec les prises de tête de migration à venir avec la nouvelle version et en conséquence, après avoir fermé deux tickets critiques (<a href="https://git.dotclear.org/dev/dotclear/issues/192">#192</a> et <a href="https://git.dotclear.org/dev/dotclear/issues/193">#193</a>), j’ai préféré jouer un peu côté design.</p>
<p>Pas grand chose, juste au sujet de l’aspect des messages affichés dans l’administration, avec en particulier un petit passage des icônes en SVG.</p>
<p>Résultat des courses, ça va ressembler à ça dans la prochaine 2.24, pour le mode clair :</p>
<figure style="margin: 0 auto; display: table;">
<a href="https://open-time.net/public/screenshots/2022/dc-2-24-msg-light.jpg" title="Aspect des messages dans Dotclear 2.24 en mode clair, oct. 2022"><img src="https://open-time.net/public/screenshots/2022/.dc-2-24-msg-light_u.jpg" alt="Aspect des messages dans Dotclear 2.24 en mode clair, oct. 2022" title="Aspect des messages dans Dotclear 2.24 en mode clair" height="341" width="600" /></a>
<figcaption>Aspect des messages dans Dotclear 2.24 en mode clair</figcaption>
</figure>
<p>Et en mode sombre :</p>
<figure style="margin: 0 auto; display: table;">
<a href="https://open-time.net/public/screenshots/2022/dc-2-24-msg-dark.jpg" title="Aspect des messages dans Dotclear 2.24 en mode sombre, oct. 2022"><img src="https://open-time.net/public/screenshots/2022/.dc-2-24-msg-dark_u.jpg" alt="Aspect des messages dans Dotclear 2.24 en mode sombre, oct. 2022" title="Aspect des messages dans Dotclear 2.24 en mode sombre" height="341" width="600" /></a>
<figcaption>Aspect des messages dans Dotclear 2.24 en mode sombre</figcaption>
</figure>
<p>J’aime bien apporter un petit coup de peinture, de temps en temps :-)</p>
https://open-time.net/post/2022/10/19/Un-peu-de-superflu#comment-formhttps://open-time.net/feed/atom/comments/15502Icônes des médiasurn:md5:3c051deab44d6a3921cdc33a9aa3b6e82022-07-29T10:59:00+02:002022-07-29T10:03:23+02:00FranckBrèvesdotclearSVG <p>En voilà que j’avais zappé pendant mes dernières migration de PNG/JPG vers SVG, les icônes par défaut utilisées dans la médiathèque, quand il n’y a pas de miniatures associées aux médias listés :</p>
<figure style="margin: 0 auto; display: table;">
<a href="https://open-time.net/public/screenshots/2022/icones-medias.jpg" title="Icônes par défaut des médias, juil. 2022"><img src="https://open-time.net/public/screenshots/2022/.icones-medias_u.jpg" alt="Icônes par défaut des médias, juil. 2022" title="Icônes par défaut des médias" height="395" width="600" /></a>
<figcaption>Icônes par défaut des médias</figcaption>
</figure>
<p>Je me garde ça pour la 2.24 à venir cet automne…</p>
https://open-time.net/post/2022/07/29/Icones-des-medias#comment-formhttps://open-time.net/feed/atom/comments/15420Et voilàurn:md5:5e39537784ed6c8c74bdac907bb79fba2022-04-04T06:37:00+02:002022-04-04T06:37:00+02:00FranckBrèvesSVG <p>Avant :</p>
<figure style="margin: 0 auto; display: table;">
<a href="https://open-time.net/public/screenshots/2022/toolbar-md-2-22.jpg" title="Barre d'outils de l'éditeur historique, syntaxe Markdown, avr. 2022"><img src="https://open-time.net/public/screenshots/2022/.toolbar-md-2-22_u.jpg" alt="Barre d'outils de l'éditeur historique, syntaxe Markdown, avr. 2022" title="Barre d'outils de l'éditeur historique, syntaxe Markdown" height="115" width="600" /></a>
<figcaption>Barre d’outils de l’éditeur historique, syntaxe Markdown</figcaption>
</figure>
<p>Après :</p>
<figure style="margin: 0 auto; display: table;">
<a href="https://open-time.net/public/screenshots/2022/toolbar-md-2-22-bis.jpg" title="Barre d'outils de l'éditeur historique, syntaxe Markdown, avr. 2022"><img src="https://open-time.net/public/screenshots/2022/.toolbar-md-2-22-bis_u.jpg" alt="Barre d'outils de l'éditeur historique, syntaxe Markdown, avr. 2022" title="Barre d'outils de l'éditeur historique, syntaxe Markdown" height="115" width="600" /></a>
<figcaption>Barre d’outils de l’éditeur historique, syntaxe Markdown</figcaption>
</figure>
<p>Je pense que c’est bon maintenant, je vais pouvoir passer à autre chose \o/</p>
https://open-time.net/post/2022/04/04/Et-voila#comment-formhttps://open-time.net/feed/atom/comments/15304Icônesurn:md5:e32acf40f0467a592d9ad0e1c7739af72022-04-03T07:17:00+02:002022-04-03T06:48:09+02:00FranckBrèvesSVG <p>Deux icônes à revoir, parce que leur design est trop « léger » par rapport aux autres présentes sur la barre d’outils :</p>
<figure style="margin: 0 auto; display: table;">
<a href="https://open-time.net/public/screenshots/2022/toolbar-md-2-22.jpg" title="Barre d'outils de l'éditeur historique, syntaxe Markdown, avr. 2022"><img src="https://open-time.net/public/screenshots/2022/.toolbar-md-2-22_u.jpg" alt="Barre d'outils de l'éditeur historique, syntaxe Markdown, avr. 2022" title="Barre d'outils de l'éditeur historique, syntaxe Markdown" height="115" width="600" /></a>
<figcaption>Barre d’outils de l’éditeur historique, syntaxe Markdown</figcaption>
</figure>
<p>D’abord celle choisie pour le bloc détail (<code>details</code>) :</p>
<figure style="margin: 0 auto; display: table; width: 8em;">
<a href="https://open-time.net/public/illustrations/2022/bt_details.svg" title="Icône du bouton d'insertion d'un bloc détails, avr. 2022"><img src="https://open-time.net/public/illustrations/2022/bt_details.svg" alt="Icône du bouton d'insertion d'un bloc détails, avr. 2022" title="Icône du bouton d'insertion d'un bloc détails" /></a>
<figcaption>Icône du bouton d’insertion d’un bloc détails</figcaption>
</figure>
<details>
<summary>Exemple de bloc détail</summary>
Contenu caché tant qu’on ne déplie pas. D’ailleurs il serait opportun que je trouve un style un peu plus fun pour ce genre de blocs…
</details>
<p>Je pense qu’épaissir le trait devrait suffire ; j’ai pensé un temps remplir le triangle, mais ça risque d’induire de la confusion avec le bouton ordinairement utiliser pour lancer la lecture d’un média.</p>
<p>Ensuite celle pour le bloc de côté (<code>aside</code>) :</p>
<figure style="margin: 0 auto; display: table; width: 8em;">
<a href="https://open-time.net/public/illustrations/2022/bt_aside.svg" title="Icône du bouton d'insertion d'un bloc de côté, avr. 2022"><img src="https://open-time.net/public/illustrations/2022/bt_aside.svg" alt="Icône du bouton d'insertion d'un bloc de côté, avr. 2022" title="Icône du bouton d'insertion d'un bloc de côté" /></a>
<figcaption>Icône du bouton d’insertion d’un bloc de côté</figcaption>
</figure>
<aside>
Et voilà un exemple de bloc de côté.
</aside>
<p>Dans ce cas j’ai peur qu’épaissir les traits ne rende l’ensemble illisible ; il serait probablement préférable que je trouve une autre façon de représenter ce bouton, sauf que je n’ai pour l’instant pas d’idée à ce sujet…</p>
https://open-time.net/post/2022/04/03/Icones#comment-formhttps://open-time.net/feed/atom/comments/15303J'ai bien jouéurn:md5:d54637c3ac12fc393d1a2577420f3c822022-02-17T06:55:00+01:002022-02-17T11:45:19+01:00FranckBrèvesdotcleardéveloppementSVG <figure style="margin: 0 auto; display: table;">
<a href="https://open-time.net/public/screenshots/2022/icones-dotclear.jpg" title="Icônes pour Dotclear (cœur et plugins) en SVG, févr. 2022"><img src="https://open-time.net/public/screenshots/2022/.icones-dotclear_u.jpg" alt="Icônes pour Dotclear (cœur et plugins) en SVG, févr. 2022" title="Icônes pour Dotclear (cœur et plugins) en SVG" height="451" width="600" /></a>
<figcaption>Icônes pour Dotclear (cœur et plugins) en SVG</figcaption>
</figure>
<p>Je pense avoir fait, à peu près, le tour des icônes nécessaires pour Dotclear et les zilliards de plugins que je maintiens, je vais donc passer à autre chose, genre publier une version de maintenance de Dotclear, dans les jours qui viennent :-)</p>
<p>Cela dit, si vous avez des besoins particuliers d’icônes de plugin, vous pouvez toujours sonner ici, j’essaierai de vous faire ça en restant dans le look de l’administration de Dotclear.</p>
<p>J’avais, par ailleurs, eu envie de reprendre <a href="https://github.com/franck-paul/iconsets" hreflang="en">les jeux d’icônes alternatifs</a>, mais c’est franchement trop de boulot, donc je jette l’éponge pour l’instant. Si ça vous chante ne vous gênez pas pour <i lang="en">forker</i> le dépôt et en publier de nouveaux !</p>
https://open-time.net/post/2022/02/17/J-ai-bien-joue#comment-formhttps://open-time.net/feed/atom/comments/15258Tant que j'y suisurn:md5:4cd63b1185935336b0754daf358e29db2022-02-03T09:53:00+01:002022-02-03T09:55:19+01:00FranckBrèvesdesigndotclearSVG <figure style="margin: 0 auto; display: table;">
<a href="https://open-time.net/public/screenshots/2022/pagination-png.jpg" title="Boutons de pagination au format PNG, fév. 2022"><img src="https://open-time.net/public/screenshots/2022/.pagination-png_u.jpg" alt="Boutons de pagination au format PNG, fév. 2022" title="Boutons de pagination au format PNG" height="161" width="600" /></a>
<figcaption>Boutons de pagination au format PNG</figcaption>
</figure>
<p>J’en ai profité pour m’occuper aussi des boutons utilisés pour la pagination, tant qu’à faire :-)</p>
<figure style="margin: 0 auto; display: table;">
<a href="https://open-time.net/public/screenshots/2022/pagination-svg.jpg" title="Boutons de pagination au format SVG, fév. 2022"><img src="https://open-time.net/public/screenshots/2022/.pagination-svg_u.jpg" alt="Boutons de pagination au format SVG, fév. 2022" title="Boutons de pagination au format SVG" height="161" width="600" /></a>
<figcaption>Boutons de pagination au format SVG</figcaption>
</figure>
<p>C’est pas très visible en petite taille, par contre, dès que tu zoomes, tu vois vite la différence ;-)</p>
https://open-time.net/post/2022/02/03/Tant-que-j-y-suis#comment-formhttps://open-time.net/feed/atom/comments/15244Un trait par là, une courbe par iciurn:md5:ac618fd982b703322f227b5bd252a3522022-02-02T08:23:00+01:002022-02-09T15:28:32+01:00FranckBrèvesdesigndotclearSVG <figure style="margin: 0 auto; display: table;">
<a href="https://open-time.net/public/screenshots/2022/icones-svg-2-21.jpg" title="Icônes de Dotclear en SVG, fév. 2022"><img src="https://open-time.net/public/screenshots/2022/.icones-svg-2-21_u.jpg" alt="Icônes de Dotclear en SVG, fév. 2022" title="Versions pour le mode clair et le mode sombre" height="600" width="600" /></a>
<figcaption>Versions pour le mode clair et le mode sombre</figcaption>
</figure>
<p>Voilà, j’ai à peu près fait le tour des icônes du tableau de bord et du menu de Dotclear, après avoir repris celle de la barre d’outil de l’éditeur <strong>standard</strong> de Dotclear<sup id="fnref:ts1644413312.1"><a href="https://open-time.net/post/2022/02/02/Un-trait-par-la-une-courbe-par-ici#fn:ts1644413312.1" class="footnote-ref" role="doc-noteref">1</a></sup> (<i lang="en">aka</i> éditeur historique de Dotclear).</p>
<p>À force on va finir par ne plus avoir du tout d’images au format PNG dans Dotclear ; bon en vrai je pense qu’il en restera quelques unes, peut-être celles qui servent à identifier les types de média dans la médiathèque, ça reste à étudier…</p>
<p>En tout cas c’était bien fun à faire et ça me change du code :-)</p>
<div class="footnotes" role="doc-endnotes">
<hr />
<ol>
<li id="fn:ts1644413312.1" role="doc-endnote">
<p>Standard ça sonne mieux et moins vieux que <strong>historique</strong>, non ? <a href="https://open-time.net/post/2022/02/02/Un-trait-par-la-une-courbe-par-ici#fnref:ts1644413312.1" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
</ol>
</div>
https://open-time.net/post/2022/02/02/Un-trait-par-la-une-courbe-par-ici#comment-formhttps://open-time.net/feed/atom/comments/15243Dessiner n° 2urn:md5:f8efa71619a8384a70b26eef2a14fede2022-01-27T12:07:00+01:002022-01-27T12:26:23+01:00FranckBrèvesdesigndotclearSVG <figure style="margin: 0 auto; display: table;">
<a href="https://open-time.net/public/illustrations/2022/icone-blog-pref-svg.jpg" title="Icône du bouton des paramètres du blog, janv. 2022"><img src="https://open-time.net/public/illustrations/2022/.icone-blog-pref-svg_u.jpg" alt="Icône du bouton des paramètres du blog, janv. 2022" title="Icône du bouton des paramètres du blog" height="266" width="600" /></a>
<figcaption>Icône du bouton des paramètres du blog</figcaption>
</figure>
<p>Ça y’est j’ai vaincu les quelques difficultés prévues, en particulier pour gérer de façon dynamique le thème utilisé (y compris quand on change de thème à la volée avec les outils de développement du navigateur) !</p>
<p>Plus qu’à dessiner proprement les icônes actuelles avec si nécessaire une nouvelle version pour le thème foncé.</p>
<p>Le code modifié reste compatible avec l’historique, quel que soit le format des icônes fournies (SVG, PNG, …).</p>
<p>Ça sera donc dans la 2.21 à venir \o/</p>
https://open-time.net/post/2022/01/27/Dessiner-n-2#comment-formhttps://open-time.net/feed/atom/comments/15237Y'a du ménage à faireurn:md5:2cd63b38c21aed8542746d0297eee8762022-01-12T09:39:00+01:002022-01-12T09:42:56+01:00FranckBrèvesCSSdotcleardéveloppementSVG <figure style="margin: 0 auto; display: table;">
<a href="https://open-time.net/public/screenshots/2019/dc-admin-dark.jpg" title="Interface d'administration de Dotclear en mode sombre, oct. 2019"><img src="https://open-time.net/public/screenshots/2019/.dc-admin-dark_u.jpg" alt="Interface d'administration de Dotclear en mode sombre, oct. 2019" title="Interface d'administration de Dotclear en mode sombre" height="500" width="600" /></a>
<figcaption>Interface d’administration de Dotclear en mode sombre</figcaption>
</figure>
<p>Surtout du côté de la <abbr title="Cascading Style Sheets (feuilles de style en cascade)">CSS</abbr> de l’admin parce que la palette des couleurs utilisées est, à mon humble avis, beaucoup trop étendue ! Par ailleurs, je compte continuer à remplacer les images <abbr title="Portable Network Graphics">PNG</abbr> (ou <abbr title="Joint Photographic Experts Group">JPEG</abbr>) par leurs équivalents en <abbr title="Scalable Vector Graphics">SVG</abbr>, qui souvent ne pèsent pas plus lourd et restent lisibles quel que soit le niveau de zoom<sup id="fnref:ts1641973376.1"><a href="https://open-time.net/post/2022/01/12/Y-a-du-menage-a-faire#fn:ts1641973376.1" class="footnote-ref" role="doc-noteref">1</a></sup>; de plus le mode sombre n’est pas tout à fait correctement géré dans certains cas, ça serait pas mal de revoir ça<sup id="fnref:ts1641973376.2"><a href="https://open-time.net/post/2022/01/12/Y-a-du-menage-a-faire#fn:ts1641973376.2" class="footnote-ref" role="doc-noteref">2</a></sup>.</p>
<div class="footnotes" role="doc-endnotes">
<hr />
<ol>
<li id="fn:ts1641973376.1" role="doc-endnote">
<p>D’ailleurs il y a une piste de ce côté pour remplacer le couple icône et grande icône des plugins par une seule icône au format <abbr title="Scalable Vector Graphics">SVG</abbr> <a href="https://open-time.net/post/2022/01/12/Y-a-du-menage-a-faire#fnref:ts1641973376.1" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
<li id="fn:ts1641973376.2" role="doc-endnote">
<p>Prévoir une version sombre des icônes de plugins, par exemple <a href="https://open-time.net/post/2022/01/12/Y-a-du-menage-a-faire#fnref:ts1641973376.2" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
</ol>
</div>
https://open-time.net/post/2022/01/12/Y-a-du-menage-a-faire#comment-formhttps://open-time.net/feed/atom/comments/15222Changer l'épaule du fusilurn:md5:1a02533e489510a3ea7781604fb6ba802018-10-24T10:44:00+02:002018-10-25T08:42:24+02:00FranckDotclearCSSdotclearHTMLSVG <p>Bon, après moult essais et discussions sur IRC à propos de <a href="https://open-time.net/post/2018/10/23/Footer-de-merde">mon truc bizarre d’hier</a> qui marchait sur Chrome et Safari et pas sur Firefox, il s’avère qu’en fait c’est un <strong>BUG</strong> si ça marche sur Chrome et Safari et pas sur Firefox, dixit Karl qui a ouvert <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1501480" hreflang="en">un ticket</a> à ce sujet.</p>
<p>Du coup j’ai tout repris en utilisant cette fois une image SVG directement dans le <q lang="en">markup</q> plutôt qu’en masque de fond CSS, en m’inspirant de <a href="https://pidila.gitlab.io/scampi/documentation/svg-icons.html">Scampi</a> (au passage allez faire un tour sur <a href="https://pidila.gitlab.io/">le site de ressources de la PIDILA</a>, y’a plein de trucs cools et accessibles).</p>
<p>Je détaille pour ceux qui sont intéressés, les autres peuvent retourner vaquer à leurs occupations favorites…</p>
<p>Hier, mon code HTML était comme ça :</p>
<pre><code class="language-xml"><input type="checkbox" id="dragndrop" title="L'ordonnancement par glisser-déposer des zones du tableau de bord est désactivé"></code></pre>
<p>La CSS (source SASS) :</p>
<pre><code class="language-scss">#dragndrop {
position: absolute;
width: 2em;
height: 1.5em;
-webkit-mask-image: url(dragndrop.svg#mask);
mask-image: url(dragndrop.svg#mask);
&:before {
content: "";
display: inline-block;
width: 2em;
height: 1.5em;
background: $drag-n-drop-off; // Couleur OFF
}
&:checked:before {
background: $drag-n-drop-on; // Couleur ON
}
}</code></pre>
<p>Et le SVG utilisé :</p>
<pre><code class="language-xml"><svg id="mask" viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet">
<path d="M7.9 7.9l2.1 7.5 1.7-2.6 3.2 3.2 1.1-1.1-3.3-3.2 2.7-1.6z" fill="#91DC5A">
</path>
<path d="M8 12h-7v-9h12v5.4l1 0.2v-6.6h-14v11h8.2z" fill="#91DC5A">
</path>
</svg></code></pre>
<p>Et ça ça foirait dans certains cas (voir plus haut).</p>
<p>Aujourd’hui, j’ai remplacé le code HTML par :</p>
<pre><code class="language-xml"><input type="checkbox" id="dragndrop" class="sr-only" title="L'ordonnancement par glisser-déposer des zones du tableau de bord est désactivé">
<label for="dragndrop"><svg aria-hidden="true" focusable="false" class="dragndrop-svg"><use xlink:href="images/dragndrop.svg#mask"></use></svg><span id="dragndrop-label" class="sr-only">L'ordonnancement par glisser-déposer des zones du tableau de bord est désactivé</span></label></code></pre>
<p>La CSS (source SASS) est :</p>
<pre><code class="language-scss">#dragndrop {
position: absolute;
&+label {
position: absolute;
display: inline-block;
line-height: 1;
}
&+label .dragndrop-svg {
width: 2em;
height: 1.5em;
fill: $drag-n-drop-off; // Couleur OFF
}
&:checked+label .dragndrop-svg {
fill: $drag-n-drop-on; // Couleur ON
}
}</code></pre>
<p>Et le SVG utilisé, qui n’a pas franchement varié :</p>
<pre><code class="language-xml"><svg id="mask" viewbox="0 0 16 16" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M7.9 7.9l2.1 7.5 1.7-2.6 3.2 3.2 1.1-1.1-3.3-3.2 2.7-1.6z">
</path>
<path d="M8 12h-7v-9h12v5.4l1 0.2v-6.6h-14v11h8.2z">
</path>
</svg></code></pre>
<p>Et ça ça fonctionne partout \o/</p>
<p>Après un peu de javascript pour activer et désactiver la fonctionnalité et changer les libellés et titres de façon appropriée et ça roule (je ne mets que l’extrait intéressant) :</p>
<pre><code class="language-javascript">// Set or reset sortable depending on #dragndrop checbkox value
$('#dragndrop').click(function() {
if ($(this).is(':checked')) {
// Activate sorting feature
areas.forEach(element => init_positions(element[0], element[1]));
$(this).prop('title', dotclear.dragndrop_on);
$('#dragndrop-label').text(dotclear.dragndrop_on);
} else {
// Deactivate sorting feature
areas.forEach(element => reset_positions(element[0]));
$(this).prop('title', dotclear.dragndrop_off);
$('#dragndrop-label').text(dotclear.dragndrop_off);
}
});</code></pre>
<p>Toujours est-il que je commence à comprendre un peu mieux comment fonctionne SVG, que les CSS, c’est pas toujours de tout repos vu les implémentations différentes selon les moteurs de rendu, que le Javascript ça permet de faire des trucs rigolos et qu’au passage jQuery est tout de même rudement pratique.</p>
<p>À vous les studios !</p>https://open-time.net/post/2018/10/24/Changer-l-epaule-du-fusil#comment-formhttps://open-time.net/feed/atom/comments/13975