From b21b4390928d014c1ee4c3b2bf7604650659f79c Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Wed, 4 Dec 2019 10:23:14 +1100 Subject: [PATCH 2/8] make showUserDetails modal close on click outside --- ts/components/UserDetailsDialog.tsx | 58 +++++++++++++++++++---------- 1 file changed, 39 insertions(+), 19 deletions(-) diff --git a/ts/components/UserDetailsDialog.tsx b/ts/components/UserDetailsDialog.tsx index e52f49713..437059274 100644 --- a/ts/components/UserDetailsDialog.tsx +++ b/ts/components/UserDetailsDialog.tsx @@ -18,6 +18,8 @@ interface Props { } export class UserDetailsDialog extends React.Component { + private modalRef: any; + constructor(props: any) { super(props); @@ -25,6 +27,15 @@ export class UserDetailsDialog extends React.Component { this.onKeyUp = this.onKeyUp.bind(this); this.onClickStartConversation = this.onClickStartConversation.bind(this); window.addEventListener('keyup', this.onKeyUp); + this.modalRef = React.createRef(); + } + + public componentWillMount() { + document.addEventListener('mousedown', this.handleClick, false); + } + + public componentWillUnmount() { + document.removeEventListener('mousedown', this.handleClick, false); } public render() { @@ -34,25 +45,27 @@ export class UserDetailsDialog extends React.Component { const startConversation = i18n('startConversation'); return ( -
-
-
{this.renderAvatar()}
-
-
{this.props.profileName}
-
{this.props.pubkey}
- -
- - - +
(this.modalRef = element)}> +
+
+
{this.renderAvatar()}
+
+
{this.props.profileName}
+
{this.props.pubkey}
+ +
+ + + +
); @@ -98,4 +111,11 @@ export class UserDetailsDialog extends React.Component { this.props.onStartConversation(); this.closeDialog(); } + + private readonly handleClick = (e: any) => { + if (this.modalRef.contains(e.target)) { + return; + } + this.closeDialog(); + }; } From 4999ececfd6cde301ffd4672adc4e871338581ac Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Wed, 4 Dec 2019 14:36:40 +1100 Subject: [PATCH 3/8] enlarged avatar when clicked in showUserDetailsDialog --- stylesheets/_modules.scss | 21 +++++++++++++++++++++ ts/components/Avatar.tsx | 23 +++++++++++++++++++---- ts/components/UserDetailsDialog.tsx | 16 ++++++++++++++-- 3 files changed, 54 insertions(+), 6 deletions(-) diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 6fa4cbeaa..8ccf49ed8 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -2199,6 +2199,27 @@ width: 42px; } +.module-avatar--300 { + height: 300px; + width: 300px; + + img { + height: 300px; + width: 300px; + } +} + +.module-avatar__label--300 { + width: 300px; + font-size: 150px; + line-height: 302px; +} + +.module-avatar__icon--300 { + height: 158px; + width: 158px; +} + .module-avatar__icon--note-to-self { width: 70%; height: 70%; diff --git a/ts/components/Avatar.tsx b/ts/components/Avatar.tsx index bc4394b05..98e6dbcf7 100644 --- a/ts/components/Avatar.tsx +++ b/ts/components/Avatar.tsx @@ -54,7 +54,12 @@ export class Avatar extends React.PureComponent { return this.renderNoImage(); } - const borderStyle = this.getBorderStyle(borderColor, borderWidth); + const borderRadius = '50%'; + const borderStyle = this.getBorderStyle( + borderColor, + borderWidth, + borderRadius + ); // Generate the seed const hash = phoneNumber.substring(0, 12); @@ -162,7 +167,13 @@ export class Avatar extends React.PureComponent { const hasAvatar = avatarPath || conversationType === 'direct'; const hasImage = !noteToSelf && hasAvatar && !imageBroken; - if (size !== 28 && size !== 36 && size !== 48 && size !== 80) { + if ( + size !== 28 && + size !== 36 && + size !== 48 && + size !== 80 && + size !== 300 + ) { throw new Error(`Size ${size} is not supported!`); } @@ -202,7 +213,7 @@ export class Avatar extends React.PureComponent { : this.renderIdenticon(); } - private getBorderStyle(color?: string, width?: number) { + private getBorderStyle(color?: string, width?: number, radius?: string) { const borderWidth = typeof width === 'number' ? width : 3; return color @@ -211,6 +222,10 @@ export class Avatar extends React.PureComponent { borderStyle: 'solid', borderWidth: borderWidth, } - : undefined; + : radius + ? { + borderRadius: radius, + } + : undefined; } } diff --git a/ts/components/UserDetailsDialog.tsx b/ts/components/UserDetailsDialog.tsx index 437059274..26c96bb7c 100644 --- a/ts/components/UserDetailsDialog.tsx +++ b/ts/components/UserDetailsDialog.tsx @@ -17,7 +17,11 @@ interface Props { onStartConversation: any; } -export class UserDetailsDialog extends React.Component { +interface State { + isEnlargeImageShown: boolean; +} + +export class UserDetailsDialog extends React.Component { private modalRef: any; constructor(props: any) { @@ -28,6 +32,7 @@ export class UserDetailsDialog extends React.Component { this.onClickStartConversation = this.onClickStartConversation.bind(this); window.addEventListener('keyup', this.onKeyUp); this.modalRef = React.createRef(); + this.state = { isEnlargeImageShown: false }; } public componentWillMount() { @@ -74,6 +79,7 @@ export class UserDetailsDialog extends React.Component { private renderAvatar() { const avatarPath = this.props.avatarPath; const color = this.props.avatarColor; + const size = this.state.isEnlargeImageShown ? 300 : 80; return ( { name={this.props.profileName} phoneNumber={this.props.pubkey} profileName={this.props.profileName} - size={80} + size={size} + onAvatarClick={this.handleShowEnlargedDialog} + borderWidth={size / 2} /> ); } + private readonly handleShowEnlargedDialog = () => { + this.setState({ isEnlargeImageShown: !this.state.isEnlargeImageShown }); + }; + private onKeyUp(event: any) { switch (event.key) { case 'Enter': From 2fdb4c35405ff785fb8663480f25100826041761 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Wed, 4 Dec 2019 16:33:59 +1100 Subject: [PATCH 4/8] cleanup code --- ts/components/Avatar.tsx | 20 +++++++------------- 1 file changed, 7 insertions(+), 13 deletions(-) diff --git a/ts/components/Avatar.tsx b/ts/components/Avatar.tsx index 98e6dbcf7..fd57617ff 100644 --- a/ts/components/Avatar.tsx +++ b/ts/components/Avatar.tsx @@ -54,11 +54,9 @@ export class Avatar extends React.PureComponent { return this.renderNoImage(); } - const borderRadius = '50%'; const borderStyle = this.getBorderStyle( borderColor, borderWidth, - borderRadius ); // Generate the seed @@ -213,19 +211,15 @@ export class Avatar extends React.PureComponent { : this.renderIdenticon(); } - private getBorderStyle(color?: string, width?: number, radius?: string) { + private getBorderStyle(color?: string, width?: number) { const borderWidth = typeof width === 'number' ? width : 3; return color - ? { - borderColor: color, - borderStyle: 'solid', - borderWidth: borderWidth, - } - : radius - ? { - borderRadius: radius, - } - : undefined; + ? { + borderColor: color, + borderStyle: 'solid', + borderWidth: borderWidth, + } + : undefined; } } From 14dab9298914342eaa900dff8456437c8c5b6cae Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Wed, 4 Dec 2019 16:43:45 +1100 Subject: [PATCH 5/8] jazzicon make borderRadius 50% rather than 50px --- ts/components/JazzIcon/Paper.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ts/components/JazzIcon/Paper.tsx b/ts/components/JazzIcon/Paper.tsx index c6d38ab6b..ee3791637 100644 --- a/ts/components/JazzIcon/Paper.tsx +++ b/ts/components/JazzIcon/Paper.tsx @@ -1,7 +1,7 @@ import React from 'react'; const styles = { - borderRadius: '50px', + borderRadius: '50%', display: 'inline-block', margin: 0, overflow: 'hidden', From 531b782669bbd6b3b4f85a115bb095941353cb87 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Tue, 10 Dec 2019 10:52:33 +1100 Subject: [PATCH 6/8] click on our avatar show the edit profile dialog & fix lint --- js/background.js | 7 +++++++ ts/components/Avatar.tsx | 17 +++++++---------- 2 files changed, 14 insertions(+), 10 deletions(-) diff --git a/js/background.js b/js/background.js index 82f6c44b6..583ad636d 100644 --- a/js/background.js +++ b/js/background.js @@ -1014,6 +1014,13 @@ }); Whisper.events.on('onShowUserDetails', async ({ userPubKey }) => { + const isMe = userPubKey === textsecure.storage.user.getNumber(); + + if (isMe) { + Whisper.events.trigger('onEditProfile'); + return; + } + const conversation = await ConversationController.getOrCreateAndWait( userPubKey, 'private' diff --git a/ts/components/Avatar.tsx b/ts/components/Avatar.tsx index fd57617ff..61cc729c3 100644 --- a/ts/components/Avatar.tsx +++ b/ts/components/Avatar.tsx @@ -54,10 +54,7 @@ export class Avatar extends React.PureComponent { return this.renderNoImage(); } - const borderStyle = this.getBorderStyle( - borderColor, - borderWidth, - ); + const borderStyle = this.getBorderStyle(borderColor, borderWidth); // Generate the seed const hash = phoneNumber.substring(0, 12); @@ -215,11 +212,11 @@ export class Avatar extends React.PureComponent { const borderWidth = typeof width === 'number' ? width : 3; return color - ? { - borderColor: color, - borderStyle: 'solid', - borderWidth: borderWidth, - } - : undefined; + ? { + borderColor: color, + borderStyle: 'solid', + borderWidth: borderWidth, + } + : undefined; } } From a30d772c64751b7a71d49cf5e28984cb4a15602f Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Tue, 10 Dec 2019 12:19:50 +1100 Subject: [PATCH 7/8] topleft avatar click show edit profile --- ts/components/MainHeader.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/ts/components/MainHeader.tsx b/ts/components/MainHeader.tsx index d2dda7a0f..c7ad5a24c 100644 --- a/ts/components/MainHeader.tsx +++ b/ts/components/MainHeader.tsx @@ -232,6 +232,9 @@ export class MainHeader extends React.Component { phoneNumber={phoneNumber} profileName={profileName} size={28} + onAvatarClick={() => { + trigger('onEditProfile'); + }} />
Date: Tue, 10 Dec 2019 12:58:54 +1100 Subject: [PATCH 8/8] rename UserDetailsDialog isEnlargeImageShown-> isEnlargedImageShown --- ts/components/UserDetailsDialog.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/ts/components/UserDetailsDialog.tsx b/ts/components/UserDetailsDialog.tsx index 26c96bb7c..6ae11a6f8 100644 --- a/ts/components/UserDetailsDialog.tsx +++ b/ts/components/UserDetailsDialog.tsx @@ -18,7 +18,7 @@ interface Props { } interface State { - isEnlargeImageShown: boolean; + isEnlargedImageShown: boolean; } export class UserDetailsDialog extends React.Component { @@ -32,7 +32,7 @@ export class UserDetailsDialog extends React.Component { this.onClickStartConversation = this.onClickStartConversation.bind(this); window.addEventListener('keyup', this.onKeyUp); this.modalRef = React.createRef(); - this.state = { isEnlargeImageShown: false }; + this.state = { isEnlargedImageShown: false }; } public componentWillMount() { @@ -79,7 +79,7 @@ export class UserDetailsDialog extends React.Component { private renderAvatar() { const avatarPath = this.props.avatarPath; const color = this.props.avatarColor; - const size = this.state.isEnlargeImageShown ? 300 : 80; + const size = this.state.isEnlargedImageShown ? 300 : 80; return ( { } private readonly handleShowEnlargedDialog = () => { - this.setState({ isEnlargeImageShown: !this.state.isEnlargeImageShown }); + this.setState({ isEnlargedImageShown: !this.state.isEnlargedImageShown }); }; private onKeyUp(event: any) {