Icons im Pimcore Documents-Tree
Die Ansicht der Seitenstruktur in Pimcore ist eine zentrales Element, bei der Erstellung und Bearbeitung einer Webseite. Von dort aus gelangt man zum Element, welches man ändern möchte. Die Übersichtlichkeit ist durch die immer gleichen Icons leider nicht optimal. Mit einer Anpassung im Core von Pimcore können jedoch die Icons ausgetauscht werden.
Die Idee dazu ist mir bei der Umsetzung einer App gekommen. Wir Entwickeln ja für Kunden Apps, welche sich ihren Content über eine Schnittstelle holen. Die Verwaltung der Inhalte ist in einer Pimcore Instanz. Nun ist der Aufbau bei den meisten Apps gleich, es gibt mehrere Sprachen, darunter kommt eine Home-Seite und Seiten für die Navigation. Schlussendlich landet man bei den Produkten, welche mehrere Unterseiten haben können. Dies sieht dann etwa so aus:
So wirds gemacht
Hinweis: Die Zeilenangaben gelten für Version 2.1.0
Da die Anpassungen im Core von Pimcore gemacht werden müssen, ist nach einem Update der Version eventuell alles wieder weg!
Die Voraussetzung ist, dass für jedes Icon eine separate Action benötigt wird. Wir setzen einfach die Action der Seite als zusätzliche CSS-Klasse und können so im CSS für jede Action ein eigenes Icon definieren.
Beginnen wir mit der Basisarbeit, das setzen der CSS-Klasse.
pimcore/modules/admin/controller/DocumentController.php
- 925: $tmpDocument["iconCls"] = "pimcore_icon_page";
+ 925: $tmpDocument["iconCls"] = "pimcore_icon_page ".$childDocument->getAction();Im die Icons zu definieren müssen wir nun das folgende CSS-File anpassen.
pimcore/static/css/icons.css
// Pro Icons wird folgender Code eingefügt.
+ .pimcore_icon_page.{actionName},
+ .pimcore_icon_page_add.{actionName} {
+ background: url(/website/static/img/icon-home.png) no-repeat scroll left center rgba(0, 0, 0, 0) !important;
+ }Damit beim einfügen einer neuen Seite auch das entsprechende Icons angezeigt wird ist noch folgende Erweiterung nötig.
pimcore/static/js/pimcore/document/tree.js
- 251: iconCls: "pimcore_icon_page_add",
+ 251: iconCls: "pimcore_icon_page_add " + record.get("action"),Das war bereits alles. Nach einem logout/login werden nun die neuen Icons angezeigt. So sieht der Benutzer schneller, was für einen Seitentyp er bearbeiten wird.
"Empty Page"-Eintrag ausblenden
Wir definieren für die Apps alle Seiten-Typen unter "Settings -> Document Types". Somit ist das hinzufügen einer "> Empty Page" nicht nötig und verwirrt nur. Dieser Eintrag kann in folgendem Javascript-File entfernt werden.
pimcore/static/js/pimcore/document/tree.js
~ 272-276:
// documentMenu.page.push({
// text: "> " + t("empty_page"),
// iconCls: "pimcore_icon_page_add",
// handler: this.attributes.reference.addDocument.bind(this, "page")
// });