keejef
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop
2
0
Fork 0
Code Issues 8 Projects Releases Wiki Activity

Formatting and button positioning

Browse Source
pull/738/head
Vincent 6 years ago
parent c369b0c553
commit b68b4d8a27
7 changed files with 95 additions and 53 deletions
Show Stats Download Patch File Download Diff File

1
js/background.js
Unescape Escape View File

@ -820,7 +820,6 @@
confirmDialog.render(); confirmDialog.render();
}; };
window.showQRDialog = window.owsDesktopApp.appView.showQRDialog; window.showQRDialog = window.owsDesktopApp.appView.showQRDialog;
window.showSeedDialog = window.owsDesktopApp.appView.showSeedDialog; window.showSeedDialog = window.owsDesktopApp.appView.showSeedDialog;
window.showPasswordDialog = window.owsDesktopApp.appView.showPasswordDialog; window.showPasswordDialog = window.owsDesktopApp.appView.showPasswordDialog;

37
stylesheets/_session.scss
Unescape Escape View File

@ -219,6 +219,10 @@ $session_message-container-border-radius: 5px;
margin-right: 5px; margin-right: 5px;
} }
.message-wrapper {
font-family: 'SF Pro Text';
}
.session-button { .session-button {
@mixin transparent-background($textAndBorderColor) { @mixin transparent-background($textAndBorderColor) {
background-color: Transparent; background-color: Transparent;
@ -870,7 +874,7 @@ label {
height: 68.45px; height: 68.45px;
} }
} }
.avatar-center-inner { .avatar-center-inner {
position: relative; position: relative;
@ -891,8 +895,8 @@ label {
padding-top: 3px; padding-top: 3px;
background-color: $session-color-white; background-color: $session-color-white;
transition: $session-transition-duration; transition: $session-transition-duration;
&:hover{ &:hover {
filter: brightness(90%); filter: brightness(90%);
} }
@ -900,7 +904,7 @@ label {
opacity: 1; opacity: 1;
} }
} }
} }
.image-upload-section { .image-upload-section {
display: flex; display: flex;
@ -912,15 +916,15 @@ label {
height: 80px; height: 80px;
border-radius: 100%; border-radius: 100%;
background-color: rgba($session-color-black, 0.72); background-color: rgba($session-color-black, 0.72);
box-shadow: 0px 0px 3px 0.5px rgba(0,0,0,0.75); box-shadow: 0px 0px 3px 0.5px rgba(0, 0, 0, 0.75);
opacity: 0; opacity: 0;
transition: $session-transition-duration; transition: $session-transition-duration;
&:after{ &:after {
content: "Edit"; content: 'Edit';
} }
&:hover{ &:hover {
opacity: 1; opacity: 1;
} }
} }
@ -939,22 +943,30 @@ label {
} }
.session-id-section { .session-id-section {
display: flex;
flex-direction: column;
justify-content: center;
.panel-text-divider { .panel-text-divider {
margin-top: 35px; margin-top: 35px;
margin-bottom: 35px; margin-bottom: 35px;
} }
&-display{ &-display {
text-align: center; text-align: center;
word-break: break-all; word-break: break-all;
font-size: $session-font-md; font-size: $session-font-md;
padding: 0px $session-margin-lg; padding: 0px $session-margin-lg;
font-family: "SF Pro Text"; font-family: 'SF Pro Text';
font-weight: 100; font-weight: 100;
color: rgba($session-color-white, 0.80); color: rgba($session-color-white, 0.8);
font-size: $session-font-md; font-size: $session-font-md;
padding: 0px $session-margin-sm; padding: 0px $session-margin-sm;
} }
.session-button {
width: 148px;
}
} }
.profile-name { .profile-name {
@ -970,7 +982,7 @@ label {
font-size: $session-font-md; font-size: $session-font-md;
background-color: $session-shade-5 !important; background-color: $session-shade-5 !important;
} }
&-uneditable { &-uneditable {
display: flex; display: flex;
align-items: center; align-items: center;
@ -981,7 +993,6 @@ label {
font-size: $session-font-md; font-size: $session-font-md;
padding: 0px $session-margin-sm; padding: 0px $session-margin-sm;
} }
} }
} }
} }

77
ts/components/EditProfileDialog.tsx
Unescape Escape View File

@ -3,7 +3,11 @@ import { QRCode } from 'react-qr-svg';
import { Avatar } from './Avatar'; import { Avatar } from './Avatar';
import { SessionButton, SessionButtonColor, SessionButtonType } from './session/SessionButton'; import {
SessionButton,
SessionButtonColor,
SessionButtonType,
} from './session/SessionButton';
import { import {
SessionIconButton, SessionIconButton,
@ -67,13 +71,18 @@ export class EditProfileDialog extends React.Component<Props, State> {
const viewQR = this.state.mode === 'qr'; const viewQR = this.state.mode === 'qr';
const sessionID = window.textsecure.storage.user.getNumber(); const sessionID = window.textsecure.storage.user.getNumber();
const backButton = (viewEdit || viewQR) const backButton =
? [{ viewEdit || viewQR
iconType: SessionIconType.Chevron, ? [
iconRotation: 90, {
onClick: () => this.setState({mode: 'default'}), iconType: SessionIconType.Chevron,
}] iconRotation: 90,
: undefined; onClick: () => {
this.setState({ mode: 'default' });
},
},
]
: undefined;
return ( return (
<SessionModal <SessionModal
@ -83,7 +92,7 @@ export class EditProfileDialog extends React.Component<Props, State> {
headerReverse={viewEdit || viewQR} headerReverse={viewEdit || viewQR}
headerIconButtons={backButton} headerIconButtons={backButton}
> >
<div className="spacer-md"></div> <div className="spacer-md" />
{viewQR && this.renderQRView(sessionID)} {viewQR && this.renderQRView(sessionID)}
{viewDefault && this.renderDefaultView()} {viewDefault && this.renderDefaultView()}
@ -93,18 +102,18 @@ export class EditProfileDialog extends React.Component<Props, State> {
<div className="panel-text-divider"> <div className="panel-text-divider">
<span>{window.i18n('yourSessionID')}</span> <span>{window.i18n('yourSessionID')}</span>
</div> </div>
<p className="session-id-section-display"> <p className="session-id-section-display">{sessionID}</p>
{ sessionID }
</p> <div className="spacer-lg" />
<div className="spacer-lg"></div> {viewDefault || viewQR ? (
{ (viewDefault || viewQR) ? (
<SessionButton <SessionButton
text={window.i18n('copy')} text={window.i18n('copy')}
buttonType={SessionButtonType.BrandOutline} buttonType={SessionButtonType.BrandOutline}
buttonColor={SessionButtonColor.Green} buttonColor={SessionButtonColor.Green}
onClick={() => this.copySessionID(sessionID)} onClick={() => {
this.copySessionID(sessionID);
}}
/> />
) : ( ) : (
<SessionButton <SessionButton
@ -115,8 +124,7 @@ export class EditProfileDialog extends React.Component<Props, State> {
/> />
)} )}
<div className="spacer-lg"></div> <div className="spacer-lg" />
</div> </div>
</SessionModal> </SessionModal>
); );
@ -130,6 +138,7 @@ export class EditProfileDialog extends React.Component<Props, State> {
{this.renderAvatar()} {this.renderAvatar()}
<div <div
className="image-upload-section" className="image-upload-section"
role="button"
onClick={() => { onClick={() => {
const el = this.inputEl.current; const el = this.inputEl.current;
if (el) { if (el) {
@ -148,12 +157,15 @@ export class EditProfileDialog extends React.Component<Props, State> {
</div> </div>
<div <div
className="qr-view-button" className="qr-view-button"
onClick={() => this.setState({mode: 'qr'})} role="button"
onClick={() => {
this.setState({ mode: 'qr' });
}}
> >
<SessionIconButton <SessionIconButton
iconType={SessionIconType.QR} iconType={SessionIconType.QR}
iconSize={SessionIconSize.Small} iconSize={SessionIconSize.Small}
iconColor={"#000000"} iconColor={'#000000'}
/> />
</div> </div>
</div> </div>
@ -162,31 +174,31 @@ export class EditProfileDialog extends React.Component<Props, State> {
); );
} }
private renderDefaultView(){ private renderDefaultView() {
return ( return (
<> <>
{ this.renderProfileHeader() } {this.renderProfileHeader()}
<div className="profile-name-uneditable"> <div className="profile-name-uneditable">
<p>{ this.state.setProfileName }</p> <p>{this.state.setProfileName}</p>
<SessionIconButton <SessionIconButton
iconType={SessionIconType.Pencil} iconType={SessionIconType.Pencil}
iconSize={SessionIconSize.Medium} iconSize={SessionIconSize.Medium}
onClick={() => this.setState({mode: 'edit'})} onClick={() => {
this.setState({ mode: 'edit' });
}}
/> />
</div> </div>
</> </>
); );
} }
private renderEditView() { private renderEditView() {
const placeholderText = window.i18n('displayName'); const placeholderText = window.i18n('displayName');
return ( return (
<> <>
{ this.renderProfileHeader() } {this.renderProfileHeader()}
<div className="profile-name"> <div className="profile-name">
<input <input
type="text" type="text"
@ -203,13 +215,18 @@ export class EditProfileDialog extends React.Component<Props, State> {
); );
} }
private renderQRView(sessionID: string){ private renderQRView(sessionID: string) {
const bgColor = '#FFFFFF'; const bgColor = '#FFFFFF';
const fgColor = '#1B1B1B'; const fgColor = '#1B1B1B';
return ( return (
<div className="qr-image"> <div className="qr-image">
<QRCode value={sessionID} bgColor={bgColor} fgColor={fgColor} level="L" /> <QRCode
value={sessionID}
bgColor={bgColor}
fgColor={fgColor}
level="L"
/>
</div> </div>
); );
} }

3
ts/components/session/ActionsPanel.tsx
Unescape Escape View File

@ -42,7 +42,8 @@ const Section = ({
? () => { ? () => {
type === SectionType.Profile type === SectionType.Profile
? window.showEditProfileDialog() ? window.showEditProfileDialog()
: onSelect(type); : /* tslint:disable-next-line:no-void-expression */
onSelect(type);
} }
: undefined; : undefined;

19
ts/components/session/SessionModal.tsx
Unescape Escape View File

@ -2,7 +2,7 @@ import React from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { SessionIconButton, SessionIconSize, SessionIconType } from './icon/'; import { SessionIconButton, SessionIconSize, SessionIconType } from './icon/';
import { SessionButton, SessionButtonType, SessionButtonColor } from './SessionButton'; import { SessionButtonColor, SessionButtonType } from './SessionButton';
interface Props { interface Props {
title: string; title: string;
@ -11,7 +11,7 @@ interface Props {
showExitIcon?: boolean; showExitIcon?: boolean;
showHeader?: boolean; showHeader?: boolean;
headerReverse?: boolean; headerReverse?: boolean;
//Maximum of two icons in header //Maximum of two icons or buttons in header
headerIconButtons?: Array<{ headerIconButtons?: Array<{
iconType: SessionIconType; iconType: SessionIconType;
iconRotation: number; iconRotation: number;
@ -49,14 +49,25 @@ export class SessionModal extends React.PureComponent<Props, State> {
} }
public render() { public render() {
const { title, headerIconButtons, showExitIcon, showHeader, headerReverse } = this.props; const {
title,
headerIconButtons,
showExitIcon,
showHeader,
headerReverse,
} = this.props;
const { isVisible } = this.state; const { isVisible } = this.state;
return isVisible ? ( return isVisible ? (
<div className={'session-modal'}> <div className={'session-modal'}>
{showHeader ? ( {showHeader ? (
<> <>
<div className={classNames("session-modal__header", headerReverse && "reverse")}> <div
className={classNames(
'session-modal__header',
headerReverse && 'reverse'
)}
>
<div className="session-modal__header__close"> <div className="session-modal__header__close">
{showExitIcon ? ( {showExitIcon ? (
<SessionIconButton <SessionIconButton

5
ts/components/session/settings/SessionSettings.tsx
Unescape Escape View File

@ -216,7 +216,10 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
return ( return (
<div className="session-settings"> <div className="session-settings">
<SettingsHeader disableLinkDeviceButton={shouldRenderPasswordLock} category={category} /> <SettingsHeader
disableLinkDeviceButton={shouldRenderPasswordLock}
category={category}
/>
{shouldRenderPasswordLock ? ( {shouldRenderPasswordLock ? (
this.renderPasswordLock() this.renderPasswordLock()
) : ( ) : (

6
ts/components/session/settings/SessionSettingsHeader.tsx
Unescape Escape View File

@ -4,19 +4,19 @@ import { SessionIconButton, SessionIconSize, SessionIconType } from '../icon';
import { SessionSettingCategory, SettingsViewProps } from './SessionSettings'; import { SessionSettingCategory, SettingsViewProps } from './SessionSettings';
import { SessionButton } from '../SessionButton'; import { SessionButton } from '../SessionButton';
interface Props extends SettingsViewProps{ interface Props extends SettingsViewProps {
disableLinkDeviceButton: boolean | null; disableLinkDeviceButton: boolean | null;
} }
export class SettingsHeader extends React.Component<Props, any> { export class SettingsHeader extends React.Component<Props, any> {
public static defaultProps = { public static defaultProps = {
disableLinkDeviceButton: true, disableLinkDeviceButton: true,
} };
public constructor(props: any) { public constructor(props: any) {
super(props); super(props);
this.state = { this.state = {
disableLinkDeviceButton: this.props.disableLinkDeviceButton, disableLinkDeviceButton: this.props.disableLinkDeviceButton,
}; };
this.showAddLinkedDeviceModal = this.showAddLinkedDeviceModal.bind(this); this.showAddLinkedDeviceModal = this.showAddLinkedDeviceModal.bind(this);
} }

Write Preview
Loading…
Cancel
Save