mirror of
				https://github.com/cinnyapp/cinny.git
				synced 2025-11-04 06:20:28 +03:00 
			
		
		
		
	Add button to start thread on reply (#2320)
* add simple button to start a thread on reply * force build * remove useless actions * add actions back * change icon to ThreadPlus * add button to context menu * fix capital T --------- Co-authored-by: Ajay Bura <32841439+ajbura@users.noreply.github.com>
This commit is contained in:
		
							parent
							
								
									3cdb5c2fe6
								
							
						
					
					
						commit
						9073dee986
					
				
					 2 changed files with 42 additions and 3 deletions
				
			
		| 
						 | 
				
			
			@ -933,7 +933,7 @@ export function RoomTimeline({
 | 
			
		|||
  );
 | 
			
		||||
 | 
			
		||||
  const handleReplyClick: MouseEventHandler<HTMLButtonElement> = useCallback(
 | 
			
		||||
    (evt) => {
 | 
			
		||||
    (evt, startThread = false) => {
 | 
			
		||||
      const replyId = evt.currentTarget.getAttribute('data-event-id');
 | 
			
		||||
      if (!replyId) {
 | 
			
		||||
        console.warn('Button should have "data-event-id" attribute!');
 | 
			
		||||
| 
						 | 
				
			
			@ -944,7 +944,9 @@ export function RoomTimeline({
 | 
			
		|||
      const editedReply = getEditedEvent(replyId, replyEvt, room.getUnfilteredTimelineSet());
 | 
			
		||||
      const content: IContent = editedReply?.getContent()['m.new_content'] ?? replyEvt.getContent();
 | 
			
		||||
      const { body, formatted_body: formattedBody } = content;
 | 
			
		||||
      const { 'm.relates_to': relation } = replyEvt.getWireContent();
 | 
			
		||||
      const { 'm.relates_to': relation } = startThread
 | 
			
		||||
        ? { 'm.relates_to': { rel_type: 'm.thread', event_id: replyId } }
 | 
			
		||||
        : replyEvt.getWireContent();
 | 
			
		||||
      const senderId = replyEvt.getSender();
 | 
			
		||||
      if (senderId && typeof body === 'string') {
 | 
			
		||||
        setReplyDraft({
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -669,7 +669,10 @@ export type MessageProps = {
 | 
			
		|||
  messageSpacing: MessageSpacing;
 | 
			
		||||
  onUserClick: MouseEventHandler<HTMLButtonElement>;
 | 
			
		||||
  onUsernameClick: MouseEventHandler<HTMLButtonElement>;
 | 
			
		||||
  onReplyClick: MouseEventHandler<HTMLButtonElement>;
 | 
			
		||||
  onReplyClick: (
 | 
			
		||||
    ev: Parameters<MouseEventHandler<HTMLButtonElement>>[0],
 | 
			
		||||
    startThread?: boolean
 | 
			
		||||
  ) => void;
 | 
			
		||||
  onEditId?: (eventId?: string) => void;
 | 
			
		||||
  onReactionToggle: (targetEventId: string, key: string, shortcode?: string) => void;
 | 
			
		||||
  reply?: ReactNode;
 | 
			
		||||
| 
						 | 
				
			
			@ -859,6 +862,8 @@ export const Message = as<'div', MessageProps>(
 | 
			
		|||
      }, 100);
 | 
			
		||||
    };
 | 
			
		||||
 | 
			
		||||
    const isThreadedMessage = mEvent.threadRootId !== undefined;
 | 
			
		||||
 | 
			
		||||
    return (
 | 
			
		||||
      <MessageBase
 | 
			
		||||
        className={classNames(css.MessageBase, className)}
 | 
			
		||||
| 
						 | 
				
			
			@ -921,6 +926,17 @@ export const Message = as<'div', MessageProps>(
 | 
			
		|||
                >
 | 
			
		||||
                  <Icon src={Icons.ReplyArrow} size="100" />
 | 
			
		||||
                </IconButton>
 | 
			
		||||
                {!isThreadedMessage && (
 | 
			
		||||
                  <IconButton
 | 
			
		||||
                    onClick={(ev) => onReplyClick(ev, true)}
 | 
			
		||||
                    data-event-id={mEvent.getId()}
 | 
			
		||||
                    variant="SurfaceVariant"
 | 
			
		||||
                    size="300"
 | 
			
		||||
                    radii="300"
 | 
			
		||||
                  >
 | 
			
		||||
                    <Icon src={Icons.ThreadPlus} size="100" />
 | 
			
		||||
                  </IconButton>
 | 
			
		||||
                )}
 | 
			
		||||
                {canEditEvent(mx, mEvent) && onEditId && (
 | 
			
		||||
                  <IconButton
 | 
			
		||||
                    onClick={() => onEditId(mEvent.getId())}
 | 
			
		||||
| 
						 | 
				
			
			@ -1000,6 +1016,27 @@ export const Message = as<'div', MessageProps>(
 | 
			
		|||
                              Reply
 | 
			
		||||
                            </Text>
 | 
			
		||||
                          </MenuItem>
 | 
			
		||||
                          {!isThreadedMessage && (
 | 
			
		||||
                            <MenuItem
 | 
			
		||||
                              size="300"
 | 
			
		||||
                              after={<Icon src={Icons.ThreadPlus} size="100" />}
 | 
			
		||||
                              radii="300"
 | 
			
		||||
                              data-event-id={mEvent.getId()}
 | 
			
		||||
                              onClick={(evt: any) => {
 | 
			
		||||
                                onReplyClick(evt, true);
 | 
			
		||||
                                closeMenu();
 | 
			
		||||
                              }}
 | 
			
		||||
                            >
 | 
			
		||||
                              <Text
 | 
			
		||||
                                className={css.MessageMenuItemText}
 | 
			
		||||
                                as="span"
 | 
			
		||||
                                size="T300"
 | 
			
		||||
                                truncate
 | 
			
		||||
                              >
 | 
			
		||||
                                Reply in Thread
 | 
			
		||||
                              </Text>
 | 
			
		||||
                            </MenuItem>
 | 
			
		||||
                          )}
 | 
			
		||||
                          {canEditEvent(mx, mEvent) && onEditId && (
 | 
			
		||||
                            <MenuItem
 | 
			
		||||
                              size="300"
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue