0.13.0-dev: Switch mit Icon zu groß

[mivola]

Hallo zusammen,

ich habe aktuell ein UI-Problem in der 0.13.0-dev: ein Switch mit einem Icon (per Mapping), hat eine Höhe, die nicht zu Switches ohne ein Icon passt. Dadurch kommt das ganze UI durcheinander, weil Zeilen nicht mehr zusammenpassen.

Hier eine kleine Beispielconfig:

image.png

In der Version 0.10.2 sieht das ganze noch besser aus:
image.png

Hier der Code:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<pages xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" design="metal" lib_version="9" xsi:noNamespaceSchemaLocation="../visu_config.xsd">
  <meta>
    <mappings>
      <mapping name="OpenClose">
        <entry value="0">
          <icon name="fts_window_2w_open" color="red"/>
        </entry>
        <entry value="1">
          <icon name="fts_window_2w"/>
        </entry>
      </mapping>
    </mappings>
  </meta>
  <page name="Übersicht" showtopnavigation="false" showfooter="false" shownavbar-left="true">
      <group nowidget="true">
        <layout colspan="12"/>
        <group name="Licht">
          <layout colspan="6"/>
          <switch mapping="OnOff_Licht" styling="GreyGrey" align="center" flavour="lithium">
            <layout colspan="3"/>
            <label>Decke</label>
            <address transform="DPT:1.001" mode="write">1/3/30</address>
            <address transform="DPT:1.001" mode="read">1/3/31</address>
          </switch>
          <switch mapping="OpenClose" styling="GreyGrey" align="center" flavour="lithium">
            <layout colspan="3"/>
            <label>Fenster</label>
            <address transform="DPT:1.001" mode="write">1/3/30</address>
            <address transform="DPT:1.001" mode="read">1/3/31</address>
          </switch>
        </group>
      </group>
  </page>
</pages>​

Generell noch die Frage: ist es möglich die Details des Metal-Design aus der 0.10 genauso in 0.13 zu verwenden/einzustellen? Also runde Ecken, Schatten unter den Buttons, vertikaler Farbverlauf in einer Zeile, ...?

Danke,
Micha

[Chris M.]

Wird es besser, wenn Du neben dem colspan auch noch ein rowspan="1" mit angibst?

Zum Design: Hilft das hier? https://www.cometvisu.org/CometVisu/...-metal-designs

[mivola]

Wird es besser, wenn Du neben dem colspan auch noch ein rowspan="1" mit angibst?

Zum Design: Hilft das hier? https://www.cometvisu.org/CometVisu/...-metal-designs

rowspan="1" hilft dass beide Zellen gleich groß sind, aber das Icon is mMn immernoch zu hoch:
image.png
Aber nach dem Update des Containers mit dem Fix funktioniert zumindest die Zeilenhöhe gut. Aber die Icons sind immernoch unterschiedlich hoch/breit:
image.png

image.pngimage.png

image.pngimage.png

Evtl könnte man das mit etwas CSS Magie noch besser hinbekommen :-)

[peuter]

Das ist leichter gesagt als getan. Die Breite / Höhe der Buttons wird durch dein Inhalt bestimmt, wenn der Inhalt unterschiedlich ist, ist auch sind auch die Dimensionen der Buttons unterschiedlich. Das müsste man nun überschreiben und fixe Werte für Höhe / Breite angeben, damit würde ich aber wieder die Visus von anderen User kaputt machen, weil dann Inhalte abgeschnitten werden würden, wenn man mal mehr Text in einem Button hat, daher werde ich das nicht machen.

Du hast ja alle Möglichkeiten mit eigenen CSS-Regeln alles zu ändern und nach Deinen Wünschen zu formen. Das müsstest Du dann hier machen und selbst die CSS Magie zaubern.

[mivola]

Alles klar, kein Problem. So wichtig ist das ja nun auch nicht...