Alternatives Admin-Menü

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

Re: Alternatives Admin-Menü

Post by frase » Tue Dec 26, 2017 2:47 pm

fhs_adminmenu Version 2.0alpha1
Das ist eine alpha-(Test)Version.
fhs_adminmenu_2.0alpha1.zip
Habe mich für einen Versionssprung entschieden, weil vieles neu und anders ist.

Getestet mit CMSimple_XH 1.7.1 und 1.7.2
Sollte mit XH 1.6.x ebenfalls laufen (gringfügige optische Einschränkungen: kein Icon bei "Plugins").

NEU
  • DashBoard eingeführt - verschiebbar.
  • Logout-Button ins DashBoard verschoben. Damit sind alle Steuerungs-Buttons im Dashboard - alle Menüfunktionen sind im Adminmenü.
  • DashBoard mit Seiten-Navigation und Sprachumschaltung (falls Zweitsprachen vorhanden).
  • Das Adminmenü bleibt sichtbar/unsichtbar auch nach Seitenwechsel.
  • Das Adminmenü bleibt an der passenden Stelle geöffnet (mit Ausnahmen, siehe "Probleme" weiter unten).
  • neue Access-Keys:
    [1] = Access-Key für Admin-Menü anzeigen / verbergen
    [2] = Access-Key zum Umschalten: Bearbeiten / Vorschau
    [3] = Access-Key zur Anzeige von Debug-Meldungen (falls existent)
    [4] = Access-Key zum Ausloggen
PROBLEME
  • Da vieles erst nach dem Seitenaufbau per JavaScript bzw. jQuery manipuliert wird (Positionen), kann es beim Seitenwechsel zu optischen "Hüpfern" kommen.
  • Bei bestimmten Seiten (z.B. nach dem Speichern von Konfigurations- oder Sprachoptionen von Plugins) wird das Menü nicht an passender Stelle geöffnet.
  • Unterstützung für Touch-Bildschirme ist eingebaut - aber deaktiviert (fhs_adminmenu.js ganz unten). Das Problem dabei: Mit aktivierter Touch-Unterstützung ist die Sitemap im Dashboard nicht per Finger bedienbar - alles andere funktioniert.
  • In seltenen Fällen passiert es, dass das DashBoard aus dem sichtbaren Bereich verschwindet. Ich konnte diese Fälle nicht untersuchen, weil ich den Auslöser dafür nicht reproduzieren konnte.
Da es bei früheren Versionen Kritik über die viele "Klickerei" gab, bin ich gespannt, ob ihr den neuen Ansatz besser findet.
Ich bin sicher, dass an vielen Stellen im Code Verbesserungen möglich sind. Für Hilfe von Programmierer-Seite wäre ich dankbar.

P.S.
Bei meinen Tests zusammen mit hi_admin (hier), machte sich das Ding ganz gut.
Apropos hi_admin:
Ich habe eine Funktion für die Select-Sitemap aus Holgers Plugin geklaut.
Ist im Code ausdrücklich vermerkt - ich wäre aber erfreut über eine ausdrückliche Genehmigung dafür ;-)
You do not have the required permissions to view the files attached to this post.

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

Re: Alternatives Admin-Menü

Post by cmb » Tue Dec 26, 2017 4:47 pm

frase wrote:Da es bei früheren Versionen Kritik über die viele "Klickerei" gab, bin ich gespannt, ob ihr den neuen Ansatz besser findet.
Das Dashboard gefällt mir. Sehr nett auch, dass es am Viewportrand einsnappt (klappt bei mir – Chrome – allerdings nicht unten).
frase wrote:Ich bin sicher, dass an vielen Stellen im Code Verbesserungen möglich sind. Für Hilfe von Programmierer-Seite wäre ich dankbar.
Eine Kleinigkeit hätte ich gleich, da in xhDashSelectNav() die bislang ungenutzte Variable $pref definiert wird. Die könnte man in Zeile 42 nutzen:

Code: Select all

        $o .= '<option value="' . $url . '"' . $selected . '>' . str_repeat($pref, $l[$k]-1) . $h[$k] . '</option>'; 
frase wrote:Unterstützung für Touch-Bildschirme ist eingebaut - aber deaktiviert (fhs_adminmenu.js ganz unten). Das Problem dabei: Mit aktivierter Touch-Unterstützung ist die Sitemap im Dashboard nicht per Finger bedienbar - alles andere funktioniert.
Hm, wenn ich es recht überblicke, dann verwendest du jQueryUI nur damit das Dashboard verschoben werden kann. Da böte es sich vielleicht an statt dessen ein anderes Script zu verwenden bei dem der fehlende Touch-Support nicht extra nachgerüstet werden muss. Das könnte dann auch zukunftssicherer sein, da jQueryUI wohl ziemlich tot ist. Vielleicht wäre https://draggabilly.desandro.com/ eine Option.
frase wrote:In seltenen Fällen passiert es, dass das DashBoard aus dem sichtbaren Bereich verschwindet. Ich konnte diese Fälle nicht untersuchen, weil ich den Auslöser dafür nicht reproduzieren konnte.
Ich vermute, du meinst etwas anderes, aber wenn ich das Dashboard unten im Viewport platziere, und dann die Höhe des Browserfenster verkleinere, dann ist das Dashboard nicht mehr erreichbar. Schöner wäre es, wenn im Fall der Änderung der Viewporthöhe auch das Dashboard die Position ändern würde, zumindest wenn es eingesnappt ist (was leider nicht klappt, siehe oben).
Christoph M. Becker – Plugins for CMSimple_XH

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

Re: Alternatives Admin-Menü

Post by frase » Tue Dec 26, 2017 5:28 pm

cmb wrote:Sehr nett auch, dass es am Viewportrand einsnappt (klappt bei mir – Chrome – allerdings nicht unten).
Es snapt bei mir auch unten - allerdings am body - nicht am Viewport.
cmb wrote:Eine Kleinigkeit hätte ich gleich, da in xhDashSelectNav() die bislang ungenutzte Variable $pref definiert wird. Die könnte man in Zeile 42 nutzen:
Ja, da geht es um die bei Holger "geklaute" Funktion. Er hatte $pref benutzt, um die Unterebenen einzurücken.
Ich habe das entfernt, um bei den Options Platz zu sparen - könnte u.U. sehr breit werden. $pref habe ich vergessen zu löschen.
Ich überlege ohnehin, evtl. das Select zu ändern in ein div - um dann auch mit dem Finger wählen zu können.
cmb wrote:Vielleicht wäre https://draggabilly.desandro.com/ eine Option.
Oder vielleicht das hier - das lässt sich nicht über den Rand schieben ;-)
cmb wrote:Ich vermute, du meinst etwas anderes, aber wenn ich das Dashboard unten im Viewport platziere, und dann die Höhe des Browserfenster verkleinere, dann ist das Dashboard nicht mehr erreichbar. Schöner wäre es, wenn im Fall der Änderung der Viewporthöhe auch das Dashboard die Position ändern würde
Das ist auch ein Problem.
Ich meinte allerdings etwas anderes. Bei manchen Klicks verschwand das Dashboard blitzschnell in negative Bereiche. Meistens -y. Das konnte ich dann nur noch über die Konsole (Local Storage) zurückholen. Oder Browser schließen und neu öffnen.

Wie gesagt, ich könnte noch Programmierer-Unterstützung gebrauchen. Auf das "fhs" im Pluginnamen kann ich auch gut und gerne verzichten.
Es gibt da die besprochenen und die anderen Probleme zu lösen.
Aber grundsätzlich finde ich es jetzt besser als vorher. Die Klickerei ist auch nicht mehr so wild.

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

Re: Alternatives Admin-Menü

Post by lck » Tue Dec 26, 2017 7:27 pm

cmb wrote:Das Dashboard gefällt mir.
Mir auch. Sollte das mal gut laufen, wünsche ich es mir als Addon.
frase wrote:Es snapt bei mir auch unten - allerdings am body - nicht am Viewport.
Stimmt, am Ende der Seite snapt es, getestet in Chrome.

Ein Problem ist auf alle Fälle das hier, fhs_adminmenu stylesheet.css:

Code: Select all

body {
    height: auto !important;
}
Das wirkt sich auf das ganze Template aus, siehe Beispiel Login-Bereich (Loginfeld nicht mehr in der Mitte bei Template fhs-simple).

Lösche ich das, so kann ich das nachvollziehen.
frase wrote:Ich meinte allerdings etwas anderes. Bei manchen Klicks verschwand das Dashboard blitzschnell in negative Bereiche. Meistens -y.
Schiebt man das Dashboard in die Mitte der Seite und scrollt die Seite dann ganz nach unten. Nun klickt man auf das Dashboard (dabei verschiebt man es manchmal auch ganz leicht) und versucht es zu verschieben, so verschwindet es im negativen y-Bereich, also z.B. top: -533px;
Dashboard wieder sichtbar machen: Seite wieder ganz nach oben scrollen, Browser-Konsole top: -533px; deaktivieren.
„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: Alternatives Admin-Menü

Post by frase » Wed Dec 27, 2017 8:24 am

lck wrote:Ein Problem ist auf alle Fälle das hier, fhs_adminmenu stylesheet.css:
body {
height: auto !important;
}
Das wirkt sich auf das ganze Template aus, siehe Beispiel Login-Bereich (Loginfeld nicht mehr in der Mitte bei Template fhs-simple).
Tja, hier haben wir wieder einen Konflikt.
Problem:
Um das Dashboard auf den Body beschränken zu können, musste ich diese Styleangabe machen.
Ich hatte in der alpha1-Version alle Styleangaben wieder in stylesheet.css verschoben und nur die Abweichungen in light-stylesheet.css.
Ich glaubte, Code sparen zu können. Irrtum!
Sobald das Plugin vorhanden ist, wird es in xhstyles.css wirksam :(
Also alles zurück: Es gibt wieder gut gefüllte light-stylesheet.css und dark-stylesheet.css, die nur im ADM-Modus aktiv werden.
Damit ist zumindest das Problem im Login-Bildschirm gelöst.
Weitere Auswirkungen im Zusammenspiel mit anderen Templates müssen noch getestet werden.
(Admin-Template hilft - aber dann auch nicht im Vorschau-Modus.)

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

Re: Alternatives Admin-Menü

Post by cmb » Wed Dec 27, 2017 1:52 pm

frase wrote:
cmb wrote:Sehr nett auch, dass es am Viewportrand einsnappt (klappt bei mir – Chrome – allerdings nicht unten).
Es snapt bei mir auch unten - allerdings am body - nicht am Viewport.
Stimmt, und das ist ganz konsequent, da es auch oben nicht am Viewport, sondern am Dokumentrand einrastet.
frase wrote:Ja, da geht es um die bei Holger "geklaute" Funktion. Er hatte $pref benutzt, um die Unterebenen einzurücken.
Ich habe das entfernt, um bei den Options Platz zu sparen - könnte u.U. sehr breit werden. $pref habe ich vergessen zu löschen.
Ich überlege ohnehin, evtl. das Select zu ändern in ein div - um dann auch mit dem Finger wählen zu können.
Ein wenig Einrückung fände ich aber dennoch ganz nett. Oder eben eine ganz andere Lösung als ein Select-Element.
frase wrote:
cmb wrote:Vielleicht wäre https://draggabilly.desandro.com/ eine Option.
Oder vielleicht das hier - das lässt sich nicht über den Rand schieben ;-)
Das kann man bei dem anderen Script wohl auch so konfigurieren – aber egal, welches Script nun verwendet wird, ich denke, der Verzicht auf jQueryUI zahlt sich mittelfristig aus.
frase wrote:Wie gesagt, ich könnte noch Programmierer-Unterstützung gebrauchen.
Sieht halt zeitlich bei mir auch sehr knapp aus. Ein bisschen helfen kann ich, aber leider wohl nicht viel. :(
lck wrote:
cmb wrote:Das Dashboard gefällt mir.
Mir auch. Sollte das mal gut laufen, wünsche ich es mir als Addon.
Gerne noch mal der Verweis auf wr_adminmenu. Die Screenshots sind im Thread leider nicht mehr verfügbar, aber dabei handelte es sich ebenfalls im ein verschiebbares, konfigurierbares Adminmenu – sicherlich auch eine interessante Option.
Christoph M. Becker – Plugins for CMSimple_XH

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

Re: Alternatives Admin-Menü

Post by frase » Wed Dec 27, 2017 3:39 pm

cmb wrote:Vielleicht wäre https://draggabilly.desandro.com/ eine Option.
So.
Nach etwas genauerer Prüfung wurde das Offensichtliche auch mir klar: Das Ding ist besser!
Danke für den Hinweis.

Funktioniert auch bisher alles ganz gut - bis auf eins:
jQuery UI brachte gleich eine Funktion zum Speichern der Position des DashBoards mit (Seitenwechsel). Das sah bei mir bisher so aus:

Code: Select all

$(function () {
    var sPositions = localStorage.positions || "{}",
    positions = JSON.parse(sPositions);
    $.each(positions, function (id, pos) {
        $("#" + id).css(pos)
    })
    $("#xhDashBoard").draggable({
        containment: "body",
        scroll: false,
        stop: function (event, ui) {
            positions[this.id] = ui.position
                localStorage.positions = JSON.stringify(positions)
        }
    });
}); 
Das funktioniert natürlich so nicht mehr (UI habe ich entfernt).

Jetzt benötige ich tatsächlich konkrete Hilfe.
Auf https://draggabilly.desandro.com/ wird unter "Events" demonstriert, wie man die Position per jQuery ermittelt - nicht aber, wie man was speichert und wieder ausliest.
Aktuell sieht die Intitialisierung bei mir so aus:

Code: Select all

// Initialize Draggabilly as a jQuery plugin
var $draggable = $('.draggable').draggabilly({
    containment: '.dragContainer'
})
body hat also die Klasse "dragContainer"
Das Dashboard hat die Klasse "draggable"

Wie kann ich jetzt speichern und auslesen?

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

Re: Alternatives Admin-Menü

Post by cmb » Wed Dec 27, 2017 5:01 pm

frase wrote:Wie kann ich jetzt speichern und auslesen?
Alles ungetestet: die Position des Dashboards kann über die position-Eigenschaft des Draggabilly-Objekts gelesen und vermutlich gesetzt werden. Auf das Draggabilly-Objekt kann man über data("draggabilly") zugreifen. Also kann zum Debuggen die Position in der Browserkonsole wie folgt angezeigt werden:

Code: Select all

$('.draggable').data('draggabilly').position
Speichern könnte man nach jeder Verschiebung, also in einem Listener für das dragEnd-Event. Also etwa:

Code: Select all

$(function () {
    $('.draggable').data('draggabilly').position = JSON.parse(localStorage.dashboardPosition) || {x: 0, y: 0};
    $('.draggable').on('dragEnd', function () {
        localStorage.dashboardPosition = JSON.stringify($(this).data('draggabilly').position);
    });
});
Christoph M. Becker – Plugins for CMSimple_XH

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

Re: Alternatives Admin-Menü

Post by frase » Wed Dec 27, 2017 5:25 pm

noch nicht ganz ...

Konsole meldet:
SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
Betrifft Zeile: $('.draggable').data('draggabilly').position = JSON.parse(localStorage.dashboardPosition) || {x: 0, y: 0};

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

Re: Alternatives Admin-Menü

Post by cmb » Wed Dec 27, 2017 6:00 pm

frase wrote:noch nicht ganz ...

Konsole meldet:
SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
Betrifft Zeile: $('.draggable').data('draggabilly').position = JSON.parse(localStorage.dashboardPosition) || {x: 0, y: 0};
Ah, natürlich. Es sollte wohl eher so sein:

Code: Select all

$('.draggable').data('draggabilly').position = JSON.parse(localStorage.dashboardPosition || "{x: 0, y: 0}");
Christoph M. Becker – Plugins for CMSimple_XH

Post Reply