imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Rename DMInviteDialog to be a generic Invite Dialog

Browse source
This commit is contained in:
Travis Ralston 2020-01-16 13:42:34 -07:00
parent 5380651c84
commit 7da9e0582f
4 changed files with 45 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

2
res/css/_components.scss
View file

@ -57,13 +57,13 @@
@import "./views/dialogs/_ConfirmUserActionDialog.scss"; @import "./views/dialogs/_ConfirmUserActionDialog.scss";
@import "./views/dialogs/_CreateGroupDialog.scss"; @import "./views/dialogs/_CreateGroupDialog.scss";
@import "./views/dialogs/_CreateRoomDialog.scss"; @import "./views/dialogs/_CreateRoomDialog.scss";
@import "./views/dialogs/_DMInviteDialog.scss";
@import "./views/dialogs/_DeactivateAccountDialog.scss"; @import "./views/dialogs/_DeactivateAccountDialog.scss";
@import "./views/dialogs/_DeviceVerifyDialog.scss"; @import "./views/dialogs/_DeviceVerifyDialog.scss";
@import "./views/dialogs/_DevtoolsDialog.scss"; @import "./views/dialogs/_DevtoolsDialog.scss";
@import "./views/dialogs/_EncryptedEventDialog.scss"; @import "./views/dialogs/_EncryptedEventDialog.scss";
@import "./views/dialogs/_GroupAddressPicker.scss"; @import "./views/dialogs/_GroupAddressPicker.scss";
@import "./views/dialogs/_IncomingSasDialog.scss"; @import "./views/dialogs/_IncomingSasDialog.scss";
@import "./views/dialogs/_InviteDialog.scss";
@import "./views/dialogs/_MessageEditHistoryDialog.scss"; @import "./views/dialogs/_MessageEditHistoryDialog.scss";
@import "./views/dialogs/_RoomSettingsDialog.scss"; @import "./views/dialogs/_RoomSettingsDialog.scss";
@import "./views/dialogs/_RoomUpgradeDialog.scss"; @import "./views/dialogs/_RoomUpgradeDialog.scss";

40
res/css/views/dialogs/_DMInviteDialog.scss → res/css/views/dialogs/_InviteDialog.scss
View file

@ -14,11 +14,11 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
.mx_DMInviteDialog_addressBar { .mx_InviteDialog_addressBar {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
.mx_DMInviteDialog_editor { .mx_InviteDialog_editor {
flex: 1; flex: 1;
width: 100%; // Needed to make the Field inside grow width: 100%; // Needed to make the Field inside grow
background-color: $user-tile-hover-bg-color; background-color: $user-tile-hover-bg-color;
@ -28,7 +28,7 @@ limitations under the License.
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
.mx_DMInviteDialog_userTile { .mx_InviteDialog_userTile {
display: inline-block; display: inline-block;
float: left; float: left;
position: relative; position: relative;
@ -61,14 +61,14 @@ limitations under the License.
} }
} }
.mx_DMInviteDialog_goButton { .mx_InviteDialog_goButton {
width: 48px; width: 48px;
margin-left: 10px; margin-left: 10px;
height: 25px; height: 25px;
line-height: 25px; line-height: 25px;
} }
.mx_DMInviteDialog_buttonAndSpinner { .mx_InviteDialog_buttonAndSpinner {
.mx_Spinner { .mx_Spinner {
// Width and height are required to trick the layout engine. // Width and height are required to trick the layout engine.
width: 20px; width: 20px;
@ -80,7 +80,7 @@ limitations under the License.
} }
} }
.mx_DMInviteDialog_section { .mx_InviteDialog_section {
padding-bottom: 10px; padding-bottom: 10px;
h3 { h3 {
@ -91,7 +91,7 @@ limitations under the License.
} }
} }
.mx_DMInviteDialog_roomTile { .mx_InviteDialog_roomTile {
cursor: pointer; cursor: pointer;
padding: 5px 10px; padding: 5px 10px;
@ -104,7 +104,7 @@ limitations under the License.
vertical-align: middle; vertical-align: middle;
} }
.mx_DMInviteDialog_roomTile_avatarStack { .mx_InviteDialog_roomTile_avatarStack {
display: inline-block; display: inline-block;
position: relative; position: relative;
width: 36px; width: 36px;
@ -117,7 +117,7 @@ limitations under the License.
} }
} }
.mx_DMInviteDialog_roomTile_selected { .mx_InviteDialog_roomTile_selected {
width: 36px; width: 36px;
height: 36px; height: 36px;
border-radius: 36px; border-radius: 36px;
@ -141,20 +141,20 @@ limitations under the License.
} }
} }
.mx_DMInviteDialog_roomTile_name { .mx_InviteDialog_roomTile_name {
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: 14px;
color: $primary-fg-color; color: $primary-fg-color;
margin-left: 7px; margin-left: 7px;
} }
.mx_DMInviteDialog_roomTile_userId { .mx_InviteDialog_roomTile_userId {
font-size: 12px; font-size: 12px;
color: $muted-fg-color; color: $muted-fg-color;
margin-left: 7px; margin-left: 7px;
} }
.mx_DMInviteDialog_roomTile_time { .mx_InviteDialog_roomTile_time {
text-align: right; text-align: right;
font-size: 12px; font-size: 12px;
color: $muted-fg-color; color: $muted-fg-color;
@ -162,16 +162,16 @@ limitations under the License.
line-height: 36px; // Height of the avatar to keep the time vertically aligned line-height: 36px; // Height of the avatar to keep the time vertically aligned
} }
.mx_DMInviteDialog_roomTile_highlight { .mx_InviteDialog_roomTile_highlight {
font-weight: 900; font-weight: 900;
} }
} }
// Many of these styles are stolen from mx_UserPill, but adjusted for the invite dialog. // Many of these styles are stolen from mx_UserPill, but adjusted for the invite dialog.
.mx_DMInviteDialog_userTile { .mx_InviteDialog_userTile {
margin-right: 8px; margin-right: 8px;
.mx_DMInviteDialog_userTile_pill { .mx_InviteDialog_userTile_pill {
background-color: $username-variant1-color; background-color: $username-variant1-color;
border-radius: 12px; border-radius: 12px;
display: inline-block; display: inline-block;
@ -181,27 +181,27 @@ limitations under the License.
padding-right: 8px; padding-right: 8px;
color: #ffffff; // this is fine without a var because it's for both themes color: #ffffff; // this is fine without a var because it's for both themes
.mx_DMInviteDialog_userTile_avatar { .mx_InviteDialog_userTile_avatar {
border-radius: 20px; border-radius: 20px;
position: relative; position: relative;
left: -5px; left: -5px;
top: 2px; top: 2px;
} }
img.mx_DMInviteDialog_userTile_avatar { img.mx_InviteDialog_userTile_avatar {
vertical-align: top; vertical-align: top;
} }
.mx_DMInviteDialog_userTile_name { .mx_InviteDialog_userTile_name {
vertical-align: top; vertical-align: top;
} }
.mx_DMInviteDialog_userTile_threepidAvatar { .mx_InviteDialog_userTile_threepidAvatar {
background-color: #ffffff; // this is fine without a var because it's for both themes background-color: #ffffff; // this is fine without a var because it's for both themes
} }
} }
.mx_DMInviteDialog_userTile_remove { .mx_InviteDialog_userTile_remove {
display: inline-block; display: inline-block;
margin-left: 4px; margin-left: 4px;
} }

4
src/RoomInvite.js
View file

@ -44,9 +44,9 @@ export function inviteMultipleToRoom(roomId, addrs) {
export function showStartChatInviteDialog() { export function showStartChatInviteDialog() {
if (SettingsStore.isFeatureEnabled("feature_ftue_dms")) { if (SettingsStore.isFeatureEnabled("feature_ftue_dms")) {
// This new dialog handles the room creation internally - we don't need to worry about it. // This new dialog handles the room creation internally - we don't need to worry about it.
const DMInviteDialog = sdk.getComponent("dialogs.DMInviteDialog"); const InviteDialog = sdk.getComponent("dialogs.InviteDialog");
Modal.createTrackedDialog( Modal.createTrackedDialog(
'Start DM', '', DMInviteDialog, {}, 'Start DM', '', InviteDialog, {},
/*className=*/null, /*isPriority=*/false, /*isStatic=*/true, /*className=*/null, /*isPriority=*/false, /*isStatic=*/true,
); );
return; return;

44
src/components/views/dialogs/DMInviteDialog.js → src/components/views/dialogs/InviteDialog.js
View file

@ -140,11 +140,11 @@ class DMUserTile extends React.PureComponent {
const avatarSize = 20; const avatarSize = 20;
const avatar = this.props.member.isEmail const avatar = this.props.member.isEmail
? <img ? <img
className='mx_DMInviteDialog_userTile_avatar mx_DMInviteDialog_userTile_threepidAvatar' className='mx_InviteDialog_userTile_avatar mx_InviteDialog_userTile_threepidAvatar'
src={require("../../../../res/img/icon-email-pill-avatar.svg")} src={require("../../../../res/img/icon-email-pill-avatar.svg")}
width={avatarSize} height={avatarSize} /> width={avatarSize} height={avatarSize} />
: <BaseAvatar : <BaseAvatar
className='mx_DMInviteDialog_userTile_avatar' className='mx_InviteDialog_userTile_avatar'
url={getHttpUriForMxc( url={getHttpUriForMxc(
MatrixClientPeg.get().getHomeserverUrl(), this.props.member.getMxcAvatarUrl(), MatrixClientPeg.get().getHomeserverUrl(), this.props.member.getMxcAvatarUrl(),
avatarSize, avatarSize, "crop")} avatarSize, avatarSize, "crop")}
@ -154,13 +154,13 @@ class DMUserTile extends React.PureComponent {
height={avatarSize} />; height={avatarSize} />;
return ( return (
<span className='mx_DMInviteDialog_userTile'> <span className='mx_InviteDialog_userTile'>
<span className='mx_DMInviteDialog_userTile_pill'> <span className='mx_InviteDialog_userTile_pill'>
{avatar} {avatar}
<span className='mx_DMInviteDialog_userTile_name'>{this.props.member.name}</span> <span className='mx_InviteDialog_userTile_name'>{this.props.member.name}</span>
</span> </span>
<AccessibleButton <AccessibleButton
className='mx_DMInviteDialog_userTile_remove' className='mx_InviteDialog_userTile_remove'
onClick={this._onRemove} onClick={this._onRemove}
> >
<img src={require("../../../../res/img/icon-pill-remove.svg")} alt={_t('Remove')} width={8} height={8} /> <img src={require("../../../../res/img/icon-pill-remove.svg")} alt={_t('Remove')} width={8} height={8} />
@ -211,7 +211,7 @@ class DMRoomTile extends React.PureComponent {
// Highlight the word the user entered // Highlight the word the user entered
const substr = str.substring(i, filterStr.length + i); const substr = str.substring(i, filterStr.length + i);
result.push(<span className='mx_DMInviteDialog_roomTile_highlight' key={i + 'bold'}>{substr}</span>); result.push(<span className='mx_InviteDialog_roomTile_highlight' key={i + 'bold'}>{substr}</span>);
i += substr.length; i += substr.length;
} }
@ -229,7 +229,7 @@ class DMRoomTile extends React.PureComponent {
let timestamp = null; let timestamp = null;
if (this.props.lastActiveTs) { if (this.props.lastActiveTs) {
const humanTs = humanizeTime(this.props.lastActiveTs); const humanTs = humanizeTime(this.props.lastActiveTs);
timestamp = <span className='mx_DMInviteDialog_roomTile_time'>{humanTs}</span>; timestamp = <span className='mx_InviteDialog_roomTile_time'>{humanTs}</span>;
} }
const avatarSize = 36; const avatarSize = 36;
@ -249,30 +249,30 @@ class DMRoomTile extends React.PureComponent {
let checkmark = null; let checkmark = null;
if (this.props.isSelected) { if (this.props.isSelected) {
// To reduce flickering we put the 'selected' room tile above the real avatar // To reduce flickering we put the 'selected' room tile above the real avatar
checkmark = <div className='mx_DMInviteDialog_roomTile_selected' />; checkmark = <div className='mx_InviteDialog_roomTile_selected' />;
} }
// To reduce flickering we put the checkmark on top of the actual avatar (prevents // To reduce flickering we put the checkmark on top of the actual avatar (prevents
// the browser from reloading the image source when the avatar remounts). // the browser from reloading the image source when the avatar remounts).
const stackedAvatar = ( const stackedAvatar = (
<span className='mx_DMInviteDialog_roomTile_avatarStack'> <span className='mx_InviteDialog_roomTile_avatarStack'>
{avatar} {avatar}
{checkmark} {checkmark}
</span> </span>
); );
return ( return (
<div className='mx_DMInviteDialog_roomTile' onClick={this._onClick}> <div className='mx_InviteDialog_roomTile' onClick={this._onClick}>
{stackedAvatar} {stackedAvatar}
<span className='mx_DMInviteDialog_roomTile_name'>{this._highlightName(this.props.member.name)}</span> <span className='mx_InviteDialog_roomTile_name'>{this._highlightName(this.props.member.name)}</span>
<span className='mx_DMInviteDialog_roomTile_userId'>{this._highlightName(this.props.member.userId)}</span> <span className='mx_InviteDialog_roomTile_userId'>{this._highlightName(this.props.member.userId)}</span>
{timestamp} {timestamp}
</div> </div>
); );
} }
} }
export default class DMInviteDialog extends React.PureComponent { export default class InviteDialog extends React.PureComponent {
static propTypes = { static propTypes = {
// Takes an array of user IDs/emails to invite. // Takes an array of user IDs/emails to invite.
onFinished: PropTypes.func.isRequired, onFinished: PropTypes.func.isRequired,
@ -690,7 +690,7 @@ export default class DMInviteDialog extends React.PureComponent {
if (sourceMembers.length === 0 && additionalMembers.length === 0) { if (sourceMembers.length === 0 && additionalMembers.length === 0) {
return ( return (
<div className='mx_DMInviteDialog_section'> <div className='mx_InviteDialog_section'>
<h3>{sectionName}</h3> <h3>{sectionName}</h3>
<p>{_t("No results")}</p> <p>{_t("No results")}</p>
</div> </div>
@ -731,7 +731,7 @@ export default class DMInviteDialog extends React.PureComponent {
/> />
)); ));
return ( return (
<div className='mx_DMInviteDialog_section'> <div className='mx_InviteDialog_section'>
<h3>{sectionName}</h3> <h3>{sectionName}</h3>
{tiles} {tiles}
{showMore} {showMore}
@ -754,7 +754,7 @@ export default class DMInviteDialog extends React.PureComponent {
/> />
); );
return ( return (
<div className='mx_DMInviteDialog_editor' onClick={this._onClickInputArea}> <div className='mx_InviteDialog_editor' onClick={this._onClickInputArea}>
{targets} {targets}
{input} {input}
</div> </div>
@ -808,12 +808,12 @@ export default class DMInviteDialog extends React.PureComponent {
const userId = MatrixClientPeg.get().getUserId(); const userId = MatrixClientPeg.get().getUserId();
return ( return (
<BaseDialog <BaseDialog
className='mx_DMInviteDialog' className='mx_InviteDialog'
hasCancel={true} hasCancel={true}
onFinished={this._cancel} onFinished={this._cancel}
title={_t("Direct Messages")} title={_t("Direct Messages")}
> >
<div className='mx_DMInviteDialog_content'> <div className='mx_InviteDialog_content'>
<p> <p>
{_t( {_t(
"If you can't find someone, ask them for their username, or share your " + "If you can't find someone, ask them for their username, or share your " +
@ -822,13 +822,13 @@ export default class DMInviteDialog extends React.PureComponent {
{a: (sub) => <a href={makeUserPermalink(userId)} rel="noopener" target="_blank">{sub}</a>}, {a: (sub) => <a href={makeUserPermalink(userId)} rel="noopener" target="_blank">{sub}</a>},
)} )}
</p> </p>
<div className='mx_DMInviteDialog_addressBar'> <div className='mx_InviteDialog_addressBar'>
{this._renderEditor()} {this._renderEditor()}
<div className='mx_DMInviteDialog_buttonAndSpinner'> <div className='mx_InviteDialog_buttonAndSpinner'>
<AccessibleButton <AccessibleButton
kind="primary" kind="primary"
onClick={this._startDm} onClick={this._startDm}
className='mx_DMInviteDialog_goButton' className='mx_InviteDialog_goButton'
disabled={this.state.busy} disabled={this.state.busy}
> >
{_t("Go")} {_t("Go")}