diff --git a/build/config/eslint.json b/build/config/eslint.json index 672f41f80..6da4a4a36 100644 --- a/build/config/eslint.json +++ b/build/config/eslint.json @@ -11,7 +11,7 @@ }, "rules": { "react/prop-types": [2, {"ignore": ["children"]}], - "react/no-multi-comp": [1], + "react/no-multi-comp": [0], "eqeqeq": [2, "smart"], "id-length": [0], "object-curly-spacing": [0], diff --git a/internal_packages/composer/stylesheets/composer.less b/internal_packages/composer/stylesheets/composer.less index 5fcaa0a69..acb41014c 100644 --- a/internal_packages/composer/stylesheets/composer.less +++ b/internal_packages/composer/stylesheets/composer.less @@ -6,7 +6,8 @@ @compose-width: 800px; @compose-min-height: 150px; -@blurred-bg-color: mix(@background-primary, #ffbb00, 96%); +@blurred-primary-color: mix(@background-primary, #ffbb00, 96%); +@blurred-off-primary-color: mix(@background-off-primary, #ffbb00, 96%); body.platform-win32 { .composer-inner-wrap { @@ -15,11 +16,6 @@ body.platform-win32 { } .composer-action-bar-wrap { border-radius: 0; - .btn.btn-toolbar { - &.btn-emphasis { - .btn.btn-emphasis; - } - } } input, input:focus { box-shadow: none; @@ -65,14 +61,25 @@ body.platform-win32 { border-radius: @border-radius-base; // Buttons in the composer footer - .btn.btn-toolbar { + .btn.btn-toolbar:not(.btn-emphasis) { background: transparent; box-shadow: 0 0 0; margin: 0; padding: 0 9px; - &.btn-emphasis { - .btn.btn-emphasis; + img.content-mask { + background-color: fadeout(mix(@btn-default-text-color, @component-active-color, 88%), 30%); + } + &:hover { + img.content-mask { + background-color: fadeout(mix(@btn-default-text-color, @component-active-color, 88%), 5%); + } + } + &.btn-enabled { + color: @component-active-color; + img.content-mask { + background-color: @component-active-color; + } } } @@ -80,16 +87,6 @@ body.platform-win32 { margin-right: 10px; } - .btn img.content-mask { - background-color: #6b777d; - } - - .btn.btn-enabled { - img.content-mask { - background-color: @text-color-link; - } - } - .composer-action-bar-content { display:flex; margin: 0 auto; @@ -313,9 +310,16 @@ body.platform-win32 { #message-list { .message-item-wrap { .message-item-white-wrap.composer-outer-wrap { - background: @blurred-bg-color; + background: @blurred-primary-color; + + .btn.btn-toolbar.btn-trash { + padding-right: 0; + } .show-more-fade { - background: linear-gradient(to right, fade(@blurred-bg-color, 0%) 0%, fade(@blurred-bg-color, 100%) 40%); + background: linear-gradient(to right, fade(@blurred-primary-color, 0%) 0%, fade(@blurred-primary-color, 100%) 40%); + } + .composer-action-bar-wrap { + background: @blurred-off-primary-color; } } .message-item-white-wrap.composer-outer-wrap.focused { @@ -324,6 +328,9 @@ body.platform-win32 { .show-more-fade { background: linear-gradient(to right, fade(@background-primary, 0%) 0%, fade(@background-primary, 100%) 40%); } + .composer-action-bar-wrap { + background: @background-off-primary; + } } } } diff --git a/internal_packages/preferences/stylesheets/preferences.less b/internal_packages/preferences/stylesheets/preferences.less index 031363074..4b2bf3cc2 100644 --- a/internal_packages/preferences/stylesheets/preferences.less +++ b/internal_packages/preferences/stylesheets/preferences.less @@ -29,7 +29,7 @@ } .preferences-sidebar { - background: @background-secondary; + background-color: @source-list-bg; border-right: 1px solid @border-color-divider; flex: 1; max-width:350px; diff --git a/internal_packages/send-later/lib/send-later-popover.jsx b/internal_packages/send-later/lib/send-later-popover.jsx index 222ad5784..f36c01b26 100644 --- a/internal_packages/send-later/lib/send-later-popover.jsx +++ b/internal_packages/send-later/lib/send-later-popover.jsx @@ -21,9 +21,6 @@ const SendLaterOptions = { class SendLaterPopover extends Component { static displayName = 'SendLaterPopover'; - static containerStyles = { - order: -99, - }; static propTypes = { draftClientId: PropTypes.string, @@ -50,7 +47,6 @@ class SendLaterPopover extends Component { componentWillUnmount() { this._subscription.dispose(); - this.unsubscribe(); } onSelectMenuOption = (optionKey)=> { @@ -85,7 +81,7 @@ class SendLaterPopover extends Component { updateInputDateValue(event.target.value)}/> {dateInterpretation} @@ -102,6 +98,7 @@ class SendLaterPopover extends Component { renderButton() { const {scheduledDate} = this.state; + let className = 'btn btn-toolbar btn-send-later'; if (scheduledDate === 'saving') { return ( @@ -114,10 +111,9 @@ class SendLaterPopover extends Component { ); } - let className = 'btn btn-toolbar btn-send-later'; let dateInterpretation = false; if (scheduledDate) { - className += ' scheduled'; + className += ' btn-enabled'; const momentDate = DateUtils.fromString(scheduledDate); if (momentDate) { dateInterpretation = Sending in {momentDate.fromNow(true)}; @@ -168,4 +164,8 @@ class SendLaterPopover extends Component { } +SendLaterPopover.containerStyles = { + order: -99, +}; + export default SendLaterPopover diff --git a/internal_packages/send-later/lib/send-later-store.js b/internal_packages/send-later/lib/send-later-store.js index eee5d5574..c6386ade4 100644 --- a/internal_packages/send-later/lib/send-later-store.js +++ b/internal_packages/send-later/lib/send-later-store.js @@ -20,6 +20,9 @@ class SendLaterStore extends NylasStore { } getScheduledDateForMessage = (message)=> { + if (!message) { + return null; + } const metadata = message.metadataForPluginId(this.pluginId) || {}; return metadata.sendLaterDate || null; }; @@ -36,7 +39,7 @@ class SendLaterStore extends NylasStore { }) .catch((error)=> { NylasEnv.reportError(error); - NylasEnv.showErrorDialog(error.message); + NylasEnv.showErrorDialog(`Sorry, we were unable to schedule this message. ${error.message}`); }) ); }; diff --git a/internal_packages/send-later/stylesheets/send-later.less b/internal_packages/send-later/stylesheets/send-later.less index a6991eca5..18b9ced00 100644 --- a/internal_packages/send-later/stylesheets/send-later.less +++ b/internal_packages/send-later/stylesheets/send-later.less @@ -35,6 +35,9 @@ } .custom-time-section { padding: @padding-base-vertical @padding-base-horizontal; + em { + color: @text-color-subtle; + } } .cancel-section { padding: @padding-base-vertical @padding-base-horizontal; @@ -46,12 +49,8 @@ } .btn-send-later { - &.scheduled { - img { background-color: @component-active-color; margin-right: 5px; } - color: @component-active-color; - .at { - margin-left: 3px; - } + .at { + margin-left: 3px; } } diff --git a/src/components/list-tabular.cjsx b/src/components/list-tabular.cjsx index 6ba52c993..1eeb1b086 100644 --- a/src/components/list-tabular.cjsx +++ b/src/components/list-tabular.cjsx @@ -80,6 +80,13 @@ class ListTabular extends React.Component idx: previousIdx end: Date.now() + 125 + # If we think /all/ the items are animating out, or a lot of them, + # the user probably switched to an entirely different perspective. + # Don't bother trying to animate. + animatingCount = Object.keys(animatingOut).length + if animatingCount > 8 or animatingCount is Object.keys(@state.items).length + animatingOut = {} + renderedRangeStart: start renderedRangeEnd: end count: dataSource.count() diff --git a/static/components/menu.less b/static/components/menu.less index bc5551a02..3e08e6948 100644 --- a/static/components/menu.less +++ b/static/components/menu.less @@ -88,7 +88,6 @@ .item:not(.active):not(.selected):hover { text-decoration: none; background-color: fade(@black, 3%); - color:inherit; } } diff --git a/static/components/popover.less b/static/components/popover.less index 2ed592dd2..376872475 100644 --- a/static/components/popover.less +++ b/static/components/popover.less @@ -34,8 +34,9 @@ input[type=text] { border: 1px solid darken(@background-secondary, 10%); border-radius: 3px; - background-color: white; + background-color: @background-primary; box-shadow: inset 0 1px 0 rgba(0,0,0,0.05), 0 1px 0 rgba(0,0,0,0.05); + color: @text-color; &.search { padding-left: 0;