add group settings page with media downladable and docs only

_locales/en/messages.json

@@ -2572,5 +2572,8 @@
   },
   "next": {
     "message": "Next"
+  },
+  "description": {
+    "message": "Description"
   }
 }

js/views/conversation_view.js

@@ -213,7 +213,6 @@
             this.showSafetyNumber();
           },
           onShowAllMedia: async () => {
-            await this.showAllMedia();
             this.updateHeader();
           },
           onShowGroupMembers: async () => {
@@ -901,150 +900,6 @@
       el[0].scrollIntoView();
     },
 
-    async showAllMedia() {
-      // We fetch more documents than media as they don’t require to be loaded
-      // 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.model.get('id');
-
-      const getProps = async () => {
-        const rawMedia = await Signal.Data.getMessagesWithVisualMediaAttachments(
-          conversationId,
-          {
-            limit: DEFAULT_MEDIA_FETCH_COUNT,
-            MessageCollection: Whisper.MessageCollection,
-          }
-        );
-        const rawDocuments = await Signal.Data.getMessagesWithFileAttachments(
-          conversationId,
-          {
-            limit: DEFAULT_DOCUMENTS_FETCH_COUNT,
-            MessageCollection: Whisper.MessageCollection,
-          }
-        );
-
-        // First we upgrade these messages to ensure that they have thumbnails
-        for (let max = rawMedia.length, i = 0; i < max; i += 1) {
-          const message = rawMedia[i];
-          const { schemaVersion } = message;
-
-          if (schemaVersion < Message.VERSION_NEEDED_FOR_DISPLAY) {
-            // Yep, we really do want to wait for each of these
-            // eslint-disable-next-line no-await-in-loop
-            rawMedia[i] = await upgradeMessageSchema(message);
-            // eslint-disable-next-line no-await-in-loop
-            await window.Signal.Data.saveMessage(rawMedia[i], {
-              Message: Whisper.Message,
-            });
-          }
-        }
-
-        const media = _.flatten(
-          rawMedia.map(message => {
-            const { attachments } = message;
-            return (attachments || [])
-              .filter(
-                attachment =>
-                  attachment.thumbnail &&
-                  !attachment.pending &&
-                  !attachment.error
-              )
-              .map((attachment, index) => {
-                const { thumbnail } = attachment;
-
-                return {
-                  objectURL: getAbsoluteAttachmentPath(attachment.path),
-                  thumbnailObjectUrl: thumbnail
-                    ? getAbsoluteAttachmentPath(thumbnail.path)
-                    : null,
-                  contentType: attachment.contentType,
-                  index,
-                  attachment,
-                  message,
-                };
-              });
-          })
-        );
-
-        // Unlike visual media, only one non-image attachment is supported
-        const documents = rawDocuments.map(message => {
-          const attachments = message.attachments || [];
-          const attachment = attachments[0];
-          return {
-            contentType: attachment.contentType,
-            index: 0,
-            attachment,
-            message,
-          };
-        });
-
-        const saveAttachment = async ({ attachment, message } = {}) => {
-          const timestamp = message.received_at;
-          Signal.Types.Attachment.save({
-            attachment,
-            document,
-            getAbsolutePath: getAbsoluteAttachmentPath,
-            timestamp,
-          });
-        };
-
-        const onItemClick = async ({ message, attachment, type }) => {
-          switch (type) {
-            case 'documents': {
-              saveAttachment({ message, attachment });
-              break;
-            }
-
-            case 'media': {
-              const selectedIndex = media.findIndex(
-                mediaMessage => mediaMessage.attachment.path === attachment.path
-              );
-              this.lightboxGalleryView = new Whisper.ReactWrapperView({
-                className: 'lightbox-wrapper',
-                Component: Signal.Components.LightboxGallery,
-                props: {
-                  media,
-                  onSave: saveAttachment,
-                  selectedIndex,
-                },
-                onClose: () => Signal.Backbone.Views.Lightbox.hide(),
-              });
-              Signal.Backbone.Views.Lightbox.show(this.lightboxGalleryView.el);
-              break;
-            }
-
-            default:
-              throw new TypeError(`Unknown attachment type: '${type}'`);
-          }
-        };
-
-        return {
-          documents,
-          media,
-          onItemClick,
-        };
-      };
-
-      const view = new Whisper.ReactWrapperView({
-        className: 'panel-wrapper',
-        Component: Signal.Components.MediaGallery,
-        props: await getProps(),
-        onClose: () => {
-          this.stopListening(this.model.messageCollection, 'remove', update);
-          this.resetPanel();
-        },
-      });
-
-      const update = async () => {
-        view.update(await getProps());
-      };
-
-      this.listenTo(this.model.messageCollection, 'remove', update);
-
-      this.listenBack(view);
-    },
 
     scrollToBottom() {
       // If we're above the last seen indicator, we should scroll there instead

stylesheets/_session_group_panel.scss

@@ -0,0 +1,125 @@
+.group-settings {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    width: 277px;
+    flex-shrink: 0;
+    border: 1px solid #2f2f2f;	
+    background-color: $session-shade-4;
+    align-items: center;
+
+    &-header {
+        margin-top: $session-margin-lg;
+        width: -webkit-fill-available;
+        display: flex;
+        flex-direction: row;
+        flex-shrink: 0;
+
+        .module-avatar {
+            margin: auto;
+        }
+
+        .session-icon-button {
+            margin: 0 $session-margin-md;
+        }
+    }
+
+    h2 {
+        word-break: break-word;
+    }
+
+    .description {
+        margin: $session-margin-md 0;
+        border: 1px solid $session-shade-6;	
+        background-color: $session-shade-1;
+        min-height: 4rem;
+        width: inherit;
+        color: $session-color-white;
+        text-align: center;
+    }
+
+
+    &-item {
+        display: flex;
+        align-items: center;
+        background-color: $session-shade-1;
+        min-height: 3rem;
+        font-size: 0.8rem;
+        color: $session-color-white;
+        width: -webkit-fill-available;
+        padding: 0 $session-margin-md;
+        border-bottom: 1px solid $session-shade-6;
+        border-top: 1px solid $session-shade-6;
+        transition: $session-transition-duration;
+        cursor: pointer;
+
+        &:hover {
+            @include session-dark-background-hover;
+        }
+        
+    }
+
+    // no double border (top and bottom) between two elements
+    &-item + &-item {
+        border-top: none;
+    }
+
+    // bottom button
+    .session-button.square-outline.danger {
+        margin-top: auto;
+        width: 100%;
+        border: none;
+        height: 3.5rem;
+        background-color: black;
+        flex-shrink: 0;
+    }
+
+    .module-empty-state {
+        text-align: center;
+    }
+
+    .module-attachment-section__items {
+        justify-content: space-evenly;
+    }
+
+    .module-media {
+        &-gallery {
+            &__tab-container {
+                padding-top: 1rem;
+            }
+
+            &__tab {
+                color: white;
+                font-weight: bold;
+                font-size: 0.9rem;
+                padding: 0.6rem;
+                opacity: 0.8;
+
+                &--active {
+                    border-bottom: none;
+                    opacity: 1;
+            
+                    &:after {
+                        content: ""; /* This is necessary for the pseudo element to work. */ 
+                        display: block; 
+                        margin: 0 auto; 
+                        width: 70%; 
+                        padding-top: 8px;
+                        border-bottom: 4px solid $session-color-green;
+                    }
+                }
+            }
+
+            &__content {
+                padding: $session-margin-xs;
+        
+                .module-media-grid-item__image,
+                .module-media-grid-item {
+                    height: 80px;
+                    width: 80px;
+                    margin-right: 0;
+                }
+            }
+        }
+    }
+}

stylesheets/manifest.scss

@@ -29,6 +29,7 @@
 @import 'session_theme';
 @import 'session_left_pane';
 @import 'session_theme_dark_left_pane';
+@import 'session_group_panel';
 
 // Installer
 @import 'options';

ts/components/Avatar.tsx

@@ -9,7 +9,6 @@ interface Props {
   avatarPath?: string;
   color?: string;
   conversationType: 'group' | 'direct';
-  i18n: LocalizerType;
   noteToSelf?: boolean;
   name?: string;
   phoneNumber?: string;
@@ -17,6 +16,7 @@ interface Props {
   size: number;
   borderColor?: string;
   borderWidth?: number;
+  i18n?: LocalizerType;
   onAvatarClick?: () => void;
 }
 
@@ -66,7 +66,6 @@ export class Avatar extends React.PureComponent<Props, State> {
   public renderImage() {
     const {
       avatarPath,
-      i18n,
       name,
       phoneNumber,
       profileName,
@@ -89,7 +88,7 @@ export class Avatar extends React.PureComponent<Props, State> {
       <img
         style={borderStyle}
         onError={this.handleImageErrorBound}
-        alt={i18n('contactAvatarAlt', [title])}
+        alt={window.i18n('contactAvatarAlt', [title])}
         src={avatarPath}
       />
     );

ts/components/conversation/media-gallery/AttachmentSection.tsx

@@ -9,7 +9,6 @@ import { LocalizerType } from '../../../types/Util';
 
 interface Props {
   i18n: LocalizerType;
-  header?: string;
   type: 'media' | 'documents';
   mediaItems: Array<MediaItemType>;
   onItemClick?: (event: ItemClickEvent) => void;
@@ -17,11 +16,9 @@ interface Props {
 
 export class AttachmentSection extends React.Component<Props> {
   public render() {
-    const { header } = this.props;
 
     return (
       <div className="module-attachment-section">
-        <h2 className="module-attachment-section__header">{header}</h2>
         <div className="module-attachment-section__items">
           {this.renderItems()}
         </div>

ts/components/conversation/media-gallery/MediaGallery.tsx

@@ -1,20 +1,15 @@
 import React from 'react';
 import classNames from 'classnames';
 
-import moment from 'moment';
-
 import { AttachmentSection } from './AttachmentSection';
 import { EmptyState } from './EmptyState';
-import { groupMediaItemsByDate } from './groupMediaItemsByDate';
 import { ItemClickEvent } from './types/ItemClickEvent';
 import { missingCaseError } from '../../../util/missingCaseError';
-import { LocalizerType } from '../../../types/Util';
 
 import { MediaItemType } from '../../LightboxGallery';
 
 interface Props {
   documents: Array<MediaItemType>;
-  i18n: LocalizerType;
   media: Array<MediaItemType>;
   onItemClick?: (event: ItemClickEvent) => void;
 }
@@ -23,7 +18,6 @@ interface State {
   selectedTab: 'media' | 'documents';
 }
 
-const MONTH_FORMAT = 'MMMM YYYY';
 
 interface TabSelectEvent {
   type: 'media' | 'documents';
@@ -96,7 +90,7 @@ export class MediaGallery extends React.Component<Props, State> {
   };
 
   private renderSections() {
-    const { i18n, media, documents, onItemClick } = this.props;
+    const { media, documents, onItemClick } = this.props;
     const { selectedTab } = this.state;
 
     const mediaItems = selectedTab === 'media' ? media : documents;
@@ -106,10 +100,10 @@ export class MediaGallery extends React.Component<Props, State> {
       const label = (() => {
         switch (type) {
           case 'media':
-            return i18n('mediaEmptyState');
+            return window.i18n('mediaEmptyState');
 
           case 'documents':
-            return i18n('documentsEmptyState');
+            return window.i18n('documentsEmptyState');
 
           default:
             throw missingCaseError(type);
@@ -119,28 +113,16 @@ export class MediaGallery extends React.Component<Props, State> {
       return <EmptyState data-test="EmptyState" label={label} />;
     }
 
-    const now = Date.now();
-    const sections = groupMediaItemsByDate(now, mediaItems).map(section => {
-      const first = section.mediaItems[0];
-      const { message } = first;
-      const date = moment(message.received_at);
-      const header =
-        section.type === 'yearMonth'
-          ? date.format(MONTH_FORMAT)
-          : i18n(section.type);
-
-      return (
-        <AttachmentSection
-          key={header}
-          header={header}
-          i18n={i18n}
+    return (
+      <div className="module-media-gallery__sections">
+      <AttachmentSection
+          key="mediaItems"
+          i18n={window.i18n}
           type={type}
-          mediaItems={section.mediaItems}
+          mediaItems={mediaItems}
           onItemClick={onItemClick}
-        />
-      );
-    });
-
-    return <div className="module-media-gallery__sections">{sections}</div>;
+      />
+      </div>
+    );
   }
 }

ts/components/session/LeftPaneMessageSection.tsx

@@ -111,7 +111,6 @@ export class LeftPaneMessageSection extends React.Component<Props, any> {
     }
 
     const conversations = this.getCurrentConversations();
-
     if (!conversations) {
       throw new Error(
         'render: must provided conversations if no search results are provided'
@@ -120,7 +119,7 @@ export class LeftPaneMessageSection extends React.Component<Props, any> {
 
     const length = conversations.length;
     const listKey = 0;
-
+    
     // Note: conversations is not a known prop for List, but it is required to ensure that
     //   it re-renders when our conversation data changes. Otherwise it would just render
     //   on startup and scroll.

ts/components/session/SessionChannelSettings.tsx

@@ -0,0 +1,204 @@
+import React from 'react';
+import { SessionIconButton, SessionIconSize, SessionIconType } from './icon';
+import { Avatar } from '../Avatar';
+import { SessionButton, SessionButtonColor, SessionButtonType } from './SessionButton';
+import { MediaGallery } from '../conversation/media-gallery/MediaGallery';
+import _ from 'lodash';
+
+
+interface Props {
+    channelPubKey: string;
+    channelName: string;
+    memberCount: number;
+    description: string;
+
+    onHidePanel: () => void;
+    onAddPeopleToGroup: () => void;
+    onLeaveGroup: () => void;
+}
+
+export class SessionChannelSettings extends React.Component<Props, any> {
+
+    public constructor(props: Props) {
+        super(props);
+
+        this.state = {
+            documents: Array<any>(),
+            media: Array<any>(),
+            onItemClick: undefined,
+        };
+    }
+
+    public componentWillMount() {
+        this.getMediaGalleryProps().then(({ documents, media, onItemClick }) => {
+            this.setState({
+                documents,
+                media,
+                onItemClick,
+            });
+        }).ignore();
+    }
+
+    public async getMediaGalleryProps() {
+        // We fetch more documents than media as they don’t require to be loaded
+        // 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 rawMedia = await window.Signal.Data.getMessagesWithVisualMediaAttachments(
+            conversationId,
+            {
+            limit: DEFAULT_MEDIA_FETCH_COUNT,
+            MessageCollection: window.Whisper.MessageCollection,
+            }
+        );
+        const rawDocuments = await window.Signal.Data.getMessagesWithFileAttachments(
+            conversationId,
+            {
+            limit: DEFAULT_DOCUMENTS_FETCH_COUNT,
+            MessageCollection: window.Whisper.MessageCollection,
+            }
+        );
+
+        // First we upgrade these messages to ensure that they have thumbnails
+        const max = rawMedia.length;
+        for (let i = 0; i < max; i += 1) {
+            const message = rawMedia[i];
+            const { schemaVersion } = message;
+
+            if (schemaVersion < message.VERSION_NEEDED_FOR_DISPLAY) {
+            // Yep, we really do want to wait for each of these
+            // eslint-disable-next-line no-await-in-loop
+                rawMedia[i] = await window.Signal.Migrations.upgradeMessageSchema(message);
+            // eslint-disable-next-line no-await-in-loop
+            await window.Signal.Data.saveMessage(rawMedia[i], {
+                Message: window.Whisper.Message,
+            });
+            }
+        }
+
+        // tslint:disable-next-line: underscore-consistent-invocation
+        const media = _.flatten(
+            rawMedia.map((message: { attachments: any }) => {
+            const { attachments } = message;
+
+            return (attachments || [])
+                .filter(
+                    (attachment: { thumbnail: any; pending: any; error: any }) =>
+                    attachment.thumbnail &&
+                    !attachment.pending &&
+                    !attachment.error
+                )
+                .map((attachment: { path?: any; contentType?: any; thumbnail?: any }, index: any) => {
+                const { thumbnail } = attachment;
+
+                return {
+                    objectURL: window.Signal.Migrations.getAbsoluteAttachmentPath(attachment.path),
+                    thumbnailObjectUrl: thumbnail
+                    ? window.Signal.Migrations.getAbsoluteAttachmentPath(thumbnail.path)
+                    : null,
+                    contentType: attachment.contentType,
+                    index,
+                    attachment,
+                    message,
+                };
+
+                });
+            })
+        );
+
+        // Unlike visual media, only one non-image attachment is supported
+        const documents = rawDocuments.map((message: { attachments: Array<any> }) => {
+            const attachments = message.attachments || [];
+            const attachment = attachments[0];
+
+            return {
+            contentType: attachment.contentType,
+            index: 0,
+            attachment,
+            message,
+            };
+        });
+
+        const saveAttachment = async ({ attachment, message }: any = {}) => {
+            const timestamp = message.received_at;
+            window.Signal.Types.Attachment.save({
+            attachment,
+            document,
+            getAbsolutePath: window.Signal.Migrations.getAbsoluteAttachmentPath,
+            timestamp,
+            });
+        };
+
+        const onItemClick = async ({ message, attachment, type } : any) => {
+            switch (type) {
+                case 'documents':
+                case 'media': {
+                    saveAttachment({ message, attachment }).ignore();
+                    break;
+                }
+
+            /*case 'media': {
+                const selectedIndex = media.findIndex(
+                mediaMessage => mediaMessage.attachment.path === attachment.path
+                );
+                this.lightboxGalleryView = new Whisper.ReactWrapperView({
+                className: 'lightbox-wrapper',
+                Component: Signal.Components.LightboxGallery,
+                props: {
+                    media,
+                    onSave: saveAttachment,
+                    selectedIndex,
+                },
+                onClose: () => Signal.Backbone.Views.Lightbox.hide(),
+                });
+                Signal.Backbone.Views.Lightbox.show(this.lightboxGalleryView.el);
+                break;
+            }*/
+
+            default:
+                throw new TypeError(`Unknown attachment type: '${type}'`);
+            }
+        };
+
+        return {
+            documents,
+            media,
+            onItemClick,
+        };
+        }
+
+
+    public render() {
+        const { memberCount, channelName } = this.props;
+        const { documents, media, onItemClick} = this.state;
+
+        return (
+        <div className="group-settings">
+            {this.renderHeader()}
+            <h2>{channelName}</h2>
+            <div className="text-subtle">{window.i18n('members', memberCount)}</div>
+            <input className="description" placeholder={window.i18n('description')} />
+
+            <div className="group-settings-item" >{window.i18n('notifications')}</div>
+            <div className="group-settings-item" >{window.i18n('disappearingMessages')}</div>
+            <MediaGallery documents={documents} media={media} onItemClick={onItemClick} />
+
+
+            <SessionButton text={window.i18n('leaveGroup')} buttonColor={SessionButtonColor.Danger} buttonType={SessionButtonType.SquareOutline} />
+        </div>);
+    }
+
+
+    private renderHeader() {
+        const { channelPubKey } = this.props;
+
+        return (
+            <div className="group-settings-header">
+                <SessionIconButton iconType={SessionIconType.Chevron} iconSize={SessionIconSize.Medium} iconRotation={90} />
+                <Avatar phoneNumber={channelPubKey} conversationType="group" size={80} />
+                <SessionIconButton iconType={SessionIconType.AddUser} iconSize={SessionIconSize.Medium} />
+            </div>
+        );
+    }
+}