mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-24 01:06:07 +08:00
bd361c8abb
Summary: Refactored signature preferences page to allow more signatures than the previous 1-1 mapping for signatures and accounts. Created a multi select dropdown of the accounts for which a certain signature is set as default for. Added a button into the draft header From field to toggle between saved signatures. refactor(signatures): Add basic add/remove capabilities to static refactor(signatures): Hooked up signature actions and signature store for basic functionality fix(signatures): Cleaned up signature store and started on multiselectdropdown fix(signatures): Add multi signature toggle select to multiselect dropdown build(signatures): Built framework for multiselect dropdown build(signatures): Toggle button functionality for dropdown build(signatures): Build multi select from components and add debounce refactor(signatures): Move signature actions and signature store into flux fix(signatures): Styled composer signatures button/dropdown and fixed preferences checkmarks build(signatures): Finish main functionality, about to refactor composer signature button into injected component fix(signatures): Changed position styles fix(signatures): Fixed background color for dropdown button when blurred build(signatures): Began to write tests for signatures store, preferences and dropdown Test Plan: Wrote tests for preferences signatures, signature store, signature composer dropdown and refactored tests for signature composer extension. For signature composer extension I removed applyTransformsToDraft and unapplyTransformsToDraft and tested by sending emails with signatures to different providers to make sure the <signature> tag caused problems. Reviewers: bengotow, juan Reviewed By: juan Differential Revision: https://phab.nylas.com/D3073
92 lines
2.2 KiB
JavaScript
92 lines
2.2 KiB
JavaScript
import React from 'react';
|
|
import fs from 'fs'
|
|
import Immutable from 'immutable';
|
|
import classNames from 'classnames';
|
|
|
|
import {Flexbox, RetinaImg} from 'nylas-component-kit';
|
|
import {Actions, PreferencesUIStore, Utils} from 'nylas-exports';
|
|
|
|
|
|
class PreferencesTabItem extends React.Component {
|
|
|
|
static displayName = 'PreferencesTabItem';
|
|
|
|
static propTypes = {
|
|
selection: React.PropTypes.instanceOf(Immutable.Map).isRequired,
|
|
tabItem: React.PropTypes.instanceOf(PreferencesUIStore.TabItem).isRequired,
|
|
}
|
|
|
|
_onClick = () => {
|
|
Actions.switchPreferencesTab(this.props.tabItem.tabId);
|
|
}
|
|
|
|
_onClickAccount = (event, accountId) => {
|
|
Actions.switchPreferencesTab(this.props.tabItem.tabId, {accountId});
|
|
event.stopPropagation();
|
|
}
|
|
|
|
render() {
|
|
const {tabId, displayName} = this.props.tabItem;
|
|
const classes = classNames({
|
|
item: true,
|
|
active: tabId === this.props.selection.get('tabId'),
|
|
});
|
|
|
|
let path = `icon-preferences-${displayName.toLowerCase().replace(" ", "-")}.png`
|
|
if (!fs.existsSync(Utils.imageNamed(path))) {
|
|
path = "icon-preferences-general.png";
|
|
}
|
|
const icon = (
|
|
<RetinaImg
|
|
className="tab-icon"
|
|
name={path}
|
|
mode={RetinaImg.Mode.ContentPreserve}
|
|
/>
|
|
);
|
|
|
|
return (
|
|
<div className={classes} onClick={this._onClick}>
|
|
{icon}
|
|
<div className="name">{displayName}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
}
|
|
|
|
|
|
class PreferencesTabsBar extends React.Component {
|
|
|
|
static displayName = 'PreferencesTabsBar';
|
|
|
|
static propTypes = {
|
|
tabs: React.PropTypes.instanceOf(Immutable.List).isRequired,
|
|
selection: React.PropTypes.instanceOf(Immutable.Map).isRequired,
|
|
}
|
|
|
|
renderTabs() {
|
|
return this.props.tabs.map((tabItem) =>
|
|
<PreferencesTabItem
|
|
key={tabItem.tabId}
|
|
tabItem={tabItem}
|
|
selection={this.props.selection}
|
|
/>
|
|
);
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div className="container-preference-tabs">
|
|
<Flexbox direction="row" className="preferences-tabs">
|
|
<div style={{flex: 1}}></div>
|
|
{this.renderTabs()}
|
|
<div style={{flex: 1}}></div>
|
|
</Flexbox>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
}
|
|
|
|
export default PreferencesTabsBar;
|