Skip to content

Commit

Permalink
Update FontAwesome and replace words with icons. Fixes #77.
Browse files Browse the repository at this point in the history
  • Loading branch information
Sean Kelley committed Mar 26, 2018
1 parent dd63805 commit ef3f16e
Show file tree
Hide file tree
Showing 30 changed files with 2,970 additions and 2,740 deletions.
50 changes: 17 additions & 33 deletions _locales/en/messages.json
View file
Expand Up @@ -182,28 +182,24 @@
"message": "Pause",
"description": "Tooltip for pause button on a task list item."
},
"ZstatusZ_ZpercentZ_ZcurrentZ_of_ZtotalZ_at_ZspeedZ": {
"message": "$STATUS$ \u2013 $PERCENT$ ($CURRENT$ of $TOTAL$ at $SPEED$)",
"ZpercentZ_ZcurrentZ_of_ZtotalZ_at_ZspeedZ": {
"message": "$PERCENT$ ($CURRENT$ of $TOTAL$ at $SPEED$)",
"description": "Subtitle prefix for currently-downloading task showing stats.",
"placeholders": {
"status": {
"content": "$1",
"example": "DOWNLOADING"
},
"percent": {
"content": "$2",
"content": "$1",
"example": "65.5%"
},
"current": {
"content": "$3",
"content": "$2",
"example": "100KB"
},
"total": {
"content": "$4",
"content": "$3",
"example": "10MB"
},
"speed": {
"content": "$5",
"content": "$4",
"example": "50KB/s"
}
}
Expand All @@ -222,52 +218,40 @@
"message": " \u2013 no estimate",
"description": "Subtitle suffix for currently-downloading task."
},
"ZstatusZ_ZtotalZ_uploaded_ZspeedZ": {
"message": "$STATUS$ \u2013 $TOTAL$ uploaded ($SPEED$)",
"ZtotalZ_uploaded_ZspeedZ": {
"message": "$TOTAL$ uploaded ($SPEED$)",
"description": "Subtitle for currently-uploading task showing stats.",
"placeholders": {
"status": {
"content": "$1",
"example": "UPLOADING"
},
"total": {
"content": "$2",
"content": "$1",
"example": "10MB"
},
"speed": {
"content": "$3",
"content": "$2",
"example": "50KB/s"
}
}
},
"ZstatusZ_ZtotalZ_downloaded": {
"message": "$STATUS$ \u2013 $TOTAL$ downloaded",
"ZtotalZ_downloaded": {
"message": "$TOTAL$ downloaded",
"description": "Subtitle for completed, not-uploading task showing stats.",
"placeholders": {
"status": {
"content": "$1",
"example": "COMPLETED"
},
"total": {
"content": "$2",
"content": "$1",
"example": "10MB"
}
}
},
"ZstatusZ_ZcurrentZ_of_ZtotalZ_downloaded": {
"message": "$STATUS$ \u2013 $CURRENT$ of $TOTAL$ downloaded",
"ZcurrentZ_of_ZtotalZ_downloaded": {
"message": "$CURRENT$ of $TOTAL$ downloaded",
"description": "Subtitle for status-unknown task showing stats (best effort).",
"placeholders": {
"status": {
"content": "$1",
"example": "OTHER"
},
"current": {
"content": "$2",
"content": "$1",
"example": "100KB"
},
"total": {
"content": "$3",
"content": "$2",
"example": "10MB"
}
}
Expand Down
2 changes: 1 addition & 1 deletion html/popup.html
View file
Expand Up @@ -4,7 +4,7 @@
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="chrome://browser/content/extension.css">
<link rel="stylesheet" type="text/css" href="../vendor/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="../vendor/fontawesome-free-5.0.8/css/fontawesome-all.min.css">
<link rel="stylesheet" type="text/css" href="../dist/css/fields.css">
<link rel="stylesheet" type="text/css" href="../dist/css/popup.css">
</head>
Expand Down
2 changes: 1 addition & 1 deletion html/settings.html
View file
Expand Up @@ -4,7 +4,7 @@
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="chrome://browser/content/extension.css">
<link rel="stylesheet" type="text/css" href="../vendor/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="../vendor/fontawesome-free-5.0.8/css/fontawesome-all.min.css">
<link rel="stylesheet" type="text/css" href="../dist/css/fields.css">
<link rel="stylesheet" type="text/css" href="../dist/css/settings.css">
</head>
Expand Down
6 changes: 6 additions & 0 deletions scss/popup.scss
View file
Expand Up @@ -237,6 +237,12 @@ html, body, #body, .popup {
}
}

.status {
.status-icon {
margin-right: 4px;
}
}

.progress-bar {
height: 5px;
border-radius: 2px;
Expand Down
66 changes: 42 additions & 24 deletions src/popup/Task.tsx
View file
Expand Up @@ -76,42 +76,60 @@ export class Task extends React.PureComponent<Props, State> {
}

private renderStatus() {
const renderStatusLine = (iconName: string, subtitle: React.ReactChild) => {
return (
<span title={startCase(this.props.task.status)}>
<span className={classNames('status-icon', iconName)}/>
<span className='text'>{subtitle}</span>
</span>
);
};

if (matchesFilter(this.props.task, 'downloading')) {
const fraction = this.computeFractionComplete();
const eta = this.computeSecondsRemaining();
return browser.i18n.getMessage('ZstatusZ_ZpercentZ_ZcurrentZ_of_ZtotalZ_at_ZspeedZ', [
upperCase(this.props.task.status),
(Number.isFinite(fraction) ? formatPercentage(fraction) : '0%'),
`${formatMetric1024(this.props.task.additional!.transfer!.size_downloaded)}B`,
`${formatMetric1024(this.props.task.size)}B`,
`${formatMetric1024(this.props.task.additional!.transfer!.speed_download)}B/s`
]) + (Number.isFinite(eta as number)
? browser.i18n.getMessage('_ZetaZ_remaining', [ formatTime(eta as number) ])
: browser.i18n.getMessage('_no_estimate'));
return renderStatusLine(
'fa fa-arrow-down',
browser.i18n.getMessage('ZpercentZ_ZcurrentZ_of_ZtotalZ_at_ZspeedZ', [
(Number.isFinite(fraction) ? formatPercentage(fraction) : '0%'),
`${formatMetric1024(this.props.task.additional!.transfer!.size_downloaded)}B`,
`${formatMetric1024(this.props.task.size)}B`,
`${formatMetric1024(this.props.task.additional!.transfer!.speed_download)}B/s`
]) + (Number.isFinite(eta as number)
? browser.i18n.getMessage('_ZetaZ_remaining', [ formatTime(eta as number) ])
: browser.i18n.getMessage('_no_estimate'))
);
} else if (matchesFilter(this.props.task, 'uploading')) {
return browser.i18n.getMessage('ZstatusZ_ZtotalZ_uploaded_ZspeedZ', [
upperCase(this.props.task.status),
return renderStatusLine(
'fa fa-arrow-up',
browser.i18n.getMessage('ZtotalZ_uploaded_ZspeedZ', [
`${formatMetric1024(this.props.task.additional!.transfer!.size_uploaded)}B`,
`${formatMetric1024(this.props.task.additional!.transfer!.speed_upload)}B/s`,
]);
])
);
} else if (matchesFilter(this.props.task, 'completed')) {
return browser.i18n.getMessage('ZstatusZ_ZtotalZ_downloaded', [
upperCase(this.props.task.status),
`${formatMetric1024(this.props.task.size)}B`
]);
return renderStatusLine(
'fa fa-check',
browser.i18n.getMessage('ZtotalZ_downloaded', [
`${formatMetric1024(this.props.task.size)}B`
])
);
} else if (matchesFilter(this.props.task, 'errored')) {
return (
return renderStatusLine(
'fa fa-exclamation-circle',
<span className='intent-error'>
<span className='fa fa-exclamation-triangle error-icon'/>
{upperCase(this.props.task.status)} {this.props.task.status_extra ? `\u2013 ${startCase(this.props.task.status_extra.error_detail)}` : ''}
</span>
);
} else {
return browser.i18n.getMessage('ZstatusZ_ZcurrentZ_of_ZtotalZ_downloaded', [
upperCase(this.props.task.status),
`${formatMetric1024(this.props.task.additional!.transfer!.size_downloaded)}B`,
`${formatMetric1024(this.props.task.size)}B`
]);
return renderStatusLine(
'far fa-clock',
browser.i18n.getMessage('ZcurrentZ_of_ZtotalZ_downloaded', [
`${formatMetric1024(this.props.task.additional!.transfer!.size_downloaded)}B`,
`${formatMetric1024(this.props.task.size)}B`
])
);
}
}

Expand All @@ -133,7 +151,7 @@ export class Task extends React.PureComponent<Props, State> {
<div className={classNames('fa', {
'fa-pause': state === 'pausable',
'fa-play': state === 'resumable',
'fa-refresh fa-spin': state === 'in-progress',
'fa-sync fa-spin': state === 'in-progress',
'fa-exclamation': state === 'failed'
})}/>
</button>
Expand Down Expand Up @@ -176,7 +194,7 @@ export class Task extends React.PureComponent<Props, State> {
>
<div className={classNames('fa', {
'fa-times': this.state.deleteState !== 'in-progress',
'fa-refresh fa-spin': this.state.deleteState === 'in-progress'
'fa-sync fa-spin': this.state.deleteState === 'in-progress'
})}/>
</button>
);
Expand Down
10 changes: 5 additions & 5 deletions src/popup/index.tsx
View file
Expand Up @@ -105,7 +105,7 @@ class Popup extends React.PureComponent<PopupProps, State> {
} else if (this.props.tasksLastCompletedFetchTimestamp == null) {
text = browser.i18n.getMessage('Updating');
tooltip = browser.i18n.getMessage('Updating_download_tasks');
leftIcon = 'fa-refresh fa-spin';
leftIcon = 'fa-sync fa-spin';
} else if (this.props.taskFetchFailureReason != null) {
text = browser.i18n.getMessage('Error_updating_tasks');
tooltip = this.props.taskFetchFailureReason.failureMessage;
Expand All @@ -124,7 +124,7 @@ class Popup extends React.PureComponent<PopupProps, State> {
this.props.tasksLastCompletedFetchTimestamp != null &&
this.props.tasksLastInitiatedFetchTimestamp > this.props.tasksLastCompletedFetchTimestamp
) {
leftIcon = 'fa-refresh fa-spin';
leftIcon = 'fa-sync fa-spin';
tooltip += ' ' + browser.i18n.getMessage('updating_now');
}

Expand All @@ -147,7 +147,7 @@ class Popup extends React.PureComponent<PopupProps, State> {
title={browser.i18n.getMessage('Open_DownloadStation_UI')}
{...disabledPropAndClassName(this.props.openDownloadStationUi == null)}
>
<div className='fa fa-lg fa-share-square-o'/>
<div className='fa fa-lg fa-external-link-alt'/>
</button>
<button
onClick={() => { this.setState({ isShowingDisplaySettings: !this.state.isShowingDisplaySettings }); }}
Expand Down Expand Up @@ -196,7 +196,7 @@ class Popup extends React.PureComponent<PopupProps, State> {
)}
>
{browser.i18n.getMessage('Clear_ZcountZ_Completed_Tasks', [ completedTaskIds.length ])}
{this.state.isClearingCompletedTasks && <span className='fa fa-spin fa-refresh'/>}
{this.state.isClearingCompletedTasks && <span className='fa fa-sync fa-spin'/>}
</button>
</div>
);
Expand All @@ -213,7 +213,7 @@ class Popup extends React.PureComponent<PopupProps, State> {
if (this.props.taskFetchFailureReason === 'missing-config') {
return <NoTasks icon='fa-gear' text={browser.i18n.getMessage('Configure_your_hostname_username_and_password_in_settings')}/>;
} else if (this.props.tasksLastCompletedFetchTimestamp == null) {
return <NoTasks icon='fa-refresh fa-spin'/>;
return <NoTasks icon='fa-sync fa-spin'/>;
} else if (this.props.tasks.length === 0) {
return <NoTasks icon='fa-circle-o' text={browser.i18n.getMessage('No_download_tasks')}/>;
} else {
Expand Down
2 changes: 1 addition & 1 deletion src/settings/ConnectionTestResultDisplay.tsx
View file
Expand Up @@ -23,7 +23,7 @@ export class ConnectionTestResultDisplay extends React.PureComponent<Props, {}>
const text = reassureUser
? browser.i18n.getMessage('Testing_connection_this_is_unusually_slow_is_your_NAS_asleep')
: browser.i18n.getMessage('Testing_connection');
return this.renderResult(text, 'fa-refresh fa-spin');
return this.renderResult(text, 'fa-sync fa-spin');
} else if (testResult === 'good-and-modern') {
return this.renderResult(browser.i18n.getMessage('Connection_successful'), 'fa-check', 'intent-success');
} else if (testResult === 'good-and-legacy') {
Expand Down
4 changes: 0 additions & 4 deletions vendor/font-awesome-4.7.0/css/font-awesome.min.css
View file

This file was deleted.

Binary file removed vendor/font-awesome-4.7.0/fonts/FontAwesome.otf
View file
Binary file not shown.
Binary file removed vendor/font-awesome-4.7.0/fonts/fontawesome-webfont.eot
View file
Binary file not shown.

0 comments on commit ef3f16e

Please sign in to comment.