diff --git a/.eslintrc.js b/.eslintrc.js index aafa9b63..2f336633 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -51,7 +51,6 @@ module.exports = { ] }], - 'jsx-a11y/no-static-element-interactions' : 'off', // TODO: enable and fix 'react/forbid-prop-types' : 'off' // TODO: enable and make custom propTypes }, }; diff --git a/packages/xod-client/src/core/styles/components/SnackBarMessage.scss b/packages/xod-client/src/core/styles/components/SnackBarMessage.scss index f199d55d..6b12d39c 100644 --- a/packages/xod-client/src/core/styles/components/SnackBarMessage.scss +++ b/packages/xod-client/src/core/styles/components/SnackBarMessage.scss @@ -1,11 +1,7 @@ .SnackBarMessage { position: relative; - display: block; + display: none; margin-top: 1px; - padding: 8px 16px; - color: #fff; - background: #666; - border-bottom: 1px solid #400; transition: all 0.3s ease-in; left: 0; @@ -13,15 +9,30 @@ left: $snackbar-width; } + &.display { + display: block; + } + &.error { - background: #600; + a { background-color: #600; } } &.confirmation { - background: #060; + a { background-color: #060; } } &.notification { - background: #006; + a { background-color: #006; } } -} \ No newline at end of file + + a { + display: block; + padding: 8px 16px; + color: #fff; + background-color: #666; + box-shadow: inset 0 -1px rgba(0,0,0,.25); + + cursor: default; + outline: none; + } +} diff --git a/packages/xod-client/src/messages/components/SnackBarMessage.jsx b/packages/xod-client/src/messages/components/SnackBarMessage.jsx index 3227fcef..c2fc5aea 100644 --- a/packages/xod-client/src/messages/components/SnackBarMessage.jsx +++ b/packages/xod-client/src/messages/components/SnackBarMessage.jsx @@ -11,6 +11,7 @@ class SnackBarMessage extends React.Component { this.state = { hidden: true, + display: true, }; this.hide = this.hide.bind(this); @@ -55,10 +56,18 @@ class SnackBarMessage extends React.Component { ); } + setDisplay(val) { + this.setState( + R.assoc('display', val, this.state) + ); + } + hide() { return new Promise((resolve) => { this.setHidden(true); setTimeout(resolve, ANIMATION_TIMEOUT); + }).then(() => { + this.setDisplay(false); }); } @@ -66,6 +75,7 @@ class SnackBarMessage extends React.Component { const message = this.props.message; const cls = classNames('SnackBarMessage', { hidden: this.state.hidden, + display: this.state.display, error: message.type === MESSAGE_TYPE.ERROR, confirmation: message.type === MESSAGE_TYPE.CONFIRMATION, notification: message.type === MESSAGE_TYPE.NOTIFICATION, @@ -75,10 +85,14 @@ class SnackBarMessage extends React.Component { return (
  • - {messageContent} + + {messageContent} +
  • ); }