From 2c5e2df81794a8ab5d44fab00686759f936daa23 Mon Sep 17 00:00:00 2001 From: Vincent Date: Mon, 17 Feb 2020 15:16:24 +1100 Subject: [PATCH] reactification conversationview bottombar initial --- js/background.js | 11 +- js/views/session_conversation_view.js | 6 +- package.json | 1 + stylesheets/_session.scss | 36 +----- stylesheets/_session_conversation.scss | 69 ++++++++++++ ...ssion-slider.scss => _session_slider.scss} | 0 stylesheets/manifest.scss | 3 +- .../session/LeftPaneMessageSection.tsx | 2 +- ts/components/session/SessionConversation.tsx | 105 +++++++++++++++++- ts/global.d.ts | 5 + yarn.lock | 28 ++++- 11 files changed, 216 insertions(+), 50 deletions(-) create mode 100644 stylesheets/_session_conversation.scss rename stylesheets/{_session-slider.scss => _session_slider.scss} (100%) diff --git a/js/background.js b/js/background.js index 98ca62ce3..18f057940 100644 --- a/js/background.js +++ b/js/background.js @@ -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 diff --git a/js/views/session_conversation_view.js b/js/views/session_conversation_view.js index be2813344..423dd28ce 100644 --- a/js/views/session_conversation_view.js +++ b/js/views/session_conversation_view.js @@ -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 @@ }, }); })(); + \ No newline at end of file diff --git a/package.json b/package.json index ba8402e9b..3e3bb8fe1 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index f7e0a5bb4..313204777 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -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; } diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss new file mode 100644 index 000000000..615ae9032 --- /dev/null +++ b/stylesheets/_session_conversation.scss @@ -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; + + } + } +} + diff --git a/stylesheets/_session-slider.scss b/stylesheets/_session_slider.scss similarity index 100% rename from stylesheets/_session-slider.scss rename to stylesheets/_session_slider.scss diff --git a/stylesheets/manifest.scss b/stylesheets/manifest.scss index d4657b295..52bb33ccc 100644 --- a/stylesheets/manifest.scss +++ b/stylesheets/manifest.scss @@ -30,7 +30,8 @@ @import 'session_left_pane'; @import 'session_group_panel'; -@import 'session-slider'; +@import 'session_slider'; +@import 'session_conversation'; // Installer @import 'options'; diff --git a/ts/components/session/LeftPaneMessageSection.tsx b/ts/components/session/LeftPaneMessageSection.tsx index 9841257ea..a1cd62359 100644 --- a/ts/components/session/LeftPaneMessageSection.tsx +++ b/ts/components/session/LeftPaneMessageSection.tsx @@ -124,7 +124,7 @@ export class LeftPaneMessageSection extends React.Component { key={key} style={style} {...conversation} - onClick={openConversationInternal} + onClick={window.renderConversationView} i18n={window.i18n} /> ); diff --git a/ts/components/session/SessionConversation.tsx b/ts/components/session/SessionConversation.tsx index 380ae9ea3..7caaf1144 100644 --- a/ts/components/session/SessionConversation.tsx +++ b/ts/components/session/SessionConversation.tsx @@ -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 { } render() { + // const headerProps = this.props.getHeaderProps; + + // TMEPORARY SOLUTION TO GETTING CONVERSATION UNTIL + // SessionConversationStack is created + const conversation = window.getConversations().models[0]; + return ( -
- 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 +
+ +
+ {this.renderHeader(conversation)} +
+ +
+ 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 +
+ +
+ + + +
+ +
+ + +
+ +
+
) } + + renderHeader(conversation: any) { + return ( + 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} + /> + ); + } } \ No newline at end of file diff --git a/ts/global.d.ts b/ts/global.d.ts index 6de051bd7..059c471cb 100644 --- a/ts/global.d.ts +++ b/ts/global.d.ts @@ -2,6 +2,11 @@ interface Window { CONSTANTS: any; versionInfo: any; + + renderConversationView: any; + + + Events: any; Lodash: any; deleteAllData: any; diff --git a/yarn.lock b/yarn.lock index c97426256..26353ee99 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"