Skip to content

Commit 9b21437

Browse files
t3chguyt3chguy
authored
Merge pull request matrix-org#5418 from matrix-org/t3chguy/fix/muggle-hustle
Small delight tweaks to improve rough corners in the app
2 parents 3ce45ef + 0911007 commit 9b21437

File tree

15 files changed

+295
-187
lines changed

15 files changed

+295
-187
lines changed

‎res/css/views/auth/_InteractiveAuthEntryComponents.scss‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,35 @@ See the License for the specific language governing permissions and
1414
limitations under the License.
1515
*/
1616

17+
.mx_InteractiveAuthEntryComponents_emailWrapper {
18+
padding-right: 60px;
19+
position: relative;
20+
margin-top: 32px;
21+
margin-bottom: 32px;
22+
23+
&::before, &::after {
24+
position: absolute;
25+
width: 116px;
26+
height: 116px;
27+
content: "";
28+
right: -10px;
29+
}
30+
31+
&::before {
32+
background-color: rgba(244, 246, 250, 0.91);
33+
border-radius: 50%;
34+
top: -20px;
35+
}
36+
37+
&::after {
38+
background-image: url('$(res)/img/element-icons/email-prompt.svg');
39+
background-repeat: no-repeat;
40+
background-position: center;
41+
background-size: contain;
42+
top: -25px;
43+
}
44+
}
45+
1746
.mx_InteractiveAuthEntryComponents_msisdnWrapper {
1847
text-align: center;
1948
}

‎res/css/views/rooms/_RoomList.scss‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,14 +33,14 @@ limitations under the License.
3333

3434
div:first-child {
3535
font-weight: $font-semi-bold;
36-
margin-bottom: 8px;
3736
}
3837

3938
.mx_AccessibleButton {
4039
color: $secondary-fg-color;
4140
position: relative;
4241
padding: 0 0 0 24px;
4342
font-size: inherit;
43+
margin-top: 8px;
4444

4545
&::before {
4646
content: '';
@@ -53,6 +53,13 @@ limitations under the License.
5353
mask-position: center;
5454
mask-size: contain;
5555
mask-repeat: no-repeat;
56+
}
57+
58+
&.mx_RoomList_explorePrompt_startChat::before {
59+
mask-image: url('$(res)/img/element-icons/feedback.svg');
60+
}
61+
62+
&.mx_RoomList_explorePrompt_explore::before {
5663
mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
5764
}
5865
}

‎res/img/element-icons/email-prompt.svg‎

Lines changed: 13 additions & 0 deletions
Loading

‎src/RoomInvite.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,11 +40,11 @@ export function inviteMultipleToRoom(roomId, addrs) {
4040
return inviter.invite(addrs).then(states => Promise.resolve({states, inviter}));
4141
}
4242

43-
export function showStartChatInviteDialog() {
43+
export function showStartChatInviteDialog(initialText) {
4444
// This dialog handles the room creation internally - we don't need to worry about it.
4545
const InviteDialog = sdk.getComponent("dialogs.InviteDialog");
4646
Modal.createTrackedDialog(
47-
'Start DM', '', InviteDialog, {kind: KIND_DM},
47+
'Start DM', '', InviteDialog, {kind: KIND_DM, initialText},
4848
/*className=*/null, /*isPriority=*/false, /*isStatic=*/true,
4949
);
5050
}

‎src/components/structures/MatrixChat.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -653,8 +653,9 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
653653
}
654654
case Action.ViewRoomDirectory: {
655655
const RoomDirectory = sdk.getComponent("structures.RoomDirectory");
656-
Modal.createTrackedDialog('Room directory', '', RoomDirectory, {},
657-
'mx_RoomDirectory_dialogWrapper', false, true);
656+
Modal.createTrackedDialog('Room directory', '', RoomDirectory, {
657+
initialText: payload.initialText,
658+
}, 'mx_RoomDirectory_dialogWrapper', false, true);
658659

659660
// View the welcome or home page if we need something to look at
660661
this.viewSomethingBehindModal();
@@ -677,7 +678,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
677678
this.chatCreateOrReuse(payload.user_id);
678679
break;
679680
case 'view_create_chat':
680-
showStartChatInviteDialog();
681+
showStartChatInviteDialog(payload.initialText || "");
681682
break;
682683
case 'view_invite':
683684
showRoomInviteDialog(payload.roomId);

‎src/components/structures/RoomDirectory.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ function track(action) {
4444

4545
export default class RoomDirectory extends React.Component {
4646
static propTypes = {
47+
initialText: PropTypes.string,
4748
onFinished: PropTypes.func.isRequired,
4849
};
4950

@@ -61,7 +62,7 @@ export default class RoomDirectory extends React.Component {
6162
error: null,
6263
instanceId: undefined,
6364
roomServer: MatrixClientPeg.getHomeserverName(),
64-
filterString: null,
65+
filterString: this.props.initialText || "",
6566
selectedCommunityId: SettingsStore.getValue("feature_communities_v2_prototypes")
6667
? selectedCommunityId
6768
: null,
@@ -686,6 +687,7 @@ export default class RoomDirectory extends React.Component {
686687
onJoinClick={this.onJoinFromSearchClick}
687688
placeholder={placeholder}
688689
showJoinButton={showJoinButton}
690+
initialText={this.props.initialText}
689691
/>
690692
{dropdown}
691693
</div>;

‎src/components/structures/RoomSearch.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,7 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
148148
onBlur={this.onBlur}
149149
onChange={this.onChange}
150150
onKeyDown={this.onKeyDown}
151-
placeholder={_t("Search")}
151+
placeholder={_t("Filter")}
152152
autoComplete="off"
153153
/>
154154
);
@@ -164,7 +164,7 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
164164
if (this.props.isMinimized) {
165165
icon = (
166166
<AccessibleButton
167-
title={_t("Search rooms")}
167+
title={_t("Filter rooms and people")}
168168
className="mx_RoomSearch_icon mx_RoomSearch_minimizedHandle"
169169
onClick={this.openSearch}
170170
/>

‎src/components/structures/auth/Registration.js‎

Lines changed: 42 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -502,6 +502,11 @@ export default class Registration extends React.Component {
502502
return null;
503503
}
504504

505+
// Hide the server picker once the user is doing UI Auth unless encountered a fatal server error
506+
if (this.state.phase !== PHASE_SERVER_DETAILS && this.state.doingUIAuth && !this.state.serverErrorIsFatal) {
507+
return null;
508+
}
509+
505510
// If we're on a different phase, we only show the server type selector,
506511
// which is always shown if we allow custom URLs at all.
507512
// (if there's a fatal server error, we need to show the full server
@@ -582,25 +587,13 @@ export default class Registration extends React.Component {
582587
<Spinner />
583588
</div>;
584589
} else if (this.state.flows.length) {
585-
let onEditServerDetailsClick = null;
586-
// If custom URLs are allowed and we haven't selected the Free server type, wire
587-
// up the server details edit link.
588-
if (
589-
PHASES_ENABLED &&
590-
!SdkConfig.get()['disable_custom_urls'] &&
591-
this.state.serverType !== ServerType.FREE
592-
) {
593-
onEditServerDetailsClick = this.onEditServerDetailsClick;
594-
}
595-
596590
return <RegistrationForm
597591
defaultUsername={this.state.formVals.username}
598592
defaultEmail={this.state.formVals.email}
599593
defaultPhoneCountry={this.state.formVals.phoneCountry}
600594
defaultPhoneNumber={this.state.formVals.phoneNumber}
601595
defaultPassword={this.state.formVals.password}
602596
onRegisterClick={this.onFormSubmit}
603-
onEditServerDetailsClick={onEditServerDetailsClick}
604597
flows={this.state.flows}
605598
serverConfig={this.props.serverConfig}
606599
canSubmit={!this.state.serverErrorIsFatal}
@@ -686,11 +679,48 @@ export default class Registration extends React.Component {
686679
{ regDoneText }
687680
</div>;
688681
} else {
682+
let yourMatrixAccountText = _t('Create your Matrix account on %(serverName)s', {
683+
serverName: this.props.serverConfig.hsName,
684+
});
685+
if (this.props.serverConfig.hsNameIsDifferent) {
686+
const TextWithTooltip = sdk.getComponent("elements.TextWithTooltip");
687+
688+
yourMatrixAccountText = _t('Create your Matrix account on <underlinedServerName />', {}, {
689+
'underlinedServerName': () => {
690+
return <TextWithTooltip
691+
class="mx_Login_underlinedServerName"
692+
tooltip={this.props.serverConfig.hsUrl}
693+
>
694+
{this.props.serverConfig.hsName}
695+
</TextWithTooltip>;
696+
},
697+
});
698+
}
699+
700+
// If custom URLs are allowed, user is not doing UIA flows and they haven't selected the Free server type,
701+
// wire up the server details edit link.
702+
let editLink = null;
703+
if (PHASES_ENABLED &&
704+
!SdkConfig.get()['disable_custom_urls'] &&
705+
this.state.serverType !== ServerType.FREE &&
706+
!this.state.doingUIAuth
707+
) {
708+
editLink = (
709+
<a className="mx_AuthBody_editServerDetails" href="#" onClick={this.onEditServerDetailsClick}>
710+
{_t('Change')}
711+
</a>
712+
);
713+
}
714+
689715
body = <div>
690716
<h2>{ _t('Create your account') }</h2>
691717
{ errorText }
692718
{ serverDeadSection }
693719
{ this.renderServerComponent() }
720+
{ this.state.phase !== PHASE_SERVER_DETAILS && <h3>
721+
{yourMatrixAccountText}
722+
{editLink}
723+
</h3> }
694724
{ this.renderRegisterComponent() }
695725
{ goBack }
696726
{ signIn }

‎src/components/views/auth/CaptchaForm.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,10 @@ export default class CaptchaForm extends React.Component {
102102
console.log("Loaded recaptcha script.");
103103
try {
104104
this._renderRecaptcha(DIV_ID);
105+
// clear error if re-rendered
106+
this.setState({
107+
errorText: null,
108+
});
105109
CountlyAnalytics.instance.track("onboarding_grecaptcha_loaded");
106110
} catch (e) {
107111
this.setState({

‎src/components/views/auth/InteractiveAuthEntryComponents.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -421,12 +421,12 @@ export class EmailIdentityAuthEntry extends React.Component {
421421
return <Spinner />;
422422
} else {
423423
return (
424-
<div>
425-
<p>{ _t("An email has been sent to %(emailAddress)s",
426-
{ emailAddress: (sub) => <i>{ this.props.inputs.emailAddress }</i> },
424+
<div className="mx_InteractiveAuthEntryComponents_emailWrapper">
425+
<p>{ _t("A confirmation email has been sent to %(emailAddress)s",
426+
{ emailAddress: (sub) => <b>{ this.props.inputs.emailAddress }</b> },
427427
) }
428428
</p>
429-
<p>{ _t("Please check your email to continue registration.") }</p>
429+
<p>{ _t("Open the link in the email to continue registration.") }</p>
430430
</div>
431431
);
432432
}

0 commit comments

Comments
 (0)