From c883d20bd7e1eeff314c4e2f19a7826047b1386a Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Tue, 17 Dec 2019 10:46:20 +1100 Subject: [PATCH] add the left pane sections on main page --- background.html | 3 - stylesheets/_modules.scss | 3 +- stylesheets/_session.scss | 36 +++- .../_session_theme_dark_left_pane.scss | 37 ++++ stylesheets/manifest.scss | 1 + ts/components/LeftPane.tsx | 15 +- ts/components/LeftPaneSections.tsx | 188 ++++++++++++++++++ ts/components/session/RegistrationTabs.tsx | 2 +- .../session/icon/SessionIconButton.tsx | 19 +- ts/global.d.ts | 1 + 10 files changed, 289 insertions(+), 16 deletions(-) create mode 100644 stylesheets/_session_theme_dark_left_pane.scss create mode 100644 ts/components/LeftPaneSections.tsx diff --git a/background.html b/background.html index 4b71134a2..6c15e5891 100644 --- a/background.html +++ b/background.html @@ -56,9 +56,6 @@
-
- -
diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 6fa4cbeaa..dd3ce39bb 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -3233,8 +3233,7 @@ display: inline-flex; flex-direction: column; - - width: 300px; + width: 380px; height: 100%; } diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 228286ead..917b6efe4 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -297,12 +297,23 @@ $session_message-container-border-radius: 5px; } } .session-icon-button { - opacity: 0.4; cursor: pointer; display: inline-block; - transition: opacity $session-transition-duration; - &:hover { - opacity: 1; + position: relative; + + svg { + transition: opacity $session-transition-duration; + opacity: 0.4; + + &:hover { + opacity: 1; + } + } + + &.no-opacify { + svg { + opacity: 1; + } } &.small.padded { @@ -316,6 +327,23 @@ $session_message-container-border-radius: 5px; &.large.padded { @include set-icon-margin($session-icon-size-lg); } + + .notification-count { + position: absolute; + font-size: 12px; + font-family: $session-font-family; + top: -10px; + right: -10px; + width: 20px; + height: 20px; + padding: 3px; + border-radius: 50%; + font-weight: 700; + background: red; + color: $session-color-white; + text-align: center; + opacity: 1; + } } .session-icon { diff --git a/stylesheets/_session_theme_dark_left_pane.scss b/stylesheets/_session_theme_dark_left_pane.scss new file mode 100644 index 000000000..54b35552d --- /dev/null +++ b/stylesheets/_session_theme_dark_left_pane.scss @@ -0,0 +1,37 @@ +.dark-theme { + .module-conversation-list-item { + background-color: $session-shade-4; + &:hover { + background-color: $session-shade-11; + } + } +} + +.module-left-pane { + border-right: none !important; + width: 300px; + + &-session { + display: flex; + } + + &__sections-container { + height: -webkit-fill-available; + width: 80px; + display: inline-flex; + flex-direction: column; + background: $session-shade-2; + + .module-avatar, + .session-icon-button { + margin: 30px auto 30px auto; + &:last-child { + margin: auto auto 30px auto; + } + } + } +} + +.gutter { + width: 380px; +} diff --git a/stylesheets/manifest.scss b/stylesheets/manifest.scss index 6c36adcf5..b9821e752 100644 --- a/stylesheets/manifest.scss +++ b/stylesheets/manifest.scss @@ -27,6 +27,7 @@ @import 'session'; @import 'session_signin'; @import 'session_theme_dark'; +@import 'session_theme_dark_left_pane'; // Installer @import 'options'; diff --git a/ts/components/LeftPane.tsx b/ts/components/LeftPane.tsx index 71e67f027..4b5be9367 100644 --- a/ts/components/LeftPane.tsx +++ b/ts/components/LeftPane.tsx @@ -12,6 +12,8 @@ import { } from './SearchResults'; import { LocalizerType } from '../types/Util'; +import { LeftPaneSections } from './LeftPaneSections'; + export interface Props { conversations?: Array; friends?: Array; @@ -45,7 +47,7 @@ type RowRendererParamsType = { style: Object; }; -export class LeftPane extends React.Component { +export class LeftPane extends React.Component { public state = { currentTab: 'conversations', }; @@ -268,11 +270,14 @@ export class LeftPane extends React.Component { const { renderMainHeader, showArchived } = this.props; return ( -
-
- {showArchived ? this.renderArchivedHeader() : renderMainHeader()} +
+ +
+
+ {showArchived ? this.renderArchivedHeader() : renderMainHeader()} +
+ {this.renderList()}
- {this.renderList()}
); } diff --git a/ts/components/LeftPaneSections.tsx b/ts/components/LeftPaneSections.tsx new file mode 100644 index 000000000..ffa8da0c2 --- /dev/null +++ b/ts/components/LeftPaneSections.tsx @@ -0,0 +1,188 @@ +import React from 'react'; +import { + SessionIconButton, + SessionIconSize, + SessionIconType, +} from './session/icon'; +import { Avatar } from './Avatar'; + +enum SectionType { + Profile, + Message, + People, + Globe, + Settings, + Moon, +} + +interface State { + selectedSection: SectionType; + avatarPath: string; +} + +const Section = ({ + isSelected, + onSelect, + type, + avatarPath, + notificationCount, +}: { + isSelected: boolean; + onSelect?: (event: SectionType) => void; + type: SectionType; + avatarPath?: string; + avatarColor?: string; + notificationCount?: number; +}) => { + const handleClick = onSelect + ? () => { + onSelect(type); + } + : undefined; + + if (type === SectionType.Profile) { + if (!isSelected) { + return ( + + ); + } else { + return ( + + ); + } + } + + let iconType: SessionIconType; + switch (type) { + case SectionType.Message: + iconType = SessionIconType.Reply; + break; + case SectionType.People: + iconType = SessionIconType.Users; + break; + case SectionType.Globe: + iconType = SessionIconType.Globe; + break; + case SectionType.Settings: + iconType = SessionIconType.Gear; + break; + case SectionType.Moon: + iconType = SessionIconType.Moon; + break; + + default: + iconType = SessionIconType.Moon; + } + if (!isSelected) { + return ( + + ); + } else { + return ( + + ); + } +}; + +export class LeftPaneSections extends React.Component<{}, State> { + constructor() { + super({}); + this.state = { + avatarPath: '', + selectedSection: SectionType.Message, + }; + } + public componentDidMount() { + // tslint:disable-next-line: no-backbone-get-set-outside-model + const ourNumber = window.storage.get('primaryDevicePubKey'); + + window.ConversationController.getOrCreateAndWait(ourNumber, 'private').then( + (conversation: any) => { + this.setState({ + avatarPath: conversation.getAvatarPath(), + }); + } + ); + } + + public render(): JSX.Element { + const isProfileSelected = + this.state.selectedSection === SectionType.Profile; + const isMessageSelected = + this.state.selectedSection === SectionType.Message; + const isPeopleSelected = this.state.selectedSection === SectionType.People; + const isGlobeSelected = this.state.selectedSection === SectionType.Globe; + const isSettingsSelected = + this.state.selectedSection === SectionType.Settings; + const isMoonSelected = this.state.selectedSection === SectionType.Moon; + + return ( +
+
+
+
+
+
+
+
+ ); + } + + private readonly handleSectionSelect = (section: SectionType): void => { + this.setState({ selectedSection: section }); + }; +} diff --git a/ts/components/session/RegistrationTabs.tsx b/ts/components/session/RegistrationTabs.tsx index 610c506e4..8c87d172d 100644 --- a/ts/components/session/RegistrationTabs.tsx +++ b/ts/components/session/RegistrationTabs.tsx @@ -387,7 +387,7 @@ export class RegistrationTabs extends React.Component<{}, State> { if (signUpMode === SignUpMode.EnterDetails) { return (
- {this.renderNamePasswordAndVerifyPasswordFields()}; + {this.renderNamePasswordAndVerifyPasswordFields()}
); } diff --git a/ts/components/session/icon/SessionIconButton.tsx b/ts/components/session/icon/SessionIconButton.tsx index ddf53615c..aab0ab76a 100644 --- a/ts/components/session/icon/SessionIconButton.tsx +++ b/ts/components/session/icon/SessionIconButton.tsx @@ -5,11 +5,15 @@ import { Props, SessionIcon } from '../icon'; interface SProps extends Props { onClick: any; + notificationCount: number | undefined; + isSelected: boolean; } export class SessionIconButton extends React.PureComponent { public static readonly extendedDefaults = { onClick: () => null, + notificationCount: undefined, + isSelected: false, }; public static readonly defaultProps = { ...SessionIcon.defaultProps, @@ -28,14 +32,24 @@ export class SessionIconButton extends React.PureComponent { iconColor, iconRotation, iconPadded, + isSelected, } = this.props; + let { notificationCount } = this.props; + + if (notificationCount === 0) { + notificationCount = undefined; + } else if (notificationCount !== undefined && notificationCount > 9) { + notificationCount = 9; + } + return (
{ @@ -48,6 +62,9 @@ export class SessionIconButton extends React.PureComponent { iconColor={iconColor} iconRotation={iconRotation} /> + {notificationCount !== undefined && ( + {notificationCount} + )}
); } diff --git a/ts/global.d.ts b/ts/global.d.ts index 9e1d3dbc4..cd129dcea 100644 --- a/ts/global.d.ts +++ b/ts/global.d.ts @@ -16,6 +16,7 @@ interface Window { friends: any; generateID: any; pushToast: any; + storage: any; } interface Promise {