From 33c5d10c16624eade868e2150ee43b96384ed82c Mon Sep 17 00:00:00 2001 From: Cezar Augusto Date: Mon, 18 Sep 2017 20:49:53 -0300 Subject: [PATCH] add smooth animation transitions to tab content Auditors: @luixxiul close #10883 --- app/renderer/components/styles/animations.js | 14 +++++++++++++- app/renderer/components/styles/theme.js | 2 +- .../components/tabs/content/audioTabIcon.js | 9 +++++++++ .../components/tabs/content/closeTabIcon.js | 6 ++++-- app/renderer/components/tabs/content/favIcon.js | 10 +++++++++- .../components/tabs/content/newSessionIcon.js | 9 +++++++++ .../components/tabs/content/privateIcon.js | 11 ++++++++++- app/renderer/components/tabs/content/tabTitle.js | 1 + app/renderer/components/tabs/tab.js | 2 +- 9 files changed, 57 insertions(+), 7 deletions(-) diff --git a/app/renderer/components/styles/animations.js b/app/renderer/components/styles/animations.js index 87269b944f9..54c421d03aa 100644 --- a/app/renderer/components/styles/animations.js +++ b/app/renderer/components/styles/animations.js @@ -20,7 +20,19 @@ const opacityIncreaseKeyframes = { } } +// TODO: this could be a function with param included +// to which property should be changed +const widthIncreaseKeyframes = (start, end) => ({ + 'from': { + width: start + }, + 'to': { + width: end + } +}) + module.exports = { spinKeyframes, - opacityIncreaseKeyframes + opacityIncreaseKeyframes, + widthIncreaseKeyframes } diff --git a/app/renderer/components/styles/theme.js b/app/renderer/components/styles/theme.js index 80c8727678a..00a5b00088e 100644 --- a/app/renderer/components/styles/theme.js +++ b/app/renderer/components/styles/theme.js @@ -13,7 +13,7 @@ // mimics chrome hover effect transition: ` background-color 200ms cubic-bezier(0.26, 0.63, 0.39, 0.65), - color 200ms linear + color 200ms cubic-bezier(0.26, 0.63, 0.39, 0.65) `, background: '#ddd', borderColor: '#bbb', diff --git a/app/renderer/components/tabs/content/audioTabIcon.js b/app/renderer/components/tabs/content/audioTabIcon.js index a8b2ab59d16..06c0cd67704 100644 --- a/app/renderer/components/tabs/content/audioTabIcon.js +++ b/app/renderer/components/tabs/content/audioTabIcon.js @@ -18,6 +18,7 @@ const tabState = require('../../../../common/state/tabState') const windowActions = require('../../../../../js/actions/windowActions') // Styles +const {widthIncreaseKeyframes} = require('../../styles/animations') const globalStyles = require('../../styles/global') const {theme} = require('../../styles/theme') @@ -71,6 +72,14 @@ class AudioTabIcon extends React.Component { const styles = StyleSheet.create({ audioTab__icon: { + width: 0, + animationName: widthIncreaseKeyframes(0, globalStyles.spacing.iconSize), + animationDelay: '50ms', + animationTimingFunction: 'linear', + animationDuration: '100ms', + animationFillMode: 'forwards', + + overflow: 'hidden', margin: '0 -2px 0 2px', zIndex: globalStyles.zindex.zindexTabsAudioTopBorder, color: theme.tab.content.icon.audio.color, diff --git a/app/renderer/components/tabs/content/closeTabIcon.js b/app/renderer/components/tabs/content/closeTabIcon.js index 117785ab95b..42607a30f38 100644 --- a/app/renderer/components/tabs/content/closeTabIcon.js +++ b/app/renderer/components/tabs/content/closeTabIcon.js @@ -21,7 +21,7 @@ const appActions = require('../../../../../js/actions/appActions') // Styles const {theme} = require('../../styles/theme') -const {spacing} = require('../../styles/global') +const {spacing, zindex} = require('../../styles/global') const {opacityIncreaseKeyframes} = require('../../styles/animations') const closeTabSvg = require('../../../../extensions/brave/img/tabs/close_btn.svg') @@ -91,10 +91,12 @@ const styles = StyleSheet.create({ willChange: 'opacity', animationName: opacityIncreaseKeyframes, animationTimingFunction: 'linear', - animationDuration: '100ms', + animationDuration: '200ms', animationDelay: '25ms', animationFillMode: 'forwards', + boxSizing: 'border-box', + zIndex: zindex.zindexTabsThumbnail, backgroundImage: `url(${closeTabSvg})`, backgroundSize: spacing.closeIconSize, // mask icon to gray to avoid calling another icon on hover diff --git a/app/renderer/components/tabs/content/favIcon.js b/app/renderer/components/tabs/content/favIcon.js index 1adf800c1c6..1b676cd2077 100644 --- a/app/renderer/components/tabs/content/favIcon.js +++ b/app/renderer/components/tabs/content/favIcon.js @@ -19,7 +19,7 @@ const tabState = require('../../../../common/state/tabState') const defaultIconSvg = require('../../../../extensions/brave/img/tabs/default.svg') const loadingIconSvg = require('../../../../extensions/brave/img/tabs/loading.svg') const {filter, color, spacing} = require('../../styles/global') -const {spinKeyframes} = require('../../styles/animations') +const {spinKeyframes, opacityIncreaseKeyframes} = require('../../styles/animations') class Favicon extends React.Component { mergeProps (state, ownProps) { @@ -99,6 +99,14 @@ module.exports = ReduxComponent.connect(Favicon) const styles = StyleSheet.create({ icon: { + opacity: 0, + willChange: 'opacity', + animationName: opacityIncreaseKeyframes, + animationDelay: '50ms', + animationTimingFunction: 'linear', + animationDuration: '200ms', + animationFillMode: 'forwards', + position: 'relative', boxSizing: 'border-box', width: spacing.iconSize, diff --git a/app/renderer/components/tabs/content/newSessionIcon.js b/app/renderer/components/tabs/content/newSessionIcon.js index 0c7fed78225..e3afee2e4a6 100644 --- a/app/renderer/components/tabs/content/newSessionIcon.js +++ b/app/renderer/components/tabs/content/newSessionIcon.js @@ -17,6 +17,7 @@ const frameStateUtil = require('../../../../../js/state/frameStateUtil') // Styles const globalStyles = require('../../styles/global') +const {opacityIncreaseKeyframes} = require('../../styles/animations') const newSessionSvg = require('../../../../extensions/brave/img/tabs/new_session.svg') class NewSessionIcon extends React.Component { @@ -67,6 +68,14 @@ module.exports = ReduxComponent.connect(NewSessionIcon) const styles = StyleSheet.create({ newSession__icon: { + opacity: 0, + willChange: 'opacity', + animationName: opacityIncreaseKeyframes, + animationDelay: '100ms', + animationTimingFunction: 'linear', + animationDuration: '200ms', + animationFillMode: 'forwards', + zIndex: globalStyles.zindex.zindexWindow, boxSizing: 'border-box', display: 'flex', diff --git a/app/renderer/components/tabs/content/privateIcon.js b/app/renderer/components/tabs/content/privateIcon.js index e2fc9cd8e02..6c177ea166a 100644 --- a/app/renderer/components/tabs/content/privateIcon.js +++ b/app/renderer/components/tabs/content/privateIcon.js @@ -17,6 +17,7 @@ const tabState = require('../../../../common/state/tabState') // Styles const {theme} = require('../../styles/theme') const globalStyles = require('../../styles/global') +const {opacityIncreaseKeyframes} = require('../../styles/animations') const privateSvg = require('../../../../extensions/brave/img/tabs/private.svg') class PrivateIcon extends React.Component { @@ -58,7 +59,15 @@ module.exports = ReduxComponent.connect(PrivateIcon) const styles = StyleSheet.create({ private__icon: { - zIndex: 99, + opacity: 0, + willChange: 'opacity', + animationName: opacityIncreaseKeyframes, + animationDelay: '100ms', + animationTimingFunction: 'linear', + animationDuration: '200ms', + animationFillMode: 'forwards', + + zIndex: globalStyles.zindex.zindexWindow, boxSizing: 'border-box', WebkitMaskRepeat: 'no-repeat', WebkitMaskPosition: 'center', diff --git a/app/renderer/components/tabs/content/tabTitle.js b/app/renderer/components/tabs/content/tabTitle.js index 15429966a41..0c7f80abe8b 100644 --- a/app/renderer/components/tabs/content/tabTitle.js +++ b/app/renderer/components/tabs/content/tabTitle.js @@ -62,6 +62,7 @@ class TabTitle extends React.Component { module.exports = ReduxComponent.connect(TabTitle) const styles = StyleSheet.create({ + tab__title: { boxSizing: 'border-box', display: 'flex', diff --git a/app/renderer/components/tabs/tab.js b/app/renderer/components/tabs/tab.js index 9a08b4418e9..1936c2d266d 100644 --- a/app/renderer/components/tabs/tab.js +++ b/app/renderer/components/tabs/tab.js @@ -384,7 +384,7 @@ const styles = StyleSheet.create({ }, // this enable us to have gradient text - '::after': { + '::before': { zIndex: globalStyles.zindex.zindexTabs, content: '""', position: 'absolute',