office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
240 lines • 9.66 kB
JavaScript
define(["require", "exports", "../../Styling", "./PersonaConsts"], function (require, exports, Styling_1, PersonaConsts_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var GlobalClassNames = {
root: 'ms-Persona',
size10: 'ms-Persona--size10',
size16: 'ms-Persona--size16',
size24: 'ms-Persona--size24',
size28: 'ms-Persona--size28',
size32: 'ms-Persona--size32',
size40: 'ms-Persona--size40',
size48: 'ms-Persona--size48',
size72: 'ms-Persona--size72',
size100: 'ms-Persona--size100',
available: 'ms-Persona--online',
away: 'ms-Persona--away',
blocked: 'ms-Persona--blocked',
busy: 'ms-Persona--busy',
doNotDisturb: 'ms-Persona--donotdisturb',
offline: 'ms-Persona--offline',
details: 'ms-Persona-details',
primaryText: 'ms-Persona-primaryText',
secondaryText: 'ms-Persona-secondaryText',
tertiaryText: 'ms-Persona-tertiaryText',
optionalText: 'ms-Persona-optionalText',
textContent: 'ms-Persona-textContent'
};
exports.getStyles = function (props) {
var className = props.className, showSecondaryText = props.showSecondaryText, theme = props.theme;
var palette = theme.palette;
var classNames = Styling_1.getGlobalClassNames(GlobalClassNames, theme);
var size = PersonaConsts_1.sizeBoolean(props.size);
var presence = PersonaConsts_1.presenceBoolean(props.presence);
var showSecondaryTextDefaultHeight = '16px';
var sharedTextStyles = {
color: palette.neutralSecondary,
fontWeight: Styling_1.FontWeights.regular,
fontSize: Styling_1.FontSizes.small
};
return {
root: [
classNames.root,
theme.fonts.medium,
Styling_1.normalize,
{
color: palette.neutralPrimary,
fontSize: Styling_1.FontSizes.medium,
fontWeight: Styling_1.FontWeights.regular,
position: 'relative',
height: PersonaConsts_1.personaSize.size48,
minWidth: PersonaConsts_1.personaSize.size48,
display: 'flex',
alignItems: 'center',
selectors: {
'.contextualHost': {
display: 'none'
},
':hover': {
selectors: {
$primaryText: {
color: palette.neutralDark
}
}
}
}
},
size.isSize10 && [
classNames.size10,
{
height: PersonaConsts_1.personaSize.size10,
minWidth: PersonaConsts_1.personaSize.size10
}
],
size.isSize16 && [
classNames.size16,
{
height: PersonaConsts_1.personaSize.size16,
minWidth: PersonaConsts_1.personaSize.size16
}
],
size.isSize24 && [
classNames.size24,
{
height: PersonaConsts_1.personaSize.size24,
minWidth: PersonaConsts_1.personaSize.size24
}
],
size.isSize24 &&
showSecondaryText && {
height: '36px'
},
size.isSize28 && [
classNames.size28,
{
height: PersonaConsts_1.personaSize.size28,
minWidth: PersonaConsts_1.personaSize.size28
}
],
size.isSize28 &&
showSecondaryText && {
height: '32px'
},
size.isSize32 && [
classNames.size32,
{
height: PersonaConsts_1.personaSize.size32,
minWidth: PersonaConsts_1.personaSize.size32
}
],
size.isSize40 && [
classNames.size40,
{
height: PersonaConsts_1.personaSize.size40,
minWidth: PersonaConsts_1.personaSize.size40
}
],
size.isSize48 && classNames.size48,
size.isSize72 && [
classNames.size72,
{
height: PersonaConsts_1.personaSize.size72,
minWidth: PersonaConsts_1.personaSize.size72
}
],
size.isSize100 && [
classNames.size100,
{
height: PersonaConsts_1.personaSize.size100,
minWidth: PersonaConsts_1.personaSize.size100
}
],
/**
* Modifiers: presence
*/
presence.isAvailable && classNames.available,
presence.isAway && classNames.away,
presence.isBlocked && classNames.blocked,
presence.isBusy && classNames.busy,
presence.isDoNotDisturb && classNames.doNotDisturb,
presence.isOffline && classNames.offline,
className
],
details: [
classNames.details,
{
padding: '0 24px 0 16px',
minWidth: 0,
width: '100%',
textAlign: 'left',
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-around'
},
size.isSize10 && {
paddingLeft: '17px'
},
(size.isSize24 || size.isSize28) && {
padding: '0 12px'
}
],
primaryText: [
classNames.primaryText,
Styling_1.noWrap,
{
color: palette.neutralPrimary,
fontWeight: Styling_1.FontWeights.regular,
fontSize: Styling_1.FontSizes.large
},
showSecondaryText && {
height: showSecondaryTextDefaultHeight,
lineHeight: showSecondaryTextDefaultHeight,
overflowX: 'hidden'
},
size.isSize10 && {
fontSize: Styling_1.FontSizes.small,
lineHeight: PersonaConsts_1.personaSize.size10
},
(size.isSize16 || size.isSize24 || size.isSize28 || size.isSize32 || size.isSize40) && {
fontSize: Styling_1.FontSizes.medium
},
size.isSize16 && {
lineHeight: PersonaConsts_1.personaSize.size28
},
size.isSize24 && showSecondaryText && { height: '18px' },
size.isSize72 && {
fontSize: Styling_1.FontSizes.xLarge
},
size.isSize100 && {
fontSize: Styling_1.FontSizes.xLarge,
fontWeight: Styling_1.FontWeights.semilight
}
],
secondaryText: [
classNames.secondaryText,
Styling_1.noWrap,
sharedTextStyles,
(size.isSize10 || size.isSize16 || size.isSize24 || size.isSize28 || size.isSize32) && {
display: 'none'
},
size.isSize24 &&
showSecondaryText && {
height: '18px'
},
(size.isSize72 || size.isSize100) && {
fontSize: Styling_1.FontSizes.medium
},
showSecondaryText && {
display: 'block',
height: showSecondaryTextDefaultHeight,
lineHeight: showSecondaryTextDefaultHeight,
overflowX: 'hidden'
}
],
tertiaryText: [
classNames.tertiaryText,
Styling_1.noWrap,
sharedTextStyles,
{
display: 'none'
},
(size.isSize72 || size.isSize100) && {
display: 'block'
}
],
optionalText: [
classNames.optionalText,
Styling_1.noWrap,
sharedTextStyles,
{
display: 'none'
},
size.isSize100 && {
display: 'block'
}
],
textContent: [classNames.textContent, Styling_1.noWrap]
};
};
});
//# sourceMappingURL=Persona.styles.js.map