onboarding messageview
This commit is contained in:
Vincent
parent
cc1451fae8
commit
aeb04a3a44
|
|
@ -967,6 +967,15 @@
|
|||
"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": {
|
||||
"message": "Pair New Device"
|
||||
},
|
||||
|
|
@ -2580,6 +2589,9 @@
|
|||
"beginYourSession": {
|
||||
"message": "Begin<br />your<br />Session."
|
||||
},
|
||||
"welcomeToSession": {
|
||||
"message": "Welcome to Session"
|
||||
},
|
||||
"welcomeToYourSession": {
|
||||
"message": "Welcome to your Session"
|
||||
},
|
||||
|
|
@ -2707,6 +2719,9 @@
|
|||
"joinChannel": {
|
||||
"message": "Join Open Group"
|
||||
},
|
||||
"joinPublicChat": {
|
||||
"message": "Join Public Chat"
|
||||
},
|
||||
"next": {
|
||||
"message": "Next"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -108,17 +108,17 @@
|
|||
<div class='compose'>
|
||||
<form class='send clearfix file-input'>
|
||||
<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'>
|
||||
<textarea maxlength='2000' class='send-message' placeholder='{{ send-message }}' rows='1' dir='auto' {{#disable-inputs}} disabled="disabled" {{/disable-inputs}}></textarea>
|
||||
</div>
|
||||
<div class='capture-audio'>
|
||||
<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>
|
||||
<button class='emoji' {{#disable-inputs}} disabled="disabled" {{/disable-inputs}}></button>
|
||||
</div>
|
||||
</form>
|
||||
</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 = () =>
|
||||
Math.random()
|
||||
|
|
|
|||
|
|
@ -86,7 +86,8 @@ button.emoji {
|
|||
opacity: 0.5;
|
||||
border: none;
|
||||
background: transparent;
|
||||
margin-left: 15px;
|
||||
margin: 0px 10px 0px 15px;
|
||||
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ $session-color-dark-grey: #353535;
|
|||
$session-color-black: #000;
|
||||
$session-color-danger: #ff453a;
|
||||
$session-color-primary: $session-shade-13;
|
||||
$session-color-secondary: $session-shade-16;
|
||||
$session-color-secondary: $session-shade-6;
|
||||
$session-background-overlay: #212121;
|
||||
$session-background: #121212;
|
||||
|
||||
|
|
@ -102,6 +102,11 @@ $session-font-md: 15px;
|
|||
$session-font-lg: 18px;
|
||||
$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;
|
||||
$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);
|
||||
font-family: 'SF Pro Text';
|
||||
font-weight: 300;
|
||||
font-size: $session-font-xs;
|
||||
}
|
||||
|
||||
.module-contact-name {
|
||||
|
|
@ -524,8 +530,18 @@ label {
|
|||
border-bottom-right-radius: $session_message-container-border-radius;
|
||||
}
|
||||
|
||||
.conversation-header .session-icon-button {
|
||||
@include standard-icon-button();
|
||||
.conversation-header {
|
||||
.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 {
|
||||
|
|
@ -712,6 +728,11 @@ label {
|
|||
.message {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.session-id-editable {
|
||||
width: 30vw;
|
||||
max-width: 700px;
|
||||
}
|
||||
}
|
||||
|
||||
&__centered {
|
||||
|
|
@ -807,7 +828,7 @@ label {
|
|||
align-items: center;
|
||||
|
||||
height: 25px;
|
||||
padding: 0px 10px;
|
||||
padding: $session-margin-md $session-margin-sm;
|
||||
|
||||
background-color: $session-shade-4;
|
||||
|
||||
|
|
@ -1258,6 +1279,7 @@ label {
|
|||
display: flex;
|
||||
flex-grow: 1;
|
||||
min-height: 60px;
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
@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 {
|
||||
&:before {
|
||||
margin-top: 4px;
|
||||
margin-top: 7px;
|
||||
@include color-svg('../images/smile.svg', $color-dark-30);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -191,7 +191,7 @@ export class ConversationHeader extends React.Component<Props> {
|
|||
if (name) {
|
||||
title = `${name}`;
|
||||
} else {
|
||||
title = phoneNumber;
|
||||
title = `User ${window.shortenPubkey(phoneNumber)}`;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -232,7 +232,7 @@ export class ConversationHeader extends React.Component<Props> {
|
|||
profileName={profileName}
|
||||
size={28}
|
||||
borderColor={borderColor}
|
||||
borderWidth={2}
|
||||
borderWidth={0}
|
||||
onAvatarClick={() => {
|
||||
this.onAvatarClickBound(phoneNumber);
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -18,6 +18,8 @@ import { SearchOptions } from '../../types/Search';
|
|||
import { validateNumber } from '../../types/PhoneNumber';
|
||||
import { LeftPane, RowRendererParamsType } from '../LeftPane';
|
||||
import { SessionClosableOverlay } from './SessionClosableOverlay';
|
||||
import { SessionIconButton, SessionIconType, SessionIconSize } from './icon';
|
||||
import { SessionButton, SessionButtonType, SessionButtonColor } from './SessionButton';
|
||||
|
||||
export interface Props {
|
||||
searchTerm: string;
|
||||
|
|
@ -39,13 +41,19 @@ export class LeftPaneMessageSection extends React.Component<Props, any> {
|
|||
|
||||
public constructor(props: Props) {
|
||||
super(props);
|
||||
|
||||
const conversations = this.getCurrentConversations();
|
||||
const length = conversations ? conversations.length : 0;
|
||||
|
||||
this.state = {
|
||||
showComposeView: false,
|
||||
pubKeyPasted: '',
|
||||
shouldRenderMessageOnboarding: length === 0,
|
||||
};
|
||||
|
||||
this.updateSearchBound = this.updateSearch.bind(this);
|
||||
this.handleToggleOverlay = this.handleToggleOverlay.bind(this);
|
||||
this.handleCloseOnboarding = this.handleCloseOnboarding.bind(this);
|
||||
this.handleOnPasteSessionID = this.handleOnPasteSessionID.bind(this);
|
||||
this.handleMessageButtonClick = this.handleMessageButtonClick.bind(this);
|
||||
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 (
|
||||
<div className="session-left-pane-section-content">
|
||||
{this.renderHeader()}
|
||||
|
|
@ -176,18 +184,80 @@ export class LeftPaneMessageSection extends React.Component<Props, any> {
|
|||
}
|
||||
|
||||
public renderConversations() {
|
||||
|
||||
return (
|
||||
<div className="module-conversations-list-content">
|
||||
<SessionSearchInput
|
||||
searchString={this.props.searchTerm}
|
||||
onChange={this.updateSearchBound}
|
||||
placeholder={window.i18n('searchForAKeyPhrase')}
|
||||
/>
|
||||
{this.renderList()}
|
||||
{this.state.shouldRenderMessageOnboarding
|
||||
? (<>{this.renderMessageOnboarding()}</>)
|
||||
: (
|
||||
<>
|
||||
<SessionSearchInput
|
||||
searchString={this.props.searchTerm}
|
||||
onChange={this.updateSearchBound}
|
||||
placeholder={window.i18n('searchForAKeyPhrase')}
|
||||
/>
|
||||
{this.renderList()}
|
||||
</>
|
||||
)}
|
||||
</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) {
|
||||
const { updateSearchTerm, clearSearch } = this.props;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue