Add mdTheming to angular-material (#20773)

This commit is contained in:
Matt Traynham
2017-10-23 18:09:37 -04:00
committed by Sheetal Nandi
parent 247e3671fe
commit b172f596e6
2 changed files with 73 additions and 0 deletions

View File

@@ -264,6 +264,48 @@ myApp.controller('ToastController', ($scope: TestScope, $mdToast: ng.material.IT
};
});
myApp.controller('ThemeController', ($element: JQuery, $scope: TestScope, $mdTheming: ng.material.IThemingService) => {
$mdTheming($element);
const PALETTES: ng.material.IConfiguredColorPalette = $mdTheming.PALETTES;
const redPalette: ng.material.IPalette = PALETTES.red;
const myPalette: ng.material.IPalette = PALETTES.myPalette;
const THEMES: ng.material.IConfiguredThemes = $mdTheming.THEMES;
const defaultTheme: ng.material.ITheme = THEMES.default;
const myTheme: ng.material.ITheme = THEMES.myTheme;
$scope['registered'] = () => {
let registered: boolean = $mdTheming.registered('default');
registered = $mdTheming.registered('myTheme');
};
$scope['defaultTheme'] = () => {
const themeName: string = $mdTheming.defaultTheme();
};
$scope['generateTheme'] = () => {
$mdTheming.generateTheme('myTheme');
};
$scope['setBrowserColors'] = () => {
const browserColors: ng.material.IBrowserColors = {
theme: 'default',
palette: 'neonRed',
hue: '500'
};
const remove: () => void = $mdTheming.setBrowserColor(browserColors);
};
$scope['defineTheme'] = () => {
const newTheme: ng.material.IDefineThemeOptions = {
primary: 'blue',
accent: 'orange',
dark: true
};
$mdTheming.defineTheme('newTheme', newTheme);
};
});
myApp.controller('PanelController', ($scope: TestScope, $mdPanel: ng.material.IPanelService, $q: ng.IQService) => {
$scope['createPanel'] = () => {
const config: ng.material.IPanelConfig = {

View File

@@ -290,6 +290,25 @@ declare module 'angular' {
configuration(): IThemeConfig;
}
interface IDefineThemeOptions {
primary?: string;
accent?: string;
warn?: string;
background?: string;
dark?: boolean;
}
interface IThemingService {
PALETTES: IConfiguredColorPalette; // get only
THEMES: IConfiguredThemes; // get only
(element: JQuery): void;
registered(themeName: string): boolean;
defaultTheme(): string;
generateTheme(name: string): void;
setBrowserColor(options: IBrowserColors): () => void;
defineTheme(name: string, options: IDefineThemeOptions): IPromise<string>;
}
interface IDateLocaleProvider {
months: string[];
shortMonths: string[];
@@ -330,6 +349,18 @@ declare module 'angular' {
'blue-grey': IPalette;
}
interface IConfiguredColorPalette extends IColorPalette {
[name: string]: IPalette;
}
interface IThemes {
default: ITheme;
}
interface IConfiguredThemes extends IThemes {
[name: string]: ITheme;
}
interface IPanelConfig {
id?: string;
template?: string;