Skip to content
This repository has been archived by the owner on Oct 11, 2022. It is now read-only.

Commit

Permalink
Merge pull request #2937 from gdad-s-river/fix/2917
Browse files Browse the repository at this point in the history 
Fix the thread flyout behavior
  • Loading branch information
@brianlovin
brianlovin authored Apr 27, 2018
2 parents 46b851e + 2d46ee5 commit 680d282
Show file tree
Hide file tree
Showing 4 changed files with 167 additions and 131 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -265,4 +265,4 @@
]
},
"pre-commit": "lint:staged"
}
}
2 changes: 1 addition & 1 deletion src/components/flyout/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const StyledFlyout = styled(FlexRow)`
top: 36px;
z-index: ${zIndex.flyout};
color: ${({ theme }) => theme.text.default};
transition: ${Transition.dropdown.off};
${props => props.style};
`;

const StyledRow = styled(FlexCol)`
Expand Down
282 changes: 163 additions & 119 deletions src/views/thread/components/actionBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import * as React from 'react';
import { connect } from 'react-redux';
import Clipboard from 'react-clipboard.js';
import { Manager, Reference, Popper } from 'react-popper';
import { addToastWithTimeout } from '../../../actions/toasts';
import { openModal } from '../../../actions/modals';
import Icon from '../../../components/icons';
Expand All @@ -11,6 +12,8 @@ import Flyout from '../../../components/flyout';
import { track } from '../../../helpers/events';
import type { GetThreadType } from 'shared/graphql/queries/thread/getThread';
import toggleThreadNotificationsMutation from 'shared/graphql/mutations/thread/toggleThreadNotifications';
import OutsideClickHandler from '../../../components/outsideClickHandler';

import {
FollowButton,
ShareButtons,
Expand Down Expand Up @@ -42,11 +45,19 @@ type Props = {
type State = {
notificationStateLoading: boolean,
flyoutOpen: boolean,
isSettingsBtnHovering: boolean,
};
class ActionBar extends React.Component<Props, State> {
state = {
notificationStateLoading: false,
flyoutOpen: false,
isSettingsBtnHovering: false,
};

toggleHover = () => {
this.setState(({ isSettingsBtnHovering }) => ({
isSettingsBtnHovering: !isSettingsBtnHovering,
}));
};

toggleFlyout = val => {
Expand Down Expand Up @@ -216,7 +227,11 @@ class ActionBar extends React.Component<Props, State> {
isLockingThread,
isPinningThread,
} = this.props;
const { notificationStateLoading, flyoutOpen } = this.state;
const {
notificationStateLoading,
flyoutOpen,
isSettingsBtnHovering,
} = this.state;
const isPinned = thread.community.pinnedThreadId === thread.id;

const shouldRenderActionsDropdown = this.shouldRenderActionsDropdown();
Expand Down Expand Up @@ -350,129 +365,158 @@ class ActionBar extends React.Component<Props, State> {

<div style={{ display: 'flex' }}>
{shouldRenderActionsDropdown && (
<DropWrap className={flyoutOpen ? 'open' : ''}>
<IconButton
glyph="settings"
tipText={'Thread settings'}
tipLocation={'top-left'}
onClick={this.toggleFlyout}
dataCy="thread-actions-dropdown-trigger"
/>
<Flyout data-cy="thread-actions-dropdown">
<FlyoutRow hideAbove={768}>
<TextButton
icon={
thread.receiveNotifications
? 'notification-fill'
: 'notification'
}
hoverColor={'brand.alt'}
onClick={this.toggleNotification}
dataCy={'thread-dropdown-notifications'}
>
{thread.receiveNotifications ? 'Subscribed' : 'Notify me'}
</TextButton>
</FlyoutRow>

{shouldRenderEditThreadAction && (
<FlyoutRow>
<TextButton
icon="edit"
onClick={this.props.toggleEdit}
hoverColor={'space.default'}
dataCy={'thread-dropdown-edit'}
>
<Label>Edit post</Label>
</TextButton>
</FlyoutRow>
)}

{shouldRenderPinThreadAction && (
<FlyoutRow>
<TextButton
icon={isPinned ? 'pin-fill' : 'pin'}
hoverColor={
isPinned ? 'warn.default' : 'special.default'
}
onClick={this.props.togglePinThread}
dataCy={'thread-dropdown-pin'}
loading={isPinningThread}
disabled={isPinningThread}
>
<Label>
{isPinned ? 'Unpin thread' : 'Pin thread'}
</Label>
</TextButton>
</FlyoutRow>
)}

{shouldRenderMoveThreadAction && (
<FlyoutRow hideBelow={1024}>
<TextButton
icon={'channel'}
hoverColor={'special.default'}
onClick={this.triggerChangeChannel}
dataCy={'thread-dropdown-move'}
>
Move thread
</TextButton>
</FlyoutRow>
)}

{shouldRenderLockThreadAction && (
<FlyoutRow>
<TextButton
icon={thread.isLocked ? 'private' : 'private-unlocked'}
hoverColor={
thread.isLocked ? 'success.default' : 'warn.alt'
}
onClick={this.props.threadLock}
dataCy={'thread-dropdown-lock'}
loading={isLockingThread}
disabled={isLockingThread}
>
<Label>
{thread.isLocked ? 'Unlock chat' : 'Lock chat'}
</Label>
</TextButton>
</FlyoutRow>
)}

{shouldRenderDeleteThreadAction && (
<FlyoutRow>
<TextButton
icon="delete"
hoverColor="warn.default"
onClick={this.props.triggerDelete}
dataCy={'thread-dropdown-delete'}
<DropWrap
onMouseEnter={this.toggleHover}
onMouseLeave={this.toggleHover}
>
<Manager>
<Reference>
{({ ref }) => {
return (
<IconButton
glyph="settings"
tipText={'Thread settings'}
tipLocation={'left'}
onClick={this.toggleFlyout}
dataCy="thread-actions-dropdown-trigger"
innerRef={ref}
/>
);
}}
</Reference>
{(isSettingsBtnHovering || flyoutOpen) && (
<OutsideClickHandler onOutsideClick={this.toggleFlyout}>
<Popper
placement="bottom-end"
modifiers={{
preventOverflow: { enabled: true },
flip: {
boundariesElement: 'scrollParent',
behavior: ['top', 'bottom', 'top'],
},
hide: { enable: false },
}}
>
<Label>Delete</Label>
</TextButton>
</FlyoutRow>
{({ style, ref, placement }) => {
return (
<Flyout
data-cy="thread-actions-dropdown"
innerRef={ref}
style={style}
>
<FlyoutRow hideAbove={768}>
<TextButton
icon={
thread.receiveNotifications
? 'notification-fill'
: 'notification'
}
hoverColor={'brand.alt'}
onClick={this.toggleNotification}
dataCy={'thread-dropdown-notifications'}
>
{thread.receiveNotifications
? 'Subscribed'
: 'Notify me'}
</TextButton>
</FlyoutRow>

{shouldRenderEditThreadAction && (
<FlyoutRow>
<TextButton
icon="edit"
onClick={this.props.toggleEdit}
hoverColor={'space.default'}
dataCy={'thread-dropdown-edit'}
>
<Label>Edit post</Label>
</TextButton>
</FlyoutRow>
)}

{shouldRenderPinThreadAction && (
<FlyoutRow>
<TextButton
icon={isPinned ? 'pin-fill' : 'pin'}
hoverColor={
isPinned
? 'warn.default'
: 'special.default'
}
onClick={this.props.togglePinThread}
dataCy={'thread-dropdown-pin'}
loading={isPinningThread}
disabled={isPinningThread}
>
<Label>
{isPinned ? 'Unpin thread' : 'Pin thread'}
</Label>
</TextButton>
</FlyoutRow>
)}

{shouldRenderMoveThreadAction && (
<FlyoutRow hideBelow={1024}>
<TextButton
icon={'channel'}
hoverColor={'special.default'}
onClick={this.triggerChangeChannel}
dataCy={'thread-dropdown-move'}
>
Move thread
</TextButton>
</FlyoutRow>
)}

{shouldRenderLockThreadAction && (
<FlyoutRow>
<TextButton
icon={
thread.isLocked
? 'private'
: 'private-unlocked'
}
hoverColor={
thread.isLocked
? 'success.default'
: 'warn.alt'
}
onClick={this.props.threadLock}
dataCy={'thread-dropdown-lock'}
loading={isLockingThread}
disabled={isLockingThread}
>
<Label>
{thread.isLocked
? 'Unlock chat'
: 'Lock chat'}
</Label>
</TextButton>
</FlyoutRow>
)}

{shouldRenderDeleteThreadAction && (
<FlyoutRow>
<TextButton
icon="delete"
hoverColor="warn.default"
onClick={this.props.triggerDelete}
dataCy={'thread-dropdown-delete'}
>
<Label>Delete</Label>
</TextButton>
</FlyoutRow>
)}
</Flyout>
);
}}
</Popper>
</OutsideClickHandler>
)}
</Flyout>
</Manager>
</DropWrap>
)}
</div>
{flyoutOpen && (
<div
style={{
position: 'fixed',
left: 0,
right: 0,
top: 0,
bottom: 0,
background: 'transparent',
zIndex: 3002,
}}
data-cy={'thread-dropdown-close'}
onClick={() =>
setTimeout(() => {
this.toggleFlyout(false);
})
}
/>
)}
</ActionBarContainer>
);
}
Expand Down
12 changes: 2 additions & 10 deletions src/views/thread/style.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -184,17 +184,9 @@ export const DropWrap = styled(FlexCol)`
}
.flyout {
display: none;
position: absolute;
top: 100%;
right: 0;
transition: ${Transition.hover.off};
}
&:hover .flyout,
&.open > .flyout {
display: inline-block;
transition: ${Transition.hover.on};
right: auto;
width: 200px;
}
`;

Expand Down

0 comments on commit 680d282

Please sign in to comment.