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

fix merge issue

Browse Source
pull/691/head
Audric Ackermann 5 years ago
parent b1d8590a66
commit 2cc7f3ed20
6 changed files with 177 additions and 185 deletions
Show Stats Download Patch File Download Diff File

1
js/views/session_registration_view.js
Unescape Escape View File

@ -123,6 +123,7 @@
window.Session.setNewSessionID = sessionID => { window.Session.setNewSessionID = sessionID => {
const el = document.querySelector('.session-signin-enter-session-id'); const el = document.querySelector('.session-signin-enter-session-id');
const fx = new TextScramble(el); const fx = new TextScramble(el);
el.innerHTML = sessionID;
fx.setText(sessionID); fx.setText(sessionID);
}; };

274
stylesheets/_session.scss
Unescape Escape View File

@ -1,34 +1,34 @@
@font-face { @font-face {
font-family: "SpaceMono"; font-family: 'SpaceMono';
src: url("../fonts/SpaceMono-Regular.ttf") format("truetype"); src: url('../fonts/SpaceMono-Regular.ttf') format('truetype');
} }
@font-face { @font-face {
font-family: "SpaceMono"; font-family: 'SpaceMono';
src: url("../fonts/SpaceMono-Bold.ttf") format("truetype"); src: url('../fonts/SpaceMono-Bold.ttf') format('truetype');
font-weight: bold; font-weight: bold;
} }
@font-face { @font-face {
font-family: "SpaceMono"; font-family: 'SpaceMono';
src: url("../fonts/SpaceMono-Italic.ttf") format("truetype"); src: url('../fonts/SpaceMono-Italic.ttf') format('truetype');
font-style: italic; font-style: italic;
} }
@font-face { @font-face {
font-family: "SpaceMono"; font-family: 'SpaceMono';
src: url("../fonts/SpaceMono-BoldItalic.ttf") format("truetype"); src: url('../fonts/SpaceMono-BoldItalic.ttf') format('truetype');
font-weight: bold; font-weight: bold;
font-style: italic; font-style: italic;
} }
@font-face { @font-face {
font-family: "Wasa"; font-family: 'Wasa';
src: url("../fonts/Wasa-Bold.otf") format("opentype"); src: url('../fonts/Wasa-Bold.otf') format('opentype');
font-weight: bold; font-weight: bold;
} }
// Session Colors // Session Colors
$session-font-family: "Wasa"; $session-font-family: 'Wasa';
$session-color-green: #00f782; $session-color-green: #00f782;
$session-color-green-alt-1: #00f480; $session-color-green-alt-1: #00f480;
@ -98,7 +98,11 @@ $session-gradient-green: linear-gradient(
rgba($session-color-green-alt-1, 1), rgba($session-color-green-alt-1, 1),
rgba($session-color-green-alt-1, 0.6) rgba($session-color-green-alt-1, 0.6)
); );
$session-gradient-black: linear-gradient(90deg, rgba($session-shade-3, 1), rgba($session-shade-4, 0.6)); $session-gradient-black: linear-gradient(
90deg,
rgba($session-shade-3, 1),
rgba($session-shade-4, 0.6)
);
$session-dark-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.37); $session-dark-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.37);
@ -137,6 +141,7 @@ $session_message-container-border-radius: 5px;
font-weight: 700; font-weight: 700;
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
transition: $session-transition-duration;
&.default, &.default,
&.square, &.square,
@ -144,7 +149,11 @@ $session_message-container-border-radius: 5px;
color: $session-color-white; color: $session-color-white;
&.green { &.green {
border: 2px solid $session-color-green;
background-color: $session-color-green; background-color: $session-color-green;
&:hover {
@include transparent-background($session-color-green);
}
} }
&.white { &.white {
background-color: $session-color-white; background-color: $session-color-white;
@ -168,9 +177,16 @@ $session_message-container-border-radius: 5px;
&.square-outline { &.square-outline {
&.green { &.green {
@include transparent-background($session-color-green); @include transparent-background($session-color-green);
&:hover {
@include transparent-background($session-color-white);
}
} }
&.white { &.white {
@include transparent-background($session-color-white); @include transparent-background($session-color-white);
&:hover {
@include transparent-background($session-color-green);
}
} }
&.primary { &.primary {
@include transparent-background($session-color-primary); @include transparent-background($session-color-primary);
@ -190,7 +206,7 @@ $session_message-container-border-radius: 5px;
min-width: 165px; min-width: 165px;
height: 45px; height: 45px;
line-height: 45px; line-height: 45px;
padding: 0 35px 0 35px; padding: 0;
font-size: 15px; font-size: 15px;
font-family: $session-font-family; font-family: $session-font-family;
border-radius: 500px; border-radius: 500px;
@ -211,125 +227,121 @@ $session_message-container-border-radius: 5px;
&.square-outline { &.square-outline {
border-radius: 0px; border-radius: 0px;
} }
}
.hidden { @mixin set-icon-margin($size) {
visibility: hidden; margin: $size / 3;
} }
.session-icon {
@mixin set-icon-margin($size) { &.padded-left {
margin: $size / 3; @include set-icon-margin($session-icon-size-md);
} }
.session-icon { }
&.padded-left { .session-icon-button {
@include set-icon-margin($session-icon-size-md); opacity: 0.4;
} cursor: pointer;
display: inline-block;
transition: opacity $session-transition-duration;
&:hover {
opacity: 1;
} }
.session-icon-button {
opacity: 0.4;
cursor: pointer;
display: inline-block;
transition: opacity $session-transition-duration;
&:hover {
opacity: 1;
}
&.small.padded {
@include set-icon-margin($session-icon-size-sm);
}
&.medium.padded { &.small.padded {
@include set-icon-margin($session-icon-size-md); @include set-icon-margin($session-icon-size-sm);
} }
&.large.padded { &.medium.padded {
@include set-icon-margin($session-icon-size-lg); @include set-icon-margin($session-icon-size-md);
}
} }
.session-icon { &.large.padded {
fill: $session-color-white; @include set-icon-margin($session-icon-size-lg);
} }
}
/* CONVERSATION AND MESSAGES */ .session-icon {
fill: $session-color-white;
}
@mixin standard-icon-button() { /* CONVERSATION AND MESSAGES */
color: $session-color-white;
opacity: 0.9;
&:hover { @mixin standard-icon-button() {
opacity: 1; color: $session-color-white;
} opacity: 0.9;
}
.module-conversation-header__title-flex, &:hover {
.module-conversation-header__title { opacity: 1;
width: 100%; }
}
.module-contact-name { .module-conversation-header__title-flex,
width: 100%; .module-conversation-header__title {
} width: 100%;
.module-contact-name__profile-number { .module-contact-name {
text-align: center; width: 100%;
}
} }
.module-message__author__profile-name { .module-contact-name__profile-number {
font-style: normal; text-align: center;
} }
}
.module-message__author-avatar { .module-message__author__profile-name {
flex-direction: column; font-style: normal;
display: inline-flex; }
margin-right: 20px;
padding-top: 5px;
}
.module-message__container { .module-message__author-avatar {
border-radius: $session_message-container-border-radius; flex-direction: column;
display: inline-flex;
margin-right: 20px;
padding-top: 5px;
}
label { .odule-message__container {
user-select: none; border-radius: $session_message-container-border-radius;
}
.module-message__attachment-container, label {
.module-image--curved-bottom-right, user-select: none;
.module-image--curved-bottom-left { }
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: $session_message-container-border-radius;
border-bottom-right-radius: $session_message-container-border-radius;
}
.conversation-header .session-icon-button { .module-message__attachment-container,
@include standard-icon-button(); .module-image--curved-bottom-right,
} .module-image--curved-bottom-left {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: $session_message-container-border-radius;
border-bottom-right-radius: $session_message-container-border-radius;
}
.module-conversation-header, .conversation-header .session-icon-button {
.message-selection-overlay { @include standard-icon-button();
height: $session-conversation-header-height; }
}
.message-selection-overlay { .module-conversation-header,
position: absolute; .message-selection-overlay {
left: 15px; height: $session-conversation-header-height;
right: 15px; }
display: none;
.close-button { .message-selection-overlay {
float: left; position: absolute;
margin-top: 17px; left: 15px;
margin-left: 7px; right: 15px;
} display: none;
}
.message-selection-overlay div[role="button"] { .close-button {
display: inline-block; float: left;
margin-top: 17px;
margin-left: 7px;
} }
}
.message-selection-overlay div[role='button'] {
display: inline-block;
}
.message-selection-overlay .button-group { .message-selection-overlay .button-group {
float: right; float: right;
margin-top: 13.5px; margin-top: 13.5px;
}
} }
} }
@ -388,55 +400,3 @@ $session_message-container-border-radius: 5px;
right: 0px; right: 0px;
} }
} }
.session {
&-button {
width: 100%;
height: 45px;
line-height: 45px;
padding: 0 18px 0 18px;
font-size: 15px;
font-family: $session-font-family;
font-weight: 700;
cursor: pointer;
display: flex;
justify-content: center;
border-radius: 500px;
transition-duration: $session-transition-duration;
@mixin transparent-background($textAndBorderColor) {
background-color: Transparent;
background-repeat: no-repeat;
overflow: hidden;
outline: none;
color: $textAndBorderColor;
border: 2px solid $textAndBorderColor;
}
&.full-green {
background-color: $session-color-green;
color: $session-color-white;
border: 2px solid $session-color-green;
&:hover {
@include transparent-background($session-color-green);
}
}
&.green {
@include transparent-background($session-color-green);
&:hover {
@include transparent-background($session-color-white);
}
}
&.white {
@include transparent-background($session-color-white);
&:hover {
@include transparent-background($session-color-green);
}
}
}
}

6
stylesheets/_session_signin.scss
Unescape Escape View File

@ -223,15 +223,15 @@
} }
&-signin-enter-session-id { &-signin-enter-session-id {
height: auto; height: 94px;
width: 289px; width: 289px;
border-radius: 8px; border-radius: 8px;
border: 2px solid $session-color-dark-grey; border: 2px solid $session-color-dark-grey;
outline: 0; outline: 0;
background: transparent; background: transparent;
color: $session-color-white; color: $session-color-white;
font-size: 12px; font-size: 15px;
line-height: 14px; line-height: 18px;
text-align: center; text-align: center;
margin-bottom: 20px; margin-bottom: 20px;
overflow-wrap: break-word; overflow-wrap: break-word;

31
ts/components/conversation/ConversationHeader.tsx
Unescape Escape View File

@ -430,23 +430,26 @@ export class ConversationHeader extends React.Component<Props> {
const showMembersMenuItem = isGroup && ( const showMembersMenuItem = isGroup && (
<MenuItem onClick={onShowGroupMembers}>{i18n('showMembers')}</MenuItem> <MenuItem onClick={onShowGroupMembers}>{i18n('showMembers')}</MenuItem>
); );
const showSafetyNumberMenuItem = !isGroup && !isMe && ( const showSafetyNumberMenuItem = !isGroup &&
<MenuItem onClick={onShowSafetyNumber}> !isMe && (
{i18n('showSafetyNumber')} <MenuItem onClick={onShowSafetyNumber}>
</MenuItem> {i18n('showSafetyNumber')}
); </MenuItem>
);
const resetSessionMenuItem = !isGroup && ( const resetSessionMenuItem = !isGroup && (
<MenuItem onClick={onResetSession}>{i18n('resetSession')}</MenuItem> <MenuItem onClick={onResetSession}>{i18n('resetSession')}</MenuItem>
); );
const blockHandlerMenuItem = !isMe && !isGroup && ( const blockHandlerMenuItem = !isMe &&
<MenuItem onClick={blockHandler}>{blockTitle}</MenuItem> !isGroup && <MenuItem onClick={blockHandler}>{blockTitle}</MenuItem>;
); const changeNicknameMenuItem = !isMe &&
const changeNicknameMenuItem = !isMe && !isGroup && ( !isGroup && (
<MenuItem onClick={onChangeNickname}>{i18n('changeNickname')}</MenuItem> <MenuItem onClick={onChangeNickname}>{i18n('changeNickname')}</MenuItem>
); );
const clearNicknameMenuItem = !isMe && !isGroup && hasNickname && ( const clearNicknameMenuItem = !isMe &&
<MenuItem onClick={onClearNickname}>{i18n('clearNickname')}</MenuItem> !isGroup &&
); hasNickname && (
<MenuItem onClick={onClearNickname}>{i18n('clearNickname')}</MenuItem>
);
const archiveConversationMenuItem = isArchived ? ( const archiveConversationMenuItem = isArchived ? (
<MenuItem onClick={onMoveToInbox}> <MenuItem onClick={onMoveToInbox}>
{i18n('moveConversationToInbox')} {i18n('moveConversationToInbox')}

41
ts/components/session/RegistrationTabs.tsx
Unescape Escape View File

@ -2,7 +2,11 @@ import React from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { SessionInput } from './SessionInput'; import { SessionInput } from './SessionInput';
import { SessionButton, SessionButtonType } from './SessionButton'; import {
SessionButton,
SessionButtonColor,
SessionButtonType,
} from './SessionButton';
import { trigger } from '../../shims/events'; import { trigger } from '../../shims/events';
import { SessionHtmlRenderer } from './SessionHTMLRenderer'; import { SessionHtmlRenderer } from './SessionHTMLRenderer';
@ -256,7 +260,8 @@ export class RegistrationTabs extends React.Component<{}, State> {
onClick={() => { onClick={() => {
this.onCompleteSignUpClick(); this.onCompleteSignUpClick();
}} }}
buttonType={SessionButtonType.FullGreen} buttonType={SessionButtonType.Brand}
buttonColor={SessionButtonColor.Green}
text={window.i18n('completeSignUp')} text={window.i18n('completeSignUp')}
/> />
</div> </div>
@ -286,13 +291,16 @@ export class RegistrationTabs extends React.Component<{}, State> {
private renderSignUpButton() { private renderSignUpButton() {
const { signUpMode } = this.state; const { signUpMode } = this.state;
let buttonType: any; let buttonType: SessionButtonType;
let buttonColor: SessionButtonColor;
let buttonText: string; let buttonText: string;
if (signUpMode !== SignUpMode.Default) { if (signUpMode !== SignUpMode.Default) {
buttonType = SessionButtonType.FullGreen; buttonType = SessionButtonType.Brand;
buttonColor = SessionButtonColor.Green;
buttonText = window.i18n('getStarted'); buttonText = window.i18n('getStarted');
} else { } else {
buttonType = SessionButtonType.Green; buttonType = SessionButtonType.BrandOutline;
buttonColor = SessionButtonColor.Green;
buttonText = window.i18n('generateSessionID'); buttonText = window.i18n('generateSessionID');
} }
@ -306,6 +314,7 @@ export class RegistrationTabs extends React.Component<{}, State> {
} }
}} }}
buttonType={buttonType} buttonType={buttonType}
buttonColor={buttonColor}
text={buttonText} text={buttonText}
/> />
); );
@ -462,7 +471,10 @@ export class RegistrationTabs extends React.Component<{}, State> {
if (signInMode === SignInMode.Default) { if (signInMode === SignInMode.Default) {
return ( return (
<div> <div>
{this.renderRestoreUsingSeedButton(SessionButtonType.Green)} {this.renderRestoreUsingSeedButton(
SessionButtonType.BrandOutline,
SessionButtonColor.Green
)}
<div className="session-registration__or">{or}</div> <div className="session-registration__or">{or}</div>
{this.renderLinkDeviceToExistingAccountButton()} {this.renderLinkDeviceToExistingAccountButton()}
</div> </div>
@ -474,7 +486,10 @@ export class RegistrationTabs extends React.Component<{}, State> {
<div> <div>
{this.renderContinueYourSessionButton()} {this.renderContinueYourSessionButton()}
<div className="session-registration__or">{or}</div> <div className="session-registration__or">{or}</div>
{this.renderRestoreUsingSeedButton(SessionButtonType.White)} {this.renderRestoreUsingSeedButton(
SessionButtonType.BrandOutline,
SessionButtonColor.Green
)}
</div> </div>
); );
} }
@ -512,13 +527,17 @@ export class RegistrationTabs extends React.Component<{}, State> {
onClick={() => { onClick={() => {
this.handleContinueYourSessionClick(); this.handleContinueYourSessionClick();
}} }}
buttonType={SessionButtonType.FullGreen} buttonType={SessionButtonType.Brand}
buttonColor={SessionButtonColor.Green}
text={window.i18n('continueYourSession')} text={window.i18n('continueYourSession')}
/> />
); );
} }
private renderRestoreUsingSeedButton(buttonType: SessionButtonType) { private renderRestoreUsingSeedButton(
buttonType: SessionButtonType,
buttonColor: SessionButtonColor
) {
return ( return (
<SessionButton <SessionButton
onClick={() => { onClick={() => {
@ -534,6 +553,7 @@ export class RegistrationTabs extends React.Component<{}, State> {
window.Session.emptyContentEditableDivs(); window.Session.emptyContentEditableDivs();
}} }}
buttonType={buttonType} buttonType={buttonType}
buttonColor={buttonColor}
text={window.i18n('restoreUsingSeed')} text={window.i18n('restoreUsingSeed')}
/> />
); );
@ -550,7 +570,8 @@ export class RegistrationTabs extends React.Component<{}, State> {
signUpMode: SignUpMode.Default, signUpMode: SignUpMode.Default,
}); });
}} }}
buttonType={SessionButtonType.White} buttonType={SessionButtonType.BrandOutline}
buttonColor={SessionButtonColor.White}
text={window.i18n('linkDeviceToExistingAccount')} text={window.i18n('linkDeviceToExistingAccount')}
/> />
); );

9
ts/components/session/SessionButton.tsx
Unescape Escape View File

@ -42,9 +42,16 @@ export class SessionButton extends React.PureComponent<Props> {
public render() { public render() {
const { buttonType, buttonColor, text } = this.props; const { buttonType, buttonColor, text } = this.props;
const buttonTypes = [];
buttonTypes.push(buttonType);
if (buttonType.includes('-outline')) {
buttonTypes.push(buttonType.replace('-outline', ''));
}
return ( return (
<div <div
className={classNames('session-button', buttonType, buttonColor)} className={classNames('session-button', ...buttonTypes, buttonColor)}
role="button" role="button"
onClick={this.clickHandler} onClick={this.clickHandler}
> >

Write Preview
Loading…
Cancel
Save