search

vogellacompany / eclipse-css-example

1 stars 0 forks source link

Dynamic button behavior #4

Open vogella opened 2 years ago

vogella commented 2 years ago

Question:

Mir scheint, dass die CSS-Selektoren und die Initialisierung der dynamischen CSS-Elemente komisch wechselwirken...

Ich versuche gerade, nur TOGGLE und PUSH-Buttons zu stylen (radio und check buttons mit Hintergrund sehen merkwuerdig aus).

Experiment 1:

Im css file:

Button[style~='SWT.PUSH'], Button[style~='SWT.TOGGLE'] {

   background-color: white;

   color: black;

}

Wenn ich dann

Button:checked {

background-color: green;

color: white;

}

im CSS scratchpad (vom spy) setze, wirkt es sich nur auf radio und check buttons aus (die dann aber natuerlich nicht dynamisch), hat aber keine Auswirkung auf PUSH und TOGGLE-Buttons (ueberraschend fuer mich).

Experiment 2:

Im css file:

Button[style~='SWT.PUSH'], Button[style~='SWT.TOGGLE'] {

   background-color: white;

   color: black;

}

Button:checked Button[style~='SWT.PUSH'], Button:checked Button[style~='SWT.TOGGLE'] {

background-color: green;

color: white;

}

… dann wird der checked style ueberhaupt nicht angewendet. (Benutze ich die korrekte Syntax?)

Experiment 3:

Im css file:

Button[style~='SWT.PUSH'], Button[style~='SWT.TOGGLE'] {

   background-color: white;

   color: black;

}

Im scratch pad:

Button {

   background-color: red;

   color: black;

}

Wirkt sich NUR auf radio und check-Buttons aus, und erneutes Setzen von

Button[style~='SWT.PUSH'], Button[style~='SWT.TOGGLE'] {

im scratchpad mit anderen Farben hat gar keine Auswirkungen.

(Wahrscheinlich ist das Scratchpad fuer dynamisches CSS schlecht geeignet, aber ueber trial und error die richtige Syntax herauszufinden ist ohne auch nicht so lustig…)

Ist das Verhalten so fuer dich erwartungskonform?

vogella commented 2 years ago

In Experiment 2 fehlt in Komma.

vogella commented 2 years ago

Richtige Syntax habe ich mal auf Master gepushed mit einen toogle-push.css, das ist aktuell aktiv, kannst Du über den product extension point wieder bei Bedarf ändern.

Button[style~='SWT.PUSH'], Button[style~='SWT.TOGGLE'] { background-color: pink; }

Button[style~='SWT.PUSH']:hover, Button[style~='SWT.TOGGLE']:hover { background-color: pink; }

Button:checked { background-color: green; }

Button:disabled { background-color: red; }

Button:hover { background-color: blue; }

vogella commented 2 years ago

Hier wäre ein Unit test für das Szenario:

@Test
public void ensureDisabledToogleButtonCanBeStyledInIsolation() {
    Button buttonToTest = createTestButton(
            "Button[style~='SWT.TOGGLE']:disabled { background-color: #FF0000; color: #0000FF }", SWT.TOGGLE);

    buttonToTest.setEnabled(false);

    engine.applyStyles(buttonToTest, true);
    assertEquals(RED, buttonToTest.getBackground().getRGB());
    assertEquals(BLUE, buttonToTest.getForeground().getRGB());

    Button unStyledButton = createTestButton(
            "Button[style~='SWT.CHECK']:disabled { background-color: #FF0000; color: #0000FF }", SWT.CHECK);

    assertNotEquals(RED, unStyledButton.getBackground().getRGB());
    assertNotEquals(BLUE, unStyledButton.getForeground().getRGB());
}