From 43956709ad79693e758dd29ef7a5ef13128e312d Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Mon, 13 Jan 2020 15:45:02 +1100 Subject: [PATCH] include the channel settings panel on right of conversation --- background.html | 55 +++++++++------- js/modules/signal.js | 4 ++ js/views/conversation_view.js | 63 +++++++++++++++++++ stylesheets/_session_group_panel.scss | 10 +++ .../session/SessionChannelSettings.tsx | 31 +++++---- 5 files changed, 123 insertions(+), 40 deletions(-) diff --git a/background.html b/background.html index cfbdbcffe..44f7d8934 100644 --- a/background.html +++ b/background.html @@ -90,35 +90,42 @@ diff --git a/js/modules/signal.js b/js/modules/signal.js index e818dd603..6fef05b2e 100644 --- a/js/modules/signal.js +++ b/js/modules/signal.js @@ -33,6 +33,9 @@ const { ContactName } = require('../../ts/components/conversation/ContactName'); const { ConversationHeader, } = require('../../ts/components/conversation/ConversationHeader'); +const { + SessionChannelSettings, +} = require('../../ts/components/session/SessionChannelSettings'); const { EmbeddedContact, } = require('../../ts/components/conversation/EmbeddedContact'); @@ -256,6 +259,7 @@ exports.setup = (options = {}) => { ContactListItem, ContactName, ConversationHeader, + SessionChannelSettings, EmbeddedContact, Emojify, FriendRequest, diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js index fc5984518..fe7a10a15 100644 --- a/js/views/conversation_view.js +++ b/js/views/conversation_view.js @@ -264,10 +264,57 @@ window.Whisper.events.trigger('onShowUserDetails', { userPubKey: pubkey, }); + } else { + this.showGroupSettings(); } }, }; }; + const getGroupSettingsProp = () => { + /* const expireTimer = this.model.get('expireTimer'); + const expirationSettingName = expireTimer + ? Whisper.ExpirationTimerOptions.getName(expireTimer || 0) + : null; */ + + const members = this.model.get('members') || []; + + return { + id: this.model.id, + name: this.model.getName(), + phoneNumber: this.model.getNumber(), + profileName: this.model.getProfileName(), + color: this.model.getColor(), + avatarPath: this.model.getAvatarPath(), + isGroup: !this.model.isPrivate(), + isPublic: this.model.isPublic(), + isRss: this.model.isRss(), + memberCount: members.length, + /* timerOptions: Whisper.ExpirationTimerOptions.map(item => ({ + name: item.getName(), + value: item.get('seconds'), + })), + + onSetDisappearingMessages: seconds => + this.setDisappearingMessages(seconds), + + */ + onGoBack: () => { + this.$('.conversation-content-right').hide(); + }, + + onUpdateGroup: () => { + window.Whisper.events.trigger('updateGroup', this.model); + }, + + onLeaveGroup: () => { + window.Whisper.events.trigger('leaveGroup', this.model); + }, + + onInviteFriends: () => { + window.Whisper.events.trigger('inviteFriends', this.model); + }, + }; + }; this.titleView = new Whisper.ReactWrapperView({ className: 'title-wrapper', Component: window.Signal.Components.ConversationHeader, @@ -289,6 +336,22 @@ onClicked: this.selectMember.bind(this), }); + this.showGroupSettings = () => { + if(!this.groupSettings) { + this.groupSettings = new Whisper.ReactWrapperView({ + className: 'group-settings', + Component: window.Signal.Components.SessionChannelSettings, + props: getGroupSettingsProp(this.model), + }); + this.$('.conversation-content-right').append(this.groupSettings.el); + } + this.$('.conversation-content-right').show(); + } + + this.hideGroupSettings = () => { + this.$('.conversation-content-right').hide(); + } + this.memberView.render(); this.bulkEditView = new Whisper.BulkEditView({ diff --git a/stylesheets/_session_group_panel.scss b/stylesheets/_session_group_panel.scss index fc32ed73f..96de14c8c 100644 --- a/stylesheets/_session_group_panel.scss +++ b/stylesheets/_session_group_panel.scss @@ -123,3 +123,13 @@ } } } + + +.conversation-content { + display: flex; + height: inherit; + + &-left { + flex-grow: 1; + } +} diff --git a/ts/components/session/SessionChannelSettings.tsx b/ts/components/session/SessionChannelSettings.tsx index dccb9dfd2..117452bfa 100644 --- a/ts/components/session/SessionChannelSettings.tsx +++ b/ts/components/session/SessionChannelSettings.tsx @@ -7,13 +7,14 @@ import _ from 'lodash'; interface Props { - channelPubKey: string; - channelName: string; + id: string; + name: string; memberCount: number; description: string; + avatarPath: string; - onHidePanel: () => void; - onAddPeopleToGroup: () => void; + onGoBack: () => void; + onInviteFriends: () => void; onLeaveGroup: () => void; } @@ -44,7 +45,7 @@ export class SessionChannelSettings extends React.Component { // into memory right away. Revisit this once we have infinite scrolling: const DEFAULT_MEDIA_FETCH_COUNT = 50; const DEFAULT_DOCUMENTS_FETCH_COUNT = 150; - const conversationId = this.props.channelPubKey; + const conversationId = this.props.id; const rawMedia = await window.Signal.Data.getMessagesWithVisualMediaAttachments( conversationId, { @@ -170,34 +171,32 @@ export class SessionChannelSettings extends React.Component { public render() { - const { memberCount, channelName } = this.props; - const { documents, media, onItemClick} = this.state; + const { memberCount, name, onLeaveGroup } = this.props; + const { documents, media, onItemClick } = this.state; return (
{this.renderHeader()} -

{channelName}

-
{window.i18n('members', memberCount)}
+

{name}

+ {memberCount &&
{window.i18n('members', memberCount)}
}
{window.i18n('notifications')}
{window.i18n('disappearingMessages')}
- - - +
); } private renderHeader() { - const { channelPubKey } = this.props; + const { id, onGoBack, onInviteFriends, avatarPath } = this.props; return (
- - - + + +
); }