Icons in Kontxtmenü überlagern Menütext

bananovic

Thunderbird 128.01esr

Windows 10

Ich habe in meinem Thunderbird alle Einträge der Menüs und Kontextmenüs mit Icons versehen. Das hat bis zur Version 115 gut geklappt. Nach dem Update auf TB 128 überlagern die Icons der Kontxtmenüeinträge in der Threadpane und der Messagepane die Menütexte, zum Teil auch bei den Untermenüs, aber nicht bei allen. In den Hauptmenüs (Datei, Bearbeiten, Ansicht etc.) ist alles wie es sein soll. Einen Screenshot im Anhang.

Ein Auszug aus meiner Menu-Icons.css. Die ganze Datei ist sehr groß.

CSS

/* THREADPANE */
    
    #mailContext-openNewTab { background-image: url("../icons/43.png"); background-repeat: no-repeat;
        background-position:7px 4px!important }      
    #mailContext-openNewWindow { background-image: url("../icons/42.png"); background-repeat: no-repeat;
        background-position:7px 4px!important }
    #mailContext-openConversation { background-image: url("../icons/233.png"); background-repeat: no-repeat;
        background-position:7px 4px!important }
    #mailContext-replySender { background-image: url("../icons/155.png"); background-repeat: no-repeat;
        background-position:7px 4px!important }
    #mailContext-replyAll { background-image: url("../icons/94.png"); background-repeat: no-repeat;
        background-position:7px 4px!important }
    #mailContext-forward { background-image: url("../icons/37.png"); background-repeat: no-repeat;
        background-position:7px 4px!important }
    #mailContext-forwardAsMenu { background-image: url("../icons/37.png"); background-repeat: no-repeat;
        background-position:7px 4px!important }
           #mailContext-forwardAsInline { background-image: url("../icons/147.png"); background-repeat: no-repeat;
              background-position:7px 4px!important }
           #mailContext-forwardAsAttachment { background-image: url("../icons/173.png"); background-repeat: no-repeat;
              background-position:7px 4px!important }
    #mailContext-redirect { background-image: url("../icons/267.png"); background-repeat: no-repeat;
        background-position:7px 4px!important }
    #mailContext-editAsNew { background-image: url("../icons/6.png"); background-repeat: no-repeat;
        background-position:7px 4px!important }
    #mailContext-tags { background-image: url("../icons/385.png"); background-repeat: no-repeat;
        background-position:7px 4px!important }
           #mailContext-addNewTag { background-image: url("../icons/203.png"); background-repeat: no-repeat;
              background-position:7px 4px!important }
           #mailContext-manageTags { background-image: url("../icons/292.png"); background-repeat: no-repeat;
              background-position:7px 4px!important }
           #mailContext-tagRemoveAll { background-image: url("../icons/300.png"); background-repeat: no-repeat;
              background-position:7px 4px!important }
    #mailContext-mark { background-image: url("../icons/305.png"); background-repeat: no-repeat;
        background-position:7px 4px!important }
           #mailContext-markRead { background-image: url("../icons/356.png"); background-repeat: no-repeat;
              background-position:7px 4px!important }
           #mailContext-markUnread { background-image: url("../icons/357.png"); background-repeat: no-repeat;
              background-position:7px 4px!important }
           #mailContext-markThreadAsRead { background-image: url("../icons/80.png"); background-repeat: no-repeat;
              background-position:7px 4px!important }
           #mailContext-markReadByDate { background-image: url("../icons/287.png"); background-repeat: no-repeat;
              background-position:7px 4px!important }
           #mailContext-markAllRead { background-image: url("../icons/274.png"); background-repeat: no-repeat;
              background-position:7px 4px!important }
           #mailContext-markFlagged { background-image: url("../icons/14.png"); background-repeat: no-repeat;
              background-position:7px 4px!important }
           #mailContext-markAsJunk { background-image: url("../icons/167.png"); background-repeat: no-repeat;
              background-position:7px 4px!important }
           #mailContext-markAsNotJunk { background-image: url("../icons/168.png"); background-repeat: no-repeat;
              background-position:7px 4px!important }
           #mailContext-recalculateJunkScore { background-image: url("../icons/169.png"); background-repeat: no-repeat;
              background-position:7px 4px!important }
    #mailContext-archive { background-image: url("../icons/157.png"); background-repeat: no-repeat;
        background-position:7px 4px!important }
    #mailContext-moveMenu { background-image: url("../icons/146.png"); background-repeat: no-repeat;
        background-position:7px 4px!important }
    #mailContext-copyMenu { background-image: url("../icons/29.png"); background-repeat: no-repeat;
        background-position:7px 4px!important }
    #mailContext-moveToFolderAgain { background-image: url("../icons/inbox.png"); background-repeat: no-repeat;
        background-position:7px 4px!important }
    #mailContext-calendar-convert-menu { background-image: url("../icons/332.png"); background-repeat: no-repeat;
        background-position:7px 4px!important }
           #mailContext-calendar-convert-event-menuitem { background-image: url("../icons/geplanter-termin.png"); background-repeat: no-repeat;
              background-position:7px 4px!important }
           #mailContext-calendar-convert-task-menuitem { background-image: url("../icons/newtask-small.png"); background-repeat: no-repeat;
              background-position:7px 4px!important }
    #mailContext-delete { background-image: url("../icons/35.png"); background-repeat: no-repeat;
        background-position:7px 4px!important }
    #mailContext-ignoreThread { background-image: url("../icons/forbidden.png"); background-repeat: no-repeat;
        background-position:7px 4px!important }
    #mailContext-ignoreSubthread { background-image: url("../icons/forbidden.png"); background-repeat: no-repeat;
        background-position:7px 4px!important }
    #mailContext-watchThread { background-image: url("../icons/View-2.png"); background-repeat: no-repeat;
        background-position:7px 4px!important }
    #mailContext-saveAs { background-image: url("../icons/160.png"); background-repeat: no-repeat;
        background-position:7px 4px!important }
    #mailContext-print { background-image: url("../icons/Print.png"); background-repeat: no-repeat;
        background-position:7px 4px!important }

Alles anzeigen

Wie kann das Problem gelöst werden?

Grisu2099

Zitat von bananovic

Wie kann das Problem gelöst werden?

Indem du die Label per CSS nach rechts verschiebst...

beispielhaft für das erstes Icon oben:

CSS

#mailContext-openNewTab {
	background-image: url("../icons/43.png") no-repeat 7px 4px !important;
	}      
#mailContext-openNewTab > label {
	padding-left: 26px !important;
	}

ggbsde

Zitat von bananovic

alle Einträge der Menüs und Kontextmenüs mit Icons versehen

Ach du große Güte...

Um nun nicht jedes label einzeln verschieben zu müssen hilft vielleicht auch

CSS

#messageMenuPopup label {
 padding-left: 26px !important;
}

für jedes Menü.

Alternativ geht vielleicht auch, die background-position-x für die icons nach links zu verschieben.

bananovic

Danke, das funktioniert. Aber kann man das nicht mit einem allgemeinen Code für alle Menü- und Untermenüeinträge lösen, gewissermaßen vor der Klammer? Dann würde ich mir viel Arbeit ersparen.

ggbsde

Das wäre dann

CSS

#mail-menubar label {
 padding-left: 26px !important;
}

aber je höher man in der Hierarchie startet desto größer ist die Wahrscheinlichkeit unerwünschter Effekte.

bananovic

Zitat von ggbsde

Um nun nicht jedes label einzeln verschieben zu müssen hilft vielleicht auch

Dieser Code hat nicht funktioniert, ist aber das, was ich mir vorstelle. Das Verschieben des Icons nach links geht nicht, weil der Platz fehlt.

bananovic

Danke ggbsde. Auch der letzte Code zeigt bei den betroffenen Kontextmenüs keine Wirkung. Jetzt sind aber in den HAuptmenüs die Abstände zwischen Icon und Menütext riesig.

ggbsde

Du bist nicht an den Wert '26' gebunden. Pass das an wie du es brauchst.

Bei welche Menüeinträgen funktioniert es denn nicht. Ich kann keine finden.

Grisu2099

Probiere mal dieses Script aus:

Code

setTimeout(function() {
    var ucjsAC = {
        init : function () {
            const menu = document.querySelectorAll('menu');
            menu.forEach(query => query.classList.add('menu-iconic'));
            const menuitem = document.querySelectorAll('menuitem');
            menuitem.forEach(query => query.classList.add('menuitem-iconic'));
        },
    }
ucjsAC.init();
}, 1000);

Alles anzeigen

Das verschiebt pauschal die Label nach rechts. Wirkt allerdings nicht im PopUp bei Rechtsklick auf eine Mail...

Edit: Oder benutzt du das schon? Dann wirst du dort doch händisch verschieben müssen...

bananovic

An dem Wert 26 liegt es nicht. Der Code zeigt bei den Kontextmenüs keine Wirkung.

bananovic

Zitat von Grisu2099

Das verschiebt pauschal die Label nach rechts. Wirkt allerdings nicht im PopUp bei Rechtsklick auf eine Mail...

So ist es. Bei den Hauptmenüs erhalte ich die gleichen Abstände wie ich sie schon habe. Bei den problematischen Kontextmenüs tut sich nichts.

Grisu2099

Mir ist da bis jetzt nur das Kontext-Menü bei Rechtsklick auf eine einzelne Mail aufgefallen... Sonst noch wo?

bananovic

In der Threadpane, wenn ich mit rechts auf eine einzelne Mail klicke, und in der Messagepane. In der Folderpane funktioniert alles.

Grisu2099

Teste mal folgendes CSS:

CSS

#mailContext menu label,
#mailContext menuitem label {
	padding-left: 26px !important;
	}

bananovic

Danke Grisu2099, dieser Code, eingetragen vor dem gesamten Kontextmenü-Code, funktioniert, so wie ich es mir vorgestellt habe. Allerdings sind jetzt bei einigen Untermenüs die Abstände zwischen Icon und Text sehr groß, und zwar bei: Verschieben in, Kopieren in, Schlagwörter, Markieren, Themen sowie bei dem letzten Kontextmenü-Eintrag "Drucken NG".

Ferner habe ich festgestellt, daß die Icons den Text überlagern, wenn ich im Verfassen-Fenster in der Zeile An, Kopie und Blindkopie rechts klicke. Ich dachte, daß das von den Kontextmenü-Einträgen im Hauptfenster gesteuert wird. Ist aber nicht so.

Grisu2099

Zitat von bananovic

sowie bei dem letzten Kontextmenü-Eintrag "Drucken NG".

Da habe ich nur "Drucken..." (und der paßt...)

Zitat von bananovic

daß die Icons den Text überlagern, wenn ich im Verfassen-Fenster in der Zeile An, Kopie und Blindkopie rechts klicke.

Kann ich nicht bestätigen.

Zitat von bananovic

Allerdings sind jetzt bei einigen Untermenüs die Abstände zwischen Icon und Text sehr groß, und zwar bei: Verschieben in, Kopieren in, Schlagwörter, Markieren, Themen

Kann ich bestätigen...

Dann entweder doch jeden Eintrag einzeln ändern, oder die betreffenden Menüs im obigen CSS als Ausnahme definieren.

dharkness21

Zitat von bananovic

Allerdings sind jetzt bei einigen Untermenüs die Abstände zwischen Icon und Text sehr groß, und zwar bei: Verschieben in, Kopieren in, Schlagwörter, Markieren, Themen

Teste bitte die ↓ Variante.

CSS

#mailContext menu label,
#mailContext menuitem label {
    padding-left: 26px !important;
}
#mailContext menu menupopup menu label,
#mailContext menu menupopup menuitem label,
#printingtoolsng_cleidigh_kokkini_net-menuitem-_msgCtxMenu_TopId .menu-iconic-text {
    padding-left: 0px !important;
}

Grisu2099

Zitat von dharkness21

Teste bitte die ↓ Variante.

Damit passen dann zwar die von bananovic genannten Menüs, aber in den anderen Untermenüs (z.B. bei "Öffnen") stimmt es wieder nicht mehr...

bananovic

Danke dharkness21, mit diesem Code sind nun die sehr großen Abstände zwischen Icon und Text bei Verschieben in, Kopieren in, Schlagwörter, Markieren, Themen sowie bei dem letzten Kontextmenü-Eintrag "Drucken NG" auf normales Maß geschrumpft. Dafür überdecken jetzt wieder die Icons den Text in den Untermenüs der Kontextmenü-Einträge Öffnen, Antworten, Weiterleiten und umleiten sowie Organisator in der Threadpane und in der Messagepane.

bananovic

Ich habe das Problem jetzt gelöst. Den Code aus Post 17 Zeilen 5-9 konnte ich so allgemein nicht verwenden. Ich habe statt dessen die sehr großen Abstände nur für die betroffenen Kontextmenü-Einträge (Verschieben in, Kopieren in, Schlagwörter, Markieren, Themen) verringert. Dadurch blieben die Abstände in den anderen Untermenü-Einträgen unverändert auf normalem Maß.

Den Code in Zeilen 1-4 habe ich mit Selektoren für andere Kontextmenüs erweitert, insbesondere auch für den Kalender. Dort trat ebenfalls das Überlappungsproblem auf.

Hier zusammengefaßt der Code in meiner Menu-Icons.css:

CSS

/* ABSTÄNDE ICON - TEXT IN EINIGEN KONTEXTMENÜS IN TB 128 */
    
    #mailContext menu label,
    #mailContext menuitem label,
    #textbox-contextmenu menu label,
    #textbox-contextmenu menuitem label,
    #list-calendars-context-menu menu label,
    #list-calendars-context-menu menuitem label,
    #taskitem-context-menu menu label,
    #taskitem-context-menu menuitem label,
    #calendar-view-context-menu menu label,
    #calendar-view-context-menu menuitem label,
    #calendar-item-context-menu menu label,
    #calendar-item-context-menu menuitem label {
	      padding-left: 24px !important; }
	      
	  #mailContext-moveMenu menupopup menu label,
    #mailContext-moveMenu menupopup menuitem label,
    #mailContext-copyMenu menupopup menu label,
    #mailContext-copyMenu menupopup menuitem label,
    #mailContext-tags menupopup menu label,
    #mailContext-tags menupopup menuitem label,
    #mailContext-mark menupopup menu label,
    #mailContext-mark menupopup menuitem label,
    #mailContext-threads menupopup menu label,
    #mailContext-threads menupopup menuitem label,
    #printingtoolsng_cleidigh_kokkini_net-menuitem-_msgCtxMenu_TopId .menu-iconic-text {
        padding-left: 0px !important;}

Alles anzeigen

Icons in Kontxtmenü überlagern Menütext

Thunderbird 128.4.2 ESR veröffentlicht

Thunderbird 115.16.2 ESR veröffentlicht