From 7e2d7b5e607a1a2bbe9a067e4fba5bea8e33eb6c Mon Sep 17 00:00:00 2001 From: Scott Nonnenberg Date: Tue, 17 Jul 2018 17:15:34 -0700 Subject: [PATCH] Media Gallery: Support for dark theme --- stylesheets/_modules.scss | 141 ++++++++++++++++++ stylesheets/_theme_dark.scss | 32 ++++ ts/components/Lightbox.tsx | 15 +- .../media-gallery/AttachmentSection.tsx | 31 +--- .../media-gallery/DocumentListItem.tsx | 79 ++-------- .../conversation/media-gallery/EmptyState.tsx | 16 +- .../media-gallery/MediaGallery.tsx | 62 ++------ .../media-gallery/MediaGridItem.tsx | 38 ++--- ts/components/styles/Colors.ts | 5 - ts/styles/colorSVG.ts | 7 - 10 files changed, 236 insertions(+), 190 deletions(-) delete mode 100644 ts/components/styles/Colors.ts diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 15c82f281..d9ce26c42 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -1682,6 +1682,147 @@ border-radius: 4px; } +// Module: Media Gallery + +.module-media-gallery { + display: flex; + flex-direction: column; + flex-grow: 1; + width: 100%; + height: 100%; +} + +.module-media-gallery__tab-container { + display: flex; + flex-grow: 0; + flex-shrink: 0; + cursor: pointer; + width: 100%; +} + +.module-media-gallery__tab { + width: 100%; + background-color: $color-light-02; + padding: 20px; + text-align: center; +} + +.module-media-gallery__tab--active { + border-bottom: 2px solid $color-signal-blue; +} + +.module-media-gallery__content { + display: flex; + flex-grow: 1; + overflow-y: auto; + padding: 20px; +} + +.module-media-gallery__sections { + display: flex; + flex-grow: 1; + flex-direction: column; +} + +// Module: Attachment Section + +.module-attachment-section { + width: 100%; +} + +.module-attachment-section__header { + font-size: 14px; + font-weight: normal; + line-height: 28px; +} + +.module-attachment-section__items { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-start; + align-items: flex-start; +} + +// Module: Document List Item + +.module-document-list-item { + width: 100%; + height: 72px; +} + +.module-document-list-item--with-separator { + border-bottom: 1px solid $color-light-02; +} + +.module-document-list-item__content { + cursor: pointer; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: center; + height: 100%; +} + +.module-document-list-item__icon { + flex-shrink: 0; + + width: 48px; + height: 48px; + @include color-svg('../images/file.svg', $color-light-35); +} + +.module-document-list-item__metadata { + display: inline-flex; + flex-direction: column; + flex-grow: 1; + flex-shrink: 0; + margin-left: 8px; + margin-right: 8px; +} + +.module-document-list-item__file-name { + font-weight: bold; +} + +.module-document-list-item__file-size { + display: inline-block; + margin-top: 8px; + font-size: 80%; +} + +.module-document-list-item__date { + display: inline-block; + flex-shrink: 0; +} + +// Module: Media Grid Item + +.module-media-grid-item { + height: 94px; + width: 94px; + cursor: pointer; + background-color: $color-light-10; + margin-right: 4px; + margin-bottom: 4px; +} +.module-media-grid-item__image { + height: 94px; + width: 94px; + object-fit: cover; +} + +// Module: Empty State + +.module-empty-state { + display: flex; + justify-content: center; + align-items: center; + flex-grow: 1; + font-size: 28px; + color: $color-light-45; +} + // Third-party module: react-contextmenu .react-contextmenu { diff --git a/stylesheets/_theme_dark.scss b/stylesheets/_theme_dark.scss index cd2ebb274..d09f42556 100644 --- a/stylesheets/_theme_dark.scss +++ b/stylesheets/_theme_dark.scss @@ -1263,6 +1263,38 @@ body.dark-theme { background-color: $color-core-red; } + // Module: Media Gallery + + .module-media-gallery__tab { + background-color: $color-dark-85; + } + + .module-media-gallery__tab--active { + border-bottom: 2px solid $color-signal-blue; + } + + // Module: Document List Item + + .module-document-list-item--with-separator { + border-bottom: 1px solid $color-dark-70; + } + + .module-document-list-item__icon { + @include color-svg('../images/file.svg', $color-dark-60); + } + + // Module: Media Grid Item + + .module-media-grid-item { + background-color: $color-dark-85; + } + + // Module: Empty State + + .module-empty-state { + color: $color-dark-55; + } + // Third-party module: react-contextmenu .react-contextmenu { diff --git a/ts/components/Lightbox.tsx b/ts/components/Lightbox.tsx index 33f0bd55f..31b417993 100644 --- a/ts/components/Lightbox.tsx +++ b/ts/components/Lightbox.tsx @@ -5,13 +5,24 @@ import React from 'react'; import classNames from 'classnames'; import is from '@sindresorhus/is'; -import * as Colors from './styles/Colors'; import * as GoogleChrome from '../util/GoogleChrome'; import * as MIME from '../types/MIME'; -import { colorSVG } from '../styles/colorSVG'; import { Localizer } from '../types/Util'; +const Colors = { + TEXT_SECONDARY: '#bbb', + ICON_SECONDARY: '#ccc', +}; + +const colorSVG = (url: string, color: string) => { + return { + WebkitMask: `url(${url}) no-repeat center`, + WebkitMaskSize: '100%', + backgroundColor: color, + }; +}; + interface Props { close: () => void; contentType: MIME.MIMEType | undefined; diff --git a/ts/components/conversation/media-gallery/AttachmentSection.tsx b/ts/components/conversation/media-gallery/AttachmentSection.tsx index 07a07ff52..e3c279e67 100644 --- a/ts/components/conversation/media-gallery/AttachmentSection.tsx +++ b/ts/components/conversation/media-gallery/AttachmentSection.tsx @@ -6,27 +6,10 @@ import { ItemClickEvent } from './types/ItemClickEvent'; import { MediaGridItem } from './MediaGridItem'; import { Message } from './types/Message'; import { missingCaseError } from '../../../util/missingCaseError'; - -const styles = { - container: { - width: '100%', - }, - header: { - fontSize: 14, - fontWeight: 'normal', - lineHeight: '28px', - } as React.CSSProperties, - itemContainer: { - display: 'flex', - flexDirection: 'row', - flexWrap: 'wrap', - justifyContent: 'flex-start', - alignItems: 'flex-start', - } as React.CSSProperties, -}; +import { Localizer } from '../../../types/Util'; interface Props { - i18n: (value: string) => string; + i18n: Localizer; header?: string; type: AttachmentType; messages: Array; @@ -38,9 +21,11 @@ export class AttachmentSection extends React.Component { const { header } = this.props; return ( -
-

{header}

-
{this.renderItems()}
+
+

{header}

+
+ {this.renderItems()} +
); } @@ -61,6 +46,7 @@ export class AttachmentSection extends React.Component { key={message.id} message={message} onClick={onClick} + i18n={i18n} /> ); case 'documents': @@ -69,7 +55,6 @@ export class AttachmentSection extends React.Component { key={message.id} fileName={firstAttachment.fileName} fileSize={firstAttachment.size} - i18n={i18n} shouldShowSeparator={shouldShowSeparator} onClick={onClick} timestamp={message.received_at} diff --git a/ts/components/conversation/media-gallery/DocumentListItem.tsx b/ts/components/conversation/media-gallery/DocumentListItem.tsx index 660e54cd2..1ac7cf6a1 100644 --- a/ts/components/conversation/media-gallery/DocumentListItem.tsx +++ b/ts/components/conversation/media-gallery/DocumentListItem.tsx @@ -1,14 +1,12 @@ import React from 'react'; +import classNames from 'classnames'; import moment from 'moment'; // tslint:disable-next-line:match-default-export-name import formatFileSize from 'filesize'; -import { Localizer } from '../../../types/Util'; - interface Props { // Required - i18n: Localizer; timestamp: number; // Optional @@ -18,49 +16,6 @@ interface Props { shouldShowSeparator?: boolean; } -const styles = { - container: { - width: '100%', - height: 72, - }, - containerSeparator: { - borderBottomWidth: 1, - borderBottomColor: '#ccc', - borderBottomStyle: 'solid', - }, - itemContainer: { - cursor: 'pointer', - display: 'flex', - flexDirection: 'row', - flexWrap: 'nowrap', - alignItems: 'center', - height: '100%', - } as React.CSSProperties, - itemMetadata: { - display: 'inline-flex', - flexDirection: 'column', - flexGrow: 1, - flexShrink: 0, - marginLeft: 8, - marginRight: 8, - } as React.CSSProperties, - itemDate: { - display: 'inline-block', - flexShrink: 0, - }, - itemIcon: { - flexShrink: 0, - }, - itemFileName: { - fontWeight: 'bold', - } as React.CSSProperties, - itemFileSize: { - display: 'inline-block', - marginTop: 8, - fontSize: '80%', - }, -}; - export class DocumentListItem extends React.Component { public static defaultProps: Partial = { shouldShowSeparator: true, @@ -71,10 +26,12 @@ export class DocumentListItem extends React.Component { return (
{this.renderContent()}
@@ -82,28 +39,24 @@ export class DocumentListItem extends React.Component { } private renderContent() { - const { fileName, fileSize, timestamp, i18n } = this.props; + const { fileName, fileSize, timestamp } = this.props; return (
- {i18n('fileIconAlt')} -
- {fileName} - +
+
+ + {fileName} + + {typeof fileSize === 'number' ? formatFileSize(fileSize) : ''}
-
+
{moment(timestamp).format('ddd, MMM D, Y')}
diff --git a/ts/components/conversation/media-gallery/EmptyState.tsx b/ts/components/conversation/media-gallery/EmptyState.tsx index 90adeb529..17b9a7afa 100644 --- a/ts/components/conversation/media-gallery/EmptyState.tsx +++ b/ts/components/conversation/media-gallery/EmptyState.tsx @@ -3,28 +3,14 @@ */ import React from 'react'; -import * as Colors from '../../styles/Colors'; - interface Props { label: string; } -const styles = { - container: { - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - flexGrow: 1, - - fontSize: 28, - color: Colors.TEXT_SECONDARY, - } as React.CSSProperties, -}; - export class EmptyState extends React.Component { public render() { const { label } = this.props; - return
{label}
; + return
{label}
; } } diff --git a/ts/components/conversation/media-gallery/MediaGallery.tsx b/ts/components/conversation/media-gallery/MediaGallery.tsx index 12bfe1546..608942ebc 100644 --- a/ts/components/conversation/media-gallery/MediaGallery.tsx +++ b/ts/components/conversation/media-gallery/MediaGallery.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import classNames from 'classnames'; import moment from 'moment'; @@ -9,10 +10,11 @@ import { groupMessagesByDate } from './groupMessagesByDate'; import { ItemClickEvent } from './types/ItemClickEvent'; import { Message } from './types/Message'; import { missingCaseError } from '../../../util/missingCaseError'; +import { Localizer } from '../../../types/Util'; interface Props { documents: Array; - i18n: (key: string, values?: Array) => string; + i18n: Localizer; media: Array; onItemClick?: (event: ItemClickEvent) => void; } @@ -22,49 +24,6 @@ interface State { } const MONTH_FORMAT = 'MMMM YYYY'; -const COLOR_GRAY = '#f3f3f3'; - -const tabStyle = { - width: '100%', - backgroundColor: COLOR_GRAY, - padding: 20, - textAlign: 'center', -}; - -const styles = { - container: { - display: 'flex', - flexDirection: 'column', - flexGrow: 1, - width: '100%', - height: '100%', - } as React.CSSProperties, - tabContainer: { - display: 'flex', - flexGrow: 0, - flexShrink: 0, - cursor: 'pointer', - width: '100%', - }, - tab: { - default: tabStyle, - active: { - ...tabStyle, - borderBottom: '2px solid #08f', - }, - }, - contentContainer: { - display: 'flex', - flexGrow: 1, - overflowY: 'auto', - padding: 20, - } as React.CSSProperties, - sectionContainer: { - display: 'flex', - flexGrow: 1, - flexDirection: 'column', - } as React.CSSProperties, -}; interface TabSelectEvent { type: AttachmentType; @@ -89,7 +48,10 @@ const Tab = ({ return (
@@ -107,8 +69,8 @@ export class MediaGallery extends React.Component { const { selectedTab } = this.state; return ( -
-
+
+
{ onSelect={this.handleTabSelect} />
-
{this.renderSections()}
+
+ {this.renderSections()} +
); } @@ -176,6 +140,6 @@ export class MediaGallery extends React.Component { ); }); - return
{sections}
; + return
{sections}
; } } diff --git a/ts/components/conversation/media-gallery/MediaGridItem.tsx b/ts/components/conversation/media-gallery/MediaGridItem.tsx index 5358db0a8..de113e292 100644 --- a/ts/components/conversation/media-gallery/MediaGridItem.tsx +++ b/ts/components/conversation/media-gallery/MediaGridItem.tsx @@ -1,52 +1,38 @@ import React from 'react'; import { Message } from './types/Message'; +import { Localizer } from '../../../types/Util'; interface Props { message: Message; onClick?: () => void; + i18n: Localizer; } -const size = { - width: 94, - height: 94, -}; -const styles = { - container: { - ...size, - cursor: 'pointer', - backgroundColor: '#f3f3f3', - marginRight: 4, - marginBottom: 4, - }, - image: { - ...size, - backgroundSize: 'cover', - }, -}; - export class MediaGridItem extends React.Component { public renderContent() { - const { message } = this.props; + const { message, i18n } = this.props; if (!message.objectURL) { return null; } return ( -
); } public render() { return ( -
+
{this.renderContent()}
); diff --git a/ts/components/styles/Colors.ts b/ts/components/styles/Colors.ts deleted file mode 100644 index 1730f9e81..000000000 --- a/ts/components/styles/Colors.ts +++ /dev/null @@ -1,5 +0,0 @@ -/** - * @prettier - */ -export const TEXT_SECONDARY = '#bbb'; -export const ICON_SECONDARY = '#ccc'; diff --git a/ts/styles/colorSVG.ts b/ts/styles/colorSVG.ts index a749e5fdc..e69de29bb 100644 --- a/ts/styles/colorSVG.ts +++ b/ts/styles/colorSVG.ts @@ -1,7 +0,0 @@ -export const colorSVG = (url: string, color: string) => { - return { - WebkitMask: `url(${url}) no-repeat center`, - WebkitMaskSize: '100%', - backgroundColor: color, - }; -};