XH 1.7, Pagemanager 3, Icon-Font

Ein CMSimple Support Forum für deutsch sprechende Nutzer und Entwickler
Post Reply
frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

XH 1.7, Pagemanager 3, Icon-Font

Post by frase » Sat Mar 25, 2017 3:54 pm

Hi zusammen,
es gibt Diskussion über Icon-Fonts in CMSimple_XH 1.7 und speziell in Pagemanager 3.

Ein Vorschlag.
Font Awesome für XH 1.7 - UND - als Beispiel für Pagemanager 3.0beta1.

fa-for-xh.zip

Im ZIP sollten alle nötigen Dateien enthalten sein.
Ordner "fonts" enthält FontAwesome. Kommt in assets.
font-awesome.min.css kommt in assets/css.
In core.css ist nur die erste Zeile hinzugefügt - sonst nichts verändert.

Plugin Pagemanager:
2 classes sind dabei mit Fix für die Checkboxen.
stylesheet.css kommt in css.
\views\widget.php - hier war eine minimale Änderung nötig.

Nachteile:
Sollt ihr feststellen. Habe noch keine gefunden.

Vorteile:
- Einheitliches Aussehen (Icon-Font) könnte nach und nach bei CMSimple_XH einziehen.
- Kann von Plugins verwendet werden.
- Kann sogar von Templates verwendet werden.
- Kann auch bei der Inhaltsbearbeitung verwendet werden, sofern die Fontawesome-Plugins für die Editoren installiert sind. Die gibt es schon.
...

Zu Pagemanager:
Ich habe es jetzt rein mit CSS gelöst. Die Buttons sind Browser-eigene.
- accessible (Tab-Taste, nicht aktive Buttons werden übersprungen
Es ginge auch anders, wenn in widget.php die Schleife nicht wäre. Dann könnte man die Icons auch noch human-readable dort einfügen.
Als Demo habe ich nur den Löschen-Button rot gemacht. Alles ist möglich.
Nach einigen Versuchen bin ich aber drauf gekommen, dass ein gemildertes Schwarz immer noch am besten passt.
Was mit den Icons aus jstree.min.js wird ... keine Ahnung ;-)

Bin gespannt, was ihr sagt.
Ach so. FontAwesome habe ich genommen, weil es schon oft verwendet wird (fhs-adminmenu).

lck
Posts: 2963
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: XH 1.7, Pagemanager 3, Icon-Font

Post by lck » Sat Mar 25, 2017 5:50 pm

frase wrote:Ein Vorschlag.
Font Awesome für XH 1.7 - UND - als Beispiel für Pagemanager 3.0beta1.
Erster Eindruck, gut :) Wie sieht es mit der Performance aus, müsste man mal testen.
frase wrote:Plugin Pagemanager:
2 classes sind dabei mit Fix für die Checkboxen.
Somit sollte der Pagemanager funktionieren, oder? Bei mir nicht, wenn ich speichere sind alle grüne Häkchen weg :shock:. Oder habe ich da was übersehen?
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: XH 1.7, Pagemanager 3, Icon-Font

Post by frase » Sat Mar 25, 2017 6:30 pm

lck wrote:
frase wrote:Plugin Pagemanager:
2 classes sind dabei mit Fix für die Checkboxen.
Somit sollte der Pagemanager funktionieren, oder? Bei mir nicht, wenn ich speichere sind alle grüne Häkchen weg :shock:. Oder habe ich da was übersehen?
Aua! Dicker Fehler.
Ich habe vergessen, die pagemanager.js ins Paket zu legen.
Danke fürs Melden.
Ist im Download korrigiert.

lck
Posts: 2963
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: XH 1.7, Pagemanager 3, Icon-Font

Post by lck » Sat Mar 25, 2017 8:12 pm

frase wrote:Ist im Download korrigiert.
Super, jetzt funktionierts :)

@Christoph
Was ich im neuen Pagemanager vermisse, sind die Buttons für "Seite erstellen (als Unterseite)" und "Seite erstellen (auf gleicher Ebene)". Jetzt gibt es nur noch "Hinzufügen". Wenn man schon Unterseiten hat, ist das Ok, aber wenn nicht dann wird eine neue Seite auf oberster Ebene erstellt und danach muss man die Seite per Maus in eine Seite verschieben (Ausschneiden und einfügen geht nicht). Auch die Buttons für "Einfügen (als Unterseite)" und "Einfügen (auf gleicher Ebene)" waren praktisch.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

lck
Posts: 2963
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: XH 1.7, Pagemanager 3, Icon-Font

Post by lck » Sat Mar 25, 2017 8:50 pm

frase wrote:Font Awesome für XH 1.7
Noch ein Problem. Schau dir mal im TinyMCE4 das Feld mit den Überschriften an (h1 ...), da fehlt die Bezeichnung und klickt man auf den Pfeil öffnet sich das Auswahlfeld absolute positioniert, links oben. Auch die Browserkonsole bringt einen Fehler:
Uncaught TypeError: Cannot use 'in' operator to search for 'preview' in undefined
at Object.s [as getCssText] (tinymce.min.js:6)
at Object.A [as getCssText] (tinymce.min.js:7)
at textStyle (tinymce.min.js:13)
at t.postRender (tinymce.min.js:14)
at t.postRender (tinymce.min.js:8)
at t.<anonymous> (tinymce.min.js:8)
at Object.n [as each] (tinymce.min.js:3)
at t.each (tinymce.min.js:8)
at t.exec (tinymce.min.js:8)
at t.postRender (tinymce.min.js:9)
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: XH 1.7, Pagemanager 3, Icon-Font

Post by cmb » Sun Mar 26, 2017 12:30 am

frase wrote:Bin gespannt, was ihr sagt.
Mir gefällt es! Ich bin angenehm überrascht, dass alle Pagemanager-Icons offensichtlich auch in Font Awesome verfügbar sind.
frase wrote:Es ginge auch anders, wenn in widget.php die Schleife nicht wäre. Dann könnte man die Icons auch noch human-readable dort einfügen.
Da könnte ich ggf. leicht nacharbeiten (mit Trickserei ging es auch so, aber muss ja nicht sein).
frase wrote:Plugin Pagemanager:
2 classes sind dabei mit Fix für die Checkboxen.
Das würde ich lieber in einem Theme integrieren. Auf die weitere Entwicklung von jsTree habe ich keinen Einfluss, und wer weiß wie sich die Struktur ändert? Ein nicht mehr funktionierendes Theme könnte man zumindest schnell durch das Default-Theme ersetzen. Das kann ich aber ggf. machen.
frase wrote:Was mit den Icons aus jstree.min.js wird ... keine Ahnung
Auch hier müsste man eigentlich zwischen Theme- und Pagemanager-Icons unterscheiden. Es gibt wohl genau ein Theme-Icon ("default"). Alle anderen Icons werden vom Pagemanager gesetzt. Auf Default könnte vielleicht verzichtet werden – bin unsicher. Jedenfalls könnte man wohl tatsächlich auch Font Awesome Icons als "Typ"-Icons nutzen. Das ginge wohl auch für die Icons im Kontextmenü, die in der aktuellen Version wohl noch die alten sind.
lck wrote:Wie sieht es mit der Performance aus, müsste man mal testen.
Das wäre auf jeden Fall nicht verkehrt. Beim aktuellen Pagemanager müssten bei dieser Variante aber letztlich 17 Icons nicht geladen werden, und wenn viele andere Plugins ebenfalls Font Awesome für die Icons verwendeten, werden es entsprechend mehr. Auch wenn die Gesamtgröße der Icons gering ist (derzeit bei Pagemanager 12,6 KB), werden eine Menge Requests gespart (falls nicht HTTP/2.0) – das kann sich sehr positiv auf die UX auswirken. Aber ja, messen ist besser als guessen.
lck wrote:Was ich im neuen Pagemanager vermisse, sind die Buttons für "Seite erstellen (als Unterseite)" und "Seite erstellen (auf gleicher Ebene)". Jetzt gibt es nur noch "Hinzufügen". Wenn man schon Unterseiten hat, ist das Ok, aber wenn nicht dann wird eine neue Seite auf oberster Ebene erstellt und danach muss man die Seite per Maus in eine Seite verschieben (Ausschneiden und einfügen geht nicht). Auch die Buttons für "Einfügen (als Unterseite)" und "Einfügen (auf gleicher Ebene)" waren praktisch.
Ich selbst fand diese "doppelten" Buttons grausig. Total unintuitiv – gibt's bei keiner anderen Software (?). Letztlich fehlt der übergeordnete einzelne Wurzelknoten; aber der könnte Anwender vielleicht noch mehr verwirren (oder nicht?). Weg haben wollte ich die "Duplikate" halt trotzdem, und "auf gleicher Ebene" schien mir das doch das eher verwendete, "als Unterseite" kann ja eben per Verschieben erledigt werden (mit der Maus sollte das übrigens nun deutlich besser klappen als mit jsTree 1). Aber dass nun die Zwischenablagefunktionen nicht mehr funktionieren könnten, daran hatte ich nicht gedacht. So wie es jetzt ist, geht es also nicht.

:?: Also: die alte Variante wieder herstellen, oder einen unveränderlichen Wurzelknoten hinzufügen, oder? :?:
Christoph M. Becker – Plugins for CMSimple_XH

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: XH 1.7, Pagemanager 3, Icon-Font

Post by frase » Sun Mar 26, 2017 8:24 am

Na, das geht ja schon wieder ganz schön durcheinander.
Es gibt also ein paar Dinge im Pagemanager zu klären - und der Tiny4 macht auch Probleme.

Dabei wollte ich in diesem Thread nur die Einführung eines Icon-Fonts beantragen.
Was ich hiermit offiziell tun möchte! ;-)

---
lck wrote:Noch ein Problem. Schau dir mal im TinyMCE4 das Feld mit den Überschriften an (h1 ...), da fehlt die Bezeichnung und klickt man auf den Pfeil öffnet sich das Auswahlfeld absolute positioniert, links oben. Auch die Browserkonsole bringt einen Fehler:
Bin mir nicht sicher, was gemeint ist. Betrifft das eventuell dieses Problem? Da war was mit den block_formats. Wir sollten vielleicht einen extra-Thread mit den Tiny4-Problemen aufmachen. Wie soll Manu denn die ganzen verteilten Meldungen finden und behandeln?
cmb wrote:Ich bin angenehm überrascht, dass alle Pagemanager-Icons offensichtlich auch in Font Awesome verfügbar sind.
Na ja, wie schon besprochen, wird es nicht immer so klappen. Für "Als Unterseite einfügen" habe ich keine Idee - könnte man aber evtl. durch Kombination zweier Icons (mit Margin negativ) schaffen.
Letztendlich wäre es auch gut, Pagemanager-3-Probleme an anderer Stelle zu besprechen.

---

Zusammenfassend nochmal die Frage:
Was haltet ihr davon, FontAwesome mit CMSimple_XH auszuliefern?
Insgesamt wäre der Download um ca. 1 MB größer. 1 Font-Ordner, 1 Stylesheet-Datei und 1 Zeile zusätzlich in core.css - mehr ist es nicht.
Ein sehr großer Vorteil ergibt sich nach und nach - nämlich: weniger Requests für Bildchen (man darf hier nicht nur den Pagemanager betrachten, sondern alle zukünftigen Plugins).
Und noch viele andere Vorteile, die zum Teil schon genannt wurden.

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: XH 1.7, Pagemanager 3, Icon-Font

Post by frase » Sun Mar 26, 2017 9:26 am

Hier eine Demonstration, für den Fall, dass man kein passendes Icon im Font findet und sich selbst eines kombinieren muss:
fa-icons-combined.png
HTML-Code:

Code: Select all

<p><span class="fa fa-file-o fa-2x"> </span><span class="fa fa-chevron-circle-down fa-over"> </span><br>
Icons kombiniert für "als Unterseite einfügen"</p>
<p><span class="fa fa-file-o fa-2x"> </span><span class="fa fa-chevron-circle-right fa-over"> </span><br>
Icons kombiniert für "auf gleicher Ebene einfügen"</p> 
Das CSS:

Code: Select all

.fa-over {
	margin-left: -1em;
	color: #999;
}
Damit sollten schon fast alle Fälle abgedeckt sein.
Die Demo zeigt die human-readable Version.
You do not have the required permissions to view the files attached to this post.

lck
Posts: 2963
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: XH 1.7, Pagemanager 3, Icon-Font

Post by lck » Sun Mar 26, 2017 10:44 am

frase wrote:Bin mir nicht sicher, was gemeint ist. Betrifft das eventuell dieses Problem? Da war was mit den block_formats.
Ja genau, das Gleiche Problem wie hier im Bild dargestellt und die Lösung dafür war hier und weiter unten eine andere Variante. Bis ml5 ist alles OK, ab ml6 tritt das Problem auf.
Christoph hat das Problem schon als Issue gemeldet :)
Last edited by lck on Sun Mar 26, 2017 10:51 am, edited 1 time in total.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

lck
Posts: 2963
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: XH 1.7, Pagemanager 3, Icon-Font

Post by lck » Sun Mar 26, 2017 10:48 am

cmb wrote: Also: die alte Variante wieder herstellen, oder einen unveränderlichen Wurzelknoten hinzufügen, oder?
Das möchte ich nicht entscheiden, was meinen andere? Wenn mit einem "unveränderlichen Wurzelknoten" gemeint ist, dass immer von der ersten Seite ausgegangen wird, dann lieber nicht.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

Post Reply