@azure/communication-react
Version:
React library for building modern communication user experiences utilizing Azure Communication Services
284 lines • 8.47 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { mergeStyles, AnimationStyles } from '@fluentui/react';
import { _pxToRem } from "../../../../../acs-ui-common/src";
/** @private */
export const CONFIGURATION_PAGE_SECTION_MIN_WIDTH_REM = 11;
/** @private */
export const CONFIGURATION_PAGE_SECTION_MAX_WIDTH_REM = 20.625;
/** @private */
export const CONFIGURATION_PAGE_SECTION_HEIGHT_REM = 13.625;
const LOGO_HEIGHT_REM = 3;
/**
* @private
*/
export const configurationStackTokensDesktop = {
childrenGap: '1.5rem'
};
/**
* @private
*/
export const configurationStackTokensMobile = {
childrenGap: '0.5rem'
};
/**
* @private
*/
export const deviceConfigurationStackTokens = {
childrenGap: '1.5rem'
};
/** @private */
export const configurationContainerStyle = (desktop, backgroundImageUrl) => ({
display: 'flex',
flexFlow: 'column',
height: '100%',
position: 'relative',
width: '100%',
padding: desktop ? '2rem 1rem 2rem 1rem' : '1rem 1rem 2rem 1rem',
minWidth: desktop ? '20rem' // sum of min-width from children + ChildrenGap * (nb of children - 1) + padding * 2 = (11 + 11) + (2 * 1) + 0.5 * 2
: '16rem',
// from LocalPreview: ControlBar width + 0.5 * 2 for spacing + padding * 2 = 14 + 0.5 * 2 + 0.5 * 2
minHeight: desktop ? '22rem' // max height of SelectionContainer + padding * 2 = 21 + 0.5 * 2
: '13rem',
'::before': !backgroundImageUrl ? undefined : Object.assign({ content: '""', position: 'absolute', top: 0, left: 0, zIndex: 0, width: '100%', height: '100%', backgroundImage: `url(${backgroundImageUrl})`, backgroundSize: 'cover', backgroundPosition: 'center' }, AnimationStyles.fadeIn500)
});
/**
* @private
*/
export const configurationSectionStyle = {
root: {
width: '100%',
minWidth: `${CONFIGURATION_PAGE_SECTION_MIN_WIDTH_REM}rem`,
maxWidth: `${CONFIGURATION_PAGE_SECTION_MAX_WIDTH_REM}rem`
}
};
/**
* @private
*/
export const selectionContainerStyle = (theme, noSpeakerDropdownShown) => mergeStyles({
width: '100%',
minHeight: noSpeakerDropdownShown ? 'auto' : `${CONFIGURATION_PAGE_SECTION_HEIGHT_REM}rem`,
padding: '1rem',
borderRadius: theme.effects.roundedCorner6,
border: `0.0625rem solid ${theme.palette.neutralLight}`,
overflow: 'hidden',
// do not let child background overflow the curved corners
boxShadow: theme.effects.elevation4,
// Style the background of the container to have partial transparency.
// Using `before:` pseudo-element to avoid having to wrap the content in an extra div.
// Ideally rgba would be used but we cannot garauntee the format of theme.palette.white
// to parse it correctly.
position: 'relative',
':before': {
content: '""',
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
zIndex: 0,
background: theme.palette.white,
opacity: 0.9
}
});
/**
* @private
*/
export const titleContainerStyleDesktop = (theme) => mergeStyles({
fontSize: '1.2rem',
lineHeight: '1rem',
fontWeight: 600
}, configurationPageTextDecoration(theme));
/**
* @private
*/
export const titleContainerStyleMobile = (theme) => mergeStyles({
fontSize: '1.0625rem',
lineHeight: '1.375rem',
fontWeight: 600,
textAlign: 'center'
}, configurationPageTextDecoration(theme));
/**
* Ensure configuration page text is legible on top of a background image.
* @private
*/
const configurationPageTextDecoration = (theme) => {
return {
textShadow: `0px 0px 8px ${theme.palette.whiteTranslucent40}`,
fill: theme.semanticColors.bodyText,
svg: {
// Fix SVGs not displaying the correct color in Desert high contrast mode
fill: 'currentColor'
},
stroke: theme.palette.whiteTranslucent40,
paintOrder: 'stroke fill',
strokeWidth: _pxToRem(1.5),
text: {
letterSpacing: '-0.02rem' // cope with extra width due to stroke width
},
'@media (forced-colors: active)': {
textShadow: 'none',
stroke: 'none'
}
};
};
/**
* @private
*/
export const callDetailsContainerStyles = {
root: {
textAlign: 'center',
maxWidth: _pxToRem(700),
alignSelf: 'center'
}
};
const callDetailsStyle = (theme) => ({
fontSize: '0.9375',
lineHeight: '1.25rem',
textShadow: `0px 0px 8px ${theme.palette.whiteTranslucent40}`,
marginTop: '-0.33rem' // compensate for extra padding around the CallTitle that avoids the SVG shadowing being cut off
});
/**
* @private
*/
export const callDetailsStyleDesktop = (theme) => mergeStyles(callDetailsStyle(theme));
/**
* @private
*/
export const callDetailsStyleMobile = (theme) => mergeStyles(callDetailsStyle(theme), {
marginBottom: '0.5rem',
textAlign: 'center'
});
/**
* @private
*/
export const startCallButtonContainerStyleDesktop = {
root: {
paddingTop: '1.125rem'
}
};
/**
* @private
*/
export const startCallButtonContainerStyleMobile = {
root: {
textAlign: 'center'
}
};
/**
* @private
*/
export const startCallButtonStyleMobile = mergeStyles({
width: '100%',
maxWidth: 'unset',
borderRadius: '0.25rem',
height: '3.25rem'
});
/**
* @private
*/
export const startCallButtonStyleDesktop = mergeStyles({
borderRadius: '0.25rem',
width: 'auto',
height: '2.25rem'
});
/** @private */
export const cameraAndVideoEffectsContainerStyleDesktop = {
root: {
alignItems: 'center'
}
};
/**
* @private
*/
export const effectsButtonStyles = (theme, disabled) => {
return {
root: {
background: 'transparent',
border: 'none',
color: theme.palette.themePrimary,
// Top and bottom padding needs to be 5px to match the label padding
padding: '5px 0.25rem',
':hover, :focus': disabled ? {} : {
color: theme.palette.themePrimary
},
svg: {
height: '1rem',
width: '1rem'
}
},
labelHovered: disabled ? {} : {
color: theme.palette.themePrimary
},
rootChecked: disabled ? {} : {
color: theme.palette.themePrimary
},
rootHovered: disabled ? {} : {
color: theme.palette.themePrimary
},
rootPressed: disabled ? {} : {
color: theme.palette.themePrimary
},
rootFocused: disabled ? {} : {
color: theme.palette.themePrimary,
outline: '1px solid',
outlineOffset: '-2px'
}
};
};
/** @private */
export const fillWidth = mergeStyles({
width: '100%',
position: 'relative'
});
/** @private */
export const configurationCenteredContent = (fillsHeight, hasLogo) => mergeStyles({
width: '100%',
position: 'relative',
// If the content does not fill the height, center it vertically.
// We do not include the logo in the centering per design. This allows it to fade
// in and not shift the content. To exclude the logo, we subtract the logo height
// and margin from the actual height. This allows the flex box's natural centering
// to appropriately center the content.
height: `calc(100% - ${!fillsHeight && hasLogo ? `${LOGO_HEIGHT_REM}rem` : '0rem'})`
});
/** @private */
export const panelStyles = {
content: {
display: 'flex',
flexBasis: '100%',
paddingLeft: '0rem',
// remove default padding
paddingRight: '0rem' // remove default padding
},
commands: {
paddingTop: '0rem' // remove default padding
},
scrollableContent: {
display: 'flex',
flexDirection: 'column',
height: '100%'
}
};
/** @private */
export const panelFocusProps = {
forceFocusInsideTrap: false
};
/**
* @private
*/
export const logoStyles = (shape) => ({
root: {
overflow: 'initial',
// prevent the image being clipped
display: 'flex',
justifyContent: 'center'
},
image: {
height: `${LOGO_HEIGHT_REM}rem`,
borderRadius: shape === 'circle' ? '100%' : undefined,
aspectRatio: shape === 'circle' ? '1 / 1' : undefined,
objectFit: shape === 'circle' ? 'cover' : undefined
}
});
//# sourceMappingURL=CallConfiguration.styles.js.map