From 505697bbcd14aef3c047ba351a7a59d9fbeef153 Mon Sep 17 00:00:00 2001 From: Vincent Date: Thu, 9 Jan 2020 11:38:48 +1100 Subject: [PATCH] App view change working --- background.html | 16 ++--- js/views/inbox_view.js | 7 +-- stylesheets/_session.scss | 49 +++++++++++++++ ts/components/LeftPane.tsx | 6 +- ts/components/MainViewController.tsx | 60 +++++++++++++++++++ .../session/LeftPaneMessageSection.tsx | 5 ++ .../session/LeftPaneSettingSection.tsx | 9 +-- ts/components/session/SessionSeedModal.tsx | 1 - .../settings/SessionSettingListItem.tsx | 47 +++++++++++++++ 9 files changed, 182 insertions(+), 18 deletions(-) create mode 100644 ts/components/MainViewController.tsx create mode 100644 ts/components/session/settings/SessionSettingListItem.tsx diff --git a/background.html b/background.html index ef6a98f2c..10f34da26 100644 --- a/background.html +++ b/background.html @@ -48,13 +48,15 @@
-
-
-
-
-
- -

SESSION

+
+
+
+
+
+
+ +

SESSION

+
diff --git a/js/views/inbox_view.js b/js/views/inbox_view.js index 879fc4ef2..162b71024 100644 --- a/js/views/inbox_view.js +++ b/js/views/inbox_view.js @@ -47,11 +47,10 @@ } }, showToast({ message }) { - const toast = new Whisper.MessageToastView({ - message, + window.pushToast({ + title: message, + type: 'success', }); - toast.$el.appendTo(this.$el); - toast.render(); }, showConfirmationDialog({ title, message, onOk, onCancel }) { window.confirmationDialog({ diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index ef02cc2db..eb1dffaa3 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -192,6 +192,20 @@ $session_message-container-border-radius: 5px; z-index: 1; } + +#main-view { + height: 100vh; + display: flex; + flex-grow: 1; + + .conversation-stack { + display: block; + width: 100%; + } +} + + + .button-group > div { margin-left: 5px; margin-right: 5px; @@ -898,6 +912,41 @@ label { } } +.session-settings { + &-list{ + width: 100%; + } + + &-item { + font-size: 15px; + font-weight: bold; + color: $session-color-white; + + height: 90px; + padding: 0px 15px; + + display: flex; + align-items: center; + justify-content: space-between; + + &__info { + background-color: $session-shade-1; + } + + &__description { + font-size: 13px; + @include session-color-subtle($session-color-white); + } + + &:not(:last-child){ + border-bottom: 1px solid $session-shade-3; + } + } + +} + + + #qr svg { width: $session-modal-size-sm; height: $session-modal-size-sm; diff --git a/ts/components/LeftPane.tsx b/ts/components/LeftPane.tsx index c41c6c11d..d163911f7 100644 --- a/ts/components/LeftPane.tsx +++ b/ts/components/LeftPane.tsx @@ -1,5 +1,7 @@ import React from 'react'; +import { MainViewController } from './MainViewController'; + import { ActionsPanel, SectionType } from './session/ActionsPanel'; import { LeftPaneMessageSection } from './session/LeftPaneMessageSection'; @@ -209,6 +211,8 @@ export class LeftPane extends React.Component { clearSearch={clearSearch} /> ); + + // Render Message View Also! } private renderContactSection() { @@ -240,8 +244,6 @@ export class LeftPane extends React.Component { } private renderSettingSection() { - const {} = this.props; - return ; } } diff --git a/ts/components/MainViewController.tsx b/ts/components/MainViewController.tsx new file mode 100644 index 000000000..172feb7f3 --- /dev/null +++ b/ts/components/MainViewController.tsx @@ -0,0 +1,60 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; + +import { SessionSettingListItem } from './session/settings/SessionSettingListItem'; + +// interface State { +// } + +// interface Props { + +// } + +// export class LeftPane extends React.Component { +// public state = { +// }; + +// public constructor(props: any) { +// super(props); +// } + + +// public render(): JSX.Element { +// return ( +//
+// Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis, pariatur dicta placeat corporis similique modi quod veritatis voluptatum impedit tempore voluptas nostrum magni aspernatur iure, labore ipsam odit possimus exercitationem? +//
+// ); +// } + +// } + +export class MainViewController { + public static renderMessageView() { + const element = ( +
+
+
+
+
+ +

SESSION

+
+
+
+
+ ); + + ReactDOM.render(element, document.getElementById('main-view')); + } + + public static renderSettingsView() { + const element = ( +
+ +
+ ); + + ReactDOM.render(element, document.getElementById('main-view')); + } +} \ No newline at end of file diff --git a/ts/components/session/LeftPaneMessageSection.tsx b/ts/components/session/LeftPaneMessageSection.tsx index b6a5f398e..0f82c73bf 100644 --- a/ts/components/session/LeftPaneMessageSection.tsx +++ b/ts/components/session/LeftPaneMessageSection.tsx @@ -1,6 +1,8 @@ import React from 'react'; + import { AutoSizer, List } from 'react-virtualized'; +import { MainViewController } from '../MainViewController'; import { ConversationListItem, PropsData as ConversationListItemPropsType, @@ -155,6 +157,9 @@ export class LeftPaneMessageSection extends React.Component { } public render(): JSX.Element { + + MainViewController.renderMessageView(); + return (
{this.renderHeader()} diff --git a/ts/components/session/LeftPaneSettingSection.tsx b/ts/components/session/LeftPaneSettingSection.tsx index 1e9efc888..839646ad4 100644 --- a/ts/components/session/LeftPaneSettingSection.tsx +++ b/ts/components/session/LeftPaneSettingSection.tsx @@ -3,6 +3,8 @@ import classNames from 'classnames'; import { LeftPane } from '../LeftPane'; +import { MainViewController } from '../MainViewController'; + import { SessionButton, SessionButtonColor, @@ -11,8 +13,6 @@ import { import { SessionIcon, SessionIconSize, SessionIconType } from './icon'; import { SessionSearchInput } from './SessionSearchInput'; -import { Session } from 'inspector'; - export enum SessionSettingCategory { Account = 'account', @@ -35,7 +35,7 @@ export class LeftPaneSettingSection extends React.Component { super(props); this.state = { - settingCategory: SessionSettingCategory.Privacy, + settingCategory: SessionSettingCategory.Account, searchQuery: '', }; @@ -46,10 +46,11 @@ export class LeftPaneSettingSection extends React.Component { } public render(): JSX.Element { + MainViewController.renderSettingsView(); + return (
{this.renderHeader()} - {this.renderSettings()}
); diff --git a/ts/components/session/SessionSeedModal.tsx b/ts/components/session/SessionSeedModal.tsx index 3b0bbb149..38208a0ce 100644 --- a/ts/components/session/SessionSeedModal.tsx +++ b/ts/components/session/SessionSeedModal.tsx @@ -213,7 +213,6 @@ export class SessionSeedModal extends React.Component { title: window.i18n('copiedMnemonic'), type: 'success', id: 'copySeedToast', - shouldFade: false, }); } diff --git a/ts/components/session/settings/SessionSettingListItem.tsx b/ts/components/session/settings/SessionSettingListItem.tsx new file mode 100644 index 000000000..cc8f58740 --- /dev/null +++ b/ts/components/session/settings/SessionSettingListItem.tsx @@ -0,0 +1,47 @@ +import React from 'react'; +import { SessionToggle } from '../SessionToggle'; + +interface Props { +} + + +// export settings = { +// id +// category +// name +// description +// type (toggle, dropdown, etc) +// } + + +export class SessionSettingListItem extends React.Component { + public constructor(props: Props) { + super(props); + this.state = { + }; + } + + + + public render(): JSX.Element { + return ( +
+
+
+ Typing indicators +
+ +
+ This is the description of the super usper awesome setting item +
+
+ +
+ +
+ +
+ ); + } + +}