From 3cbef67a09f225fefede60534bac2f350b9df968 Mon Sep 17 00:00:00 2001
From: tcharlss <tcharlss@bravecassine.com>
Date: Thu, 15 Apr 2021 10:45:01 +0200
Subject: [PATCH] Coup de polish sur le picker ajax pour choisir des rubriques.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* Le picto svg est embed afin de pouvoir le styler plus facilement, on incite à cliquer dessus en le rendant un peu plus visible, comme une sorte de bouton.
* L'input qui montre la rubrique choisie est affiché comme un texte normal (uniquement s'il est en disabled, sinon ça reste affiché comme un input normal). On montre qu'une partie du texte est cachée avec un masque en dégradé.
* Ajout d'un placeholder à l'input de recherche pour comprendre sa fonction.
* Ajout de quelques classes en plus afin de styler plus facilement.
* Calages visuels, ajustement des couleurs, etc.
---
ecrire/inc/chercher_rubrique.php | 13 ++-
ecrire/inc/filtres_ecrire.php | 2 +-
ecrire/inc/informer.php | 12 ++-
ecrire/inc/plonger.php | 2 +-
ecrire/inc/selectionner.php | 4 +-
ecrire/inc/utils.php | 2 +-
prive/themes/spip/forms.css.html | 11 +-
prive/themes/spip/picker.css.html | 174 ++++++++++++++++++++++++++----
8 files changed, 181 insertions(+), 39 deletions(-)
diff --git a/ecrire/inc/chercher_rubrique.php b/ecrire/inc/chercher_rubrique.php
index e5cb9ceaad..2f67edc671 100644
--- a/ecrire/inc/chercher_rubrique.php
+++ b/ecrire/inc/chercher_rubrique.php
@@ -331,20 +331,23 @@ function selecteur_rubrique_ajax($id_rubrique, $type, $restreint, $idem = 0, $do
**/
function construire_selecteur($url, $js, $idom, $name, $init = '', $id = 0) {
$icone = (strpos($idom, 'auteur') !== false) ? 'auteur-24.png' : 'rechercher-20.png';
+ // si icone de recherche on embed le svg
+ $balise = ($icone === 'rechercher-20.png' ? chercher_filtre('balise_svg') : chercher_filtre('balise_img'));
+ $img_icone = $balise(chemin_image($icone, _T('titre_image_selecteur')));
return
- "<div class='rubrique_actuelle'><a href='#' onclick=\""
+ "<div class='rubrique_actuelle'><a href='#' class='rubrique-search' style='display:inline-flex;vertical-align:middle;' onclick=\""
. $js
. "return charger_node_url_si_vide('"
. $url
- . "', 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='"
+ . "', this.parentNode.nextSibling, this.nextSibling,'',event)\" title='" . attribut_html(_T('titre_image_selecteur')) . "'>"
+ . $img_icone
+ . "</a><img src='"
. chemin_image('loader.svg')
. "' class='loader' id='img_"
. $idom
. "'\nstyle='visibility: hidden;' alt='*' />"
- . "<input id='titreparent' name='titreparent'"
+ . "<input id='titreparent' name='titreparent' class='text'"
. $init
. " />"
. "<input type='hidden' id='$name' name='$name' value='"
diff --git a/ecrire/inc/filtres_ecrire.php b/ecrire/inc/filtres_ecrire.php
index b7a3f3248f..02bcbb8808 100644
--- a/ecrire/inc/filtres_ecrire.php
+++ b/ecrire/inc/filtres_ecrire.php
@@ -136,7 +136,7 @@ function chercher_rubrique(
if ($actionable) {
if (strpos($form, '<select') !== false) {
$form .= "<div style='text-align: " . $GLOBALS['spip_lang_right'] . ";'>"
- . '<input class="fondo" type="submit" value="' . _T('bouton_choisir') . '"/>'
+ . '<input class="fondo submit btn" type="submit" value="' . _T('bouton_choisir') . '"/>'
. "</div>";
}
$form = "<input type='hidden' name='editer_$objet' value='oui' />\n" . $form;
diff --git a/ecrire/inc/informer.php b/ecrire/inc/informer.php
index 1dbf99f988..a4d901141e 100644
--- a/ecrire/inc/informer.php
+++ b/ecrire/inc/informer.php
@@ -39,7 +39,7 @@ function inc_informer_dist($id, $col, $exclus, $rac, $type, $do = 'aff') {
include_spip('inc/filtres_images_mini');
$res = image_reduire("<img src='$fid' alt='' />", 100, 48);
if ($res) {
- $res = "<div style='float: " . $GLOBALS['spip_lang_right'] . "; margin-" . $GLOBALS['spip_lang_right'] . ": -5px; margin-top: -5px;'>$res</div>";
+ $res = "<div class='informer__media' style='float: " . $GLOBALS['spip_lang_right'] . "; margin-" . $GLOBALS['spip_lang_right'] . ": -5px; margin-top: -5px;'>$res</div>";
}
}
}
@@ -64,11 +64,13 @@ function inc_informer_dist($id, $col, $exclus, $rac, $type, $do = 'aff') {
. "\" />"
. "</div>"
. "<div class='informer' style='padding: 5px; border-top: 0px;'>"
+ . '<div class="informer__item">'
. (!$res ? '' : $res)
- . "<p><b>" . safehtml($titre) . "</b></p>"
- . (!$descriptif ? '' : "<div>" . safehtml($descriptif) . "</div>")
- . "<div style='text-align: " . $GLOBALS['spip_lang_right'] . ";'>"
- . "<input type='submit' class='fondo' value='"
+ . "<p class='informer__titre'><b>" . safehtml($titre) . "</b></p>"
+ . (!$descriptif ? '' : "<div class='informer__descriptif'>" . safehtml($descriptif) . "</div>")
+ . '</div>'
+ . "<div class='informer__action' style='clear:both; text-align: " . $GLOBALS['spip_lang_right'] . ";'>"
+ . "<input type='submit' class='fondo btn submit' value='"
. _T('bouton_choisir')
. "'\nonclick=\"$js_func('$titre',$id,'selection_rubrique','id_parent'); return false;\" />"
. "</div>"
diff --git a/ecrire/inc/plonger.php b/ecrire/inc/plonger.php
index e627fc4128..b2542357c8 100644
--- a/ecrire/inc/plonger.php
+++ b/ecrire/inc/plonger.php
@@ -61,7 +61,7 @@ function inc_plonger_dist($id_rubrique, $idom = "", $list = array(), $col = 1, $
foreach ($ordre as $id => $titrebrut) {
$titre = supprimer_numero($titrebrut);
- $classe1 = $id_rubrique ? 'petite-rubrique' : "petit-secteur";
+ $classe1 = 'petit-item ' . ($id_rubrique ? 'petite-rubrique' : "petit-secteur");
if (isset($rub[$id]["enfants"])) {
$classe2 = " class='rub-ouverte'";
$url = "\nhref='$rec&id=$id'";
diff --git a/ecrire/inc/selectionner.php b/ecrire/inc/selectionner.php
index 506bc53b99..ec0a840449 100644
--- a/ecrire/inc/selectionner.php
+++ b/ecrire/inc/selectionner.php
@@ -66,7 +66,7 @@ function inc_selectionner_dist($sel, $idom = "", $exclus = 0, $aff_racine = fals
$js_func = $do . '_selection_titre';
$ondbClick = "$js_func('$ondbClick',0,'selection_rubrique','id_parent');";
- $aff_racine = "<div class='petite-racine item'>"
+ $aff_racine = "<div class='petit-item petite-racine item'>"
. "<a href='#'"
. "onclick=\""
. $onClick
@@ -119,7 +119,7 @@ function construire_selectionner_hierarchie($idom, $liste, $racine, $url, $name,
. 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'"
+ . "<input style='width: 10em;float:" . $GLOBALS['spip_lang_right'] . ";' type='search' class='text search' id='$idom1' placeholder='" . _T('info_rechercher') . "'"
// eliminer Return car il provoque la soumission (balise unique)
// et eliminer Tab pour la navigation au clavier
// ce serait encore mieux de ne le faire que s'il y a encore plusieurs
diff --git a/ecrire/inc/utils.php b/ecrire/inc/utils.php
index db890abf21..1ad6cda00c 100644
--- a/ecrire/inc/utils.php
+++ b/ecrire/inc/utils.php
@@ -2233,7 +2233,7 @@ function generer_form_ecrire($script, $corps, $atts = '', $submit = '') {
. "<input type='hidden' name='exec' value='$script1' />"
. $corps
. (!$submit ? '' :
- ("<div style='text-align: " . $GLOBALS['spip_lang_right'] . "'><input class='fondo' type='submit' value=\"" . entites_html($submit) . "\" /></div>"))
+ ("<div style='text-align: " . $GLOBALS['spip_lang_right'] . "'><input class='fondo submit btn' type='submit' value=\"" . entites_html($submit) . "\" /></div>"))
. "</div></form>\n";
}
diff --git a/prive/themes/spip/forms.css.html b/prive/themes/spip/forms.css.html
index 191b0bfb17..ad89e863dc 100644
--- a/prive/themes/spip/forms.css.html
+++ b/prive/themes/spip/forms.css.html
@@ -50,6 +50,7 @@
--spip-form-color-text-lightest: var(--spip-color-gray); /* placeholder */
/* divers */
--spip-form-border-radius: var(--spip-css-border-radius); /* bordure inputs et cie */
+ --spip-form-input-height: calc((var(--spip-form-gutter-input-y) * 2) + var(--spip-css-line-height));
}
@@ -283,14 +284,16 @@
.formulaire_editer_auteur .editer_statut:not(.erreur) {
background-color: var(--spip-color-theme-lightest);
}
-.formulaire_spip .editer_parent .rubrique_actuelle {
- clear: #LEFT;
-}
.formulaire_spip .editer.editer_parent label,
.formulaire_spip .editer.editer_groupe_mot label {
color: black;
font-weight: bold;
}
+.formulaire_spip .editer_parent .rubrique_actuelle {
+ clear: both;
+ display: flex;
+ align-items: center;
+}
/**
@@ -325,7 +328,7 @@
.formulaire_spip textarea:focus,
.formulaire_spip select:focus {
border-color: var(--spip-color-theme);
- box-shadow: 0 0 0 0.3em var(--spip-form-color-focus);
+ box-shadow: 0 0 0 0.2em var(--spip-form-color-focus);
outline: 0;
}
.formulaire_spip input.text,
diff --git a/prive/themes/spip/picker.css.html b/prive/themes/spip/picker.css.html
index 445c7790d5..6324e418d0 100644
--- a/prive/themes/spip/picker.css.html
+++ b/prive/themes/spip/picker.css.html
@@ -27,27 +27,161 @@ option.niveau_4 { background:#eee; color: #606060; }
option.niveau_5 { background:#eee; color: #808080; }
option.niveau_6 { background:#eee; color: #a0a0a0; }
+/* Plongeur
+ * Voir aussi à la fin des règles du selecteur ajax */
+div.petite-racine,
+a.petite-racine {
+ background: [(#ENV{ltr}|choixsiegal{left,1,99})%] no-repeat;
+ background-image: url(#CHEMIN_IMAGE{racine-xx.svg});
+ background-size: 12px;
+ padding-#LEFT: 15px;
+ padding-top: 0.2em;
+ padding-bottom: 0.2em;
+ background-color: #fff;
+ border: 1px solid var(--spip-form-border-color);
+ border-bottom: 0;
+ width: 10em;
+ border-top-left-radius: var(--spip-form-border-radius);
+ border-top-right-radius: var(--spip-form-border-radius);
+}
+div.petite-rubrique,
+a.petite-rubrique {
+ background: [(#ENV{ltr}|choixsiegal{left,1,99})%] no-repeat;
+ background-image: url(#CHEMIN_IMAGE{rubrique-xx.svg});
+ background-size:12px;
+ padding-#LEFT: 15px;
+ cursor: pointer;
+}
+div.petit-secteur,
+a.petit-secteur {
+ background: [(#ENV{ltr}|choixsiegal{left,1,99})%] no-repeat;
+ background-image: url(#CHEMIN_IMAGE{secteur-xx.svg});
+ background-size: 12px;
+ padding-#GET{left}: 15px;
+}
+div.rub-ouverte,
+a.rub-ouverte {
+ padding-#RIGHT: 10px;
+ background: url([(#CHEMIN_IMAGE{triangle-droite[(#GET{rtl})].gif})]) var(spip-css-right) center no-repeat;
+}
+
+/* Selecteur ajax */
+.rubrique_actuelle {}
+#titreparent[disabled=disabled] {
+ border: none;
+ background: none;
+ color: inherit;
+ font-weight: 500;
+ padding: 0;
+ mask-image: linear-gradient(90deg, hsla(0, 0%, 0%, 100) 90%, hsla(0, 0%, 0%, 0) 100%);
+}
+.rubrique-search {
+ color: var(--spip-color-theme);
+ border: 1px solid var(--spip-color-theme);
+ border-radius: 99em;
+ padding: 0.33em;
+}
+.rubrique-search:hover,
+.rubrique-search:focus {
+ color: var(--spip-color-theme-darker);
+ border: 1px solid var(--spip-color-theme-darker);
+}
+.rubrique-search svg {
+ width: 0.85em;
+ height: auto;
+}
+.recherche_rapide_parent {
+ margin-top: -2.2em;
+ float: var(--spip-css-right);
+ display: flex;
+ align-items: center;
+}
+.recherche_rapide_parent input.search {
+ border-radius: 99em;
+ padding: 0.33em 1em;
+}
+.recherche_rapide_parent .loader {
+ order: 2;
+}
+/**/
+#choix_parent{
+ margin-top: 0.5em;
+}
+#choix_parent_principal {
+ position: relative;
+ height: 10em;
+ overflow: auto;
+ background: var(--spip-color-theme-white);
+ border: 1px solid var(--spip-form-border-color);
+ border-top-left-radius: var(--spip-form-border-radius);
+ border-top-right-radius: var(--spip-form-border-radius);
+}
+#choix_parent_selection {
+ margin-top: -1px;
+}
+.informer {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0.5em !important;
+ border-bottom-left-radius: var(--spip-form-border-radius);
+ border-bottom-right-radius: var(--spip-form-border-radius);
+ background-color: var(--spip-color-theme-light);
+}
+.informer__titre,
+.informer__descriptif,
+.informer__media {
+ margin-bottom: 0.5em;
+}
+.informer__media {
+ margin-#RIGHT: 0 !important;
+ margin-top: 0 !important;
+ margin-#LEFT: 1em;
+}
+.informer__action {
+ margin-#LEFT: 1em;
+}
+.informer .btn {
+ margin: 0;
+}
+.informer-auteur {
+ /* background: #fff; */
+ /* padding: 5px; */
+ /* border-top: 0; */
+}
+/**/
+#choix_parent .item {
+ color: var(--spip-color-gray-dark);
+ background-color: var(--spip-color-white);
+ display: block;
+}
+#choix_parent .item.on {
+ color: var(--spip-color-black);
+ background-color: var(--spip-color-theme-lighter);
+}
+#choix_parent .item.on {
+ color: var(--spip-color-black);
+}
+#choix_parent .item:hover {
+ color: var(--spip-color-black);
+ cursor: pointer;
+}
+/* voir aussi règles du plongeur */
+#choix_parent .petit-item > div {
+ display: flex; /* rendre tout le bloc cliquable */
+}
+#choix_parent .petit-item a {
+ padding-top: 0.2em;
+ padding-bottom: 0.2em;
+ padding-#RIGHT: 0.2em;
+ flex: 1 1 auto;
+ color: inherit;
+}
+#choix_parent .petit-item:hover,
+#choix_parent .petit-item:focus {
+ background-color: var(--spip-color-theme-lightest);
+}
-/* plongeur */
-div.petite-racine { margin-bottom: -5px; }
-div.petite-racine, a.petite-racine { background: [(#ENV{ltr}|choixsiegal{left,1,99})%] no-repeat; background-image: url(#CHEMIN_IMAGE{racine-xx.svg}); background-size:12px; padding-#GET{left}: 15px; background-color: #fff; border: 1px solid #GET{foncee}; border-bottom: 0; width: 134px; }
-div.petite-rubrique, a.petite-rubrique { background: [(#ENV{ltr}|choixsiegal{left,1,99})%] no-repeat; background-image: url(#CHEMIN_IMAGE{rubrique-xx.svg}); background-size:12px; padding-#GET{left}: 15px; }
-div.petit-secteur, a.petit-secteur { background: [(#ENV{ltr}|choixsiegal{left,1,99})%] no-repeat; background-image: url(#CHEMIN_IMAGE{secteur-xx.svg}); background-size: 12px; padding-#GET{left}: 15px; }
-div.rub-ouverte, a.rub-ouverte { padding-#GET{right}: 10px; background: url([(#CHEMIN_IMAGE{triangle-droite[(#GET{rtl})].gif})]) [(#GET{right})] center no-repeat; }
-/* selecteur ajax */
-#choix_parent_principal { background: #fff; border: 1px solid #GET{foncee}; position: relative; height: 170px; overflow: auto; margin-top:5px;}
-.recherche_rapide_parent {margin-top: -25px;float:right; }
-.rubrique_actuelle {
- /* height: 25px; */
-}
-#selection_rubrique .informer { background: #fff; }
-.informer-auteur { background: #fff; padding: 5px; border-top: 0; }
-
-#choix_parent .item { color: #666; background-color: #fff; }
-#choix_parent_principal .item { padding: 2px; display: block; }
-#choix_parent .item.on { color: #000; background-color: #ccc; }
-#choix_parent .item.on a {color:#000;}
-#choix_parent .item:hover a { color: #000; cursor: pointer; }
/* ----- */
--
GitLab