Browse Source

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

decaler_niveau_titre
Cerdic 2 months ago
parent
commit
3bc27788bf
  1. 2
      ecrire/base/upgrade.php
  2. 4
      ecrire/inc/chercher_rubrique.php
  3. 2
      ecrire/inc/headers.php
  4. 4
      ecrire/inc/plonger.php
  5. 4
      ecrire/inc/selectionner.php
  6. 16
      prive/images/loader.svg
  7. 2
      prive/squelettes/inclure/head.html
  8. 4
      prive/themes/spip/clear.css

2
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);

4
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'"

2
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>';
}

4
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'] . ": "

4
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)

16
prive/images/loader.svg

@ -0,0 +1,16 @@
<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>

2
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{'&amp;','\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:>';

4
prive/themes/spip/clear.css

@ -74,4 +74,6 @@ td {
td { text-align: left; }
.clicable {cursor:hand;cursor:pointer;}
.clicable {cursor:hand;cursor:pointer;}
img.loader, svg.loader { vertical-align: middle; width: 1.5em; height: 1.5em; margin: 0 0.25em;}
Loading…
Cancel
Save