urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2024-12-20 01:01:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

chat: hover treatment for rows

Browse Source 
fixes urbit/landscape#460
This commit is contained in:
James Acklin 2021-03-12 21:29:39 -05:00
parent d39ab24c8f
commit 5e8aa1cf0b
2 changed files with 40 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pkg/interface/src/views/apps/chat/components/ChatInput.tsx
View File

@ -170,7 +170,7 @@ class ChatInput extends Component<ChatInputProps, ChatInputState> {
className='cf'
zIndex={0}
>
<Row p='12px 8px 12px 12px' alignItems='center'>
<Row p='12px 4px 12px 12px' alignItems='center'>
{avatar}
</Row>
<ChatEditor

45
pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
View File

@ -101,6 +101,37 @@ export const UnreadMarker = React.forwardRef(
}
);
const MessageActions = (props) => {
return (
<Box
borderRadius={1}
width={6}
height={4}
background='white'
border='1px solid'
borderColor='lightGray'
position='absolute'
top='-12px'
right={2}
/>
);
};
const MessageWrapper = (props) => {
const { hovering, bind } = useHovering();
return (
<Box
py='1'
backgroundColor={hovering ? 'washedGray' : 'transparent'}
position='relative'
{...bind}
>
{props.children}
{/* {hovering ? <MessageActions /> : null} */}
</Box>
);
};
interface ChatMessageProps {
msg: Post;
previousMsg?: Post;
@ -195,7 +226,7 @@ class ChatMessage extends Component<ChatMessageProps> {
<Box
ref={this.props.innerRef}
pt={renderSigil ? 2 : 0}
pb={isLastMessage ? 4 : 2}
pb={isLastMessage ? '20px' : 0}
className={containerClass}
backgroundColor={highlighted ? 'blue' : 'white'}
style={style}
@ -204,12 +235,14 @@ class ChatMessage extends Component<ChatMessageProps> {
<DayBreak when={msg['time-sent']} shimTop={renderSigil} />
) : null}
{renderSigil ? (
<>
<MessageWrapper>
<MessageAuthor pb={1} {...messageProps} />
<Message pl={'44px'} pr={4} {...messageProps} />
</>
</MessageWrapper>
) : (
<Message pl={'44px'} pr={4} timestampHover {...messageProps} />
<MessageWrapper>
<Message pl={'44px'} pr={4} timestampHover {...messageProps} />
</MessageWrapper>
)}
<Box style={unreadContainerStyle}>
{isLastRead ? (
@ -406,8 +439,8 @@ export const Message = ({
<Text
display={hovering ? 'block' : 'none'}
position='absolute'
width='40px'
textAlign='center'
width='36px'
textAlign='right'
left='0'
top='3px'
fontSize={0}