convert status-notifier component
This commit is contained in:
Ramón Souza
parent
b71f312fee
commit
90206788e7
@ -246,6 +246,7 @@ class Dropdown extends Component {
|
||||
});
|
||||
|
||||
const showCloseBtn = (isOpen && keepOpen) || (isOpen && keepOpen === null);
|
||||
console.log({className})
|
||||
return (
|
||||
<div
|
||||
className={cx(styles.dropdown, className)}
|
||||
|
||||
@ -3,10 +3,9 @@ import PropTypes from 'prop-types';
|
||||
import { defineMessages, injectIntl } from 'react-intl';
|
||||
import { toast } from 'react-toastify';
|
||||
import Icon from '/imports/ui/components/icon/component';
|
||||
import Button from '/imports/ui/components/button/component';
|
||||
import { ENTER } from '/imports/utils/keyCodes';
|
||||
import toastStyles from '/imports/ui/components/toast/styles';
|
||||
import { styles } from './styles';
|
||||
import Styled from './styles';
|
||||
import {Meteor} from "meteor/meteor";
|
||||
|
||||
const messages = defineMessages({
|
||||
@ -125,10 +124,9 @@ class StatusNotifier extends Component {
|
||||
if (emojiUsers.length > MAX_AVATAR_COUNT) users = users.slice(0, MAX_AVATAR_COUNT);
|
||||
|
||||
const avatars = users.map(u => (
|
||||
<div
|
||||
<Styled.Avatar
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
className={styles.avatar}
|
||||
style={{ backgroundColor: `${u.color}` }}
|
||||
onClick={() => clearUserStatus(u.userId)}
|
||||
onKeyDown={e => (e.keyCode === ENTER ? clearUserStatus(u.userId) : null)}
|
||||
@ -136,17 +134,14 @@ class StatusNotifier extends Component {
|
||||
data-test="avatarsWrapperAvatar"
|
||||
>
|
||||
{u.name.slice(0, 2)}
|
||||
</div>
|
||||
</Styled.Avatar>
|
||||
));
|
||||
|
||||
if (emojiUsers.length > MAX_AVATAR_COUNT) {
|
||||
avatars.push(
|
||||
<div
|
||||
className={styles.avatarsExtra}
|
||||
key={`statusToastAvatar-${emojiUsers.length}`}
|
||||
>
|
||||
<Styled.AvatarsExtra key={`statusToastAvatar-${emojiUsers.length}`}>
|
||||
{emojiUsers.length}
|
||||
</div>,
|
||||
</Styled.AvatarsExtra>,
|
||||
);
|
||||
}
|
||||
|
||||
@ -158,24 +153,20 @@ class StatusNotifier extends Component {
|
||||
const formattedRaisedHands = this.getRaisedHandNames();
|
||||
return (
|
||||
<div>
|
||||
<div className={styles.toastIcon}>
|
||||
<div className={styles.iconWrapper}>
|
||||
<Styled.ToastIcon>
|
||||
<Styled.IconWrapper>
|
||||
<Icon iconName="hand" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={styles.avatarsWrapper}
|
||||
data-test="avatarsWrapper"
|
||||
>
|
||||
</Styled.IconWrapper>
|
||||
</Styled.ToastIcon>
|
||||
<Styled.AvatarsWrapper data-test="avatarsWrapper">
|
||||
{this.raisedHandAvatars()}
|
||||
</div>
|
||||
<div className={styles.toastMessage}>
|
||||
</Styled.AvatarsWrapper>
|
||||
<Styled.ToastMessage>
|
||||
<div>{intl.formatMessage(messages.raisedHandsTitle)}</div>
|
||||
{formattedRaisedHands}
|
||||
</div>
|
||||
</Styled.ToastMessage>
|
||||
<div className={toastStyles.separator} />
|
||||
<Button
|
||||
className={styles.clearBtn}
|
||||
<Styled.ClearButton
|
||||
label={intl.formatMessage(messages.lowerHandsLabel)}
|
||||
color="default"
|
||||
size="md"
|
||||
|
||||
@ -0,0 +1,132 @@
|
||||
import styled from 'styled-components';
|
||||
import {
|
||||
avatarSide,
|
||||
borderSize,
|
||||
avatarInset,
|
||||
smPaddingX,
|
||||
toastIconSide,
|
||||
toastMargin,
|
||||
avatarWrapperOffset,
|
||||
jumboPaddingY,
|
||||
} from '/imports/ui/stylesheets/styled-components/general';
|
||||
import {
|
||||
colorWhite,
|
||||
colorGrayLighter,
|
||||
colorGrayLight,
|
||||
colorPrimary,
|
||||
} from '/imports/ui/stylesheets/styled-components/palette';
|
||||
import {
|
||||
fontSizeXL,
|
||||
fontSizeSmall,
|
||||
} from '/imports/ui/stylesheets/styled-components/typography';
|
||||
import Button from '/imports/ui/components/button/component';
|
||||
|
||||
const Avatar = styled.div`
|
||||
cursor: pointer;
|
||||
outline: transparent;
|
||||
outline-style: dotted;
|
||||
outline-width: ${borderSize};
|
||||
width: ${avatarSide};
|
||||
height: ${avatarSide};
|
||||
color: ${colorWhite};
|
||||
border-radius: 50%;
|
||||
border: solid ${borderSize} ${colorWhite};
|
||||
margin-left: ${avatarInset};
|
||||
text-align: center;
|
||||
padding: 5px 0;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border: solid ${borderSize} ${colorGrayLighter};
|
||||
}
|
||||
`;
|
||||
|
||||
const AvatarsExtra = styled.div`
|
||||
background-color: ${colorGrayLight};
|
||||
outline: transparent;
|
||||
outline-style: dotted;
|
||||
outline-width: ${borderSize};
|
||||
width: ${avatarSide};
|
||||
height: ${avatarSide};
|
||||
color: ${colorWhite};
|
||||
border-radius: 50%;
|
||||
border: solid ${borderSize} ${colorWhite};
|
||||
margin-left: ${avatarInset};
|
||||
text-align: center;
|
||||
padding: 5px 0;
|
||||
`;
|
||||
|
||||
const ToastIcon = styled.div`
|
||||
margin-right: ${smPaddingX};
|
||||
[dir="rtl"] & {
|
||||
margin-right: 0;
|
||||
margin-left: ${smPaddingX};
|
||||
}
|
||||
`;
|
||||
|
||||
const IconWrapper = styled.div`
|
||||
background-color: ${colorPrimary};
|
||||
width: ${toastIconSide};
|
||||
height: ${toastIconSide};
|
||||
border-radius: 50%;
|
||||
|
||||
& > i {
|
||||
position: relative;
|
||||
color: ${colorWhite};
|
||||
top: ${toastMargin};
|
||||
left: ${toastMargin};
|
||||
font-size: ${fontSizeXL};
|
||||
|
||||
[dir="rtl"] & {
|
||||
left: 0;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const AvatarsWrapper = styled.div`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: absolute;
|
||||
top: ${avatarWrapperOffset};
|
||||
right: 1rem;
|
||||
left: auto;
|
||||
|
||||
[dir="rtl"] & {
|
||||
left: ${jumboPaddingY};
|
||||
right: auto;
|
||||
}
|
||||
`;
|
||||
|
||||
const ToastMessage = styled.div`
|
||||
font-size: ${fontSizeSmall};
|
||||
margin-top: ${toastMargin};
|
||||
|
||||
& > div {
|
||||
font-weight: bold;
|
||||
}
|
||||
`;
|
||||
|
||||
const ClearButton = styled(Button)`
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-top: ${toastMargin};
|
||||
color: ${colorPrimary};
|
||||
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active {
|
||||
color: ${colorPrimary};
|
||||
box-shadow: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
export default {
|
||||
Avatar,
|
||||
AvatarsExtra,
|
||||
ToastIcon,
|
||||
IconWrapper,
|
||||
AvatarsWrapper,
|
||||
ToastMessage,
|
||||
ClearButton,
|
||||
};
|
||||
@ -1,109 +0,0 @@
|
||||
@import "/imports/ui/stylesheets/mixins/_indicators";
|
||||
@import "/imports/ui/stylesheets/variables/placeholders";
|
||||
|
||||
:root {
|
||||
--toast-margin: .5rem;
|
||||
--avatar-side: 34px;
|
||||
--avatar-wrapper-offset: 14px;
|
||||
--avatar-inset: -7px;
|
||||
}
|
||||
|
||||
.clearBtn {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-top: var(--toast-margin);
|
||||
color: var(--color-primary);
|
||||
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active {
|
||||
color: var(--color-primary);
|
||||
box-shadow: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.separator {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: var(--border-size-small);
|
||||
background-color: var(--color-gray-lighter);
|
||||
margin-top: var(--toast-margin);
|
||||
margin-bottom: var(--toast-margin);
|
||||
}
|
||||
|
||||
.toastMessage {
|
||||
font-size: var(--font-size-small);
|
||||
margin-top: var(--toast-margin);
|
||||
|
||||
> div {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.toastIcon {
|
||||
margin-right: var(--sm-padding-x);
|
||||
[dir="rtl"] & {
|
||||
margin-right: 0;
|
||||
margin-left: var(--sm-padding-x);
|
||||
}
|
||||
}
|
||||
|
||||
.avatarsWrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: absolute;
|
||||
top: var(--avatar-wrapper-offset);
|
||||
right: 1rem;
|
||||
left: auto;
|
||||
|
||||
[dir="rtl"] & {
|
||||
left: var(--jumbo-padding-y);
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.avatarsExtra {
|
||||
background-color: var(--color-gray-light);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.avatarsExtra,
|
||||
.avatar {
|
||||
@extend %highContrastOutline;
|
||||
width: var(--avatar-side);
|
||||
height: var(--avatar-side);
|
||||
color: var(--color-white);
|
||||
border-radius: 50%;
|
||||
border: solid var(--border-size) var(--color-white);
|
||||
margin-left: var(--avatar-inset);
|
||||
text-align: center;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.avatar:hover,
|
||||
.avatar:focus {
|
||||
border: solid var(--border-size) var(--color-gray-lighter);
|
||||
}
|
||||
|
||||
.iconWrapper {
|
||||
background-color: var(--color-primary);
|
||||
width: var(--toast-icon-side);
|
||||
height: var(--toast-icon-side);
|
||||
border-radius: 50%;
|
||||
|
||||
> i {
|
||||
position: relative;
|
||||
color: var(--color-white);
|
||||
top: var(--toast-margin);
|
||||
left: var(--toast-margin);
|
||||
font-size: var(--font-size-xl);
|
||||
|
||||
[dir="rtl"] & {
|
||||
left: 0;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -69,6 +69,11 @@ const pollIndex = '1016';
|
||||
const pollBottomOffset = '4.5rem';
|
||||
const pollColAmount = '2';
|
||||
|
||||
const toastMargin = '.5rem';
|
||||
const avatarSide = '34px';
|
||||
const avatarWrapperOffset = '14px';
|
||||
const avatarInset = '-7px';
|
||||
|
||||
export {
|
||||
borderSizeSmall,
|
||||
borderSize,
|
||||
@ -136,4 +141,8 @@ export {
|
||||
pollIndex,
|
||||
pollBottomOffset,
|
||||
pollColAmount,
|
||||
toastMargin,
|
||||
avatarSide,
|
||||
avatarWrapperOffset,
|
||||
avatarInset,
|
||||
};
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
"scripts": {
|
||||
"start": "if test \"$NODE_ENV\" = \"production\" ; then npm run start:prod; else npm run start:dev; fi",
|
||||
"start:prod": "meteor reset && ROOT_URL=http://127.0.0.1/html5client meteor run --production --port=4100",
|
||||
"start:dev": "ROOT_URL=http://127.0.0.1/html5client meteor run --port=4100 --allow-superuser",
|
||||
"start:dev": "ROOT_URL=http://127.0.0.1/html5client meteor run --port=4100",
|
||||
"start:dev-fast-mongo": "env ROOT_URL=http://127.0.0.1/html5client MONGO_OPLOG_URL=mongodb://127.0.1.1/local MONGO_URL=mongodb://127.0.1.1/meteor ROOT_URL=http://127.0.0.1/html5client NODE_ENV=development meteor run --port=4100",
|
||||
"test": "export WITH_RECORD=false;export REGRESSION_TESTING=false;env $(cat ../bigbluebutton-tests/puppeteer/.env | xargs) jest all.test.js --color --detectOpenHandles --forceExit",
|
||||
"test:recording": "export WITH_RECORD=true;export REGRESSION_TESTING=false;env $(cat ../bigbluebutton-tests/puppeteer/.env | xargs) jest all.test.js --color --detectOpenHandles --forceExit",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user