Color Picker directive

colorpicker.directive.js

'use strict';

angular.module('myApp')
  .directive('colorpicker', function () {
    return {
      templateUrl: 'app/colorpicker/colorpicker.html', // Replace with your path
      restrict: 'EA',
      require: 'ngModel',
      scope: {
        colors: '=?',
        active: '=ngModel'
      },
      link: function (scope, element, attrs, ctrl) {

        scope.colors = scope.colors || [
          'bluejeans-light',
          'bluejeans-dark',
          'aqua-light',
          'aqua-dark',
          'mint-light',
          'mint-dark',
          'grass-light',
          'grass-dark',
          'sunflower-light',
          'sunflower-dark',
          'bittersweet-light',
          'bittersweet-dark',
          'grapefruit-light',
          'grapefruit-dark',
          'lavender-light',
          'lavender-dark',
          'pinkrose-light',
          'pinkrose-dark',
          'lightgray-light',
          'lightgray-dark',
          'mediumgray-light',
          'mediumgray-dark',
          'darkgray-light',
          'darkgray-dark'
        ];

        scope.isHex = function (color) {
          return color.charAt(0) === '#';
        };

        scope.select = function (color, event) {
          ctrl.$setViewValue(color, event);
        };

      }
    };
  });

colorpicker.html

<div class="colorpicker">
  <div class="color no-color" ng-class="{active: !active}" ng-click="select(null, $event)">
    <i class="fa fa-2x fa-ban"></i>
  </div>
  <div class="color" ng-repeat="color in colors" ng-class="{active: active == color}" ng-click="select(color, $event)">
    <div ng-if="isHex(color)" class="fill" style="background: {{color}}"></div>
    <div ng-if="!isHex(color)" class="fill bg-{{color}}"></div>
  </div>
</div>

colorpicker.scss

// Assuming the bootflat colors are defined.
//    See http://bootflat.github.io/documentation.html
//    or  https://github.com/bootflat/bootflat.github.io/blob/master/bootflat/scss/bootflat/_global.scss
$colors:
  "bluejeans-light"   $bluejeans-light,
  "bluejeans-dark"    $bluejeans-dark,
  "aqua-light"        $aqua-light,
  "aqua-dark"         $aqua-dark,
  "mint-light"        $mint-light,
  "mint-dark"         $mint-dark,
  "grass-light"       $grass-light,
  "grass-dark"        $grass-dark,
  "sunflower-light"   $sunflower-light,
  "sunflower-dark"    $sunflower-dark,
  "bittersweet-light" $bittersweet-light,
  "bittersweet-dark"  $bittersweet-dark,
  "grapefruit-light"  $grapefruit-light,
  "grapefruit-dark"   $grapefruit-dark,
  "lavender-light"    $lavender-light,
  "lavender-dark"     $lavender-dark,
  "pinkrose-light"    $pinkrose-light,
  "pinkrose-dark"     $pinkrose-dark,
  "lightgray-light"   $lightgray-light,
  "lightgray-dark"    $lightgray-dark,
  "mediumgray-light"  $mediumgray-light,
  "mediumgray-dark"   $mediumgray-dark,
  "darkgray-light"    $darkgray-light,
  "darkgray-dark"     $darkgray-dark;

@each $color in $colors {
  .bg-#{nth($color, 1)} {
    background-color: nth($color, 2);
    color: white;
  }
}

.colorpicker {
  min-height: 50px;
  max-height: 250px;
  width: 100%;
  padding: 3px;
  border-radius: 4px;
  border: 1px solid #bbb;
  overflow-y: auto;

  .color {
    display: inline-block;
    width: 35px;
    height: 35px;
    overflow: hidden;
    margin: 3px;
    border-radius: 2px;
    box-shadow: 1px 1px 1px rgba(0,0,0,0.1);

    &.active {
      width: 40px;
      height: 40px;
      margin: 0 10px;
      border: 3px solid white;
      box-shadow: 0 0 5px rgba(0,0,0,0.4);
    }

    &.no-color {
      text-align: center;
      padding-top: 3px;
      box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
      color: #e74c3c;

      &.active {
        border: 3px solid $darkgray-light;
      }
    }

    .fill {
      width: 100%;
      height: 100%;
    }
  }
}

example.html

<!-- Directive is used like this -->
<colorpicker ng-model="category.color"></colorpicker>

<!-- You can also override the list of colors -->
<colorpicker ng-model="category.color" colors="myColors"></colorpicker>