communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
173 lines • 5.64 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { mergeStyles, FontWeights } from '@fluentui/react';
import { _pxToRem } from "../../../../acs-ui-common/src";
import { makeStyles, shorthands, tokens } from '@fluentui/react-components';
import { defaultSendBoxInactiveBorderThicknessREM, defaultSendBoxActiveBorderThicknessREM } from '../styles/SendBox.styles';
const MINIMUM_TOUCH_TARGET_HEIGHT_REM = 3;
const errorTextColor = 'var(--errorText)';
/**
* @private
*/
export const chatActionsCSS = {
'ul&': {
right: '0',
left: 'auto',
top: '-1.2rem',
bottom: 'auto',
position: 'absolute'
},
'& a': {
margin: '0',
padding: '0',
border: '0'
}
};
/**
* @private
*/
export const iconWrapperStyle = (theme, isSubMenuOpen) => ({
root: {
margin: _pxToRem(3),
// Show hover styles when the Edit/Delete menu is showing as this action button is still considered 'active'
color: isSubMenuOpen ? theme.palette.black : theme.palette.neutralPrimary,
strokeWidth: isSubMenuOpen ? _pxToRem(0.5) : _pxToRem(0),
stroke: theme.palette.black,
':hover, :focus': {
color: theme.palette.black,
strokeWidth: _pxToRem(0.5)
}
}
});
/**
* @private
*/
export const chatMessageDateStyle = (theme) => mergeStyles({
color: theme.palette.neutralSecondary,
fontWeight: FontWeights.regular,
fontSize: '0.75rem'
});
/**
* @private
*/
export const chatMessageAuthorStyle = mergeStyles({ fontWeight: FontWeights.semibold, fontSize: '0.75rem' });
/**
* @private
*/
export const chatMessageDateFailedStyle = (theme) => mergeStyles({
color: theme.palette.neutralPrimaryAlt,
fontWeight: FontWeights.regular,
fontSize: '0.75rem'
});
/**
* @private
*/
export const chatMessageEditedTagStyle = (theme) => mergeStyles({ fontWeight: FontWeights.semibold, color: theme.palette.neutralSecondary });
/**
* @private
*/
export const chatMessageFailedTagStyle = (theme) => mergeStyles({
fontWeight: FontWeights.regular,
color: theme.semanticColors.errorText,
fontSize: theme.fonts.smallPlus.fontSize,
lineHeight: '1rem'
});
/**
* @private
*/
export const editChatMessageFailedTagStyle = mergeStyles({
marginBottom: '0.5rem'
});
/**
* @private
*/
export const chatMessageFailedTagStackItemStyle = mergeStyles({
alignSelf: 'end'
});
/**
* @private
*/
export const editChatMessageButtonsStackStyle = mergeStyles({
padding: '0 0.5rem',
marginTop: '-0.25rem'
});
/**
* @private
*/
export const chatMessageMenuStyle = mergeStyles({
minWidth: '8.5rem',
height: 'max-content',
cursor: 'pointer',
overflow: 'hidden',
'-webkit-tap-highlight-color': 'transparent' // Disable tap highlight on Android
});
/**
* @private
*/
export const useChatMessageEditContainerStyles = makeStyles({
body: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, shorthands.padding(0)), { backgroundColor: 'transparent', boxSizing: 'border-box' }), shorthands.border(`${defaultSendBoxInactiveBorderThicknessREM}rem`, 'solid')), shorthands.borderRadius(tokens.borderRadiusMedium)), shorthands.margin('21px', '1px', '1px', '1px')), {
// Width should be updated on hover to include the border width change
width: `calc(100% - ${defaultSendBoxActiveBorderThicknessREM}rem)`, '&:hover, &:active, &:focus, &:focus-within': Object.assign(Object.assign(Object.assign({}, shorthands.borderWidth(`${defaultSendBoxActiveBorderThicknessREM}rem`)), shorthands.margin('20px', 0, 0, 0)), { width: '100%' }) }),
bodyAttached: {
marginBottom: '1px',
marginTop: '3px',
// Width should be updated on hover to include the border width change
width: `calc(100% - ${defaultSendBoxActiveBorderThicknessREM}rem)`,
'&:hover, &:active, &:focus, &:focus-within': {
marginTop: '2px',
marginBottom: 0
}
},
bodyError: Object.assign({}, shorthands.borderColor(errorTextColor)),
bodyDefault: Object.assign(Object.assign({}, shorthands.borderColor(tokens.colorNeutralStrokeAccessible)), { '&:hover, &:active, &:focus, &:focus-within': Object.assign({}, shorthands.borderColor(tokens.colorCompoundBrandStroke)) })
});
/**
* @private
*/
export const useChatMessageRichTextEditContainerStyles = makeStyles({
body: Object.assign(Object.assign(Object.assign(Object.assign({}, shorthands.padding(0)), { backgroundColor: 'transparent' }), shorthands.margin('1.25rem', 0, 0, 0)), { width: '100%' }),
bodyAttached: {
marginTop: '0.125rem',
marginBottom: 0
}
});
/**
* Styles that can be applied to ensure flyout items have the minimum touch target size.
*
* @private
*/
export const menuItemIncreasedSizeStyles = {
root: {
height: `${MINIMUM_TOUCH_TARGET_HEIGHT_REM}rem`,
lineHeight: `${MINIMUM_TOUCH_TARGET_HEIGHT_REM}rem`,
maxHeight: 'unset'
},
linkContent: {
height: `${MINIMUM_TOUCH_TARGET_HEIGHT_REM}rem`,
lineHeight: `${MINIMUM_TOUCH_TARGET_HEIGHT_REM}rem`,
maxHeight: 'unset'
},
icon: {
maxHeight: 'unset'
}
};
/**
* @private
*/
export const menuIconStyleSet = {
root: {
height: 'calc(100% - 8px)', // Adjust for the pixel margin Fluent applies
width: '1.25rem'
}
};
/**
* @private
*/
export const menuSubIconStyleSet = {
root: {
height: 'unset',
lineHeight: '100%',
width: '1.25rem'
}
};
//# sourceMappingURL=ChatMessageComponent.styles.js.map