Makicatta : redesign de l’interface de l’espace privée

This contribution or plugin is actually being tested. Issues may occur, don’t hesitate to report those in following post’s comments.

Pourquoi ce plugin ?

L’interface privée de SPIP a peu évoluée au niveau visuel. Le but de ce plugin est d’apporter un rafraîchissement à cette interface en se basant sur AdminLTE tout en gardant un maximum de compatibilité avec les plugins. Le but est aussi d’apporter une interface responsive pour permettre aux utilisateurs d’éditer leur site SPIP sur mobile.

Le but de ce plugin n’est pas d’entrer dans une polémique (est-ce que c’est mieux ou pas que le SPIP actuel ? est-ce que c’est la bonne méthode de procéder que de faire cela dans son coin ? est-ce que le fonctionnement est optimal pour tout le monde ? etc.) : je partage juste une interface que mes utilisateurs préfèrent, mais c’est une question purement subjective, et ça ne substitue pas au travail de refonte de l’interface privée.

Statut

Le travail s’est focalisé pour le moment sur le portage vers AdminLTE de l’interface, mais un travail UX plus en profondeur pour bénéficier des nouvelles avancées est prévu dans un second temps.

Aperçu de l’interface privée

Installation et Configuration

Si vous n’avez pas déjà le dépôt externals dans votre SPIP, ajoutez le dépôt https://files.spip.net/externals/archives_externals.xml pour trouver le plugin automatiquement.

Les librairies dont le plugin a besoin sont assez lourdes donc il se peut que vous ayez besoin, en cas de timeout, de revenir sur l’interface privée, cliquer sur « Effacer les actions non exécutées » et relancer l’activation du plugin.

Si jamais tout est cassé, l’interface revient comme avant lorsqu’on désinstalle le plugin.

Plugins supplémentaires activés par Makicatta

  • BigUp : est intégré à la future SPIP 3.3, ça n’est qu’anticiper une évolution très pratique pour l’upload de documents

Plugins recommandés

N’hésitez pas à signaler dans le forum de cet article tel ou tel plugins qui vous semble indispensable pour les rédacteurs, et pourquoi.

Notes aux développeurs de plugins

  • Si vous voulez appliquer un style particulier à certains éléments en fonction de ce plugin, le body avec Makicatta contient la classe makicatta pour vous permettre de styler en CSS ou alors utiliser la balise #PLUGIN{makicatta} pour changer le code HTML ;
  • Pour convertir vos icônes au format FontAwesome, il suffit d’utiliser le pipeline makicatta_icones, par exemple pour affecter l’icône FontAwesome fas fa-file pour remplacer votre icône article-24.png :
    function prefixe_makicatta_icones($icones) {
        $icones['article'] = 'fas fa-file';
        return $icones;
    }

Comment remonter un problème ?

Le moyen le plus simple pour remonter un problème est d’utilisé la fonctionnalité idoine sur GitHub. Cela permet de centraliser et prioriser les retours plus facilement que dans les commentaires de cet article ;)

N’hésitez pas à préciser comment vous avez le problème et notamment quel plugin pose problème. La compatibilité n’ayant pas été testée avec toute la galaxie des plugins, cet élément est important.

S’il s’agit d’une icône manquante, vous pouvez aussi remonter le problème au créateur du plugin qui peut le résoudre (cf. Notes aux développeurs de plugins).

Comment contribuer ?

Vous pouvez par exemple commencer par regarder les problèmes remontés et proposer des correctifs.

De manière générale, le plugin est disponible sur GitHub pour vos pull-requests : cariagency/spip-makicatta. Les éventuels contributeurs réguliers pourront, sur demande, avoir un accès en écriture au repository pour ne plus avoir à faire de pull-request.

Le plugin comporte les squelettes de l’admin réécrits, et une feuille de style SCSS dans le dossier ’css’ pour styler les éléments qui en ont besoin. Le plugin utilise quelques pipelines pour modifier certains aspects, notamment affichage_final_prive qui surcharge des éléments ne pouvant être gérés dans les squelettes efficacement.

Si des plugins existants ont une vraie valeur ajoutée niveau UX, ils pourront même être rajoutés en dépendance de ce plugin pour favoriser une installation “one-click”.

Discussion

22 discussions

  • 3

    J’aime vraiment bien cette interface visuelle et la taille confortable des polices.
    Je n’ai pas trouvé l’équivalent du menu “tout le site” qui est pratique pour afficher le plan du site et déplacer des objets.
    Ni le bouton “déplacer” pour les objets.
    Mais je dois avoir un problème car je ne vois pas les icônes des menus.

    Merci en tout cas pour ce travail de rajeunissement.

    • Cf. https://contrib.spip.net/makicatta#comment501956-501951 pour les icones des menus.

      L’interface est bien dans l’ensemble et il y a déjà un grand nombre d’élément stylés (plus que ce que j’imaginais au premier abord). Donc bravo déjà.

      Maintenant, ce que j’observe quand même, c’est la lenteur d’affichage d’AdminLTE en général. Ça se ressent dans la navigation (contrairement au plugin Prive Fluide par exemple). C’est un peu dommage.

      Le menu en colonne est bien par contre je trouve de la sorte (je n’ai pas testé son accessibilité).

    • J’ai poussé une nouvelle version qui accepte que le plugin soit dans un sous-répertoire. Mais attention ça rajoute un pipeline donc le mieux avant de l’installer est d’aller sur la page “Plugins”, installer la mise à jour, et recharger la page “Plugins”. Et le menu “Tout le site” a été rajouté (même si ce n’est pas encore dans la charte).

    • Encore plus simplement : le plugin est désormais sur la zone et installable via SVP. Il faudra que tu retires le répertoire créé manuellement.

    Reply to this message

  • 7

    Je suis en 3.2.4, j’ai installé les 3 libs requises, mais les icônes des menus sont toutes cassées.

    • Est-ce que tu peux envoyer un screenshot stp ?

    • Est-ce que tu peux aussi tenter l’auto-installation des libs ? Normalement tu n’as pas à les installer toi même.

    • J’ai eu le même problème en testant.
      Cela vient du fait que j’ai installé le plugin dans un sous répertoire (plugins/github/makicatta) et le chemin défini pour la police est du coup incorrect. Soit tu déplaces le répertoire directement dans plugins/, soit tu modifies dans makicatta-prive.scss $fa-font-path en lui ajoutant un ../ . Enfin le temps que quelqu’un·e trouve une meilleure solution :)

    • Le plugin était sous /auto au départ, je l’ai déplacé à la racine de plugins, plus de souci d’icônes.

      Je vais continuer à tester.

    • J’ai poussé une nouvelle version qui accepte que le plugin soit dans un sous-répertoire. Mais attention ça rajoute un pipeline donc le mieux avant de l’installer est d’aller sur la page “Plugins”, installer la mise à jour, et recharger la page “Plugins”.

    • Est-ce que tu peux aussi tenter l’auto-installation des libs ? Normalement tu n’as pas à les installer toi même.

      Tout à l’heure, l’auto-installation ne s’était pas faite, probablement parce que j’avais installé le plugin dans /auto

      Tenté, avec la dernière version, sur un autre site, j’ai eu un timeout pendant l’installation des libs, suite à quoi je suis retourné sur l’interface privée, j’ai “effacé les actions non exécutées” (de mémoire) puis relancé l’activation de makicatta, et tout s’est finalisé.

      Très prometteur.

    • J’ai fait un test d’installation automatique via SVP et ça a marché. J’ai rajouté tes instructions en cas de timeout dans l’article. Merci !

    Reply to this message

Add a comment

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite / PostgreSQL
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparait.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Who are you?
[Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom