Vertikale Icon-Bar

  • Hallo, Freunde der Nacht. ;)

    Ich habe heute ein wenig experimentiert und mir eine vertikale Icon-Leiste gebastelt.
    Das schaut momentan so aus:


    [attachment=1]screen.PNG[/attachment]


    Hier ist die Leiste einreihig, aber man kann sie auch mehrreihig konfigurieren. ( > var vb_cols = 1; )
    An sich gefällt mir das schon ganz gut. Aber noch geiler wäre es, wenn man die Leiste per Drag & Drop verschieben könnte. Leider ist diese Funktion schon belegt und zwar auf die gleiche Weise wie z.B. die Menü-Leiste. Ich habe versucht, das mit einer eigenen Drag & Drop-Funktion zu überschreiben, was mir aber leider nicht gelungen ist.

    Durch das Füllen der Leiste mit Icons wird die Höhe der Leiste vergrössert und sie sitzt nicht mehr mittig. Auch das habe ich mit einer onResize-Funktion zu korrigieren versucht, doch auch erfolglos. Wahrscheinlich greift die Funktion nicht im "Anpassen"-Modus. Immerhin sitzt nach einem Neustart des Browsers alles wieder mittig.

    Vielleicht hat jemand von euch ein paar Tipps oder Ideen zu meinen Problemchen. :mrgreen:

    Hier mal der Code des Scripts (Ich hänge es aber auch als RAR an):

    Hinweis: Das Script sollte möglichst frühzeitig eingebunden werden, da es die Leiste generiert.
    Und anfangs ist da natürlich nur eine leere Box, die ihr dann mit Icons im Anpassen-Fenster füllen müsst.

    [attachment=0]vertical-iconbar.rar[/attachment]

  • Da ich - zumindest momentan - keine Lösung für mein Drag & Drop Problem sehe, habe ich meiner vertikalen Leiste einen Button spendiert, mit dessen Hilfe man die Leiste ein- bzw. ausblenden kann. :)

    Hier das komplette Script:

    Windows 10 | FF 62.0 (64-Bit) / FF 61.0 (64-Bit) / FF 63.0 (64-Bit)

  • Super Sache das von dir ;) Danke :klasse: Die erste Script Variante habe ich schon laufen, allerdings musste ich die Farben für das dunkle Theme etwas anpassen. Die neue Variante mit dem Button werde ich morgen mal ausprobieren.. Dann gibst auch mal nen Screenshot dazu :)

    Chromebook Lenovo IdeaPad Flex 5 - chromeOS 122 (Stable Channel) - Linux Debian Bookworm: Firefox ESR 115.8.0 und Firefox Nightly, Beta und Main Release (Mozilla PPA), Android 13: Firefox Nightly und Firefox (Main Release)

    Smartphone - Firefox Main Release, Firefox Nightly, Firefox Klar (Main Release)

  • Dankeschön. :)
    Ja, jetzt mit dem Button zusammen ist das schon ganz fein. Gut, das CSS kann/muss man halt seinen eigenen Wünschen entsprechend anpassen, aber das ist eigentlich kein grosses Ding. Genau wie die Positionierung.Theoretisch gesehen kann man die Styles auch in die userChrome.css auslagern. Vielleicht poste ich mal morgen noch diese Variante.

    Windows 10 | FF 62.0 (64-Bit) / FF 61.0 (64-Bit) / FF 63.0 (64-Bit)

  • Bisher klappt es auch mit dem Button sehr gut ;) Allerdings musste ich den erst suchen, da ich alle Leisten schwarz habe, habe ich ihn erst nicht so schnell gefunden. Somit habe ich ihn vorerst ins Overflow-Menü gepackt ;)

    Bilder

    Chromebook Lenovo IdeaPad Flex 5 - chromeOS 122 (Stable Channel) - Linux Debian Bookworm: Firefox ESR 115.8.0 und Firefox Nightly, Beta und Main Release (Mozilla PPA), Android 13: Firefox Nightly und Firefox (Main Release)

    Smartphone - Firefox Main Release, Firefox Nightly, Firefox Klar (Main Release)

  • ersetzte in Zeile 24 das

    CSS
    right: 30px !important; \

    durch

    CSS
    left: 30px !important; \

    die 30px kannst du auch anpassen, dies ist der Abstand vom Rand (rechts oder eben links) ;)

    Im zweiten Script wäre es Zeile 26.

    Bilder

    Chromebook Lenovo IdeaPad Flex 5 - chromeOS 122 (Stable Channel) - Linux Debian Bookworm: Firefox ESR 115.8.0 und Firefox Nightly, Beta und Main Release (Mozilla PPA), Android 13: Firefox Nightly und Firefox (Main Release)

    Smartphone - Firefox Main Release, Firefox Nightly, Firefox Klar (Main Release)

  • Super Danke.

    hier wird doch die Farbe definiert als rgb

    Code
    var vb_bg_color = 'rgba( 255 , 255 , 255 , 0.75 )';
    	var vb_border_color = 'rgb( 255 , 255 , 255 )';


    wie kann ich denn da Hex Code ala #00ff00 angeben ?

  • Hallo,
    endlich habe ich miene Verticale Leiste wieder :mrgreen:

    Danke Danke.

    kurze Frage, wenn man die Leiste ausblendet und man schließt den Fux wird es nicht gespeichert.
    kurz gesagt, kann man das noch ändern das der zustand gespeichert wird ob die Leiste auf oder zu ist ?

  • Dato

    was stört dich an rgba ? Dein #00ff00 entspricht rgba ( 0 , 255 , 0 , 0.75 ) bzw. rgb ( 0 , 255 , 0 ).
    die Umrechnung kannst du auch hier machen lassen : https://www.colorcodehex.com/00ff00/

    Chromebook Lenovo IdeaPad Flex 5 - chromeOS 122 (Stable Channel) - Linux Debian Bookworm: Firefox ESR 115.8.0 und Firefox Nightly, Beta und Main Release (Mozilla PPA), Android 13: Firefox Nightly und Firefox (Main Release)

    Smartphone - Firefox Main Release, Firefox Nightly, Firefox Klar (Main Release)

  • Zitat

    was stört dich an rgba ?


    ich kann besser mit hex umgehen als rgb und in rgb sind es normalerweise nur 3 Zahlnr aber im Code sind 4

    Normal
    00,00,00

    Danke für den Link ist gespeichert.

  • rgba nimmt als vierten Wert die Transparenz mit auf. Also 75% Transparenz wären dann die angegebenen 0.75.

    Chromebook Lenovo IdeaPad Flex 5 - chromeOS 122 (Stable Channel) - Linux Debian Bookworm: Firefox ESR 115.8.0 und Firefox Nightly, Beta und Main Release (Mozilla PPA), Android 13: Firefox Nightly und Firefox (Main Release)

    Smartphone - Firefox Main Release, Firefox Nightly, Firefox Klar (Main Release)


  • Super Danke.

    hier wird doch die Farbe definiert als rgb

    Code
    var vb_bg_color = 'rgba( 255 , 255 , 255 , 0.75 )';
    	var vb_border_color = 'rgb( 255 , 255 , 255 )';


    wie kann ich denn da Hex Code ala #00ff00 angeben ?


    Es spielt keine Rolle, wie deine Farbangabe ausschaut, solange sie gültig ist und du sie zwischen Anführungszeichen setzt. :)
    Du kannst also deine Hex-Farbangabe so eintragen:

    Code
    var vb_bg_color = '#00ff00';


    Hallo,
    endlich habe ich miene Verticale Leiste wieder :mrgreen:

    Danke Danke.

    kurze Frage, wenn man die Leiste ausblendet und man schließt den Fux wird es nicht gespeichert.
    kurz gesagt, kann man das noch ändern das der zustand gespeichert wird ob die Leiste auf oder zu ist ?


    Theoretisch ja. Allerdings würde das den Code aufblähen, da ich momentan nur eine Möglichkeit kenne, eine entsprechende Variable zu speichern und wieder auszulesen. Evtl. aber später mal. :wink:
    Es gibt aber in der neuen Version eine Option, mit der man bestimmen kann, ob die Leiste beim Start sichtbar sein soll oder nicht.

    Code
    var vb_visibilityOnStart = 1; // Beim Start sichtbar
    var vb_visibilityOnStart = 0; // Beim Start nicht sichtbar

    Update Version:

    Windows 10 | FF 62.0 (64-Bit) / FF 61.0 (64-Bit) / FF 63.0 (64-Bit)

  • @ EffPeh
    Danke passt auch und ich finde ein wenig übersichtlicher als vorher.

    kleiner Hinweis zum Script.wenn man den Fux aufmacht wird kurz die Leiste angezeigt und rutsch vertical in der mitte wo sie hingehört und dann erst verschwindet sie.

    aber wie gesagt, es passt schon im grossen und ganzen.

    Danke nochmal.

  • Bitteschön. :)

    Ja, die Sache ist die, dass das Script ja erst einmal nicht weiss, wie hoch die Leiste ist, da die Anzahl der darin befindlichen Icons nicht bekannt ist, bevor sie alle geladen wurden. Also muss ich die Leiste kurzzeitig einblenden, dann die Höhe ermitteln und kann dann erst die Position berechnen, damit die Leiste mittig sitzt. :)
    Evtl. finde ich da aber auch noch eine andere Möglichkeit.

    Windows 10 | FF 62.0 (64-Bit) / FF 61.0 (64-Bit) / FF 63.0 (64-Bit)


  • Allerdings musste ich den erst suchen, da ich alle Leisten schwarz habe, habe ich ihn erst nicht so schnell gefunden. Somit habe ich ihn vorerst ins Overflow-Menü gepackt ;)


    Sorry, hatte ich ganz übersehen. :)
    Du kannst die Farbe(n) der Button-SVG-Icons ändern.
    In den Zeilen...

    Code
    vb_isVisibleImage = 'url(blablabla...
    bzw.
    vb_isHiddenImage = 'url(blablabla...


    ..findest du einen path-Tag, der ein Attribut fill enthält. Dort kannst du deine gewünschte(n) Farbe(n) eintragen. Also etwa so:

    Code
    <path fill="red" ...

    Windows 10 | FF 62.0 (64-Bit) / FF 61.0 (64-Bit) / FF 63.0 (64-Bit)

  • Oh ja, danke für den Hinweis :klasse:

    Chromebook Lenovo IdeaPad Flex 5 - chromeOS 122 (Stable Channel) - Linux Debian Bookworm: Firefox ESR 115.8.0 und Firefox Nightly, Beta und Main Release (Mozilla PPA), Android 13: Firefox Nightly und Firefox (Main Release)

    Smartphone - Firefox Main Release, Firefox Nightly, Firefox Klar (Main Release)

  • EffPeh,
    ich habe in das Script einmal die Komplette LZ Symbolleiste gepackt was auch gut funktioniert;nur leider nach Neustart
    muss ich auf Anpassen gehen so das die LZ Symbolleiste wieder erscheint.
    Kann man dies irgendwie abstellen?
    Aktuell sieht es so aus
    Über die" 2 Pfeile"öffnet sich die LZ Symbolleiste und so könnte es bleiben.

  • Hallo, ich glaube die Frage gehört hier nicht hin aber ich probiere es trotzdem

    Besteht die Möglichtkeit die Vertikale Toolbar auch in Thunderbird 60.2.1 zu benutzen z.B. unten links Horizontal in der Folderpane.

    Wo ich mir ein paar Icons ablegen kann ich habe oben kein Platz mehr.

    Für Eure Mühe herzlichen Dank

    ritchi3000