Color a Div, Span, or Glyph-icon in Response to Data

#css

#javascript

#less

#databinding

#angular.js

The Problem: We want features in the dom to be one of 3 colors, and we want that color to be determined by data.

The Solution: Insert a string, which happens to be a classname, into the CSS class in the HTML using Angular.

Our Approach...

The HTML:

On the div for the subheader, we make a function call.

<div class="entry-subheader-box {{ journalEntry.getAcceleration() }}">

After the magic happens, if you inspect the code with the developer tools, the code reads:

<div class="entry-subheader-box acceleration-neutral">

See? "Acceleration-neutral" gets fed into the class, right beside "entry-subheader-box", which is the styling for the div (not including color, which is set by "acceleration").

The JS:

Acceleration is a field in our database. So, here we have a function that checks this.acceleration for a value: -1, 0, or 1. When acceleration === 1, then a string called "acceleration-positive" is returned, and so on for -1 and 0. Then if you check out our stylesheet, you'll see that we have a CSS/LESS rule for each of these strings.

getAcceleration: function() {
  if(!this.acceleration) {
    return "acceleration-neutral";
  }
  if(this.acceleration === 1) {
    return "acceleration-positive";
  }
  else if(this.acceleration === -1) {
    return "acceleration-negative";
  }
  else {
    return "acceleration-neutral";
  }
},

First, just for clarity, I'll show you how we set the colors in our CSS using LESS variables, so that when you get to the stylesheet you won't be confused about seeing words instead of HEX codes.

Variables.less:

/**
 * Acceleration
 */
@acceleration-up: #8dc65f;
@acceleration-up-lighter: #c8e4b2;
@acceleration-mid: #d1cfe9;
@acceleration-mid-lighter: #e9e8f4;
@acceleration-down: #d52134;
@acceleration-down-lighter: #ea8a94;

Stylesheet:

Here in the stylesheet, we define the colors for acceleration positive, negative, and neutral. When our JS sends a string to the HTML, the class rule is then applied and we get the desired color!

/**
 * Acceleration colors
 * see variables.less
 */
.acceleration-positive {
  background: @acceleration-up;
  color: @text-color-inverse;
}
.acceleration-positive-lighter {
  background: @acceleration-up-lighter;
}
.acceleration-negative {
  background: @acceleration-down;
  color: @text-color-inverse;
}
.acceleration-negative-lighter {
  background: @acceleration-down-lighter;
}
.acceleration-neutral {
  background: @acceleration-mid;
}
.acceleration-neutral-lighter {
  background: @acceleration-mid-lighter;
}
.mode-icon.acceleration-positive-lighter i:before {
  background: @acceleration-up;
}
.mode-icon.acceleration-negative-lighter i:before {
  background: @acceleration-down;
}
.mode-icon.acceleration-neutral-lighter i:before {
  background: @acceleration-mid;
}
/**
 * End Acceleration header in journal entry
 */

The Result:

Here is the end result, showing neutral, positive, and negative coloration. These colors change instantly with Angular databinding!