wichtiges UPDATE für controller 7.2.2 im stable

[Qlink]

Hi Leute,

ich schaffs einfach nicht die grüne Standardfarbe des basic filter dropdown widgets in türkis zu ändern.
Kann mir jemand helfen und sagen wie das geht ?

Danke.

Beste Grüße

[OliverIO]

@Qlink

In dem du den Adapter aktualisierst.
Es kann allerdings sein, dass die Version, in der das behoben wurde, sich noch in Beta befindet

[Qlink]

@oliverio

Danke für den Hinweis. Ich hab auf die aktuellste Version im Beta Rep aktualisiert. Der aktive Hintergrund ist nun nicht mehr grün sondern blau.

Was ich aber immer noch nicht finde ist, wo kann ich die aktive Hintergrundfarbe ändern ?
Ich sehe nur aktive Textfarbe...

[OliverIO]

@Qlink

schau mal hier
https://forum.iobroker.net/topic/83335/systemfarbe-vis-2-app-anpassen/5

Und hier
https://forum.iobroker.net/topic/84151/vis-2-hintergrund-bleibt-nach-update-auf-2.13.8-schwarz./26

[Qlink]

@oliverio danke für die Links

ich hätte es mit

.tuerkis .MuiButton-colorPrimary {
    background-color: #00CCFF;
}

probiert, aber das Ergebnis ist, dass nun alles türkis ist.

Ich möchte, dass nur das aktiv angewählte Element türkis ist und das andere in grau...

Wie krieg ich das am Besten hin ?

[OliverIO]

@Qlink

Ok dann musst du genauer sagen was du mit aktiver Hintergrundmaterial meinst.

Ein Button hat eigentlich keinen Status. Ein Button wird gedrückt und wenn man loslässt dann ist er wieder normal. Ggfs gibts Hoover.
Wenn in vis bei Button noch eine Zusatzmodul ist musst du schauen wie die css sich im Browser verändert. Das macht man am besten mit den dev Tools des Browsers mit f12

[Qlink]

@oliverio
Im Prinzip möchte ich eigentlich nur, dass die Darstellung wieder genau so funktioniert wie in vis-1.
Die Filter Bar verhält sich eher wie ein Schalter als ein Taster(Button).
Wenn ich auf "Heute" drücke, dann wird mir das Heute-Diagramm angezeigt.
Das wird so lange angezeigt bis ich auf "Morgen" drücke.
Wie eine Art Umschalter.

In vis-1 schaut es so aus, wenn Heute angewählt ist:

und so wenn Morgen ausgewählt ist: (hier werden noch keine Daten angezeigt, da die Strompreise für Morgen erst gegen Mittag verfügbar sind)

Man sieht so auf Grund der Hintergrundfarbe auf den ersten Blick, welches der beiden Diagramme ausgewählt ist.

Diese Darstellung hätte ich gerne auch in vis-2.

[OliverIO]

@Qlink

Hast du mal ein Export des viewsaus vis2
Möglichst so das ich das möglichst einfach nachstellen kann

[Qlink]

@oliverio

hilft dir ein Widget export vom Dropdown Widget ?

der wäre wie folgt:

[
  {
    "tpl": "tplFilterDropdown",
    "data": {
      "bindings": [],
      "items": "[{\"label\":\"Heute\",\"value\":\"Heute\",\"default\":true,\"activeColor\":\"#373737\",\"color\":\"#373737\"},{\"label\":\"Morgen\",\"value\":\"Morgen\",\"default\":false,\"activeColor\":\"#373737\",\"color\":\"#373737\"}]",
      "g_common": true,
      "type": "horizontal_buttons",
      "dropdownVariant": "standard",
      "buttonsVariant": "text",
      "dropdownSmall": false,
      "noAllOption": true,
      "g_style": true,
      "g_css_background": true,
      "g_fixed": true,
      "g_css_border": true,
      "g_css_shadow_padding": true,
      "g_css_font_text": true,
      "name": null,
      "comment": null,
      "class": "tuerkis",
      "filterkey": null,
      "multi-views": null,
      "locked": null
    },
    "style": {
      "bindings": [],
      "left": 760,
      "top": 443,
      "width": 200,
      "height": "30",
      "background": "#B2B2B2",
      "background-color": "#B2B2B2",
      "background-image": "",
      "border-width": "",
      "border-style": "solid",
      "border-color": "#B2B2B2",
      "border-radius": "5",
      "padding": "",
      "overflow-x": "",
      "color": "#373737"
    },
    "widgetSet": "basic",
    "_id": "i000001"
  }
]

[OliverIO]

@Qlink sagte:

dann nimm die das folgende css

.mybuttongroup:not(:has(.MuiButton-root:focus)) .MuiButtonGroup-firstButton {
  background-color: red !important;
}

.mybuttongroup .MuiButton-root:focus {
  background-color: red !important;
}

im widget musst du in css class
mybuttongroup eintragen.
du kannst auch einen anderen namen wählen, dann musst du mybuttongroup im css anpassen. dort muss der punkt davor aber bleiben

zur veranschaulichen habe ich jetzt die farbe rot gewählt.

diese lösung ist als workaraound zu sehen.
besser wäre, wenn man in vis den status über einen extra klassennamen wie bspw active mit aufnehmen würde. dann können man ein einfacheren css selektor wählen, da die farbe in react direkt per logik gesetzt wird. leider wählt react einen dynamisch generierten css klassennamen, der sich immer wieder mal ändert.

https://github.com/ioBroker/ioBroker.vis-2/blob/71c88db403f0d5ac97d1d31a0071fcec66ee9114/packages/iobroker.vis-2/src-vis/src/Vis/Widgets/Basic/BasicFilterDropdown.tsx#L457

evtl kannst du da im vis-2 repository auf github einen issue dazu erstellen

[Qlink]

@oliverio

Danke für deine Hilfe ! Mit deinem css Code funtkionierts nun genau so wie es in vis-1 Standard war und wie ichs mir von vorneherein erwartet/gewünscht hätte :)

Danke!