mardi 5 mars 2013

Modifier la barre du haut

S'il vous prend l'envie de modifier la barre du haut de Parsimony voilà quelques informations utiles:

Avant de modifier l'interface de Parsimony, gardez bien à l'esprit quand cas de mise à jour ces modifications seront perdues. Elles sont donc déconseillés.

La vue de la barre du haut se trouve ici:
/modules/admin/block/menu/view.php

Elle est divisé en 4 parties:
<ul class="menu">
--> L’icône de Parsimony / [Domaines] (pour les multi-sites) / Comptes
<ul class="modesSwitcher">
--> Preview / Edit / Creation
<ul class="menu">
--> Desktop/Max/Portrait/Landscape
<div class="rightpart">
Version/Langue/Login/Logout

Rajouter des icônes

Comment afficher un icône (voir le lien)

Comment mettre un tooltip

Pour rajouter une bulle avec la description de l’icône il faut mettre la classe : tooltip
<a class="tooltip"></a>

Puis préciser le texte dans le tooltip

Soit directement:






<a class="tooltip" data-tooltip="<?php echo t('Voici la description',false); ?>"</a>

Soit avec une description dans une div, par exemple avec la div #description
<span class="tooltip" data-tooltip="#description"></span>
<div id="description">
<div><h1>Ceci est une description</h1>
En HTML</div>
</div>

Il ne faut pas oublier de rajouter dans modules/admin/style.css
#description{display:none;}
Afin que le texte de la div description ne soit affiché que lorsque la souris passe au dessus de l'icône.

Afficher un menu

Afin de mieux comprendre ce que nous allons faire, voici un schéma explicatif

Nous allons créer un lien hypertexte (notre icône) qui va déclencher une fonction dans le contrôleur qui va ouvrir une boite de dialogue.

Il va donc nous falloir 
--modifier la vue de la barre
--rajouter une fonction dans le contrôleur
--créer la vue de la boite de dialogue

Pour créer une boite de dialogue, lorsque l'on clique sur l'icône
il faut rajouter la classe action et nommer l'action.

<a href="#" class="action" rel="getViewNomdumenu">

Puis dans le contrôleur/modules/admin/module.php à la ligne 828 (par exemple)
Rajouter cette fonction
/**
* Get the the view of Nom du Menu
* @return string
*/
    protected function getViewNomdumenuAction() {
return $this->getView('nomdumenu','desktop');
    }
Puis créer un fichier pour la vue de la boite de dialogue
Dans /modules/admin/views/desktop/nomdumenu.php
Tout ce qui sera présent dans nomdumenu.php sera affiché dans la boite de dialogue.

Les icônes de parsimony

La liste des icônes utilisés dans parsimony se trouve ici:
/modules/admin/style.css à la ligne 931

Elles sont constituées des icônes présents dans ces trois fichiers
admin/img/defaultsprite.png
admin/img/icons_white.png
admin/img/icons.png

icons_white

Voici la liste des icônes ui-icons white (icônes blanc sur fond noir)
http://jquery-ui.googlecode.com/svn/tags/1.6rc5/tests/static/icons.html
(Cliquer sur toggle text pour avoir le nom à coté des icônes)

Pour utiliser un icône icons-white il vous suffit de mettre ui-icon-white et le nom de l'icone dans la classe d'un SPAN
Par exemple ceci:
<span class="ui-icon-white ui-icon-arrow-4"</span>
Donnera cela:



icons

(En cours de rédaction)

defaultsprite

(En cours de rédaction)