Projet

Général

Profil

Actions

Evolution #86

fermé

Mise en page, look & feel, etc...

Ajouté par Grégory MARIGOT - TEICEE il y a environ 13 ans. Mis à jour il y a presque 13 ans.

Statut:
Fermé
Priorité:
Normal
Version cible:
Début:
04/02/2011
Echéance:
% réalisé:

100%

Temps estimé:
Version ProxyEPN:
1.0

Description

Une nouvelle version constitue une bonne occasion de renouveller l'habillage graphique de l'application. Le changement de nom du projet pourra être accompagner d'une nouvelle charte graphique.

De plus, la présentation des informations est aussi à revoir, en particulier la mise en page des fiches qui reste très minimaliste et peu séduisante.


Demandes liées 3 (0 ouverte3 fermées)

Lié à Evolution #77: Nouvelle version d'EPNadminFerméGrégory MARIGOT - TEICEE09/12/2010

Actions
Lié à Evolution #80: Révision globale du codeFerméGrégory MARIGOT - TEICEE17/12/2010

Actions
Lié à Evolution #87: Personnalisation de l'interface (générale + GEPN)FerméGrégory MARIGOT - TEICEE04/02/2011

Actions

Mis à jour par Grégory MARIGOT - TEICEE il y a environ 13 ans

  • Statut changé de Nouveau à In Progress
  • % réalisé changé de 0 à 50

Modifications publiées sur le svn (r337) :

Nouveau nom, nouveau look

L'application a été renommée en ProxyEPN, le code initial d'EPNadmin (/lib/epnadmin/) est définitivement supprimé, ainsi qu'une purge de tous les éléments graphiques et des CSS.

Une nouvelle charte graphique a été définie, dans les tons bleus, accompagnées d'un logo ProxyEPN (bye bye galago) et d'une feuille de styles CSS totalement nouvelle.

Une révision complète de la couche "view" a été effectuée :
  • Réorganisation du layout principal et de ses includes partials (head meta, css, rss + body top, end) y compris ceux servant à l'intégration de javascripts (fichiers js et css avec jQuery et jQuery-UI)
  • Habillage CSS des listes utilisant toutes jquery.tablesorter, ainsi que la box présentant les filtres et l'interface de pagination.
  • Validation des formatters pour l'affichage des formulaires et amélioration de la disposition en deux colonnes (libellé / valeur), y compris pour la simple visualisation des fiches.
  • Nouvelles versions des pages d'erreur personnalisées pour correspondre à la nouvelle charte graphique (pas spéciale "error 404" et page d'erreur générale).
Un nouveau Helper (ProxyepnHelper) est mis en place, chargé par défaut, pour apporter quelques fonctions utiles à l'affichage des templates telles que :
  • format_phone : présentation d'un numéro de téléphone (format international)
  • picto_web : pour afficher une url sous la forme d'un icone avec lien hypertexte
  • picto_mel : pour afficher une adresse email sous la forme d'un icone avec lien mailto
  • picto_boolean : pour représenter un booléen (0/1, y/n etc...) graphiquement
  • image_thumb : pour présenter une image dans un cadre de vignette avec lien

Mis à jour par Grégory MARIGOT - TEICEE il y a environ 13 ans

  • % réalisé changé de 50 à 90

Modifications publiées sur le svn (r337) :

Génération des menus

La gestion des menus a également été revue, essentiellement pour la manière de les constituer. Une classe myMenu est créé dans ce but, autant our le menu principal (horizontal dropdown 2 niveaux) que pour le menu contextuel (latéral 1 niveau) :
  • L'objet dispose d'une structure interne stockant l'ensemble des items d'un menu, sous la forme d'un hachage de hachage
  • Il n'y a pas de limite sur la profondeur des menus, chaque item contient une référence à son item parent
  • Deux méthodes permettent d'ajouter des items au menu, l'une dédiée aux éléments de type "feuille" (terminaux, inutile de leur donner une clé particulière : id auto), l'autre aux noeuds parents (clé connue, parent facultatif : root par défaut)
  • Des méthodes s'occupent enfin du rendu HTML de la structure, en spécifiant si besoin le noeud de départ (root par défaut)
Actuellement l'objet dispose de 2 méthodes de rendu :
  • renderDyn() servant à la génération de listes de listes (<ul>) pour le menu principal (dropdown). Si un noeud parent n'a aucun enfant, alors il ne sera pas affiché (à moins d'être lui-même un lien).
  • renderBox() servant à la génération de listes les unes à la suite des autres. Elles sont séparées graphiquement par une balise <hr>, le controle de liste vide évitant d'avoir 2 séparateurs collés. Une organisation de <div> est ajouté autour pour permettre un habillage CSS avec contours graphiques.

Cette classe est particulièrement utile pour la création du menu contextuel : celui-ci est propre à chaque page et contient généralement des conditions sur l'affichage ou non de chaque lien (selon les permissions de l'utilisateurs sur les actions ciblées). Il devient plus aisé de présenter ses liens en effectuant des regroupements, sans être embeter à tester si les séparateurs sont nécessaires (dans le cas de groupes vides).

Note : L'objet menu dispose aussi d'une méthode générique pour ajouter un lien correspondant à un bouton "submit". C'est en réalité un "faux" submit, un widget du type "button" simplement, puisqu'il se situera en dehors de tout formulaire. Mais il lui suffit de connaitre l'id du formulaire cible pour pouvoir y effectuer un appel submit() sur son evenement onclick().

Edit : Le système décrit dans la note précédente s'est étendu. L'objet menu dispose à présent d'une méthode générique addButton() permettant d'ajouter un bouton dans le menu relié à une action quelconque vers un formulaire. On indique toujours l'id du formulaire cible, ainsi que le nom de la méthode javascript à appeler. Le libellé est facultatif (utilisation du nom de la méthode par défaut). Cette méthode est utilisée par deux méthodes spécifiques : addSubmit() et addValidate().

Edit (22/02/2011)

Modifications publiées sur le svn (r364) :

La classe myMenu dispose désormais, en plus de sa liste arborescente d'items, d'une liste simple de champs extras. Leur intérêt est de pouvoir ajouter du contenu à afficher avec le menu, mais hors de celui-ci.
Un exemple d'utilisation est mis en place (r365) avec la présence de liens Atom (feed des sessions) juste en dessous du menu contextuel.

Mis à jour par Grégory MARIGOT - TEICEE il y a environ 13 ans

Modifications publiées sur le svn (r344) :

jQuery et jQuery-UI

Création d'un thème jQuery-UI pour obtenir un habillage des widgets jQuery cohérent avec la nouvelle charte graphique de ProxyEPN. L'outil ThemeRoller de jQuery-UI a été utilisé pour celà :

http://jqueryui.com/themeroller/#ffDefault=Arial&fwDefault=normal&fsDefault=1.0em&cornerRadius=0.5em&bgColorHeader=336699&bgTextureHeader=03_highlight_soft.png&bgImgOpacityHeader=50&borderColorHeader=001122&fcHeader=ffffff&iconColorHeader=ffffff&bgColorContent=ffffff&bgTextureContent=01_flat.png&bgImgOpacityContent=75&borderColorContent=999999&fcContent=333333&iconColorContent=333333&bgColorDefault=ccccdd&bgTextureDefault=04_highlight_hard.png&bgImgOpacityDefault=50&borderColorDefault=003366&fcDefault=003366&iconColorDefault=003366&bgColorHover=f0eee0&bgTextureHover=04_highlight_hard.png&bgImgOpacityHover=50&borderColorHover=336699&fcHover=336699&iconColorHover=336699&bgColorActive=eeeeee&bgTextureActive=06_inset_hard.png&bgImgOpacityActive=100&borderColorActive=999999&fcActive=336699&iconColorActive=336699&bgColorHighlight=ffee99&bgTextureHighlight=03_highlight_soft.png&bgImgOpacityHighlight=50&borderColorHighlight=003366&fcHighlight=001122&iconColorHighlight=336699&bgColorError=eeeecc&bgTextureError=04_highlight_hard.png&bgImgOpacityError=75&borderColorError=990000&fcError=990000&iconColorError=cc0000&bgColorOverlay=003366&bgTextureOverlay=01_flat.png&bgImgOpacityOverlay=50&opacityOverlay=50&bgColorShadow=001122&bgTextureShadow=04_highlight_hard.png&bgImgOpacityShadow=50&opacityShadow=25&thicknessShadow=0&offsetTopShadow=1em&offsetLeftShadow=1em&cornerRadiusShadow=1em

Le widget JQueryDate a été réintégré dans les formulaires proposant la saisie de date.

Mis à jour par Grégory MARIGOT - TEICEE il y a environ 13 ans

Validation des formulaires

Modifications publiées sur le svn (r348, r349) :

Un choix avait été fait d'ajouter un bouton submit dans le menu contextuel sur les pages de formulaire, afin de ne pas être obligé d'atteindre le bas de la page pour valider, particulièrement pour des formulaires longs dont les derniers éléments sont facultatifs (typiquement l'enregistrement des usagers).

Cependant les boutons en bas de page restent pertinents, à l'inverse, pour ne pas être obligé de remonter en haut de page pour trouver celui du menu contextuel...
S'il a été prévu que le menu contextuel pouvait être en position "fixed", donc toujours visible à l'écran, celà reste difficile de se reposer sur cet effet de CSS : certains navigateurs peuvent ne pas l'interprété, inutilisable si le menu est trop long par rapport à la hauteur de l'écran, possibilité de CSS alternatives ne faisant pas ce choix de présentation...

Il est donc décidé d'afficher systématiquement les boutons en bas de formulaire, de manière classique, en plus du bouton dans le menu contextuel. Il est ensuite toujours possible à une CSS de masquer l'un des deux si la redondance est jugée génante, ou de les laisser.

Un include_partial (proxyepn_buttons_form) est utilisé pour faciliter l'insertion des boutons en bas de formulaires, il prend en paramètres une liste optionelle de widgets (par défaut "reset,submit") :
  • reset bouton reset classique (réinitialise le formulaire)
  • submit bouton submit classique (valide le formulaire)
  • submit2 bouton standart avec onclick=this.form.submit() (empêche la validation par 'entrée')
  • validate bouton standart avec onclick=validate(this.form) (foncton js à définir)

Edition du 28/02 :

Modifications publiées sur le svn (r355) :

Ajout d'un nouveau widget validate2, qui dans le même esprit que submit/submit2, exécute non pas une fonction globale 'validate()' mais une méthode du formulaire.

Modifications publiées sur le svn (r376) :

La liste des widgets peut spécifier un libellé particulier pour le bouton, en utilisant un tube en séparateur (semblable aux liens wiki). Exemple : "reset,validate2|Etape précédente,submit|Etape suivante"

Modifications publiées sur le svn (r377) :

Si le nom du widget n'est pas connu, un bouton standart sera créé avec une action onclick exécutant ce même nom comme une méthode du formulaire. Exemple : "toto,plop" exécuteront respectivement les méthodes this.form.toto() et this.form.plop().

Mis à jour par Grégory MARIGOT - TEICEE il y a presque 13 ans

  • % réalisé changé de 90 à 100

Modifications publiées sur le svn (r418 et r421) :

Menus et icones

La classe myMenu prend désormais en compte la présence d'icones accompagnant les liens.
Le nom de l'icone à utiliser est ajouté en paramètre optionnel aux méthodes setItem() et addItem().

Un simple nom court est utilisé pour désigner l'icone, il ne s'agit pas du nom complet du fichier. Une nouvelle fonction icon() fournie par le helper Proxyepn s'occupe d'afficher le tag image correspondant selon le modèle : /images/picto/icon_ nom donné en paramètre .png

L'image est contenue dans une balise span avec la classe 'icon'. Ceci laisse toute liberté à la feuille de style sur la manière de les présenter dans les menus (ou même de les masquer).

Tous les liens de tous les menus contextuels sont désormais paramétrés avec un nom d'icone.

Un jeu complet d'icones au format PNG 16x16 est intégré, les images utilisées proviennent essentiellement des thèmes d'icones libres Tango, Gnome et Gion.

Mis à jour par Grégory MARIGOT - TEICEE il y a presque 13 ans

  • Statut changé de In Progress à Résolu

Mises à jour du Helper Proxyepn

Au fil des révisions, ce helper propre à l'application s'est enrichi de plusieurs fonctions et paramètres... Il comprend à présent :
  • gepn_link($structure_group)
    Affichage d'un lien "intelligent" vers un GEPN : selon les permissions de l'utilisateur, le lien pointera sur la fiche du GEPN, sinon sur sa page d'accueil
  • format_phone($num, $format='', $html=false, $glue=' / ')
    Permet de formatter un ou plusieurs numéros de téléphone ($num pouvant être une liste). Si plusieurs numéros sont présents alors le paramètre $glue servira de séparateur.
    Par défaut le format français est utilisé (10 chiffres par groupes de 2 séparés par un espace), mais un autre choix de format peut être spécifié. Actuellement l'autre choix disponible est le format international ($format='inter'), selon le modèle : +33 1 22 33 44 (ex d'un numéro français).
    Si le paramètre $html est vrai, le retour se fera dans une balise span utilisant la classe nowrap afin d'empêcher une césure des numéros.
  • format_seconds($seconds, $format='%d:%02d')
    Transformer un nombre de secondes en heures:minutes. Le paramètre $format permet de modifier la présentation des valeurs retournées.
  • percent($value, $total, $prec=0)
    Effectue la règle de trois pour calculer le pourcentage de $value sur $total. Si $total est nul alors la fonction retourne simplement un tiret (pas de division par zéro).
    Le retour est une chaine formatée intégrant le sigle %, la précision décimale est spécifiée par le paramètre $prec (à noter que la localisation s'applique pour le choix du séparateur décimal).
  • icon($name, $with_text=false, $options=array())
    Retourne le tag image correspondant au nom d'icone donné (modèle '/images/picto/icon_$name.png'), inclus dans une balise span avec la classe 'icon'. Un tableau facultatif $options permet de fournir des attributs pour le tag img ('alt' par exemple).
    Un texte peut être fourni pour accompagné l'image, il sera ajouté au sein de la balise span après l'image. Le span dispose aussi de la classe 'nowrap' pour empêcher une césure. Si $with_text vaut simplement true alors c'est le $name qui sera utilisé comme texte (avec application de la traduction dans tous les cas).
  • picto_web($url, $with_text=false)
    Retourne une icone spécifique avec un lien vers l'url indiquée (ouverture ciblée vers une nouvelle page).
    Un texte peut accompagner l'icone, si $with_text vaut simplement true alors l'url sera utilisée.
  • picto_mel($adr, $with_text=false)
    Retourne une icone spécifique avec un lien 'mailto:' vers l'adresse email indiquée.
    Un texte peut accompagner l'icone, si $with_text vaut simplement true alors l'email sera utilisée.
  • picto_csv($idx, $with_text=false)
    Retourne une icone spécifique avec un lien vers l'action courante en y ajoutant un paramètre 'csv=$idx'.
    Ce type de liens est utilisé dans le module stats pour demander l'export CSV des tableaux présentés sur la page consultée.
    Un texte peut accompagner l'icone, si $with_text vaut simplement true alors le terme 'Export CSV' sera utilisé (application de la traduction).
  • picto_feed($action='session', $filter='', $label='')
    Retourne une icone spécifique avec un lien vers le module 'feed' pour obtenir le flux de syndication correspondant à l'action demandée. Le paramètre $filter permet de spécifier les filtres souhaités sur le flux.
    'action courante en y ajoutant un paramètre 'csv=$idx'.
    Un texte peut accompagner l'icone, si $label vaut simplement true alors le terme 'Subscribe to the feed...' sera utilisé (application de la traduction).
  • picto_boolean($value, $with_text=false)
    Retourne une représentation graphique d'une valeur booléenne.
    Est considéré 'yes' : true, 1 et tout mot commençant par les lettres 'y', 'o' ou 't'.
    Est considéré 'no' : false, null, '', 0 et tout mot commençant par les lettres 'n' ou 'f'.
    Si la valeur ne correspond à rien de vrai ou faux, la valeur est considérée 'unknown'.
    Un texte peut accompagner l'icone si $with_text vaut true, il sera constitué par le terme traduit de 'yes', 'no' ou 'unknown'.
  • image_thumb($path, $thumb=NULL, $title="", $show_title=true)
    Retourne une vignette avec lien vers l'image indiquée. Si $thumb n'est pas fournit alors l'image elle-même sera utilisée comme vignette. Le tout est contenu dans une div avec la classe 'thumb'.
    Un titre peut être fournit, utilisé en 'title' et 'alt' du lien et ajouté dans une balise <p> après l'image (avec la classe 'title'). La traduction s'applique sur le titre, après une conversion humanisante (underscore en espace et majuscule sur la 1ère lettre).
    Si le titre est vide ou si $show_title vaut false, alors la balise <p> ne sera pas ajoutée.
  • assets_path($filename="", $absolute=false)
    Retourne le chemin web pour accéder à un fichier du dossier assets.
  • assets_file($filename)
    Retourne le chemin FS absolu pour accéder à un fichier du dossier assets.
  • safeHashValue($hash, $keys=array(), $default='')
    Récupération d'une valeur dans un hachage en précisant sa ou ses clés (hachage de hachage avec une profondeur quelconque...). Si jamais une des clés n'est pas présente la fonction retourne la valeur $default.
    Utilisé dans les templates de tableaux statistiques à double et triple entrées.

Mis à jour par Grégory MARIGOT - TEICEE il y a presque 13 ans

  • Statut changé de Résolu à Fermé
Actions

Formats disponibles : Atom PDF