onboarding messageview
This commit is contained in:
parent
cc1451fae8
commit
aeb04a3a44
|
@ -967,6 +967,15 @@
|
||||||
"continue": {
|
"continue": {
|
||||||
"message": "Continue"
|
"message": "Continue"
|
||||||
},
|
},
|
||||||
|
"noThankyou": {
|
||||||
|
"message": "No, thank you"
|
||||||
|
},
|
||||||
|
"noMessagesTitle": {
|
||||||
|
"message": "You don't have any messages, yet."
|
||||||
|
},
|
||||||
|
"noMessagesSubtitle": {
|
||||||
|
"message": "Would you like to join Session's public chat?"
|
||||||
|
},
|
||||||
"pairNewDevice": {
|
"pairNewDevice": {
|
||||||
"message": "Pair New Device"
|
"message": "Pair New Device"
|
||||||
},
|
},
|
||||||
|
@ -2580,6 +2589,9 @@
|
||||||
"beginYourSession": {
|
"beginYourSession": {
|
||||||
"message": "Begin<br />your<br />Session."
|
"message": "Begin<br />your<br />Session."
|
||||||
},
|
},
|
||||||
|
"welcomeToSession": {
|
||||||
|
"message": "Welcome to Session"
|
||||||
|
},
|
||||||
"welcomeToYourSession": {
|
"welcomeToYourSession": {
|
||||||
"message": "Welcome to your Session"
|
"message": "Welcome to your Session"
|
||||||
},
|
},
|
||||||
|
@ -2707,6 +2719,9 @@
|
||||||
"joinChannel": {
|
"joinChannel": {
|
||||||
"message": "Join Open Group"
|
"message": "Join Open Group"
|
||||||
},
|
},
|
||||||
|
"joinPublicChat": {
|
||||||
|
"message": "Join Public Chat"
|
||||||
|
},
|
||||||
"next": {
|
"next": {
|
||||||
"message": "Next"
|
"message": "Next"
|
||||||
},
|
},
|
||||||
|
|
|
@ -108,17 +108,17 @@
|
||||||
<div class='compose'>
|
<div class='compose'>
|
||||||
<form class='send clearfix file-input'>
|
<form class='send clearfix file-input'>
|
||||||
<div class='flex'>
|
<div class='flex'>
|
||||||
<button class='emoji' {{#disable-inputs}} disabled="disabled" {{/disable-inputs}}></button>
|
<div id='choose-file' class='choose-file'>
|
||||||
|
<button class='paperclip thumbnail' {{#disable-inputs}} disabled="disabled" {{/disable-inputs}}></button>
|
||||||
|
<input type='file' class='file-input' multiple='multiple'>
|
||||||
|
</div>
|
||||||
|
<div class='capture-audio'>
|
||||||
|
<button class='microphone' {{#disable-inputs}} disabled="disabled" {{/disable-inputs}}></button>
|
||||||
|
</div>
|
||||||
<div class='send-message-container'>
|
<div class='send-message-container'>
|
||||||
<textarea maxlength='2000' class='send-message' placeholder='{{ send-message }}' rows='1' dir='auto' {{#disable-inputs}} disabled="disabled" {{/disable-inputs}}></textarea>
|
<textarea maxlength='2000' class='send-message' placeholder='{{ send-message }}' rows='1' dir='auto' {{#disable-inputs}} disabled="disabled" {{/disable-inputs}}></textarea>
|
||||||
</div>
|
</div>
|
||||||
<div class='capture-audio'>
|
<button class='emoji' {{#disable-inputs}} disabled="disabled" {{/disable-inputs}}></button>
|
||||||
<button class='microphone' {{#disable-inputs}} disabled="disabled" {{/disable-inputs}}></button>
|
|
||||||
</div>
|
|
||||||
<div id='choose-file' class='choose-file'>
|
|
||||||
<button class='paperclip thumbnail' {{#disable-inputs}} disabled="disabled" {{/disable-inputs}}></button>
|
|
||||||
<input type='file' class='file-input' multiple='multiple'>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 131 KiB |
|
@ -0,0 +1,17 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="129px" height="89px" viewBox="0 0 129 89" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<!-- Generator: Sketch 62 (91390) - https://sketch.com -->
|
||||||
|
<title>Combined Shape</title>
|
||||||
|
<desc>Created with Sketch.</desc>
|
||||||
|
<g id="Desktop-(Dark)" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="OnboardingOpenGroupJoin" transform="translate(-168.000000, -235.000000)">
|
||||||
|
<g id="Combined-Shape" transform="translate(170.000000, 236.000000)">
|
||||||
|
<path d="M82.281886,20 C106.03013,20 125.281886,34.7746033 125.281886,53 C125.281886,59.5808228 122.771868,65.7117359 118.446468,70.8596473 C118.386871,73.4480518 120.309061,77.1248835 124.21251,81.8902344 C120.039982,81.5926483 116.036545,81.0288787 112.202199,80.1989258 C110.522391,79.8353273 109.249113,79.5109067 108.382366,79.2256639 C101.146682,83.4755303 92.0984313,86 82.281886,86 C58.5336418,86 39.281886,71.2253967 39.281886,53 C39.281886,34.7746033 58.5336418,20 82.281886,20 Z" stroke="#02D370" stroke-width="3" stroke-linejoin="round"></path>
|
||||||
|
<path d="M31.281886,1.13686838e-13 C48.4027133,1.13686838e-13 62.281886,10.9690236 62.281886,24.5 C62.281886,38.0309764 48.4027133,49 31.281886,49 C24.1228438,49 17.530598,47.0820895 12.2828822,43.860929 C11.6699441,44.0982914 10.6509168,44.3755915 9.22632153,44.6931419 C6.46202578,45.3093191 3.57582702,45.7278752 0.567725244,45.9488104 C3.76733392,41.9262539 5.12046225,38.9484139 4.62711023,37.0152905 C1.86698023,33.3528537 0.281886022,29.0727229 0.281886022,24.5 C0.281886022,10.9690236 14.1610588,1.13686838e-13 31.281886,1.13686838e-13 Z" stroke="#161616" stroke-width="2" fill="#FFFFFF" fill-rule="evenodd"></path>
|
||||||
|
<circle id="Oval" fill="#02D370" fill-rule="evenodd" cx="62" cy="53" r="4"></circle>
|
||||||
|
<circle id="Oval" fill="#02D370" fill-rule="evenodd" cx="82" cy="53" r="4"></circle>
|
||||||
|
<ellipse id="Oval" fill="#02D370" fill-rule="evenodd" cx="101.5" cy="53" rx="3.5" ry="4"></ellipse>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 2.1 KiB |
|
@ -918,7 +918,7 @@
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
window.generateID = () =>
|
window.generateID = () =>
|
||||||
Math.random()
|
Math.random()
|
||||||
|
|
|
@ -86,7 +86,8 @@ button.emoji {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
border: none;
|
border: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
margin-left: 15px;
|
margin: 0px 10px 0px 15px;
|
||||||
|
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
content: '';
|
content: '';
|
||||||
|
|
|
@ -76,7 +76,7 @@ $session-color-dark-grey: #353535;
|
||||||
$session-color-black: #000;
|
$session-color-black: #000;
|
||||||
$session-color-danger: #ff453a;
|
$session-color-danger: #ff453a;
|
||||||
$session-color-primary: $session-shade-13;
|
$session-color-primary: $session-shade-13;
|
||||||
$session-color-secondary: $session-shade-16;
|
$session-color-secondary: $session-shade-6;
|
||||||
$session-background-overlay: #212121;
|
$session-background-overlay: #212121;
|
||||||
$session-background: #121212;
|
$session-background: #121212;
|
||||||
|
|
||||||
|
@ -102,6 +102,11 @@ $session-font-md: 15px;
|
||||||
$session-font-lg: 18px;
|
$session-font-lg: 18px;
|
||||||
$session-font-xl: 24px;
|
$session-font-xl: 24px;
|
||||||
|
|
||||||
|
$session-font-h1: 30px;
|
||||||
|
$session-font-h2: 24px;
|
||||||
|
$session-font-h3: 20px;
|
||||||
|
$session-font-h4: 16px;
|
||||||
|
|
||||||
$session-search-input-height: 34px;
|
$session-search-input-height: 34px;
|
||||||
$main-view-header-height: 85px;
|
$main-view-header-height: 85px;
|
||||||
|
|
||||||
|
@ -480,6 +485,7 @@ $session-element-border-green: 4px solid $session-color-green;
|
||||||
@include session-color-subtle($session-color-white);
|
@include session-color-subtle($session-color-white);
|
||||||
font-family: 'SF Pro Text';
|
font-family: 'SF Pro Text';
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
|
font-size: $session-font-xs;
|
||||||
}
|
}
|
||||||
|
|
||||||
.module-contact-name {
|
.module-contact-name {
|
||||||
|
@ -524,8 +530,18 @@ label {
|
||||||
border-bottom-right-radius: $session_message-container-border-radius;
|
border-bottom-right-radius: $session_message-container-border-radius;
|
||||||
}
|
}
|
||||||
|
|
||||||
.conversation-header .session-icon-button {
|
.conversation-header {
|
||||||
@include standard-icon-button();
|
.module-avatar img {
|
||||||
|
box-shadow: 0px 0px 5px 0px rgba(255,255,255,0.20);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-icon {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.session-icon-button {
|
||||||
|
@include standard-icon-button();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.module-conversation-header {
|
.module-conversation-header {
|
||||||
|
@ -712,6 +728,11 @@ label {
|
||||||
.message {
|
.message {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.session-id-editable {
|
||||||
|
width: 30vw;
|
||||||
|
max-width: 700px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__centered {
|
&__centered {
|
||||||
|
@ -807,7 +828,7 @@ label {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
height: 25px;
|
height: 25px;
|
||||||
padding: 0px 10px;
|
padding: $session-margin-md $session-margin-sm;
|
||||||
|
|
||||||
background-color: $session-shade-4;
|
background-color: $session-shade-4;
|
||||||
|
|
||||||
|
@ -1258,6 +1279,7 @@ label {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
min-height: 60px;
|
min-height: 60px;
|
||||||
|
margin-bottom: -5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea.send-message {
|
textarea.send-message {
|
||||||
|
@ -1566,3 +1588,71 @@ input {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.onboarding-message-section {
|
||||||
|
display: flex;
|
||||||
|
flex-grow: 1;
|
||||||
|
align-items: flex-start;
|
||||||
|
position: relative;
|
||||||
|
padding: $session-margin-lg 2 * $session-margin-lg;
|
||||||
|
background: linear-gradient(180deg, rgba(29,28,28,1) 0%, rgba(18,18,18,1) 100%);
|
||||||
|
|
||||||
|
&__exit {
|
||||||
|
position: absolute;
|
||||||
|
top: $session-margin-lg;
|
||||||
|
left: $session-margin-lg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__container {
|
||||||
|
display: flex;
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding-top: 3 * $session-margin-lg;
|
||||||
|
|
||||||
|
height: 400px;
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
font-family: "SF Pro Text";
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&__title h1{
|
||||||
|
color: $session-color-white;
|
||||||
|
font-size: $session-font-h1;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 2 * $session-margin-lg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__icons img {
|
||||||
|
width: 180px;
|
||||||
|
margin-bottom: 2 * $session-margin-lg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__info {
|
||||||
|
font-family: "Wasa";
|
||||||
|
margin-bottom: 2 * $session-margin-lg;
|
||||||
|
|
||||||
|
&--title {
|
||||||
|
font-size: $session-font-h3;
|
||||||
|
line-height: $session-font-h2;
|
||||||
|
margin-bottom: $session-margin-md;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--subtitle {
|
||||||
|
font-family: "SF Pro Text";
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: $session-font-md;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__buttons {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.session-button:first-child {
|
||||||
|
margin-bottom: $session-margin-md;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -413,7 +413,7 @@ $session-compose-margin: 20px;
|
||||||
border: 1px solid $session-shade-15;
|
border: 1px solid $session-shade-15;
|
||||||
}
|
}
|
||||||
@at-root .dark-theme #{&} {
|
@at-root .dark-theme #{&} {
|
||||||
border: 1px solid $session-shade-7;
|
border: 1px solid $session-shade-6;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -189,7 +189,7 @@ body.dark-theme {
|
||||||
|
|
||||||
button.emoji {
|
button.emoji {
|
||||||
&:before {
|
&:before {
|
||||||
margin-top: 4px;
|
margin-top: 7px;
|
||||||
@include color-svg('../images/smile.svg', $color-dark-30);
|
@include color-svg('../images/smile.svg', $color-dark-30);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -191,7 +191,7 @@ export class ConversationHeader extends React.Component<Props> {
|
||||||
if (name) {
|
if (name) {
|
||||||
title = `${name}`;
|
title = `${name}`;
|
||||||
} else {
|
} else {
|
||||||
title = phoneNumber;
|
title = `User ${window.shortenPubkey(phoneNumber)}`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -232,7 +232,7 @@ export class ConversationHeader extends React.Component<Props> {
|
||||||
profileName={profileName}
|
profileName={profileName}
|
||||||
size={28}
|
size={28}
|
||||||
borderColor={borderColor}
|
borderColor={borderColor}
|
||||||
borderWidth={2}
|
borderWidth={0}
|
||||||
onAvatarClick={() => {
|
onAvatarClick={() => {
|
||||||
this.onAvatarClickBound(phoneNumber);
|
this.onAvatarClickBound(phoneNumber);
|
||||||
}}
|
}}
|
||||||
|
|
|
@ -18,6 +18,8 @@ import { SearchOptions } from '../../types/Search';
|
||||||
import { validateNumber } from '../../types/PhoneNumber';
|
import { validateNumber } from '../../types/PhoneNumber';
|
||||||
import { LeftPane, RowRendererParamsType } from '../LeftPane';
|
import { LeftPane, RowRendererParamsType } from '../LeftPane';
|
||||||
import { SessionClosableOverlay } from './SessionClosableOverlay';
|
import { SessionClosableOverlay } from './SessionClosableOverlay';
|
||||||
|
import { SessionIconButton, SessionIconType, SessionIconSize } from './icon';
|
||||||
|
import { SessionButton, SessionButtonType, SessionButtonColor } from './SessionButton';
|
||||||
|
|
||||||
export interface Props {
|
export interface Props {
|
||||||
searchTerm: string;
|
searchTerm: string;
|
||||||
|
@ -39,13 +41,19 @@ export class LeftPaneMessageSection extends React.Component<Props, any> {
|
||||||
|
|
||||||
public constructor(props: Props) {
|
public constructor(props: Props) {
|
||||||
super(props);
|
super(props);
|
||||||
|
|
||||||
|
const conversations = this.getCurrentConversations();
|
||||||
|
const length = conversations ? conversations.length : 0;
|
||||||
|
|
||||||
this.state = {
|
this.state = {
|
||||||
showComposeView: false,
|
showComposeView: false,
|
||||||
pubKeyPasted: '',
|
pubKeyPasted: '',
|
||||||
|
shouldRenderMessageOnboarding: length === 0,
|
||||||
};
|
};
|
||||||
|
|
||||||
this.updateSearchBound = this.updateSearch.bind(this);
|
this.updateSearchBound = this.updateSearch.bind(this);
|
||||||
this.handleToggleOverlay = this.handleToggleOverlay.bind(this);
|
this.handleToggleOverlay = this.handleToggleOverlay.bind(this);
|
||||||
|
this.handleCloseOnboarding = this.handleCloseOnboarding.bind(this);
|
||||||
this.handleOnPasteSessionID = this.handleOnPasteSessionID.bind(this);
|
this.handleOnPasteSessionID = this.handleOnPasteSessionID.bind(this);
|
||||||
this.handleMessageButtonClick = this.handleMessageButtonClick.bind(this);
|
this.handleMessageButtonClick = this.handleMessageButtonClick.bind(this);
|
||||||
this.debouncedSearch = debounce(this.search.bind(this), 20);
|
this.debouncedSearch = debounce(this.search.bind(this), 20);
|
||||||
|
@ -164,7 +172,7 @@ export class LeftPaneMessageSection extends React.Component<Props, any> {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
public render(): JSX.Element {
|
public render(): JSX.Element {5
|
||||||
return (
|
return (
|
||||||
<div className="session-left-pane-section-content">
|
<div className="session-left-pane-section-content">
|
||||||
{this.renderHeader()}
|
{this.renderHeader()}
|
||||||
|
@ -176,18 +184,80 @@ export class LeftPaneMessageSection extends React.Component<Props, any> {
|
||||||
}
|
}
|
||||||
|
|
||||||
public renderConversations() {
|
public renderConversations() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="module-conversations-list-content">
|
<div className="module-conversations-list-content">
|
||||||
<SessionSearchInput
|
{this.state.shouldRenderMessageOnboarding
|
||||||
searchString={this.props.searchTerm}
|
? (<>{this.renderMessageOnboarding()}</>)
|
||||||
onChange={this.updateSearchBound}
|
: (
|
||||||
placeholder={window.i18n('searchForAKeyPhrase')}
|
<>
|
||||||
/>
|
<SessionSearchInput
|
||||||
{this.renderList()}
|
searchString={this.props.searchTerm}
|
||||||
|
onChange={this.updateSearchBound}
|
||||||
|
placeholder={window.i18n('searchForAKeyPhrase')}
|
||||||
|
/>
|
||||||
|
{this.renderList()}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public renderMessageOnboarding() {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="onboarding-message-section">
|
||||||
|
<div className="onboarding-message-section__exit">
|
||||||
|
<SessionIconButton
|
||||||
|
iconType={SessionIconType.Exit}
|
||||||
|
iconSize={SessionIconSize.Medium}
|
||||||
|
onClick={this.handleCloseOnboarding}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="onboarding-message-section__container">
|
||||||
|
<div className="onboarding-message-section__title">
|
||||||
|
<h1>{window.i18n('welcomeToSession')}</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="onboarding-message-section__icons">
|
||||||
|
<img src="./images/session/chat-bubbles.svg"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="onboarding-message-section__info">
|
||||||
|
<div className="onboarding-message-section__info--title">
|
||||||
|
{window.i18n('noMessagesTitle')}
|
||||||
|
</div>
|
||||||
|
<div className="onboarding-message-section__info--subtitle">
|
||||||
|
{window.i18n('noMessagesSubtitle')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="onboarding-message-section__buttons">
|
||||||
|
<SessionButton
|
||||||
|
text={window.i18n('joinPublicChat')}
|
||||||
|
buttonType={SessionButtonType.BrandOutline}
|
||||||
|
buttonColor={SessionButtonColor.Green}
|
||||||
|
/>
|
||||||
|
<SessionButton
|
||||||
|
text={window.i18n('noThankyou')}
|
||||||
|
buttonType={SessionButtonType.Brand}
|
||||||
|
buttonColor={SessionButtonColor.Secondary}
|
||||||
|
onClick={this.handleCloseOnboarding}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
public handleCloseOnboarding() {
|
||||||
|
this.setState({
|
||||||
|
shouldRenderMessageOnboarding: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
public updateSearch(searchTerm: string) {
|
public updateSearch(searchTerm: string) {
|
||||||
const { updateSearchTerm, clearSearch } = this.props;
|
const { updateSearchTerm, clearSearch } = this.props;
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue