Invite users to service rooms #42
Conversation
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
…invitation. add `setAppElement` for screen readers.
There was a problem hiding this comment.
- Why do we show parenthesis in the dropdown, but not in the input later on? I like it better with parenthesis like in the search results. Can we do the same in the input?
-
- *clicking the last row*
-
-
- After clicking one of the rows, there's an unnecessary search request happening, that's always returning an empty array as the result. Can we stop that from happening? I feel like there's no point in that. Or is there?
The problem is really datalist not having events... As soon as the user selects an entry from the datalist, the input changes and therfore starts a new request. So we would have to cycle through the last search results to see if the input matches any of the results. I went ahead and swapped the datalist for a |
|
@marcel-klasse I tested your latest changes locally, and the quasi datalist interaction seems to work fine—besides the very short color changes from regular to faded back to regular after mouse-click checking/unchecking a list item which you already mentioned during our previous tests. Let’s deploy the pull-request branch to our |
|
please just re-request a review from me once you're fully happy :) |
… focused fix: key bindings
|
Please optimize for mobile viewports. |
# Conflicts: # components/UI/ErrorMessage.js # pages/spacedeck/[[...roomId]].js
| const successAmount = selectedUsers.length - errors.length; | ||
|
|
||
| // if everything is okay, we let the user know and exit the view. | ||
| successAmount > 0 && setUserFeedback(<Trans t={t} i18nKey="invitedUser" count={successAmount}>{ { successAmount } } user was invited and needs to accept your invitation</Trans>); |
There was a problem hiding this comment.
A cleaner way of combining translations with feedback messages would be to set the state here, and then somewhere down use the <Trans> component (or t() function respectively). For example, you could rename the state to be called something like invitedUsersCount and then at the bottom, where we render, instead of
{ userFeedback && _.isEmpty(errorFeedback) ? <div>{ userFeedback }</div> :... you would ...
{ invitedUsersCount && <Trans ... count={invitedUsersCount}>bla bla bla</Trans> }This would also allow to switch languages while the message is showing up.
Right now we're writing a translated string into the state, which is not really what the state is made for.
| "Invite users to {{name}}": "Benutzer*innen zu {{name}} einladen", | ||
| "invitedUser_one": "{{ count }} Benutzer*in wurde eingeladen und muss die Einladung annehmen", | ||
| "invitedUser_other": "{{ count }} Benutzer*innen wurden eingeladen und müssen die Einladung annehmen", | ||
| "Error while trying to fetch users. ": "Error beim Abruf der User.", |
There was a problem hiding this comment.
this is a really meh translation... 😕
There was a problem hiding this comment.
Also: Why do we have a period here? But no periods at the end of sentences above?
| @@ -0,0 +1,8 @@ | |||
| { | |||
| "Invite users to {{name}}": "Benutzer*innen zu {{name}} einladen", | |||
There was a problem hiding this comment.
How about "Jemanden" instead of "Benutzer*innen"?
Adds a component which opens an "invite user to matrix room" dialogue.
I've used react-modal for now, to open the dialogue. This way the component can be used within any component at any place.
The styling is very basic and your typical overlayed window style. We could also change this to float right and be more like an insert or cover the width of the
iframeView. But I think this will do for now.