| OLD | NEW |
| 1 // Copyright 2015 The Chromium Authors. All rights reserved. | 1 // Copyright 2015 The Chromium Authors. All rights reserved. |
| 2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
| 4 | 4 |
| 5 import 'dart:sky' as sky; | 5 import 'dart:sky' as sky; |
| 6 | 6 |
| 7 import '../animation/animation_performance.dart'; | 7 import '../animation/animation_performance.dart'; |
| 8 import '../animation/curves.dart'; | 8 import '../animation/curves.dart'; |
| 9 import '../theme/shadows.dart'; | 9 import '../theme/shadows.dart'; |
| 10 import 'animated_component.dart'; | 10 import 'animated_component.dart'; |
| 11 import 'animated_container.dart'; | 11 import 'animation_builder.dart'; |
| 12 import 'basic.dart'; | 12 import 'basic.dart'; |
| 13 import 'theme.dart'; | 13 import 'theme.dart'; |
| 14 | 14 |
| 15 // TODO(eseidel): Draw width should vary based on device size: | 15 // TODO(eseidel): Draw width should vary based on device size: |
| 16 // http://www.google.com/design/spec/layout/structure.html#structure-side-nav | 16 // http://www.google.com/design/spec/layout/structure.html#structure-side-nav |
| 17 | 17 |
| 18 // Mobile: | 18 // Mobile: |
| 19 // Width = Screen width − 56 dp | 19 // Width = Screen width − 56 dp |
| 20 // Maximum width: 320dp | 20 // Maximum width: 320dp |
| 21 // Maximum width applies only when using a left nav. When using a right nav, | 21 // Maximum width applies only when using a left nav. When using a right nav, |
| 22 // the panel can cover the full width of the screen. | 22 // the panel can cover the full width of the screen. |
| 23 | 23 |
| 24 // Desktop/Tablet: | 24 // Desktop/Tablet: |
| 25 // Maximum width for a left nav is 400dp. | 25 // Maximum width for a left nav is 400dp. |
| 26 // The right nav can vary depending on content. | 26 // The right nav can vary depending on content. |
| 27 | 27 |
| 28 const double _kWidth = 304.0; | 28 const double _kWidth = 304.0; |
| 29 const double _kMinFlingVelocity = 0.4; | 29 const double _kMinFlingVelocity = 0.4; |
| 30 const Duration _kBaseSettleDuration = const Duration(milliseconds: 246); | 30 const Duration _kBaseSettleDuration = const Duration(milliseconds: 246); |
| 31 // TODO(mpcomplete): The curve must be linear if we want the drawer to track | 31 // TODO(mpcomplete): The curve must be linear if we want the drawer to track |
| 32 // the user's finger. Odeon remedies this by attaching spring forces to the | 32 // the user's finger. Odeon remedies this by attaching spring forces to the |
| 33 // initial timeline when animating (so it doesn't look linear). | 33 // initial timeline when animating (so it doesn't look linear). |
| 34 const Curve _kAnimationCurve = linear; | 34 const Curve _kAnimationCurve = linear; |
| 35 | 35 |
| 36 typedef void DrawerStatusChangeHandler (bool showing); | 36 typedef void DrawerStatusChangeHandler (bool showing); |
| 37 | 37 |
| 38 class DrawerController { | 38 class DrawerController { |
| 39 DrawerController(this.onStatusChange) { | 39 DrawerController(this.onStatusChange) { |
| 40 container = new AnimatedContainer() | 40 builder = new AnimationBuilder() |
| 41 ..position = new AnimatedType<Point>( | 41 ..position = new AnimatedType<Point>( |
| 42 new Point(-_kWidth, 0.0), end: Point.origin, curve: _kAnimationCurve); | 42 new Point(-_kWidth, 0.0), end: Point.origin, curve: _kAnimationCurve); |
| 43 performance = container.createPerformance([container.position], | 43 performance = builder.createPerformance([builder.position], |
| 44 duration: _kBaseSettleDuration) | 44 duration: _kBaseSettleDuration) |
| 45 ..addListener(_checkValue); | 45 ..addListener(_checkValue); |
| 46 } | 46 } |
| 47 final DrawerStatusChangeHandler onStatusChange; | 47 final DrawerStatusChangeHandler onStatusChange; |
| 48 | 48 |
| 49 AnimationPerformance performance; | 49 AnimationPerformance performance; |
| 50 AnimatedContainer container; | 50 AnimationBuilder builder; |
| 51 | 51 |
| 52 double get xPosition => container.position.value.x; | 52 double get xPosition => builder.position.value.x; |
| 53 | 53 |
| 54 bool _oldClosedState = true; | 54 bool _oldClosedState = true; |
| 55 void _checkValue() { | 55 void _checkValue() { |
| 56 var newClosedState = isClosed; | 56 var newClosedState = isClosed; |
| 57 if (onStatusChange != null && _oldClosedState != newClosedState) { | 57 if (onStatusChange != null && _oldClosedState != newClosedState) { |
| 58 onStatusChange(!newClosedState); | 58 onStatusChange(!newClosedState); |
| 59 _oldClosedState = newClosedState; | 59 _oldClosedState = newClosedState; |
| 60 } | 60 } |
| 61 } | 61 } |
| 62 | 62 |
| (...skipping 62 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 125 Widget build() { | 125 Widget build() { |
| 126 // TODO(mpcomplete): animate as a fade-in. | 126 // TODO(mpcomplete): animate as a fade-in. |
| 127 double scaler = controller.performance.progress; | 127 double scaler = controller.performance.progress; |
| 128 Color maskColor = new Color.fromARGB((0x7F * scaler).floor(), 0, 0, 0); | 128 Color maskColor = new Color.fromARGB((0x7F * scaler).floor(), 0, 0, 0); |
| 129 | 129 |
| 130 var mask = new Listener( | 130 var mask = new Listener( |
| 131 child: new Container(decoration: new BoxDecoration(backgroundColor: maskCo
lor)), | 131 child: new Container(decoration: new BoxDecoration(backgroundColor: maskCo
lor)), |
| 132 onGestureTap: controller.handleMaskTap | 132 onGestureTap: controller.handleMaskTap |
| 133 ); | 133 ); |
| 134 | 134 |
| 135 Widget content = controller.container.build( | 135 Widget content = controller.builder.build( |
| 136 new Container( | 136 new Container( |
| 137 decoration: new BoxDecoration( | 137 decoration: new BoxDecoration( |
| 138 backgroundColor: Theme.of(this).canvasColor, | 138 backgroundColor: Theme.of(this).canvasColor, |
| 139 boxShadow: shadows[level]), | 139 boxShadow: shadows[level]), |
| 140 width: _kWidth, | 140 width: _kWidth, |
| 141 child: new Block(children) | 141 child: new Block(children) |
| 142 )); | 142 )); |
| 143 | 143 |
| 144 return new Listener( | 144 return new Listener( |
| 145 child: new Stack([ mask, content ]), | 145 child: new Stack([ mask, content ]), |
| 146 onPointerDown: controller.handlePointerDown, | 146 onPointerDown: controller.handlePointerDown, |
| 147 onPointerMove: controller.handlePointerMove, | 147 onPointerMove: controller.handlePointerMove, |
| 148 onPointerUp: controller.handlePointerUp, | 148 onPointerUp: controller.handlePointerUp, |
| 149 onPointerCancel: controller.handlePointerCancel, | 149 onPointerCancel: controller.handlePointerCancel, |
| 150 onGestureFlingStart: controller.handleFlingStart | 150 onGestureFlingStart: controller.handleFlingStart |
| 151 ); | 151 ); |
| 152 } | 152 } |
| 153 | 153 |
| 154 } | 154 } |
| OLD | NEW |