Fix #4380 : un loader svg, utilisable en balise <img> ou <svg> (auquel cas il...

Fix #4380 : un loader svg, utilisable en balise <img> ou <svg> (auquel cas il prend la couleur courante)

ecrire/base/upgrade.php

@@ -313,7 +313,7 @@ function maj_debut_page($installee, $meta, $table) {
 	$timeout = _UPGRADE_TIME_OUT * 2;
 	$titre = _T('titre_page_upgrade');
 	$balise_img = charger_filtre('balise_img');
-	$titre .= $balise_img(chemin_image('searching.gif'));
+	$titre .= $balise_img(chemin_image('loader.svg'),'','loader');
 	echo(install_debut_html($titre));
 	// script de rechargement auto sur timeout
 	$redirect = generer_url_ecrire('upgrade', "reinstall=$installee&meta=$meta&table=$table", true);

ecrire/inc/chercher_rubrique.php

@@ -340,8 +340,8 @@ function construire_selecteur($url, $js, $idom, $name, $init = '', $id = 0) {
 		. "', this.parentNode.nextSibling, this.nextSibling,'',event)\" title='" . attribut_html(_T('titre_image_selecteur')) . "'><img src='"
 		. chemin_image($icone)
 		. "'\nstyle='vertical-align: middle;' alt='" . attribut_html(_T('titre_image_selecteur')) . "' /></a><img src='"
-		. chemin_image('searching.gif')
-		. "' id='img_"
+		. chemin_image('loader.svg')
+		. "' class='loader' id='img_"
 		. $idom
 		. "'\nstyle='visibility: hidden;' alt='*' />"
 		. "<input id='titreparent' name='titreparent'"

ecrire/inc/headers.php

@@ -159,7 +159,7 @@ function redirige_formulaire($url, $equiv = '', $format = 'message') {
 			return
 				// ie poste les formulaires dans une iframe, il faut donc rediriger son parent
 				"<script type='text/javascript'>if (parent.window){parent.window.document.location.replace(\"$url\");} else {document.location.replace(\"$url\");}</script>"
-				. http_img_pack('searching.gif', '')
+				. http_img_pack('loader.svg', '', " class='loader'")
 				. '<br />'
 				. '<a href="' . quote_amp($url) . '">' . _T('navigateur_pas_redirige') . '</a>';
 		}

ecrire/inc/plonger.php

@@ -100,8 +100,8 @@ function inc_plonger_dist($id_rubrique, $idom = "", $list = array(), $col = 1, $
 	$idom2 = $idom . "_col_" . ($col + 1);
 	$left = ($col * 150);
 
-	return http_img_pack("searching.gif", "*",
-		"style='visibility: hidden; position: absolute; " . $GLOBALS['spip_lang_left'] . ": "
+	return http_img_pack("loader.svg", "",
+		"class='loader' style='visibility: hidden; position: absolute; " . $GLOBALS['spip_lang_left'] . ": "
 		. ($left - 30)
 		. "px; top: 2px; z-index: 2;' id='img_$idom2'")
 	. "<div style='width: 150px; height: 100%; overflow: auto; position: absolute; top: 0px; " . $GLOBALS['spip_lang_left'] . ": "

ecrire/inc/selectionner.php

@@ -116,8 +116,8 @@ function construire_selectionner_hierarchie($idom, $liste, $racine, $url, $name,
 	. ($url_init ? "\nhref='$url_init'" : '')
 	. "></a>"
 	. "<div class='recherche_rapide_parent'>"
-	. http_img_pack("searching.gif", "*",
-		"style='visibility: hidden;float:" . $GLOBALS['spip_lang_right'] . "' id='$idom5'")
+	. http_img_pack("loader.svg", "",
+		"class='loader' style='visibility: hidden;float:" . $GLOBALS['spip_lang_right'] . "' id='$idom5'")
 	. ""
 	. "<input style='width: 100px;float:" . $GLOBALS['spip_lang_right'] . ";' type='search' id='$idom1'"
 	// eliminer Return car il provoque la soumission (balise unique)

prive/images/loader.svg

+<svg width="24" height="24" viewBox="-30 -30 60 60" xmlns="http://www.w3.org/2000/svg">
+<g stroke="currentColor" stroke-width="0.1" fill-opacity="0" fill="currentColor">
+<ellipse cx="0" cy="-19" rx="3" ry="10" transform="rotate(30)"><animate attributeName="fill-opacity" begin="0s" dur="1.2s" values="1;0.1" repeatCount="indefinite"/></ellipse>
+<ellipse cx="0" cy="-19" rx="3" ry="10" transform="rotate(60)"><animate attributeName="fill-opacity" begin="0.1s" dur="1.2s" values="1;0.1" repeatCount="indefinite"/></ellipse>
+<ellipse cx="0" cy="-19" rx="3" ry="10" transform="rotate(90)"><animate attributeName="fill-opacity" begin="0.2s" dur="1.2s" values="1;0.1" repeatCount="indefinite"/></ellipse>
+<ellipse cx="0" cy="-19" rx="3" ry="10" transform="rotate(120)"><animate attributeName="fill-opacity" begin="0.3s" dur="1.2s" values="1;0.1" repeatCount="indefinite"/></ellipse>
+<ellipse cx="0" cy="-19" rx="3" ry="10" transform="rotate(150)"><animate attributeName="fill-opacity" begin="0.4s" dur="1.2s" values="1;0.1" repeatCount="indefinite"/></ellipse>
+<ellipse cx="0" cy="-19" rx="3" ry="10" transform="rotate(180)"><animate attributeName="fill-opacity" begin="0.5s" dur="1.2s" values="1;0.1" repeatCount="indefinite"/></ellipse>
+<ellipse cx="0" cy="-19" rx="3" ry="10" transform="rotate(210)"><animate attributeName="fill-opacity" begin="0.6s" dur="1.2s" values="1;0.1" repeatCount="indefinite"/></ellipse>
+<ellipse cx="0" cy="-19" rx="3" ry="10" transform="rotate(240)"><animate attributeName="fill-opacity" begin="0.7s" dur="1.2s" values="1;0.1" repeatCount="indefinite"/></ellipse>
+<ellipse cx="0" cy="-19" rx="3" ry="10" transform="rotate(270)"><animate attributeName="fill-opacity" begin="0.8s" dur="1.2s" values="1;0.1" repeatCount="indefinite"/></ellipse>
+<ellipse cx="0" cy="-19" rx="3" ry="10" transform="rotate(300)"><animate attributeName="fill-opacity" begin="0.9s" dur="1.2s" values="1;0.1" repeatCount="indefinite"/></ellipse>
+<ellipse cx="0" cy="-19" rx="3" ry="10" transform="rotate(330)"><animate attributeName="fill-opacity" begin="1s" dur="1.2s" values="1;0.1" repeatCount="indefinite"/></ellipse>
+<ellipse cx="0" cy="-19" rx="3" ry="10"><animate attributeName="fill-opacity" begin="1.1s" dur="1.2s" values="1;0.1" repeatCount="indefinite"/></ellipse>
+</g>
+</svg>
\ No newline at end of file

prive/squelettes/inclure/head.html

@@ -10,7 +10,7 @@ var url_menu_rubrique="[(#CONST{_DIR_RACINE}|sinon{./}|concat{#CONST{_SPIP_SCRIP
 [(#EVAL{$_COOKIE}|table_valeur{spip_accepte_ajax}|>={1}|non)
 function test_accepte_ajax(){jQuery.ajax({"url":"[(#URL_ECRIRE{test_ajax,js=1}|replace{'&','\x26'})]"});}
 ][(#CONST{_OUTILS_DEVELOPPEURS}|oui)var _OUTILS_DEVELOPPEURS=true;
-]var ajax_image_searching = '<img src="#CHEMIN_IMAGE{searching.gif}" alt="" />';
+]var ajax_image_searching = '<img src="#CHEMIN_IMAGE{loader.svg}" class="loader" alt="" />';
 var stat = [(#CONFIG{activer_statistiques}|=={non}|?{0,1})];
 var confirm_changer_statut = '<:confirm_changer_statut|html2unicode|addslashes|unicode_to_javascript:>';
 var error_on_ajaxform='<:erreur_technique_ajaxform|html2unicode|addslashes|unicode_to_javascript:>';

prive/themes/spip/clear.css

@@ -74,4 +74,6 @@ td {
 
 td { text-align: left; }
 
-.clicable {cursor:hand;cursor:pointer;}
\ No newline at end of file
+.clicable {cursor:hand;cursor:pointer;}
+
+img.loader, svg.loader { vertical-align: middle; width: 1.5em; height: 1.5em; margin: 0 0.25em;}