Horizontales Admin-Menu

Hatte mal wieder Lust, was anderes zu machen....

Dabei habe ich eine Möglichkeit geschaffen, im Admin auch ein horizontales Flyout-Menü zu haben (siehe das anhängende Bild).

Man muss dann nicht mehr so viel nach unten scrollen....

Das ist, natürlich, updatesicher....

Die Lösung basiert auf ein paar Zeilen jQuery, mit dessen Hilfe die Seite etwas umgebaut wird, so dass eben zusätzlich ein horizontales "Flyout"-Menü entsteht. (ist schon ein geniales Werkzeug, dieses jQuery.)

Noch ein wenig CSS dazu, und schon passt das....

Den folgenden Code als "user_classes\overloads\AdminMenuContentView\pt_HorizMenu_AdminMenuContentView.inc.php" in den Shop kopieren.

PHP:

<?php
/* --------------------------------------------------------------
pt_HorizMenu_AdminMenuContentView.inc.php 2012-01-16 gm
Gambio GmbH
http://www.gambio.de
Copyright (c) 2012 Gambio GmbH

Copyright (c) 2012 Avenger, entwicklung@powertemplate.de
Place horizontal menu on top page

Released under the GNU General Public License (Version 2)
[http://www.gnu.org/licenses/gpl-2.0.html]
--------------------------------------------------------------
*/

class pt_HorizMenu_AdminMenuContentView extends pt_HorizMenu_AdminMenuContentView_parent
{
  function get_html( $p_customers_id )
  {
    $t_html_output=parent::get_html( $p_customers_id );
    $script='
<script type="text/javascript">
$(document).ready(function(){
  var div_content_width=$(".content_width");

  if (div_content_width.length)
  {
    var menu_entries_to_copy=new Array(
      "BOX_HEADING_FAVORITES",
      //"BOX_HEADING_GAMBIO",
      "BOX_HEADING_CUSTOMERS",
      "BOX_HEADING_PRODUCTS",
      //"BOX_HEADING_MAGNALISTER",
      "BOX_HEADING_MODULES",
      "BOX_HEADING_STATISTICS",
      //"BOX_HEADING_XTBOOSTER",
      "BOX_HEADING_TOOLS",
      //"BOX_HEADING_GV_ADMIN",
      //"BOX_HEADING_ZONE",
      "BOX_HEADING_CONFIGURATION");
    var menu_entries_to_copy_length=menu_entries_to_copy.length;
    var top_menu="<ul id=\"top_menu\">";
    var top_level_entry="<li class=\"top_level_entry\"></li>",top_level_entry0;
    var menu_id,menu_entry,menu_image;
    
    top_menu=$(top_menu);
    top_level_entry0=$(top_level_entry);
    for (var i=0;i<menu_entries_to_copy_length;i++)
    {
      menu_id="#"+menu_entries_to_copy[i];
      menu_entry=$(menu_id);
      if (menu_entry.length)
      {
        menu_image=menu_entry.prev().prev();
        menu_image=menu_image.clone();
        menu_entry=menu_entry.clone();
        menu_id=menu_entry.attr("id")+"_top";
        menu_entry
          .attr("id",menu_id)
          .attr("style","display:none");
        top_level_entry=top_level_entry0.clone();  
        top_level_entry.addClass(menu_id);
        top_level_entry.append(menu_image);
        top_level_entry.append(menu_entry);
        top_menu.append(top_level_entry);
      }
    }
    div_content_width=div_content_width.first();
    top_menu.width(div_content_width.width()-40);
    div_content_width.append(top_menu);
    
    $("li.top_level_entry").hover(
      function () {
        $(this).find("> ul").show();
      }, 
      function () {
        $(this).find("> ul").hide();
      }
    );
    
  }
});
</script>

<style type="text/css">
#top_menu {
    margin-top: 0;
    padding-bottom: 5px;
    position:absolute;
    background-color:white;
}

.top_level_entry {
  float:left;
  margin-right:20px;
  list-style:none;
  cursor:pointer;
  position:relative;
}

.top_level_entry.BOX_HEADING_FAVORITES_top {
  margin-left:-35px;
}

.top_level_entry ul {
  display:none;
  position:absolute;
  border:1px solid black;
  background-color:white;
  padding:5px;
  padding-top:0px;
  z-index:100;
  margin-left:15px;
}

.top_level_entry ul a {
  font-size:12px;
}

#top_menu .leftmenu_body_item {
    margin-left: -5px;
}

.content_width + .content_width {
    margin-top: 35px;
}

</style>
';
    return $t_html_output.$script;
  }
}
?>

Die Auswahl, welche Menüelemente im horizontalen Menü, geschieht über diesen array, in dem die IDs der Menüelemente enthalten sind.

PHP:

    var menu_entries_to_copy=new Array(
      "BOX_HEADING_FAVORITES",
      //"BOX_HEADING_GAMBIO",
      "BOX_HEADING_CUSTOMERS",
      "BOX_HEADING_PRODUCTS",
      //"BOX_HEADING_MAGNALISTER",
      "BOX_HEADING_MODULES",
      "BOX_HEADING_STATISTICS",
      //"BOX_HEADING_XTBOOSTER",
      "BOX_HEADING_TOOLS",
      //"BOX_HEADING_GV_ADMIN",
      //"BOX_HEADING_ZONE",
      "BOX_HEADING_CONFIGURATION");

Wenn man mehr als jetzt haben will, dann entfernt man die "//"-Zeichen vor den Einträgen...

Will man weniger haben, dann fügt man die "//"-Zeichen vor den Eintrag ein.

Das ist auch ein schönes Beispiel, wie man eigenes Javascript und CSS updatesicher in den Admin bekommen kann..

 

Habe das ganze noch etwas besser, übersichtlicher und flexibler gemacht, und alles in einem direkt kopierbaren Archiv aufbereitet....

Um das horizontale Admin-Menü zu installieren, kopieren Sie die Verzeichnisse "admin" und "user_classes" in die Shop-Root.

Im Verzeichnis "admin\gm\javascript\" befindet sich die Javascript-Datei "horizontal_admin_menu.js", mit dem die Admin-Seite so umgebaut wird, dass ein horizontales Flyout-Menü auf der Admin-Seite eingerichtet wird.

(Das erspart doch einiges an "Scrolling" in der Seite...)

Man kann darin das Modul-Verhalten in 2 Aspekten konfigurieren:

1. Man kann festlegen, ob nur noch das horizontale Flyout-Menü angezeigt werden soll

//Hide left menu completely (true/false)
var hide_left_menue=true; //Show only horizontal flyout menue
//var hide_left_menue=false; //Show horizontal flyout menue and left menu

Das schafft mehr Platz auf der Seite.

2. Man kann die Reihenfolge der Einträge im horizontalen Flyout-Menü festlegen

Diese Reihenfolge wird im Array "menu_entries_sort" festgelegt.

var menu_entries_sort=new Array(
"BOX_HEADING_FAVORITES",
"BOX_HEADING_CUSTOMERS",
"BOX_HEADING_PRODUCTS",
"BOX_HEADING_STATISTICS",
"BOX_HEADING_MODULES",
"BOX_HEADING_TOOLS",
"BOX_HEADING_MAGNALISTER",
"BOX_HEADING_XTBOOSTER",
"BOX_HEADING_GV_ADMIN",
"BOX_HEADING_CONFIGURATION",
"BOX_HEADING_ZONE",
"BOX_HEADING_GAMBIO",
"BOX_HEADING_GAMBIO_SEO",
"BOX_HEADING_COMPAT_MODULES"
);

Wenn man einen Menüeintrag komplett eliminieren will, muss man nur "//" an den Beginn eines Eintrags setzen.

z.B. //"BOX_HEADING_MAGNALISTER", um das "Marketing"-Menü zu entfernen.

Im Verzeichnis "admin\includes\" befindet sich die CSS-Datei "pt_horizontal_menu.css", in der das horizontale Flyout-Menü "gestyled" wird.

Im Verzeichnis "admin\gm\javascript\" befindet sich auch noch das jQuery-Plugin "hoverIntent".

Mit diesem Plugin wird das Öffnen eines Menüflyouts verzögert, damit dieses nicht beim Überfahren eines Menü-Eintrags sofort geöffnet wird, sondern erst dann, wenn die Maus sich mindestens 500 Millisekunden auf dem Menü-Eintrag befindet.

Das beruhigt das Menü-Verhalten ungemein...

Die Overload-Klasse "pt_HorizMenu_AdminMenuContentView.inc.php" im Verzeichnis "user_classes\overloads\AdminMenuContentView\" ist jetzt stark verkürzt, und bindet jetzt nur noch die notwendigen Script- und CSS-Dateien ein.

PHP:

<?php
/* --------------------------------------------------------------
pt_HorizMenu_AdminMenuContentView.inc.php 2012-01-16 gm
Gambio GmbH
http://www.gambio.de
Copyright (c) 2012 Gambio GmbH

Copyright (c) 2012 Avenger, entwicklung@powertemplate.de
Place horizontal menu on top page

Released under the GNU General Public License (Version 2)
[http://www.gnu.org/licenses/gpl-2.0.html]
--------------------------------------------------------------
*/

class pt_HorizMenu_AdminMenuContentView extends pt_HorizMenu_AdminMenuContentView_parent
{
  function get_html( $p_customers_id )
  {
    $t_html_output=parent::get_html( $p_customers_id );
    $script='
<script type="text/javascript" src="gm/javascript/hoverIntent.minified.js"></script>    
<script type="text/javascript" src="gm/javascript/horizontal_admin_menu.js"></script>    
<link type="text/css" rel="stylesheet" href="includes/pt_horizontal_menu.css">    
';
    $t_html_output.=$script;
    return $t_html_output;
  }
}
?>

 

Habe noch eine CSS-Änderung eingebracht, die das Laden der Startseite harmonischer macht.

 

Habe gerade festgestellt, dass einige Module (z.B. die Gutscheine) wieder ein etwas anderes HTML verwenden, so dass die Selektion des linken Menüs mit dem bisherigen Verfahren nicht funktioniert, und daher kein horizontales Flyout-Menü erzeugt wurde....

Ich verwende daher in solchen Fällen jetzt einen alternativen Selektor, so dass das auch damit wieder funktioniert.

Wenn ihr noch so etwas bemerkt, bitte mit genauer Angabe von Menü/Funktion hier posten...

 

Geht es etwas genauer, was Du suchst?

 

Nee, das wird so ohne weiteres nichts.....

Weil die Frontendsuche ja die Datenbankinhalte durchsucht, diese Funktionstitel sind allerdings einfache Textkonstanten....

Nicht einfach, aber prinzipell machbar...

Man muss (per AJAX) alle Admin-Sprachdateien durchsuchen nach dem Auftreten der gesuchten Textelemente daraus kann man dann die Texte extrahieren und diesen dann den Namen des Admin-Programms zuordnen für den sie definiert sind.

Nach Übergabe an das Javascript muss dieses prüfen, ob die gefundenen Programmnamen als Links im Menübereich verfügbar sind => Funktion.....

Wenn es nur ein Ergebnis gibt, dann kann man direkt diese Funktion aufrufen, andernfalls eine Auswahlliste mit gefundenen Texten.....

 

Wenn der nicht da ist, hatte er keinen Inhalt....

Wenn er schon Inhalt hat brauche ich mal eine URL um mir das anzusehen.....

 

Ja, das war noch ein systematischer Fehler,,,,,

Bei der Konstruktion des horizontalen Menüs hatte ich die Elemente des vertikalen Menüs kopiert, und dann in das horizontale Menü eingebaut.

Wobei dann allerdings die vorhandene Bindung der Elemente an das jQuery für das Drag-/Drop-Handling verloren ging.

Ich kopiere jetzt die Menü-Elemente nicht mehr, sondern verschiebe diese in das horizontale Menü, und dabei bleibt die Bindung der Elemente an das jQuery für das Drag-/Drop-Handling erhalten!

Jetzt kann man die "FAVS" ganz normal wieder hinzufügen entfernen (wobei ich das noch ein wenig "gepimped" habe).

Allerdings funktioniert das nur dann, wenn die Option, das linke Menü auszublenden, aktiv ist.

 

Das war doch mal eine richtige Herausforderung....

Ich habe das mal wie zuvor beschrieben implementiert:

Es wird ein neues Suchfeld in die "Quicksearch"-Leiste eingebaut mit dem Namen "FUNKTION".

Nach Eingabe von Return werden (per AJAX) die eingegebenen Daten an das das Modul "admin/pt_find_admin_functions_by_text.php" übermitttelt.

Dies durchsucht alle Sprachdateien in "lang/german/admin" auf das Auftreten der Suchbegriffe (wobei auch nach dem aus allen Begriffen zusammen gesetzten Suchbegriff gesucht wird (z.B. gesucht wird "kategorie icon", so dass auch noch "kategorieicon" gesucht wird).

Die gefundenen Sprachdateien (deren Name ja auch dem des zugehörigen Admin-Programm entspricht!) werden dann gewichtet nach der Häufigkeit des Auftretens der Suchbegriffe in einer Suchliste angezeigt (wie im Frontend), und mit einem Klick auf den Funktionslink in der Suchliste wird dann die Funktion aktiviert...

Das sieht dann so aus wie in folgendem Bild.



Man muss mal schauen, ob das eine ausreichende Lösung ist.....

Kann durchaus sein, dass das nicht gut genug ist, aber einen anderen möglichen Ansatz sehe ich im Moment nicht.

Ich habe das mit dem horizontalen Admin-Menü zusammen gepackt.

Wenn man diese Funktion nicht mehr will, dann kann man in der Datei "admin\gm\javascript\horizontal_admin_menu.js" den Eintrag

PHP:

var admin_function_search=true;

zu

PHP:

var admin_function_search=false;

ändern.

 

Ooops, Template vergessen.....

 

Kann ich nicht nachvollziehen...

Poste doch mal die Datei.