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

reactification conversationview bottombar initial

Browse Source
pull/1102/head
Vincent 5 years ago
parent 481315c100
commit 2c5e2df817
11 changed files with 216 additions and 50 deletions
Show Stats Download Patch File Download Diff File

11
js/background.js
Unescape Escape View File

@ -985,17 +985,16 @@
window.toasts.get(finalToastID).fadeToast();
}
return toastID;
};
window.renderConversationView = () => {
const sessionConversation = new Whisper.SessionConversationView({
el: $('body'),
el: $('#main-view'),
});
sessionConversation.render();
return toastID;
};
window.getFriendsFromContacts = contacts => {
// To call from TypeScript, input / output are both
// of type Array<ConversationType>

6
js/views/session_conversation_view.js
Unescape Escape View File

@ -1,4 +1,4 @@
/* global Whisper $ */
/* global Whisper */
// eslint-disable-next-line func-names
(function() {
@ -9,13 +9,12 @@
Whisper.SessionConversationView = Whisper.View.extend({
initialize(options) {
this.props = {
el: $('body'),
...options,
};
},
render() {
this.conversationView = new Whisper.SessionConversationView({
this.conversationView = new Whisper.ReactWrapperView({
className: 'session-conversation-wrapper',
Component: window.Signal.Components.SessionConversation,
props: this.props,
@ -25,4 +24,5 @@
},
});
})();

1
package.json
Unescape Escape View File

@ -111,6 +111,7 @@
"proxy-agent": "3.0.3",
"rc-slider": "^8.7.1",
"react": "16.8.3",
"react-autosize-textarea": "^7.0.0",
"react-contextmenu": "2.11.0",
"react-dom": "16.8.3",
"react-portal": "^4.2.0",

36
stylesheets/_session.scss
Unescape Escape View File

@ -241,6 +241,7 @@ $session_message-container-border-radius: 5px;
height: 100vh;
display: flex;
flex-grow: 1;
position: relative;
.conversation-stack {
display: block;
@ -1360,41 +1361,6 @@ label {
}
}
.bottom-bar {
.compose {
max-height: 200px;
}
.send-message-container {
display: flex;
flex-grow: 1;
height: 48px;
margin-bottom: -5px;
}
textarea.send-message {
background-color: $session-shade-4;
border: none;
margin: 0px;
padding: 0px $session-margin-lg;
font-size: $session-font-md;
line-height: 1.3em;
align-self: center;
@include session-color-subtle($session-color-white);
}
}
.bottom-bar form {
&.send {
background-color: $session-shade-4;
}
&.active textarea {
border: none;
}
}
.dark-theme .bottom-bar .send-message[disabled='disabled'] {
background: $session-shade-4 !important;
}

69
stylesheets/_session_conversation.scss
Unescape Escape View File

@ -0,0 +1,69 @@
$composition-container-height: 60px;
.conversation-item {
display: flex;
flex-grow: 1;
flex-direction: column;
height: 100%;
}
.session-conversation-wrapper {
position: absolute;
width: 100%;
height: 100%;
background-color: $session-shade-2;
}
.messages-container{
display: flex;
flex-grow: 1;
flex-direction: column;
}
.composition-container {
display: flex;
justify-content: center;
align-items: center;
background-color: $session-shade-4;
padding: 0px $session-margin-md;
min-height: $composition-container-height;
& > .session-icon-button {
margin-right: $session-margin-sm;
}
.session-icon-button {
opacity: 0.8;
.send {
background-color: $session-shade-14;
padding: $session-margin-xs;
border-radius: 50%;
height: 30px;
width: 30px;
}
}
.send-message-input {
display: flex;
flex-grow: 1;
min-height: $composition-container-height
textarea {
min-height: $composition-container-height / 3;
max-height: 3 * $composition-container-height;
margin-right: $session-margin-md;
color: $session-color-white;
resize: none;
display: flex;
flex-grow: 1;
background: transparent;
outline: none;
border: none;
font-size: $session-font-md;
line-height: $session-font-h2;
padding: $composition-container-height / 3 0px;
}
}
}

0
stylesheets/_session-slider.scss → stylesheets/_session_slider.scss
Unescape Escape View File

3
stylesheets/manifest.scss
Unescape Escape View File

@ -30,7 +30,8 @@
@import 'session_left_pane';
@import 'session_group_panel';
@import 'session-slider';
@import 'session_slider';
@import 'session_conversation';
// Installer
@import 'options';

2
ts/components/session/LeftPaneMessageSection.tsx
Unescape Escape View File

@ -124,7 +124,7 @@ export class LeftPaneMessageSection extends React.Component<Props, any> {
key={key}
style={style}
{...conversation}
onClick={openConversationInternal}
onClick={window.renderConversationView}
i18n={window.i18n}
/>
);

105
ts/components/session/SessionConversation.tsx
Unescape Escape View File

@ -1,6 +1,14 @@
import React from 'react';
interface Props{};
import TextareaAutosize from 'react-autosize-textarea';
import { ConversationHeader } from '../conversation/ConversationHeader';
import { SessionIconButton, SessionIconSize, SessionIconType } from './icon';
interface Props{
getHeaderProps: any;
};
interface State{};
@ -12,10 +20,101 @@ export class SessionConversation extends React.Component<Props, State> {
}
render() {
// const headerProps = this.props.getHeaderProps;
// TMEPORARY SOLUTION TO GETTING CONVERSATION UNTIL
// SessionConversationStack is created
const conversation = window.getConversations().models[0];
return (
<div className="sesgbal">
THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW
<div className={`conversation-item conversation-${conversation.cid}`}>
<div className="conversation-header">
{this.renderHeader(conversation)}
</div>
<div className="messages-container">
THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW
</div>
<div className="composition-container">
<SessionIconButton
iconType={SessionIconType.CirclePlus}
iconSize={SessionIconSize.Large}
/>
<SessionIconButton
iconType={SessionIconType.Microphone}
iconSize={SessionIconSize.Large}
/>
<div className="send-message-input">
<TextareaAutosize
rows={1}
maxRows={6}
/>
</div>
<SessionIconButton
iconType={SessionIconType.Emoji}
iconSize={SessionIconSize.Large}
/>
<div className="send-message-button">
<SessionIconButton
iconType={SessionIconType.Send}
iconSize={SessionIconSize.Large}
iconColor={'#FFFFFF'}
iconRotation={90}
/>
</div>
</div>
</div>
)
}
renderHeader(conversation: any) {
return (
<ConversationHeader
id={conversation.cid}
phoneNumber={conversation.id}
isVerified={true}
isMe={false}
isFriend={true}
i18n={window.i18n}
isGroup={false}
isArchived={false}
isPublic={false}
isRss={false}
amMod={false}
members={[]}
showBackButton={false}
timerOptions={[]}
isBlocked={false}
hasNickname={false}
isFriendRequestPending={false}
isOnline={true}
selectedMessages={null}
onSetDisappearingMessages={() => null}
onDeleteMessages={() => null}
onDeleteContact={() => null}
onResetSession={() => null}
onCloseOverlay={() => null}
onDeleteSelectedMessages={() => null}
onArchive={() => null}
onMoveToInbox={() => null}
onShowSafetyNumber={() => null}
onShowAllMedia={() => null}
onShowGroupMembers={() => null}
onGoBack={() => null}
onBlockUser={() => null}
onUnblockUser={() => null}
onClearNickname={() => null}
onChangeNickname={() => null}
onCopyPublicKey={() => null}
onLeaveGroup={() => null}
onAddModerators={() => null}
onRemoveModerators={() => null}
onInviteFriends={() => null}
/>
);
}
}

5
ts/global.d.ts vendored
Unescape Escape View File

@ -2,6 +2,11 @@ interface Window {
CONSTANTS: any;
versionInfo: any;
renderConversationView: any;
Events: any;
Lodash: any;
deleteAllData: any;

28
yarn.lock
Unescape Escape View File

@ -976,6 +976,11 @@ autoprefixer@^6.3.1:
postcss "^5.2.16"
postcss-value-parser "^3.2.3"
autosize@^4.0.2:
version "4.0.2"
resolved "https://registry.yarnpkg.com/autosize/-/autosize-4.0.2.tgz#073cfd07c8bf45da4b9fd153437f5bafbba1e4c9"
integrity sha512-jnSyH2d+qdfPGpWlcuhGiHmqBJ6g3X+8T+iRwFrHPLVcdoGJE/x6Qicm6aDHfTsbgZKxyV8UU/YB2p4cjKDRRA==
aws-sign2@~0.7.0:
version "0.7.0"
resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
@ -2135,6 +2140,11 @@ compression@^1.7.3:
safe-buffer "5.1.2"
vary "~1.1.2"
computed-style@~0.1.3:
version "0.1.4"
resolved "https://registry.yarnpkg.com/computed-style/-/computed-style-0.1.4.tgz#7f344fd8584b2e425bedca4a1afc0e300bb05d74"
integrity sha1-fzRP2FhLLkJb7cpKGvwOMAuwXXQ=
concat-map@0.0.1:
version "0.0.1"
resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@ -5954,6 +5964,13 @@ lie@*:
dependencies:
immediate "~3.0.5"
line-height@^0.3.1:
version "0.3.1"
resolved "https://registry.yarnpkg.com/line-height/-/line-height-0.3.1.tgz#4b1205edde182872a5efa3c8f620b3187a9c54c9"
integrity sha1-SxIF7d4YKHKl76PI9iCzGHqcVMk=
dependencies:
computed-style "~0.1.3"
linkify-it@2.0.3:
version "2.0.3"
resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-2.0.3.tgz#d94a4648f9b1c179d64fa97291268bdb6ce9434f"
@ -7997,7 +8014,7 @@ promise-inflight@^1.0.1:
resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
prop-types@15.x, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
prop-types@15.x, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@ -8350,6 +8367,15 @@ rc@^1.2.1, rc@^1.2.7, rc@^1.2.8:
minimist "^1.2.0"
strip-json-comments "~2.0.1"
react-autosize-textarea@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/react-autosize-textarea/-/react-autosize-textarea-7.0.0.tgz#4f633e4238de7ba73c1da8fdc307353c50f1c5ab"
integrity sha512-rGQLpGUaELvzy3NKzp0kkcppaUtZTptsyR0PGuLotaJDjwRbT0DpD000yCzETpXseJQ/eMsyVGDDHXjXP93u8w==
dependencies:
autosize "^4.0.2"
line-height "^0.3.1"
prop-types "^15.5.6"
react-codemirror2@^4.2.1:
version "4.3.0"
resolved "https://registry.yarnpkg.com/react-codemirror2/-/react-codemirror2-4.3.0.tgz#e79aedca4da60d22402d2cd74f2885a3e5c009fd"

Write Preview
Loading…
Cancel
Save