Stefan Hacker
146 lines
5.2 KiB
JavaScript
146 lines
5.2 KiB
JavaScript
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.getStyles = void 0;
|
|
var tslib_1 = require("tslib");
|
|
var Styling_1 = require("../../../Styling");
|
|
var PersonaConsts_1 = require("../PersonaConsts");
|
|
var GlobalClassNames = {
|
|
coin: 'ms-Persona-coin',
|
|
imageArea: 'ms-Persona-imageArea',
|
|
image: 'ms-Persona-image',
|
|
initials: 'ms-Persona-initials',
|
|
size8: 'ms-Persona--size8',
|
|
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',
|
|
size56: 'ms-Persona--size56',
|
|
size72: 'ms-Persona--size72',
|
|
size100: 'ms-Persona--size100',
|
|
size120: 'ms-Persona--size120',
|
|
};
|
|
var getStyles = function (props) {
|
|
var _a;
|
|
var className = props.className, theme = props.theme, coinSize = props.coinSize;
|
|
var palette = theme.palette, fonts = theme.fonts;
|
|
var size = (0, PersonaConsts_1.sizeBoolean)(props.size);
|
|
var classNames = (0, Styling_1.getGlobalClassNames)(GlobalClassNames, theme);
|
|
// Static colors used when displaying 'unknown persona' coin
|
|
var unknownPersonaBackgroundColor = 'rgb(234, 234, 234)';
|
|
var unknownPersonaFontColor = 'rgb(168, 0, 0)';
|
|
var dimension = coinSize || (props.size && PersonaConsts_1.sizeToPixels[props.size]) || 48;
|
|
return {
|
|
coin: [
|
|
classNames.coin,
|
|
fonts.medium,
|
|
size.isSize8 && classNames.size8,
|
|
size.isSize10 && classNames.size10,
|
|
size.isSize16 && classNames.size16,
|
|
size.isSize24 && classNames.size24,
|
|
size.isSize28 && classNames.size28,
|
|
size.isSize32 && classNames.size32,
|
|
size.isSize40 && classNames.size40,
|
|
size.isSize48 && classNames.size48,
|
|
size.isSize56 && classNames.size56,
|
|
size.isSize72 && classNames.size72,
|
|
size.isSize100 && classNames.size100,
|
|
size.isSize120 && classNames.size120,
|
|
className,
|
|
],
|
|
size10WithoutPresenceIcon: {
|
|
fontSize: fonts.xSmall.fontSize,
|
|
position: 'absolute',
|
|
top: '5px',
|
|
right: 'auto',
|
|
left: 0,
|
|
},
|
|
imageArea: [
|
|
classNames.imageArea,
|
|
{
|
|
position: 'relative',
|
|
textAlign: 'center',
|
|
flex: '0 0 auto',
|
|
height: dimension,
|
|
width: dimension,
|
|
},
|
|
dimension <= 10 && {
|
|
overflow: 'visible',
|
|
background: 'transparent',
|
|
height: 0,
|
|
width: 0,
|
|
},
|
|
],
|
|
image: [
|
|
classNames.image,
|
|
{
|
|
marginRight: '10px',
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
width: '100%',
|
|
height: '100%',
|
|
border: 0,
|
|
borderRadius: '50%',
|
|
perspective: '1px',
|
|
},
|
|
dimension <= 10 && {
|
|
overflow: 'visible',
|
|
background: 'transparent',
|
|
height: 0,
|
|
width: 0,
|
|
},
|
|
dimension > 10 && {
|
|
height: dimension,
|
|
width: dimension,
|
|
},
|
|
],
|
|
initials: [
|
|
classNames.initials,
|
|
{
|
|
borderRadius: '50%',
|
|
color: props.showUnknownPersonaCoin ? unknownPersonaFontColor : palette.white,
|
|
fontSize: fonts.large.fontSize,
|
|
fontWeight: Styling_1.FontWeights.semibold,
|
|
// copying the logic for the dimensions; defaulted to 46 for size48
|
|
lineHeight: dimension === 48 ? 46 : dimension,
|
|
height: dimension,
|
|
selectors: (_a = {},
|
|
_a[Styling_1.HighContrastSelector] = tslib_1.__assign(tslib_1.__assign({ border: '1px solid WindowText' }, (0, Styling_1.getHighContrastNoAdjustStyle)()), { color: 'WindowText', boxSizing: 'border-box', backgroundColor: 'Window !important' }),
|
|
_a.i = {
|
|
fontWeight: Styling_1.FontWeights.semibold,
|
|
},
|
|
_a),
|
|
},
|
|
props.showUnknownPersonaCoin && {
|
|
backgroundColor: unknownPersonaBackgroundColor,
|
|
},
|
|
dimension < 32 && {
|
|
fontSize: fonts.xSmall.fontSize,
|
|
},
|
|
dimension >= 32 &&
|
|
dimension < 40 && {
|
|
fontSize: fonts.medium.fontSize,
|
|
},
|
|
dimension >= 40 &&
|
|
dimension < 56 && {
|
|
fontSize: fonts.mediumPlus.fontSize,
|
|
},
|
|
dimension >= 56 &&
|
|
dimension < 72 && {
|
|
fontSize: fonts.xLarge.fontSize,
|
|
},
|
|
dimension >= 72 &&
|
|
dimension < 100 && {
|
|
fontSize: fonts.xxLarge.fontSize,
|
|
},
|
|
dimension >= 100 && {
|
|
fontSize: fonts.superLarge.fontSize,
|
|
},
|
|
],
|
|
};
|
|
};
|
|
exports.getStyles = getStyles;
|
|
//# sourceMappingURL=PersonaCoin.styles.js.map
|