Skip to content

Conversation

@MaxNoetzold
Copy link

@MaxNoetzold MaxNoetzold commented Feb 6, 2023

Basically, I did two things in this fork:

  1. I made the positions of the MessageBox buttons (reply, delete, forward) dynamic using css. This now allows any number of buttons to be displayed without irregular spacing between them. There is now a wrapper (rce-mbox-btn-list) for all buttons. The buttons themselves are also wrapped again (rce-mbox-btn-container), so they are displayed next to each other in one line.
  2. I added the option to add ReactNodes as customButtons array to the MessageBox. These will then be displayed behind the other buttons set. No additional style is applied to them, as I wanted to have a customizable solution. But we can also think about solving it in a different way.
.rce-mbox-btn-list-right {
  left: -12px;
  transform: translateX(-100%);
}
.rce-mbox-btn-list {
  position: absolute;
  top: 50%;
}

.rce-mbox-btn-container {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-left: 3px;
  margin-right: 3px;
}

Example of a very basic additional button (added sometimes in MessageListExample.tsx:

if (token() > 7) {
  newMsg.customButtons = [
    <div
      onClick={() => {
        console.log('custom button click')
      }}
    >
      <MdInfo />
    </div>,
  ]
}

infobutton

@MaxNoetzold
Copy link
Author

Is it possiblet to get this merged? I would resolve the conflicts in that case. @emregudur
i state again that this feature is an optin feature and doesnt change any functionality of existing code

@emregudur
Copy link
Contributor

@MaxNoetzold I will make custom buttons for MessageBox asap

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants