convert user-dropdown component
This commit is contained in:
Ramón Souza
parent
c0209ba2f3
commit
5bdd4487d2
@ -4,14 +4,13 @@ import _ from 'lodash';
|
||||
import { Session } from 'meteor/session';
|
||||
import PropTypes from 'prop-types';
|
||||
import { findDOMNode } from 'react-dom';
|
||||
import cx from 'classnames';
|
||||
import UserAvatar from '/imports/ui/components/user-avatar/component';
|
||||
import Icon from '/imports/ui/components/icon/component';
|
||||
import lockContextContainer from '/imports/ui/components/lock-viewers/context/container';
|
||||
import { withModalMounter } from '/imports/ui/components/modal/service';
|
||||
import RemoveUserModal from '/imports/ui/components/modal/remove-user/component';
|
||||
import BBBMenu from '/imports/ui/components/menu/component';
|
||||
import { styles } from './styles';
|
||||
import Styled from './styles';
|
||||
import UserName from '../user-name/component';
|
||||
import { PANELS, ACTIONS } from '../../../../../layout/enums';
|
||||
import WhiteboardService from '/imports/ui/components/whiteboard/service';
|
||||
@ -584,13 +583,6 @@ class UserDropdown extends PureComponent {
|
||||
|
||||
const actions = this.getUsersActions();
|
||||
|
||||
const userItemContentsStyle = {};
|
||||
|
||||
userItemContentsStyle[styles.selected] = selected === true;
|
||||
userItemContentsStyle[styles.dropdown] = true;
|
||||
userItemContentsStyle[styles.userListItem] = !isActionsOpen;
|
||||
userItemContentsStyle[styles.usertListItemWithMenu] = isActionsOpen;
|
||||
|
||||
const you = isMe(user.userId) ? intl.formatMessage(messages.you) : '';
|
||||
|
||||
const presenter = (user.presenter)
|
||||
@ -607,47 +599,59 @@ class UserDropdown extends PureComponent {
|
||||
},
|
||||
);
|
||||
|
||||
const contents = (
|
||||
<div
|
||||
data-test={isMe(user.userId) ? 'userListItemCurrent' : 'userListItem'}
|
||||
className={!actions.length ? styles.noActionsListItem : null}
|
||||
style={{ direction: isRTL ? 'rtl' : 'ltr', width: '100%' }}
|
||||
>
|
||||
<div className={styles.userItemContents}>
|
||||
<div className={styles.userAvatar}>
|
||||
{this.renderUserAvatar()}
|
||||
</div>
|
||||
<UserName
|
||||
{...{
|
||||
user,
|
||||
compact,
|
||||
intl,
|
||||
isThisMeetingLocked,
|
||||
userAriaLabel,
|
||||
isActionsOpen,
|
||||
isMe,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
const innerContents = (
|
||||
<Styled.UserItemInnerContents>
|
||||
<Styled.UserAvatar>
|
||||
{this.renderUserAvatar()}
|
||||
</Styled.UserAvatar>
|
||||
<UserName
|
||||
{...{
|
||||
user,
|
||||
compact,
|
||||
intl,
|
||||
isThisMeetingLocked,
|
||||
userAriaLabel,
|
||||
isActionsOpen,
|
||||
isMe,
|
||||
}}
|
||||
/>
|
||||
</Styled.UserItemInnerContents>
|
||||
);
|
||||
|
||||
const contents = !actions.length
|
||||
? (
|
||||
<Styled.NoActionsListItem
|
||||
data-test={isMe(user.userId) ? 'userListItemCurrent' : 'userListItem'}
|
||||
style={{ direction: isRTL ? 'rtl' : 'ltr' }}
|
||||
>
|
||||
{innerContents}
|
||||
</Styled.NoActionsListItem>
|
||||
)
|
||||
: (
|
||||
<div
|
||||
data-test={isMe(user.userId) ? 'userListItemCurrent' : 'userListItem'}
|
||||
style={{ direction: isRTL ? 'rtl' : 'ltr', width: '100%' }}
|
||||
>
|
||||
{innerContents}
|
||||
</div>
|
||||
);
|
||||
|
||||
if (!actions.length) return contents;
|
||||
|
||||
return (
|
||||
<BBBMenu
|
||||
trigger={
|
||||
(
|
||||
<div
|
||||
<Styled.UserItemContents
|
||||
isActionsOpen={isActionsOpen}
|
||||
selected={selected === true}
|
||||
tabIndex={-1}
|
||||
onClick={() => this.setState({ selected: true })}
|
||||
className={cx(userItemContentsStyle)}
|
||||
style={{ width: '100%', marginLeft: '.5rem' }}
|
||||
onKeyPress={() => {}}
|
||||
onKeyPress={() => { }}
|
||||
role="button"
|
||||
>
|
||||
{contents}
|
||||
</div>
|
||||
</Styled.UserItemContents>
|
||||
)
|
||||
}
|
||||
actions={actions}
|
||||
|
||||
@ -0,0 +1,103 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { lgPaddingY, smPaddingY, borderSize } from '/imports/ui/stylesheets/styled-components/general';
|
||||
import { listItemBgHover, itemFocusBorder } from '/imports/ui/stylesheets/styled-components/palette';
|
||||
|
||||
const UserItemContents = styled.div`
|
||||
position: static;
|
||||
padding: .45rem;
|
||||
width: 100%;
|
||||
margin-left: .5rem;
|
||||
|
||||
${({ selected }) => selected && `
|
||||
background-color: ${listItemBgHover};
|
||||
border-top-left-radius: ${smPaddingY};
|
||||
border-bottom-left-radius: ${smPaddingY};
|
||||
|
||||
&:focus {
|
||||
box-shadow: inset 0 0 0 ${borderSize} ${itemFocusBorder}, inset 1px 0 0 1px ${itemFocusBorder};
|
||||
}
|
||||
`}
|
||||
|
||||
${({ isActionsOpen }) => !isActionsOpen && `
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
cursor: pointer;
|
||||
|
||||
[dir="rtl"] & {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
outline: transparent;
|
||||
outline-style: dotted;
|
||||
outline-width: ${borderSize};
|
||||
background-color: ${listItemBgHover};
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
outline: transparent;
|
||||
outline-width: ${borderSize};
|
||||
outline-style: solid;
|
||||
background-color: ${listItemBgHover};
|
||||
box-shadow: inset 0 0 0 ${borderSize} ${itemFocusBorder}, inset 1px 0 0 1px ${itemFocusBorder};
|
||||
}
|
||||
flex-flow: column;
|
||||
flex-shrink: 0;
|
||||
`}
|
||||
|
||||
${({ isActionsOpen }) => isActionsOpen && `
|
||||
outline: transparent;
|
||||
outline-width: ${borderSize};
|
||||
outline-style: solid;
|
||||
background-color: ${listItemBgHover};
|
||||
box-shadow: inset 0 0 0 ${borderSize} ${itemFocusBorder}, inset 1px 0 0 1px ${itemFocusBorder};
|
||||
border-top-left-radius: ${smPaddingY};
|
||||
border-bottom-left-radius: ${smPaddingY};
|
||||
|
||||
&:focus {
|
||||
outline-style: solid;
|
||||
outline-color: transparent !important;
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
const UserItemInnerContents = styled.div`
|
||||
flex-grow: 0;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
padding: 3px;
|
||||
|
||||
[dir="rtl"] & {
|
||||
padding: ${lgPaddingY} ${lgPaddingY} ${lgPaddingY} 0;
|
||||
}
|
||||
`;
|
||||
|
||||
const UserAvatar = styled.div`
|
||||
flex: 0 0 2.25rem;
|
||||
`;
|
||||
|
||||
const NoActionsListItem = styled.div`
|
||||
margin-left: 0.5rem;
|
||||
padding: .45rem;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
export default {
|
||||
UserItemContents,
|
||||
UserItemInnerContents,
|
||||
UserAvatar,
|
||||
NoActionsListItem,
|
||||
};
|
||||
@ -1,5 +1,6 @@
|
||||
const borderSize = '2px';
|
||||
const smPaddingX = '.75rem';
|
||||
const smPaddingY = '.3rem';
|
||||
const mdPaddingY = '.45rem';
|
||||
const mdPaddingX = '1rem';
|
||||
const lgPaddingX = '1.25rem';
|
||||
@ -8,6 +9,7 @@ const lgPaddingY = '0.6rem';
|
||||
export {
|
||||
borderSize,
|
||||
smPaddingX,
|
||||
smPaddingY,
|
||||
mdPaddingX,
|
||||
mdPaddingY,
|
||||
lgPaddingX,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user