Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

Commit

Permalink
feat(colors): support hue-x on primary/accent/warn/background palettes
Browse files Browse the repository at this point in the history 
- Added hue-x support e.g '{background: 'primary-hue-2-0.3'}'

fixes #8175. closes #8257
  • Loading branch information
@EladBezalel @ThomasBurleson
EladBezalel authored and ThomasBurleson committed May 11, 2016
1 parent cc54745 commit d62bb5e
Show file tree
Hide file tree
Showing 2 changed files with 130 additions and 15 deletions.
30 changes: 26 additions & 4 deletions src/components/colors/colors.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,12 +170,10 @@
var hasTheme = angular.isDefined($mdTheming.THEMES[parts[0]]);
var theme = hasTheme ? parts.splice(0, 1)[0] : $mdTheming.defaultTheme();

var defaultHue = parts[0] !== 'accent' ? 500 : 'A200';

return {
theme: theme,
palette: extractPalette(parts, theme),
hue: parts[1] || defaultHue,
hue: extractHue(parts, theme),
opacity: parts[2] || 1
};
}
Expand Down Expand Up @@ -203,6 +201,30 @@

return palette;
}

function extractHue(parts, theme) {
var themeColors = $mdTheming.THEMES[theme].colors;

if (parts[1] === 'hue') {
var hueNumber = parseInt(parts.splice(2, 1)[0],10);

if (hueNumber < 1 || hueNumber > 3) {
throw new Error($mdUtil.supplant('mdColors: \'hue-{hueNumber}\' is not a valid hue, can be only \'hue-1\', \'hue-2\' and \'hue-3\'', {hueNumber: hueNumber}));
}
parts[1] = 'hue-' + hueNumber;

if (!(parts[0] in themeColors)) {
throw new Error($mdUtil.supplant('mdColors: \'hue-x\' can only be used with [{availableThemes}], but was used with \'{usedTheme}\'', {
availableThemes: Object.keys(themeColors).join(', '),
usedTheme: parts[0]
}));
}

return themeColors[parts[0]].hues[parts[1]];
}

return parts[1] || themeColors[parts[0] in themeColors ? parts[0] : 'primary'].hues['default'];
}
}

/**
Expand All @@ -220,7 +242,7 @@
* ## `[?theme]-[palette]-[?hue]-[?opacity]`
* - [theme] - default value is the default theme
* - [palette] - can be either palette name or primary/accent/warn/background
* - [hue] - default is 500
* - [hue] - default is 500 (hue-x can be used with primary/accent/warn/background)
* - [opacity] - default is 1
*
* > `?` indicates optional parameter
Expand Down
115 changes: 104 additions & 11 deletions src/components/colors/colors.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,24 +21,29 @@ describe('md-colors', function () {
describe('directive', function () {

function createElement(scope, options) {
var elementString = supplant('<div md-colors="{background: \'{theme}-{palette}{hue}{opacity}\'}" {attrs}></div>', {
attrs : options.attrs,
palette : options.palette,
theme : options.theme || 'default',
hue : '-' + (options.hue || '500'),
opacity : '-' + (options.opacity || 1)
var style = supplant("{theme}-{palette}-{hue}-{opacity}", {
attrs : options.attrs,
palette : options.palette,
theme : options.theme || 'default',
hue : options.hue || (options.palette === 'accent' ? 'A200' : '500'),
opacity : options.opacity || 1
});
var markup = supplant('<div md-colors="{background: \'{0}\'}" {1} ></div>', [style, options.attrs]);
var element = $compile( markup )(scope);

scope.$apply(function() {
angular.element(document.body).append( element );
});

var element = $compile(elementString)(scope);
scope.$apply();

return element;
}

function setup(options) {
var hue = options.hue = options.hue || '500';

var element = createElement(scope, {
palette: options.palette,
hue: options.hue = options.hue || '500',
hue: hue,
opacity: options.opacity,
theme: options.theme
});
Expand Down Expand Up @@ -143,7 +148,7 @@ describe('md-colors', function () {
it('should accept accent palette', function() {
var type = 'accent';
var paletteName = $mdTheming.THEMES['default'].colors[type].name;
var color = $mdColorPalette[paletteName]['500'].value;
var color = $mdColorPalette[paletteName]['A200'].value;
var expectedRGB = supplant('rgb({0}, {1}, {2})', [color[0], color[1], color[2]]);
var element = createElement(scope, { palette: type });

Expand Down Expand Up @@ -176,6 +181,74 @@ describe('md-colors', function () {
expect(element[0].style.background).toContain( expectedRGB );
});

describe('hues', function () {
/**
* <div md-colors="{background: 'primary-hue-1'}">
*/
it('should accept primary color palette with hue 1', function() {
var type = 'primary';
var hue = 'hue-1';
var palette = $mdTheming.THEMES['default'].colors[type];
var paletteName = palette.name;
var paletteHue = palette.hues[hue];
var color = $mdColorPalette[paletteName][paletteHue].value;
var expectedRGB = supplant('rgb({0}, {1}, {2})', [color[0], color[1], color[2]]);
var element = createElement(scope, { palette: type, hue: hue });

expect( element[0].style.background ).toContain( expectedRGB );
});

/**
* <div md-colors="{background: 'primary-hue-2'}">
*/
it('should accept primary color palette with hue 2', function() {
var type = 'primary';
var hue = 'hue-2';
var palette = $mdTheming.THEMES['default'].colors[type];
var paletteName = palette.name;
var paletteHue = palette.hues[hue];
var color = $mdColorPalette[paletteName][paletteHue].value;
var expectedRGB = supplant('rgb({0}, {1}, {2})', [color[0], color[1], color[2]]);
var element = createElement(scope, { palette: type, hue: hue });

expect( element[0].style.background ).toContain(expectedRGB);
});

/**
* <div md-colors="{background: 'primary-hue-3'}">
*/
it('should accept primary color palette with hue 3', function() {
var type = 'primary';
var hue = 'hue-3';
var palette = $mdTheming.THEMES['default'].colors[type];
var paletteName = palette.name;
var paletteHue = palette.hues[hue];
var color = $mdColorPalette[paletteName][paletteHue].value;
var expectedRGB = supplant('rgb({0}, {1}, {2})', [color[0], color[1], color[2]]);
var element = createElement(scope, { palette: type, hue: hue });

expect(element[0].style.background).toContain(expectedRGB);
});

/**
* <div md-colors="{background: 'primary-hue-1-0.2'}">
*/
it('should accept primary color palette with hue 1 and 0.2 opacity', function() {
var type = 'primary';
var hue = 'hue-1';
var opacity = 0.2;

var palette = $mdTheming.THEMES['default'].colors[type];
var paletteName = palette.name;
var paletteHue = palette.hues[hue];
var color = $mdColorPalette[paletteName][paletteHue].value;
var expectedRGB = supplant('rgba({0}, {1}, {2}, {3})', [color[0], color[1], color[2], opacity]);
var element = createElement(scope, { palette: type, hue: hue, opacity: opacity });

expect(element[0].style.background).toContain(expectedRGB);
});
});

describe('custom themes', function () {

/**
Expand Down Expand Up @@ -336,5 +409,25 @@ describe('md-colors', function () {
var themeColor = $mdColors.getThemeColor('red-200');
expect(themeColor).toBe( expectedRGB );
}));

describe('palette hues', function () {
it('should throw error on hue-4', inject(function ($mdColors) {
expect(function () {
$mdColors.getThemeColor('primary-hue-4')
}).toThrowError();
}));

it('should throw error on hue-0', inject(function ($mdColors) {
expect(function () {
$mdColors.getThemeColor('primary-hue-0')
}).toThrowError();
}));

it('should throw error on usage of defined palette and hue', inject(function ($mdColors) {
expect(function () {
$mdColors.getThemeColor('red-hue-1')
}).toThrowError();
}));
});
})
});

0 comments on commit d62bb5e

Please sign in to comment.