From d1e8718d74618c6e10c9670cf0aeae2b0864e1fd Mon Sep 17 00:00:00 2001 From: SleepWalker Date: Sat, 6 Feb 2016 12:02:23 +0200 Subject: [PATCH] =?UTF-8?q?=D0=9C=D0=B0=D0=BB=D0=B5=D0=BD=D1=8C=D0=BA?= =?UTF-8?q?=D0=B8=D0=B9=20=D1=80=D0=B5=D1=84=D0=B0=D0=BA=D1=82=D0=BE=D1=80?= =?UTF-8?q?=D0=B8=D0=BD=D0=B3=20PanelTransition?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/auth/PanelTransition.jsx | 151 ++++++++++---------- src/components/auth/Permissions.jsx | 3 +- src/components/auth/Permissions.messages.js | 12 +- src/components/auth/helpLinks.scss | 2 + src/components/ui/panel.scss | 13 +- 5 files changed, 94 insertions(+), 87 deletions(-) diff --git a/src/components/auth/PanelTransition.jsx b/src/components/auth/PanelTransition.jsx index 8185a48..8f5a44d 100644 --- a/src/components/auth/PanelTransition.jsx +++ b/src/components/auth/PanelTransition.jsx @@ -9,10 +9,9 @@ import panelStyles from 'components/ui/panel.scss'; import icons from 'components/ui/icons.scss'; -const opacitySpringConfig = [200, 20]; +const opacitySpringConfig = [300, 20]; const transformSpringConfig = [500, 50]; - -// TODO: сделать более быстрый фейд на горизонтальном скролле +const changeContextSpringConfig = [500, 20]; export default class PanelTransition extends Component { state = { @@ -31,8 +30,8 @@ export default class PanelTransition extends Component { this.setState({ direction, - forceHeight: forceHeight, - previousRoute: this.props.location + forceHeight, + previousRoute }); if (forceHeight) { @@ -61,7 +60,7 @@ export default class PanelTransition extends Component { }, common: { heightSpring: spring(forceHeight || height[path] || 0, transformSpringConfig), - switchContextHeightSpring: spring(forceHeight || contextHeight, [500, 20]) + switchContextHeightSpring: spring(forceHeight || contextHeight, changeContextSpringConfig) } }} willEnter={this.willEnter} @@ -69,46 +68,33 @@ export default class PanelTransition extends Component { > {(items) => { var keys = Object.keys(items).filter((key) => key !== 'common'); + return (
-
- {keys.map((key) => this.getHeader(key, items[key]))} -
+ {keys.map((key) => this.getHeader(key, items[key]))}
- +
{keys.map((key) => this.getBody(key, items[key]))}
-
- {keys.map((key) => this.getFooter(key, items[key]))} -
+ {keys.map((key) => this.getFooter(key, items[key]))}
-
+
{keys.map((key) => this.getLinks(key, items[key]))}
@@ -119,23 +105,24 @@ export default class PanelTransition extends Component { } willEnter = (key, styles) => { - var map = { - '/login': -1, - '/register': -1, - '/password': 1, - '/activation': 1, - '/oauth/permissions': -1 - }; - var sign = map[key]; - - return { - ...styles, - transformSpring: spring(sign * 100, transformSpringConfig), - opacitySpring: spring(1, opacitySpringConfig) - }; + return this.getTransitionStyles(key, styles); }; willLeave = (key, styles) => { + return this.getTransitionStyles(key, styles, {isLeave: true}); + }; + + /** + * @param {string} key + * @param {Object} styles + * @param {Object} [options] + * @param {Object} [options.isLeave=false] - true, if this is a leave transition + * + * @return {Object} + */ + getTransitionStyles(key, styles, options = {}) { + var {isLeave = false} = options; + var map = { '/login': -1, '/register': -1, @@ -147,10 +134,11 @@ export default class PanelTransition extends Component { return { ...styles, + pointerEvents: isLeave ? 'none' : 'auto', transformSpring: spring(sign * 100, transformSpringConfig), - opacitySpring: spring(0, opacitySpringConfig) + opacitySpring: spring(isLeave ? 0 : 1, opacitySpringConfig) }; - }; + } updateHeight = (height) => { this.setState({ @@ -191,22 +179,16 @@ export default class PanelTransition extends Component { var {hasBackButton, transformSpring, Title} = props; var style = { - position: 'absolute', - top: 0, - left: 0, - width: '100%' + ...this.getDefaultTransitionStyles(props), + opacity: 1 // reset default }; - var scrollStyle = { - WebkitTransform: `translateY(${transformSpring}%)`, - transform: `translateY(${transformSpring}%)` - }; + var scrollStyle = this.translate(transformSpring, 'Y'); var sideScrollStyle = { position: 'relative', zIndex: 2, - WebkitTransform: `translateX(${-Math.abs(transformSpring)}%)`, - transform: `translateX(${-Math.abs(transformSpring)}%)` + ...this.translate(-Math.abs(transformSpring)) }; var backButton = ( @@ -226,13 +208,10 @@ export default class PanelTransition extends Component { } getBody(key, props) { - var {transformSpring, opacitySpring, Body} = props; + var {transformSpring, Body} = props; var {direction} = this.state; - var transform = { - WebkitTransform: `translate${direction}(${transformSpring}%)`, - transform: `translate${direction}(${transformSpring}%)` - }; + var transform = this.translate(transformSpring, direction); var verticalOrigin = 'top'; @@ -242,11 +221,9 @@ export default class PanelTransition extends Component { } var style = { - position: 'absolute', + ...this.getDefaultTransitionStyles(props), + top: 'auto', // reset default [verticalOrigin]: 0, - left: 0, - width: '100%', - opacity: opacitySpring, ...transform }; @@ -258,15 +235,9 @@ export default class PanelTransition extends Component { } getFooter(key, props) { - var {opacitySpring, Footer} = props; + var {Footer} = props; - var style = { - position: 'absolute', - top: 0, - left: 0, - width: '100%', - opacity: opacitySpring - }; + var style = this.getDefaultTransitionStyles(props); return (
@@ -276,15 +247,9 @@ export default class PanelTransition extends Component { } getLinks(key, props) { - var {opacitySpring, Links} = props; + var {Links} = props; - var style = { - position: 'absolute', - top: 0, - left: 0, - width: '100%', - opacity: opacitySpring - }; + var style = this.getDefaultTransitionStyles(props); return (
@@ -292,5 +257,39 @@ export default class PanelTransition extends Component {
); } + + /** + * @param {Object} props + * @param {string} props.pointerEvents + * @param {number} props.opacitySpring + * + * @return {Object} + */ + getDefaultTransitionStyles(props) { + var {pointerEvents, opacitySpring} = props; + + return { + position: 'absolute', + top: 0, + left: 0, + width: '100%', + opacity: opacitySpring, + pointerEvents + }; + } + + /** + * @param {number} value + * @param {string} direction='X' - X|Y + * @param {string} unit='%' - %|px etc + * + * @return {Object} + */ + translate(value, direction = 'X', unit = '%') { + return { + WebkitTransform: `translate${direction}(${value}${unit})`, + transform: `translate${direction}(${value}${unit})` + }; + } } diff --git a/src/components/auth/Permissions.jsx b/src/components/auth/Permissions.jsx index b1559dc..f12bf9b 100644 --- a/src/components/auth/Permissions.jsx +++ b/src/components/auth/Permissions.jsx @@ -36,7 +36,8 @@ export default function Permissions() {
- +
+
  • Authorization for Minecraft servers
    • diff --git a/src/components/auth/Permissions.messages.js b/src/components/auth/Permissions.messages.js index 064de46..b1d4c56 100644 --- a/src/components/auth/Permissions.messages.js +++ b/src/components/auth/Permissions.messages.js @@ -11,10 +11,14 @@ export default defineMessages({ defaultMessage: 'You authorized as:' }, - theAppNeedsAccess: { - id: 'theAppNeedsAccess', - // Мне нельзя html? Получите неразрывный пробел! ˅˅˅˅˅˅˅˅˅˅˅ - defaultMessage: 'This applications needs access              to your data' + theAppNeedsAccess1: { + id: 'theAppNeedsAccess1', + defaultMessage: 'This application needs access' + }, + + theAppNeedsAccess2: { + id: 'theAppNeedsAccess2', + defaultMessage: 'to your data' }, decline: { diff --git a/src/components/auth/helpLinks.scss b/src/components/auth/helpLinks.scss index d2f51b5..3e6dfc0 100644 --- a/src/components/auth/helpLinks.scss +++ b/src/components/auth/helpLinks.scss @@ -1,5 +1,7 @@ .helpLinks { margin: 8px 0; + position: relative; + height: 20px; color: #444; text-align: center; diff --git a/src/components/ui/panel.scss b/src/components/ui/panel.scss index 66faa51..e2c06f0 100644 --- a/src/components/ui/panel.scss +++ b/src/components/ui/panel.scss @@ -11,6 +11,8 @@ $headerHeight: 60px; box-sizing: border-box; height: $headerHeight; border-bottom: 1px solid lighter($black); + position: relative; + overflow: hidden; font-family: $font-family-title; text-align: center; @@ -37,6 +39,7 @@ $bodyLeftRightPadding: 20px; $bodyTopBottomPadding: 15px; .body { + overflow: hidden; padding: $bodyTopBottomPadding $bodyLeftRightPadding; color: #ccc; font-size: 18px; @@ -60,13 +63,11 @@ $bodyTopBottomPadding: 15px; } .footer { - display: flex; + position: relative; + overflow: hidden; + height: 50px; - > * { - flex-grow: 1; - } - - button { // TODO: добавленно временно, пока не устаканится лейаут панелек + button { width: 100%; } }