mirror of
https://github.com/oxen-io/session-desktop.git
synced 2023-12-14 02:12:57 +01:00
enlarged avatar when clicked in showUserDetailsDialog
This commit is contained in:
parent
b21b439092
commit
4999ececfd
|
@ -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%;
|
||||
|
|
|
@ -54,7 +54,12 @@ export class Avatar extends React.PureComponent<Props, State> {
|
|||
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<Props, State> {
|
|||
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<Props, State> {
|
|||
: 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<Props, State> {
|
|||
borderStyle: 'solid',
|
||||
borderWidth: borderWidth,
|
||||
}
|
||||
: undefined;
|
||||
: radius
|
||||
? {
|
||||
borderRadius: radius,
|
||||
}
|
||||
: undefined;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -17,7 +17,11 @@ interface Props {
|
|||
onStartConversation: any;
|
||||
}
|
||||
|
||||
export class UserDetailsDialog extends React.Component<Props> {
|
||||
interface State {
|
||||
isEnlargeImageShown: boolean;
|
||||
}
|
||||
|
||||
export class UserDetailsDialog extends React.Component<Props, State> {
|
||||
private modalRef: any;
|
||||
|
||||
constructor(props: any) {
|
||||
|
@ -28,6 +32,7 @@ export class UserDetailsDialog extends React.Component<Props> {
|
|||
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<Props> {
|
|||
private renderAvatar() {
|
||||
const avatarPath = this.props.avatarPath;
|
||||
const color = this.props.avatarColor;
|
||||
const size = this.state.isEnlargeImageShown ? 300 : 80;
|
||||
|
||||
return (
|
||||
<Avatar
|
||||
|
@ -84,11 +90,17 @@ export class UserDetailsDialog extends React.Component<Props> {
|
|||
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':
|
||||
|
|
Loading…
Reference in a new issue