Sprungziel-Icons Verhalten in v3.3.1

[Sipple]

Hi wvhn

Ich habe gestern und heute meinen Backup-Server mit v3.3.1 installiert. Mach ich immer zuerst, bevor ich meinen Produktiv-Server anfasse.
Soweit läuft alles, aber mir ist am Verhalten von Icons, die als Sprungziel auf eine andere Seite dienen, etwas aufgefallen.
Beispiel das Home Icon links oben. Das ist jetzt farblich auf der tatsächlichen Homepage immer icon1, sonst icon0. Außerdem blinkt es kurz, wenn man drauf clickt.
Vorher war es immer icon 0 und wurde icon1, sobald man im Browser (Desktop) den Mauszeiger über das Icon bewegte.
An der Stelle habe ich damit kein Problem.

Anders sieht es da bei einigen Icons aus, die ich innerhalb einer Seite als Sprungziel verwende. Beispiel:

grafik.png

Die waren vorher (v3.2.2) alle icon0 und wurden auch nur icon1, wenn man mit der Maus darüber schwebte.
Dadurch konnte man schön sehen, dass das ein Link ist. Jetzt sind sie immer icon1.

Definiert sind die so:

    <div class="block">
        <div class="set-1" data-role="collapsible-set" data-theme="c" data-content-theme="a" data-mini="true">
            <div data-role="collapsible" data-collapsed="false">
                <h3>Kontrollfunktionen</h3>
                <table width=100%>
                    <tr>
                        <td align=left>                
                            <a id="Config-Link" class="icon1" href="index.php?page=config">
                            <img class="icon" src="{{ icon0 }}edit_settings.svg" alt="config" /></a> &nbsp; &nbsp; &nbsp; Konfiguration
                            <br />
                            <a id="Monitor-Link" class="icon1" href="index.php?page=smarthomeNG">
                            <img class="icon" src="{{ icon0 }}logo_smarthomeNG.svg" alt="smarthomeNG" /></a> &nbsp; &nbsp; &nbsp; SmartHomeNG Monitor
                            <br />
                            <a id="SHNG-Link" class="icon1" href="http://192.168.178.130:8383/admin/login?returnUrl=%2F" target="_blank">
                            <img class="icon" src="{{ icon0 }}logo_smarthomeNG.svg" alt="smarthomeNG" /></a> &nbsp; &nbsp; &nbsp; SmartHomeNG Admin Interface
                            <br />
                            <a id="Doku-Link" class="icon1" href="index.php?pages=docu&page=index" target="_blank">
                            <img class="icon" src="{{ icon0 }}edit_copy.svg" alt="docu" /></a> &nbsp; &nbsp; &nbsp; Dokumentation
                        </td>
                    </tr>
                </table>                
            </div>
        </div>
    </div>​

Die Links funktionieren, sieht nur doof aus. Wenn ich da alle icon1 in icon0 ändere, sieht es natürlich wieder normal aus, aber die Funktionalität, dass beim mouseover die Farbe zu icon1 wird, ist grundsätzlich weg.
Bekommt man die alte Funktionalität in dieser Version auf einfache Art und Weise zurück?
Wenn das nicht geht, was muss ich tun, damit meine eigenen Link-Icons sich so verhalten wie das Home Icon?

Danke

Martin

[wvhn]

Moin Martin,

im Ausdruck

<a id="Config-Link" class="icon1" href="index.php?page=config">
<img class="icon" src="{{ icon0 }}edit_settings.svg" alt="config" /></a>

sind das “icon1” im Anchor Tag und das „icon“ im Image-Tag für die Einbettung der svg-icons erforderlich, so dass diese überhaupt mit Klassen gestylt werden können. Wenn Du im Image-Tag hinter „icon“ noch ein „icon0“ setzt, werden die icons wieder wie gewohnt dargestellt.

Der hover-Effekt müsste dann auch wieder gehen. Wenn nicht, kann man ihn in der visu.js im Ordner der eigenen Seiten definieren. Das kann ich nach dem Wochenende nochmal testen und ggfls. nachreichen.

Gruß
Wolfram

[Sipple]

Danke Wolfram.

Meinst du mit

Wenn Du im Image-Tag hinter „icon“ noch ein „icon0“ setzt, werden die icons wieder wie gewohnt dargestellt.

so?

<img class="icon icon0" src="{{ icon0 }}edit_settings.svg" alt="config" />

So stimmt die Farbe zwar wieder, aber kein hover-Effekt.

[wvhn]

ja genau.

a.icon1 > svg.icon0:hover  {
    stroke: #a6f829;
    fill: #a6f829;
    stop-color: #a6f829;​
}

in der visu.css sollte den hover-Effekt zurück bringen. Die Farbe ist für das Design „greenhornet“. Für andere Designs ist jeweils deren Farbe für icon1 zu verwenden.

Gruß
Wolfram

[Sipple]

Funktioniert!
Vielen Dank Wolfram.