From 80bb03b4a53b4d55f36865560a80191bc1b2a515 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Mon, 20 Feb 2017 11:20:21 +0900 Subject: [PATCH] Refactor download.js with Aphrodite including: - Created and in list.js - Copied itemList.less to commonStyles.js except '&.selected' - Added aboutPageSectionMargin to global.js Closes #7255 Addresses #7318 Auditors: Test Plan: 1. Open about:download 2. Download a file 3. Make sure the styles are not broken --- app/renderer/components/list.js | 36 +++++++++++++++ .../components/styles/commonStyles.js | 31 +++++++++++++ app/renderer/components/styles/global.js | 1 + js/about/downloads.js | 45 ++++++++++++++----- less/about/downloads.less | 17 ------- less/about/itemList.less | 2 + 6 files changed, 103 insertions(+), 29 deletions(-) create mode 100644 app/renderer/components/list.js delete mode 100644 less/about/downloads.less diff --git a/app/renderer/components/list.js b/app/renderer/components/list.js new file mode 100644 index 0000000000..35279eb420 --- /dev/null +++ b/app/renderer/components/list.js @@ -0,0 +1,36 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ + +const React = require('react') +const ImmutableComponent = require('../../../js/components/immutableComponent') +const {StyleSheet, css} = require('aphrodite/no-important') +const globalStyles = require('./styles/global') + +class List extends ImmutableComponent { + render () { + const className = css( + this.props['data-isDownload'] && styles.isDownload + ) + + return
+ } +} + +class DownloadList extends ImmutableComponent { + render () { + return + } +} + +const styles = StyleSheet.create({ + isDownload: { + marginTop: globalStyles.spacing.aboutPageSectionMargin, + overflow: 'hidden' + } +}) + +module.exports = { + List, + DownloadList +} diff --git a/app/renderer/components/styles/commonStyles.js b/app/renderer/components/styles/commonStyles.js index 433786a5cd..1290daf887 100644 --- a/app/renderer/components/styles/commonStyles.js +++ b/app/renderer/components/styles/commonStyles.js @@ -52,6 +52,37 @@ const styles = StyleSheet.create({ backgroundSize: '16px', backgroundPosition: 'center center', backgroundRepeat: 'no-repeat' + }, + + // itemList.less + listItem: { + cursor: 'default', + overflow: 'hidden', + whiteSpace: 'nowrap', + padding: '8px 12px', + WebkitUserSelect: 'none', + + ':hover': { + backgroundColor: globalStyles.color.lightGray + } + }, + aboutListItem: { + display: 'flex' + }, + aboutItemSeparator: { + color: '#aaa', + padding: '0 4px' + }, + aboutItemTitle: { + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap' + }, + aboutItemLocation: { + color: '#aaa', + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap' } }) diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js index 75906931fd..9056d6b2e3 100644 --- a/app/renderer/components/styles/global.js +++ b/app/renderer/components/styles/global.js @@ -105,6 +105,7 @@ const globalStyles = { navbarLeftMarginDarwin: '76px', sideBarWidth: '190px', aboutPageSectionPadding: '24px', + aboutPageSectionMargin: '10px', defaultTabPadding: '0 4px', defaultIconPadding: '2px', iconSize: '16px', diff --git a/js/about/downloads.js b/js/about/downloads.js index ce8fc00168..1434dd4302 100644 --- a/js/about/downloads.js +++ b/js/about/downloads.js @@ -12,9 +12,13 @@ const downloadUtil = require('../state/downloadUtil') const ipc = window.chrome.ipcRenderer +const {StyleSheet, css} = require('aphrodite/no-important') +const globalStyles = require('../../app/renderer/components/styles/global') +const commonStyles = require('../../app/renderer/components/styles/commonStyles') +const {DownloadList} = require('../../app/renderer/components/list') + // Stylesheets -require('../../less/about/itemList.less') -require('../../less/about/downloads.less') +require('../../less/about/common.less') require('../../node_modules/font-awesome/css/font-awesome.css') class DownloadItem extends ImmutableComponent { @@ -26,15 +30,15 @@ class DownloadItem extends ImmutableComponent { const contextMenuDownload = this.props.download.toJS() contextMenuDownload.downloadId = this.props.downloadId return
{ -
-
{this.props.download.get('filename')}
-
-
{this.props.download.get('url')}
+
+
{this.props.download.get('filename')}
+
+
{this.props.download.get('url')}
}
@@ -43,14 +47,14 @@ class DownloadItem extends ImmutableComponent { class DownloadsList extends ImmutableComponent { render () { - return + return { this.props.downloads.size > 0 ? this.props.downloads.map((download, downloadId) => ) - :
+ :
} - + } } @@ -68,13 +72,30 @@ class AboutDownloads extends React.Component { }) } render () { - return
+ return

-
+
} } +const styles = StyleSheet.create({ + downloadsPage: { + margin: '20px' + }, + downloadPageContent: { + borderTop: `1px solid ${globalStyles.color.chromeBorderColor}`, + display: 'flex' + }, + downloadList: { + marginTop: globalStyles.spacing.aboutPageSectionMargin, + overflow: 'hidden' + }, + downloadListItem: { + flexDirection: 'column' + } +}) + module.exports = diff --git a/less/about/downloads.less b/less/about/downloads.less deleted file mode 100644 index a3b34b180d..0000000000 --- a/less/about/downloads.less +++ /dev/null @@ -1,17 +0,0 @@ -@import "./itemList.less"; - -.downloadsPage { - margin: 20px; - .downloadPageContent { - border-top: 1px solid @chromeBorderColor; - display: flex; - .downloadList { - padding-top: 10px; - overflow: hidden; - } - } -} - -list .listItem .aboutListItem { - flex-direction: column; -} diff --git a/less/about/itemList.less b/less/about/itemList.less index 99308fbec2..e6707f947a 100644 --- a/less/about/itemList.less +++ b/less/about/itemList.less @@ -1,5 +1,7 @@ @import "./common.less"; +/* Copied to commonStyles.js except &.selected + TODO: Move &.selected to commonStyles.js */ list .listItem { cursor: default; overflow: hidden;