jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui) - player subheader more menu clickable issues

Browse source
This commit is contained in:
Shekar Siri 2022-11-10 13:11:43 +01:00
parent 030420a14a
commit 29f81a7807
4 changed files with 50 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/app/components/Session_/components/HeaderMenu.tsx
View file

@ -65,7 +65,7 @@ export default class ItemMenu extends React.PureComponent<Props> {
<div
key={item.key}
role="menuitem"
className="hover:bg-gray-light-shade cursor-pointer flex items-center"
className="hover:bg-gray-light-shade cursor-pointer flex items-center w-full"
>
{item.component}
</div>

2
frontend/app/components/Session_/components/menu.module.css
View file

@ -52,7 +52,7 @@
& .menuItem {
cursor: pointer;
padding: 10px;
/* padding: 10px; */
color: black;
display: flex;
align-items: center;

80
frontend/app/components/shared/Bookmark/Bookmark.tsx
View file

@ -1,10 +1,8 @@
import React, { useEffect, useState } from 'react'
import { Popup, Button, Icon } from 'UI'
import { toggleFavorite } from 'Duck/sessions'
import { connect } from 'react-redux'
import React, { useEffect, useState } from 'react';
import { Popup, Button, Icon } from 'UI';
import { toggleFavorite } from 'Duck/sessions';
import { connect } from 'react-redux';
import { toast } from 'react-toastify';
import { Tooltip } from 'react-tippy';
import cn from 'classnames';
interface Props {
toggleFavorite: (sessionId: string) => Promise<void>;
@ -13,11 +11,13 @@ interface Props {
isEnterprise: Boolean;
noMargin?: boolean;
}
function Bookmark(props : Props ) {
function Bookmark(props: Props) {
const { sessionId, favorite, isEnterprise, noMargin } = props;
const [isFavorite, setIsFavorite] = useState(favorite);
const ADDED_MESSAGE = isEnterprise ? 'Session added to vault' : 'Session added to your bookmarks';
const REMOVED_MESSAGE = isEnterprise ? 'Session removed from vault' : 'Session removed from your bookmarks';
const REMOVED_MESSAGE = isEnterprise
? 'Session removed from vault'
: 'Session removed from your bookmarks';
const TOOLTIP_TEXT_ADD = isEnterprise ? 'Add to vault' : 'Add to bookmarks';
const TOOLTIP_TEXT_REMOVE = isEnterprise ? 'Remove from vault' : 'Remove from bookmarks';
@ -33,34 +33,44 @@ function Bookmark(props : Props ) {
toast.success(isFavorite ? REMOVED_MESSAGE : ADDED_MESSAGE);
setIsFavorite(!isFavorite);
});
}
};
return (
<Popup
delay={500}
content={isFavorite ? TOOLTIP_TEXT_REMOVE : TOOLTIP_TEXT_ADD}
hideOnClick={true}
distance={20}
>
{noMargin ? (
<div onClick={ toggleFavorite } className="flex items-center cursor-pointer h-full w-full p-3">
<Icon name={ isFavorite ? ACTIVE_ICON : INACTIVE_ICON } color={isFavorite ? "teal" : undefined} size="16" />
<span className="ml-2">{isEnterprise ? 'Vault' : 'Bookmark'}</span>
</div>
) : (
<Button
onClick={ toggleFavorite }
data-favourite={ isFavorite }
>
<Icon name={ isFavorite ? ACTIVE_ICON : INACTIVE_ICON } color={isFavorite ? "teal" : undefined} size="16" />
<span className="ml-2">{isEnterprise ? 'Vault' : 'Bookmark'}</span>
</Button>
)}
</Popup>
)
<div onClick={toggleFavorite} className="w-full">
<Popup
delay={500}
content={isFavorite ? TOOLTIP_TEXT_REMOVE : TOOLTIP_TEXT_ADD}
hideOnClick={true}
distance={20}
>
{noMargin ? (
<div className="flex items-center cursor-pointer h-full w-full p-3">
<Icon
name={isFavorite ? ACTIVE_ICON : INACTIVE_ICON}
color={isFavorite ? 'teal' : undefined}
size="16"
/>
<span className="ml-2">{isEnterprise ? 'Vault' : 'Bookmark'}</span>
</div>
) : (
<Button data-favourite={isFavorite}>
<Icon
name={isFavorite ? ACTIVE_ICON : INACTIVE_ICON}
color={isFavorite ? 'teal' : undefined}
size="16"
/>
<span className="ml-2">{isEnterprise ? 'Vault' : 'Bookmark'}</span>
</Button>
)}
</Popup>
</div>
);
}
export default connect(state => ({
isEnterprise: state.getIn([ 'user', 'account', 'edition' ]) === 'ee',
favorite: state.getIn([ 'sessions', 'current', 'favorite']),
}), { toggleFavorite })(Bookmark)
export default connect(
(state) => ({
isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee',
favorite: state.getIn(['sessions', 'current', 'favorite']),
}),
{ toggleFavorite }
)(Bookmark);

6
frontend/app/components/shared/SharePopup/SharePopup.js
View file

@ -77,7 +77,7 @@ export default class SharePopup extends React.PureComponent {
.toJS();
return (
<OutsideClickDetectingDiv
className={cn('relative flex items-center')}
className={cn('relative flex items-center w-full')}
onClickOutside={() => {
this.setState({ isOpen: false });
}}
@ -92,7 +92,7 @@ export default class SharePopup extends React.PureComponent {
arrow
trigger="click"
shown={this.handleOpen}
className="h-full w-full p-3"
className="w-full"
// beforeHidden={this.handleClose}
html={
<div className={styles.wrapper}>
@ -150,7 +150,7 @@ export default class SharePopup extends React.PureComponent {
</div>
}
>
<div onClick={this.onClickHandler}>{trigger}</div>
<div onClick={this.onClickHandler} className="h-full w-full p-3">{trigger}</div>
</Tooltip>
</OutsideClickDetectingDiv>
);