From 213db6c1ed71e3c09c22ecd04573dc5ee904ded9 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Mon, 13 Jan 2020 15:50:18 +1100 Subject: [PATCH] fix lint --- js/views/conversation_view.js | 13 +- main.js | 2 +- stylesheets/_session_group_panel.scss | 231 ++++++----- .../media-gallery/AttachmentSection.tsx | 1 - .../media-gallery/MediaGallery.tsx | 5 +- ts/components/session/ActionsPanel.tsx | 4 +- .../session/LeftPaneContactSection.tsx | 2 +- .../session/LeftPaneMessageSection.tsx | 2 +- .../session/SessionChannelSettings.tsx | 383 ++++++++++-------- 9 files changed, 340 insertions(+), 303 deletions(-) diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js index f3fba7a0e..cac7fbff1 100644 --- a/js/views/conversation_view.js +++ b/js/views/conversation_view.js @@ -17,11 +17,7 @@ 'use strict'; window.Whisper = window.Whisper || {}; - const { Message } = window.Signal.Types; - const { - upgradeMessageSchema, - getAbsoluteAttachmentPath, - } = window.Signal.Migrations; + const { getAbsoluteAttachmentPath } = window.Signal.Migrations; const MAX_MESSAGE_BODY_LENGTH = 64 * 1024; @@ -337,7 +333,7 @@ }); this.showGroupSettings = () => { - if(!this.groupSettings) { + if (!this.groupSettings) { this.groupSettings = new Whisper.ReactWrapperView({ className: 'group-settings', Component: window.Signal.Components.SessionChannelSettings, @@ -346,11 +342,11 @@ this.$('.conversation-content-right').append(this.groupSettings.el); } this.$('.conversation-content-right').show(); - } + }; this.hideGroupSettings = () => { this.$('.conversation-content-right').hide(); - } + }; this.memberView.render(); @@ -963,7 +959,6 @@ el[0].scrollIntoView(); }, - scrollToBottom() { // If we're above the last seen indicator, we should scroll there instead // Note: if we don't end up at the bottom of the conversation, button won't go away! diff --git a/main.js b/main.js index daae469a7..490b3eccb 100644 --- a/main.js +++ b/main.js @@ -233,7 +233,7 @@ function createWindow() { preload: path.join(__dirname, 'preload.js'), nativeWindowOpen: true, }, - icon: path.join(__dirname, 'images', 'session','icon_64.png'), + icon: path.join(__dirname, 'images', 'session', 'icon_64.png'), }, _.pick(windowConfig, [ 'maximized', diff --git a/stylesheets/_session_group_panel.scss b/stylesheets/_session_group_panel.scss index 96de14c8c..6035d2d73 100644 --- a/stylesheets/_session_group_panel.scss +++ b/stylesheets/_session_group_panel.scss @@ -1,135 +1,132 @@ .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: column; - height: 100vh; - width: 277px; + flex-direction: row; 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; - } + .module-avatar { + margin: auto; } - h2 { - word-break: break-word; + .session-icon-button { + margin: 0 $session-margin-md; } - - .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; + } + + 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; } - - - &-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; + } } - - } - - // 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; - } + &__content { + padding: $session-margin-xs; - .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; - } - } + .module-media-grid-item__image, + .module-media-grid-item { + height: 80px; + width: 80px; + margin-right: 0; } + } } + } } - .conversation-content { - display: flex; - height: inherit; + display: flex; + height: inherit; - &-left { - flex-grow: 1; - } + &-left { + flex-grow: 1; + } } diff --git a/ts/components/conversation/media-gallery/AttachmentSection.tsx b/ts/components/conversation/media-gallery/AttachmentSection.tsx index bfab7fbf6..1bfdf7eb3 100644 --- a/ts/components/conversation/media-gallery/AttachmentSection.tsx +++ b/ts/components/conversation/media-gallery/AttachmentSection.tsx @@ -16,7 +16,6 @@ interface Props { export class AttachmentSection extends React.Component { public render() { - return (
diff --git a/ts/components/conversation/media-gallery/MediaGallery.tsx b/ts/components/conversation/media-gallery/MediaGallery.tsx index fc0a45ace..b2efb473a 100644 --- a/ts/components/conversation/media-gallery/MediaGallery.tsx +++ b/ts/components/conversation/media-gallery/MediaGallery.tsx @@ -18,7 +18,6 @@ interface State { selectedTab: 'media' | 'documents'; } - interface TabSelectEvent { type: 'media' | 'documents'; } @@ -115,13 +114,13 @@ export class MediaGallery extends React.Component { return (
- + />
); } diff --git a/ts/components/session/ActionsPanel.tsx b/ts/components/session/ActionsPanel.tsx index d13fd42c1..983958eb7 100644 --- a/ts/components/session/ActionsPanel.tsx +++ b/ts/components/session/ActionsPanel.tsx @@ -40,7 +40,7 @@ const Section = ({ }) => { const handleClick = onSelect ? () => { - if(type !== SectionType.Profile) { + if (type !== SectionType.Profile) { onSelect(type); } } @@ -58,7 +58,7 @@ const Section = ({ onAvatarClick={handleClick} /> ); -} + } let iconType: SessionIconType; switch (type) { diff --git a/ts/components/session/LeftPaneContactSection.tsx b/ts/components/session/LeftPaneContactSection.tsx index 99ef79514..d6d69f9b6 100644 --- a/ts/components/session/LeftPaneContactSection.tsx +++ b/ts/components/session/LeftPaneContactSection.tsx @@ -82,7 +82,7 @@ export class LeftPaneContactSection extends React.Component { public renderHeader(): JSX.Element | undefined { const { receivedFriendRequestCount } = this.props; // The feature "organize your friends as custom list" is not included in the first release - const labels = [window.i18n('contactsHeader')/*, window.i18n('lists')*/]; + const labels = [window.i18n('contactsHeader') /*, window.i18n('lists')*/]; return LeftPane.RENDER_HEADER( labels, diff --git a/ts/components/session/LeftPaneMessageSection.tsx b/ts/components/session/LeftPaneMessageSection.tsx index d055bb605..8aaf180d9 100644 --- a/ts/components/session/LeftPaneMessageSection.tsx +++ b/ts/components/session/LeftPaneMessageSection.tsx @@ -119,7 +119,7 @@ export class LeftPaneMessageSection extends React.Component { 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. diff --git a/ts/components/session/SessionChannelSettings.tsx b/ts/components/session/SessionChannelSettings.tsx index 117452bfa..98b5dc96c 100644 --- a/ts/components/session/SessionChannelSettings.tsx +++ b/ts/components/session/SessionChannelSettings.tsx @@ -1,145 +1,159 @@ import React from 'react'; import { SessionIconButton, SessionIconSize, SessionIconType } from './icon'; import { Avatar } from '../Avatar'; -import { SessionButton, SessionButtonColor, SessionButtonType } from './SessionButton'; +import { + SessionButton, + SessionButtonColor, + SessionButtonType, +} from './SessionButton'; import { MediaGallery } from '../conversation/media-gallery/MediaGallery'; import _ from 'lodash'; - interface Props { - id: string; - name: string; - memberCount: number; - description: string; - avatarPath: string; - - onGoBack: () => void; - onInviteFriends: () => void; - onLeaveGroup: () => void; + id: string; + name: string; + memberCount: number; + description: string; + avatarPath: string; + + onGoBack: () => void; + onInviteFriends: () => void; + onLeaveGroup: () => void; } export class SessionChannelSettings extends React.Component { - - public constructor(props: Props) { - super(props); - - this.state = { - documents: Array(), - media: Array(), - 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.id; - 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, - } + public constructor(props: Props) { + super(props); + + this.state = { + documents: Array(), + media: Array(), + 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.id; + 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, + }); + } + } - // 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, + }; } - } + ); + }) + ); - // 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 }) => { - const attachments = message.attachments || []; - const attachment = attachments[0]; - - return { - contentType: attachment.contentType, - index: 0, - attachment, - message, - }; - }); + // Unlike visual media, only one non-image attachment is supported + const documents = rawDocuments.map( + (message: { attachments: Array }) => { + const attachments = message.attachments || []; + const attachment = attachments[0]; - const saveAttachment = async ({ attachment, message }: any = {}) => { - const timestamp = message.received_at; - window.Signal.Types.Attachment.save({ - attachment, - document, - getAbsolutePath: window.Signal.Migrations.getAbsoluteAttachmentPath, - timestamp, - }); + 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; + } - const onItemClick = async ({ message, attachment, type } : any) => { - switch (type) { - case 'documents': - case 'media': { - saveAttachment({ message, attachment }).ignore(); - break; - } - - /*case 'media': { + /*case 'media': { const selectedIndex = media.findIndex( mediaMessage => mediaMessage.attachment.path === attachment.path ); @@ -157,47 +171,80 @@ export class SessionChannelSettings extends React.Component { break; }*/ - default: - throw new TypeError(`Unknown attachment type: '${type}'`); - } - }; - - return { - documents, - media, - onItemClick, - }; - } - - - public render() { - const { memberCount, name, onLeaveGroup } = this.props; - const { documents, media, onItemClick } = this.state; - - return ( -
- {this.renderHeader()} -

{name}

- {memberCount &&
{window.i18n('members', memberCount)}
} - - -
{window.i18n('notifications')}
-
{window.i18n('disappearingMessages')}
- - -
); - } - - - private renderHeader() { - const { id, onGoBack, onInviteFriends, avatarPath } = this.props; - - return ( -
- - - -
- ); - } + default: + throw new TypeError(`Unknown attachment type: '${type}'`); + } + }; + + return { + documents, + media, + onItemClick, + }; + } + + public render() { + const { memberCount, name, onLeaveGroup } = this.props; + const { documents, media, onItemClick } = this.state; + + return ( +
+ {this.renderHeader()} +

{name}

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