How to change color on Button Caption depending on data?

Support
#1

I am converting a legacy application from Oracle Forms to Cuba. One of the buttons in our old application was a link to a “Notes” table. The button, which just contains the text “N” as a label, is colored Red if there are no notes and colored Green if there are notes already entered for any particular entry.

I can use a generated column in my table to create a button that links to my notes. I can also determine whether notes already exist or not. I figure it is easier to change the text color of the “N” in the box to Red or Green as necessary. Unfortunately, I can’t figure out how to do it! Here’s what I have so far:


offersTable.addGeneratedColumn("notesBtn", new Table.ColumnGenerator() {
    @Override
    public Component generateCell(Entity entity) {
        Button button = (Button) componentsFactory.createComponent(Button.NAME);
        Offer currentOffer = (Offer) ((Datasource)offersTable.getItemDatasource(entity)).getItem();
        LoadContext<RaNote> loadContext = LoadContext.create(RaNote.class)
                     .setQuery(LoadContext.createQuery("select c from rade$RaNote c where c.recType = 'N' and c.tabvar = :tabvar and c.recId = :recId")
                     .setParameter("tabvar", "OFFER")
                     .setParameter("recId", currentOffer.getId())
                     )
                   .setView(View.LOCAL);
         List<RaNote> notes = dataManager.loadList(loadContext);
        if (notes.size() == 1) {
           button.setStyleName("v-button-caption-red");
        } else {
            button.setStyleName("v-button-caption-green");
       }
       button.setAction( new BaseAction ("N") {
             @Override
             public void actionPerform(Component component) {
                  openWindow("rade$raNote.browse",
                           WindowManager.OpenType.DIALOG,
                           ParamsMap.of("tabvar","OFFER", "recId", currentOffer.getId())
                  );
           }
      });
     return button;
 }

This creates a button, which displays just fine and the attached action works fine. I then used the Create Theme Extension function to extend Havana (the theme I’m using).

I put the following code in havana-ext.scss:


@mixin com_paslists_rade-havana-ext {

    @include havana;

    .v-button-caption-red {
        color: red;
    }

    .v-button-caption-green {
        color: green;
    }
}

I just can’t seem to set the color properly. How do I do this?

#2

Hi,

In havana theme button color is specified for a very specific selector: .v-button .v-button-wrap .v-button-caption. To override it you can use the following CSS rule:


.red-button .v-button-wrap .v-button-caption {
  color: red;
}

Please note that havana is our legacy theme and is not recommended for new projects.

#3

Thanks, that worked.

I know that havana is legacy theme, but I much prefer it because it shows more data on a screen. I find that halo is too large (even though it’s what everybody seems to like these days). Call me old-fashioned! :slight_smile:

#4

As an alternative to Havana, consider modifying Halo theme as explained here (see Modifying common parameters) or here.