Stefan Hacker
275 lines
12 KiB
JavaScript
275 lines
12 KiB
JavaScript
define(["require", "exports", "tslib", "../../Styling", "./MessageBar.types"], function (require, exports, tslib_1, Styling_1, MessageBar_types_1) {
|
|
"use strict";
|
|
var _a, _b, _c, _d;
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.getStyles = void 0;
|
|
var GlobalClassNames = {
|
|
root: 'ms-MessageBar',
|
|
error: 'ms-MessageBar--error',
|
|
blocked: 'ms-MessageBar--blocked',
|
|
severeWarning: 'ms-MessageBar--severeWarning',
|
|
success: 'ms-MessageBar--success',
|
|
warning: 'ms-MessageBar--warning',
|
|
multiline: 'ms-MessageBar-multiline',
|
|
singleline: 'ms-MessageBar-singleline',
|
|
dismissalSingleLine: 'ms-MessageBar-dismissalSingleLine',
|
|
expandingSingleLine: 'ms-MessageBar-expandingSingleLine',
|
|
content: 'ms-MessageBar-content',
|
|
iconContainer: 'ms-MessageBar-icon',
|
|
text: 'ms-MessageBar-text',
|
|
innerText: 'ms-MessageBar-innerText',
|
|
dismissSingleLine: 'ms-MessageBar-dismissSingleLine',
|
|
expandSingleLine: 'ms-MessageBar-expandSingleLine',
|
|
dismissal: 'ms-MessageBar-dismissal',
|
|
expand: 'ms-MessageBar-expand',
|
|
actions: 'ms-MessageBar-actions',
|
|
actionsSingleline: 'ms-MessageBar-actionsSingleLine',
|
|
};
|
|
var backgroundColor = (_a = {},
|
|
_a[MessageBar_types_1.MessageBarType.error] = 'errorBackground',
|
|
_a[MessageBar_types_1.MessageBarType.blocked] = 'errorBackground',
|
|
_a[MessageBar_types_1.MessageBarType.success] = 'successBackground',
|
|
_a[MessageBar_types_1.MessageBarType.warning] = 'warningBackground',
|
|
_a[MessageBar_types_1.MessageBarType.severeWarning] = 'severeWarningBackground',
|
|
_a[MessageBar_types_1.MessageBarType.info] = 'infoBackground',
|
|
_a);
|
|
var iconColor = (_b = {},
|
|
_b[MessageBar_types_1.MessageBarType.error] = 'errorIcon',
|
|
_b[MessageBar_types_1.MessageBarType.blocked] = 'errorIcon',
|
|
_b[MessageBar_types_1.MessageBarType.success] = 'successIcon',
|
|
_b[MessageBar_types_1.MessageBarType.warning] = 'warningIcon',
|
|
_b[MessageBar_types_1.MessageBarType.severeWarning] = 'severeWarningIcon',
|
|
_b[MessageBar_types_1.MessageBarType.info] = 'infoIcon',
|
|
_b);
|
|
var highContrastBorderColor = (_c = {},
|
|
_c[MessageBar_types_1.MessageBarType.error] = '#ff0000',
|
|
_c[MessageBar_types_1.MessageBarType.blocked] = '#ff0000',
|
|
_c[MessageBar_types_1.MessageBarType.success] = '#bad80a',
|
|
_c[MessageBar_types_1.MessageBarType.warning] = '#fff100',
|
|
_c[MessageBar_types_1.MessageBarType.severeWarning] = '#ff0000',
|
|
_c[MessageBar_types_1.MessageBarType.info] = 'WindowText',
|
|
_c);
|
|
var highContrastWhiteBorderColor = (_d = {},
|
|
_d[MessageBar_types_1.MessageBarType.error] = '#e81123',
|
|
_d[MessageBar_types_1.MessageBarType.blocked] = '#e81123',
|
|
_d[MessageBar_types_1.MessageBarType.success] = '#107c10',
|
|
_d[MessageBar_types_1.MessageBarType.warning] = '#966400',
|
|
_d[MessageBar_types_1.MessageBarType.severeWarning] = '#d83b01',
|
|
_d[MessageBar_types_1.MessageBarType.info] = 'WindowText',
|
|
_d);
|
|
var getStyles = function (props) {
|
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
var theme = props.theme, className = props.className, onDismiss = props.onDismiss, truncated = props.truncated, isMultiline = props.isMultiline, expandSingleLine = props.expandSingleLine, _m = props.messageBarType, messageBarType = _m === void 0 ? MessageBar_types_1.MessageBarType.info : _m;
|
|
var semanticColors = theme.semanticColors, fonts = theme.fonts;
|
|
var SmallScreenSelector = (0, Styling_1.getScreenSelector)(0, Styling_1.ScreenWidthMaxSmall);
|
|
var classNames = (0, Styling_1.getGlobalClassNames)(GlobalClassNames, theme);
|
|
var dismissalAndExpandIconStyle = {
|
|
fontSize: Styling_1.IconFontSizes.xSmall,
|
|
height: 10,
|
|
lineHeight: '10px',
|
|
color: semanticColors.messageText,
|
|
selectors: (_a = {},
|
|
_a[Styling_1.HighContrastSelector] = tslib_1.__assign(tslib_1.__assign({}, (0, Styling_1.getHighContrastNoAdjustStyle)()), { color: 'WindowText' }),
|
|
_a),
|
|
};
|
|
var dismissalAndExpandStyle = [
|
|
(0, Styling_1.getFocusStyle)(theme, {
|
|
inset: 1,
|
|
highContrastStyle: {
|
|
outlineOffset: '-6px',
|
|
outline: '1px solid Highlight',
|
|
},
|
|
borderColor: 'transparent',
|
|
}),
|
|
{
|
|
flexShrink: 0,
|
|
width: 32,
|
|
height: 32,
|
|
padding: '8px 12px',
|
|
selectors: {
|
|
'& .ms-Button-icon': dismissalAndExpandIconStyle,
|
|
':hover': {
|
|
backgroundColor: 'transparent',
|
|
},
|
|
':active': {
|
|
backgroundColor: 'transparent',
|
|
},
|
|
},
|
|
},
|
|
];
|
|
return {
|
|
root: [
|
|
classNames.root,
|
|
fonts.medium,
|
|
messageBarType === MessageBar_types_1.MessageBarType.error && classNames.error,
|
|
messageBarType === MessageBar_types_1.MessageBarType.blocked && classNames.blocked,
|
|
messageBarType === MessageBar_types_1.MessageBarType.severeWarning && classNames.severeWarning,
|
|
messageBarType === MessageBar_types_1.MessageBarType.success && classNames.success,
|
|
messageBarType === MessageBar_types_1.MessageBarType.warning && classNames.warning,
|
|
isMultiline ? classNames.multiline : classNames.singleline,
|
|
!isMultiline && onDismiss && classNames.dismissalSingleLine,
|
|
!isMultiline && truncated && classNames.expandingSingleLine,
|
|
{
|
|
background: semanticColors[backgroundColor[messageBarType]],
|
|
boxSizing: 'border-box',
|
|
color: semanticColors.messageText,
|
|
minHeight: 32,
|
|
width: '100%',
|
|
display: 'flex',
|
|
wordBreak: 'break-word',
|
|
selectors: (_b = {
|
|
'.ms-Link': {
|
|
color: semanticColors.messageLink,
|
|
selectors: {
|
|
':hover': {
|
|
color: semanticColors.messageLinkHovered,
|
|
},
|
|
},
|
|
}
|
|
},
|
|
_b[Styling_1.HighContrastSelector] = tslib_1.__assign(tslib_1.__assign({}, (0, Styling_1.getHighContrastNoAdjustStyle)()), { background: 'transparent', border: "1px solid ".concat(highContrastBorderColor[messageBarType]), color: 'WindowText' }),
|
|
_b[Styling_1.HighContrastSelectorWhite] = {
|
|
border: "1px solid ".concat(highContrastWhiteBorderColor[messageBarType]),
|
|
},
|
|
_b),
|
|
},
|
|
isMultiline && {
|
|
flexDirection: 'column',
|
|
},
|
|
className,
|
|
],
|
|
content: [
|
|
classNames.content,
|
|
(_c = {
|
|
display: 'flex',
|
|
width: '100%',
|
|
lineHeight: 'normal'
|
|
},
|
|
_c[SmallScreenSelector] = {
|
|
display: 'grid',
|
|
gridTemplateColumns: 'auto 1fr auto',
|
|
gridTemplateRows: '1fr auto',
|
|
gridTemplateAreas: "\n \"icon text close\"\n \"action action action\"\n ",
|
|
},
|
|
_c),
|
|
],
|
|
iconContainer: [
|
|
classNames.iconContainer,
|
|
(_d = {
|
|
fontSize: Styling_1.IconFontSizes.medium,
|
|
minWidth: 16,
|
|
minHeight: 16,
|
|
display: 'flex',
|
|
flexShrink: 0,
|
|
margin: '8px 0 8px 12px'
|
|
},
|
|
_d[SmallScreenSelector] = {
|
|
gridArea: 'icon',
|
|
},
|
|
_d),
|
|
],
|
|
icon: {
|
|
color: semanticColors[iconColor[messageBarType]],
|
|
selectors: (_e = {},
|
|
_e[Styling_1.HighContrastSelector] = tslib_1.__assign(tslib_1.__assign({}, (0, Styling_1.getHighContrastNoAdjustStyle)()), { color: 'WindowText' }),
|
|
_e),
|
|
},
|
|
text: [
|
|
classNames.text,
|
|
tslib_1.__assign(tslib_1.__assign({ minWidth: 0, display: 'flex', flexGrow: 1, margin: 8 }, fonts.small), (_f = {}, _f[SmallScreenSelector] = {
|
|
gridArea: 'text',
|
|
}, _f.selectors = (_g = {},
|
|
_g[Styling_1.HighContrastSelector] = tslib_1.__assign({}, (0, Styling_1.getHighContrastNoAdjustStyle)()),
|
|
_g), _f)),
|
|
!onDismiss && {
|
|
marginRight: 12,
|
|
},
|
|
],
|
|
innerText: [
|
|
classNames.innerText,
|
|
{
|
|
lineHeight: 16,
|
|
selectors: {
|
|
'& span a:last-child': {
|
|
paddingLeft: 4,
|
|
},
|
|
},
|
|
},
|
|
truncated && {
|
|
overflow: 'visible',
|
|
whiteSpace: 'pre-wrap',
|
|
},
|
|
!isMultiline && {
|
|
// In high contrast this causes the top and bottom of links' focus outline to be clipped
|
|
// (not sure of a good way around that while still maintaining text clipping)
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
whiteSpace: 'nowrap',
|
|
},
|
|
!isMultiline &&
|
|
!truncated && {
|
|
selectors: (_h = {},
|
|
_h[SmallScreenSelector] = {
|
|
overflow: 'visible',
|
|
whiteSpace: 'pre-wrap',
|
|
},
|
|
_h),
|
|
},
|
|
expandSingleLine && {
|
|
overflow: 'visible',
|
|
whiteSpace: 'pre-wrap',
|
|
},
|
|
],
|
|
dismissSingleLine: [
|
|
classNames.dismissSingleLine,
|
|
(_j = {},
|
|
_j[SmallScreenSelector] = {
|
|
gridArea: 'close',
|
|
},
|
|
_j),
|
|
],
|
|
expandSingleLine: classNames.expandSingleLine,
|
|
dismissal: [classNames.dismissal, dismissalAndExpandStyle],
|
|
expand: [classNames.expand, dismissalAndExpandStyle],
|
|
actions: [
|
|
isMultiline ? classNames.actions : classNames.actionsSingleline,
|
|
(_k = {
|
|
display: 'flex',
|
|
flexGrow: 0,
|
|
flexShrink: 0,
|
|
flexBasis: 'auto',
|
|
flexDirection: 'row-reverse',
|
|
alignItems: 'center',
|
|
margin: '0 12px 0 8px',
|
|
// reset forced colors to browser control for inner actions
|
|
forcedColorAdjust: 'auto',
|
|
MsHighContrastAdjust: 'auto'
|
|
},
|
|
_k[SmallScreenSelector] = {
|
|
gridArea: 'action',
|
|
marginRight: 8,
|
|
marginBottom: 8,
|
|
},
|
|
_k.selectors = {
|
|
'& button:nth-child(n+2)': (_l = {
|
|
marginLeft: 8
|
|
},
|
|
_l[SmallScreenSelector] = {
|
|
marginBottom: 0,
|
|
},
|
|
_l),
|
|
},
|
|
_k),
|
|
isMultiline && {
|
|
marginBottom: 8,
|
|
},
|
|
onDismiss &&
|
|
!isMultiline && {
|
|
marginRight: 0,
|
|
},
|
|
],
|
|
};
|
|
};
|
|
exports.getStyles = getStyles;
|
|
});
|
|
//# sourceMappingURL=MessageBar.styles.js.map
|