work on compose view
This commit is contained in:
parent
f613f27ee3
commit
28a27711e1
|
@ -2408,6 +2408,9 @@
|
|||
"Users can share their Session ID by going into their account settings and clicking \"Share Public Key\"."
|
||||
},
|
||||
"searchByIDOrDisplayName": {
|
||||
"message": "Search by ID # or DIsplay Name"
|
||||
"message": "Search by ID # or Display Name"
|
||||
},
|
||||
"message": {
|
||||
"message": "Message"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -52,6 +52,7 @@ $session-shade-14: #535865;
|
|||
$session-shade-15: #5b6c72;
|
||||
$session-shade-16: #979797;
|
||||
$session-shade-17: #d8d8d8;
|
||||
$session-shade-18: #141414;
|
||||
|
||||
$session-opaque-dark-1: rgba(0, 0, 0, 0.25);
|
||||
$session-opaque-dark-2: rgba(0, 0, 0, 0.37);
|
||||
|
@ -109,8 +110,15 @@ div.spacer-lg {
|
|||
.fullwidth {
|
||||
width: 100%;
|
||||
}
|
||||
@mixin session-dark-background-gradient {
|
||||
background: linear-gradient(90deg, #121212 100%, #171717 0%) !important;
|
||||
|
||||
@mixin session-dark-background {
|
||||
background-color: $session-shade-2 !important;
|
||||
}
|
||||
@mixin session-dark-background-lighter {
|
||||
background-color: $session-shade-18 !important;
|
||||
}
|
||||
@mixin session-dark-background-hover {
|
||||
background-color: $session-shade-7 !important;
|
||||
}
|
||||
|
||||
$session-transition-duration: 0.25s;
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
.session {
|
||||
&-fullscreen {
|
||||
@include session-dark-background;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #121212 100%, #171717 0%);
|
||||
}
|
||||
|
||||
&-content {
|
||||
|
@ -102,17 +102,10 @@
|
|||
|
||||
@mixin registration-label-mixin {
|
||||
color: $session-color-white;
|
||||
text-align: center;
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
line-height: 17px;
|
||||
font-weight: bold;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
&__or {
|
||||
@include registration-label-mixin;
|
||||
}
|
||||
|
||||
&__welcome-session {
|
||||
@include registration-label-mixin;
|
||||
font-size: 12px;
|
||||
|
|
|
@ -88,3 +88,9 @@ h3 {
|
|||
font-size: 18px;
|
||||
padding-top: 22px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@include session-h-title;
|
||||
font-size: 17px;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
.dark-theme {
|
||||
.module-conversation-list-item {
|
||||
background-color: $session-shade-4;
|
||||
@include session-dark-background-lighter;
|
||||
&:hover {
|
||||
background-color: $session-shade-11;
|
||||
@include session-dark-background-hover;
|
||||
}
|
||||
}
|
||||
.gutter {
|
||||
|
@ -69,7 +69,7 @@
|
|||
}
|
||||
}
|
||||
.inbox {
|
||||
@include session-dark-background-gradient;
|
||||
@include session-dark-background;
|
||||
}
|
||||
|
||||
.module-left-pane {
|
||||
|
@ -112,7 +112,10 @@
|
|||
}
|
||||
|
||||
&-compose {
|
||||
@include session-dark-background-gradient;
|
||||
@include session-dark-background-lighter;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: -webkit-fill-available;
|
||||
.session-icon .exit {
|
||||
padding: 13px;
|
||||
|
@ -128,28 +131,54 @@
|
|||
}
|
||||
|
||||
&-border-container {
|
||||
width: -webkit-fill-available;
|
||||
position: relative;
|
||||
margin-bottom: 50px;
|
||||
.green {
|
||||
position: absolute;
|
||||
color: $session-color-green;
|
||||
background-color: $session-color-green;
|
||||
height: 6px;
|
||||
width: 130px;
|
||||
left: 50%;
|
||||
margin-left: -65px;
|
||||
top: 50%;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.white {
|
||||
position: absolute;
|
||||
color: none;
|
||||
height: 1px;
|
||||
width: -webkit-fill-available;
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
.exit {
|
||||
margin-top: 10px;
|
||||
margin-left: 13px;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.white {
|
||||
position: absolute;
|
||||
color: none;
|
||||
height: 1px;
|
||||
.session-search-input {
|
||||
margin: 10px 20px;
|
||||
width: -webkit-fill-available;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.green {
|
||||
position: absolute;
|
||||
color: $session-color-green;
|
||||
background-color: $session-color-green;
|
||||
height: 6px;
|
||||
width: 130px;
|
||||
left: 50%;
|
||||
margin-left: -65px;
|
||||
top: 50%;
|
||||
margin-top: 6px;
|
||||
.session-description-long {
|
||||
font-size: 14px;
|
||||
margin: 0px 20px;
|
||||
}
|
||||
|
||||
.session-id-editable {
|
||||
margin: 0px 20px;
|
||||
width: -webkit-fill-available;
|
||||
}
|
||||
|
||||
.session-button {
|
||||
width: fit-content;
|
||||
margin-top: auto;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -188,5 +217,5 @@
|
|||
}
|
||||
|
||||
.app-loading-screen {
|
||||
@include session-dark-background-gradient;
|
||||
@include session-dark-background;
|
||||
}
|
||||
|
|
|
@ -9,8 +9,12 @@ import {
|
|||
PropsData as SearchResultsProps,
|
||||
SearchResults,
|
||||
} from '../SearchResults';
|
||||
import { SessionButton } from './SessionButton';
|
||||
import { SessionConversationSearch } from './SessionConversationSearch';
|
||||
import {
|
||||
SessionButton,
|
||||
SessionButtonColor,
|
||||
SessionButtonType,
|
||||
} from './SessionButton';
|
||||
import { SessionSearchInput } from './SessionSearchInput';
|
||||
import { debounce } from 'lodash';
|
||||
import { cleanSearchTerm } from '../../util/cleanSearchTerm';
|
||||
import { SearchOptions } from '../../types/Search';
|
||||
|
@ -194,11 +198,13 @@ export class LeftPaneMessageSection extends React.Component<Props, any> {
|
|||
public renderCompose(): JSX.Element {
|
||||
return (
|
||||
<div className="module-left-pane-compose">
|
||||
<SessionIconButton
|
||||
iconSize={SessionIconSize.Small}
|
||||
iconType={SessionIconType.Exit}
|
||||
onClick={this.handleComposeClick}
|
||||
/>
|
||||
<div className="exit">
|
||||
<SessionIconButton
|
||||
iconSize={SessionIconSize.Small}
|
||||
iconType={SessionIconType.Exit}
|
||||
onClick={this.handleComposeClick}
|
||||
/>
|
||||
</div>
|
||||
<h2>{window.i18n('enterRecipient')}</h2>
|
||||
<h3>{window.i18n('enterSessionID')}</h3>
|
||||
<div className="module-left-pane-compose-border-container">
|
||||
|
@ -214,6 +220,17 @@ export class LeftPaneMessageSection extends React.Component<Props, any> {
|
|||
<div className="session-description-long">
|
||||
{window.i18n('usersCanShareTheir...')}
|
||||
</div>
|
||||
<h4>{window.i18n('or')}</h4>
|
||||
<SessionSearchInput
|
||||
searchString={this.props.searchTerm}
|
||||
onChange={this.updateSearchBound}
|
||||
placeholder={window.i18n('searchByIDOrDisplayName')}
|
||||
/>
|
||||
<SessionButton
|
||||
buttonColor={SessionButtonColor.Green}
|
||||
buttonType={SessionButtonType.BrandOutline}
|
||||
text={window.i18n('message')}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -221,9 +238,10 @@ export class LeftPaneMessageSection extends React.Component<Props, any> {
|
|||
public renderConversations() {
|
||||
return (
|
||||
<div>
|
||||
<SessionConversationSearch
|
||||
<SessionSearchInput
|
||||
searchString={this.props.searchTerm}
|
||||
onChange={this.updateSearchBound}
|
||||
placeholder={window.i18n('searchForAKeyPhrase')}
|
||||
/>
|
||||
{this.renderList()}
|
||||
</div>
|
||||
|
|
|
@ -475,7 +475,7 @@ export class RegistrationTabs extends React.Component<{}, State> {
|
|||
SessionButtonType.BrandOutline,
|
||||
SessionButtonColor.Green
|
||||
)}
|
||||
<div className="session-registration__or">{or}</div>
|
||||
<h4>{or}</h4>
|
||||
{this.renderLinkDeviceToExistingAccountButton()}
|
||||
</div>
|
||||
);
|
||||
|
@ -485,7 +485,7 @@ export class RegistrationTabs extends React.Component<{}, State> {
|
|||
return (
|
||||
<div>
|
||||
{this.renderContinueYourSessionButton()}
|
||||
<div className="session-registration__or">{or}</div>
|
||||
<h4>{or}</h4>
|
||||
{this.renderRestoreUsingSeedButton(
|
||||
SessionButtonType.BrandOutline,
|
||||
SessionButtonColor.Green
|
||||
|
@ -497,7 +497,7 @@ export class RegistrationTabs extends React.Component<{}, State> {
|
|||
return (
|
||||
<div>
|
||||
{this.renderContinueYourSessionButton()}
|
||||
<div className="session-registration__or">{or}</div>
|
||||
<h4>{or}</h4>
|
||||
{this.renderLinkDeviceToExistingAccountButton()}
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -4,9 +4,10 @@ import { SessionIconButton, SessionIconSize, SessionIconType } from './icon';
|
|||
interface Props {
|
||||
searchString: string;
|
||||
onChange: any;
|
||||
placeholder: string;
|
||||
}
|
||||
|
||||
export class SessionConversationSearch extends React.Component<Props> {
|
||||
export class SessionSearchInput extends React.Component<Props> {
|
||||
public constructor(props: Props) {
|
||||
super(props);
|
||||
}
|
||||
|
@ -23,7 +24,7 @@ export class SessionConversationSearch extends React.Component<Props> {
|
|||
<input
|
||||
value={searchString}
|
||||
onChange={e => this.props.onChange(e.target.value)}
|
||||
placeholder={window.i18n('searchForAKeyPhrase')}
|
||||
placeholder={this.props.placeholder}
|
||||
/>
|
||||
</div>
|
||||
);
|
Loading…
Reference in New Issue