diff --git a/common/changes/@uifabric/styling/pulsing-beacon-styling_2018-04-03-20-00.json b/common/changes/@uifabric/styling/pulsing-beacon-styling_2018-04-03-20-00.json new file mode 100644 index 0000000000000..497f925f4b693 --- /dev/null +++ b/common/changes/@uifabric/styling/pulsing-beacon-styling_2018-04-03-20-00.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/styling", + "comment": "New pulsing beacon animation to use in Coachmark and ActivityItem.", + "type": "minor" + } + ], + "packageName": "@uifabric/styling", + "email": "lynam.emily@gmail.com" +} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/pulsing-beacon-styling_2018-04-03-20-00.json b/common/changes/office-ui-fabric-react/pulsing-beacon-styling_2018-04-03-20-00.json new file mode 100644 index 0000000000000..45a326ca09e41 --- /dev/null +++ b/common/changes/office-ui-fabric-react/pulsing-beacon-styling_2018-04-03-20-00.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Coachmark: Moved pulsing beacon animation to the styling package.", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "lynam.emily@gmail.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.styles.ts b/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.styles.ts index f540190426e01..08374d695f52e 100644 --- a/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.styles.ts @@ -1,4 +1,9 @@ -import { IStyle, IRawStyle, keyframes } from '../../Styling'; +import { + IStyle, + IRawStyle, + keyframes, + PulsingBeaconAnimationStyles +} from '../../Styling'; export interface ICoachmarkStyleProps { /** @@ -98,47 +103,6 @@ export interface ICoachmarkStyles { collapsed?: IStyle; } -function continuousPulseStepOne(beaconColorOne: string): IRawStyle { - return { - borderColor: beaconColorOne, - borderWidth: '0px', - width: '35px', - height: '35px' - }; -} - -function continuousPulseStepTwo(): IRawStyle { - return { - opacity: '1', - borderWidth: '10px' - }; -} - -function continuousPulseStepThree(): IRawStyle { - return { - opacity: 1 - }; -} - -function continuousPulseStepFour(beaconColorTwo: string): IRawStyle { - return { - borderWidth: '0', - width: '150px', - height: '150px', - opacity: '0', - borderColor: beaconColorTwo - }; -} - -function continuousPulseStepFive(beaconColorOne: string): IRawStyle { - return { - ...continuousPulseStepOne(beaconColorOne), - ...{ - opacity: '0' - } - }; -} - export const translateOne: string = keyframes({ '0%': { transform: 'translate(0, 0)', // orig 25 @@ -254,25 +218,19 @@ export const rotateOne: string = keyframes({ }); export function getStyles(props: ICoachmarkStyleProps): ICoachmarkStyles { - const ContinuousPulse: string = keyframes({ - '0%': continuousPulseStepOne(props.beaconColorOne!), - '1.42%': continuousPulseStepTwo(), - '3.57%': continuousPulseStepThree(), - '7.14%': continuousPulseStepFour(props.beaconColorTwo!), - '8%': continuousPulseStepFive(props.beaconColorOne!), - '29.99%': continuousPulseStepFive(props.beaconColorOne!), - '30%': continuousPulseStepOne(props.beaconColorOne!), - '31.42%': continuousPulseStepTwo(), - '33.57%': continuousPulseStepThree(), - '37.14%': continuousPulseStepFour(props.beaconColorTwo!), - '38%': continuousPulseStepFive(props.beaconColorOne!), - '79.42%': continuousPulseStepFive(props.beaconColorOne!), - '79.43': continuousPulseStepOne(props.beaconColorOne!), - '81.85': continuousPulseStepTwo(), - '83.42': continuousPulseStepThree(), - '87%': continuousPulseStepFour(props.beaconColorTwo!), - '100%': {} - }); + const animationInnerDimension = '35px'; + const animationOuterDimension = '150px'; + const animationBorderWidth = '10px'; + + const ContinuousPulse: string = PulsingBeaconAnimationStyles.continuousPulseAnimation( + props.beaconColorOne!, + props.beaconColorTwo!, + animationInnerDimension, + animationOuterDimension, + animationBorderWidth + ); + + const ContinuousPulseAnimation = PulsingBeaconAnimationStyles.createDefaultAnimation(ContinuousPulse); return { root: [ @@ -280,7 +238,6 @@ export function getStyles(props: ICoachmarkStyleProps): ICoachmarkStyles { position: 'relative' } ], - // The pulsing beacon pulsingBeacon: [ { position: 'absolute', @@ -293,13 +250,7 @@ export function getStyles(props: ICoachmarkStyleProps): ICoachmarkStyles { borderStyle: 'solid', opacity: '0' }, - (props.collapsed && props.isBeaconAnimating) && { - animationName: ContinuousPulse, - animationIterationCount: '1', - animationDuration: '14s', - zIndex: 1000, - animationDelay: '2s' - } + (props.collapsed && props.isBeaconAnimating) && ContinuousPulseAnimation ], // Translate Animation Layer translateAnimationContainer: [ diff --git a/packages/styling/src/styles/PulsingBeaconAnimationStyles.ts b/packages/styling/src/styles/PulsingBeaconAnimationStyles.ts new file mode 100644 index 0000000000000..eac7e609045cf --- /dev/null +++ b/packages/styling/src/styles/PulsingBeaconAnimationStyles.ts @@ -0,0 +1,90 @@ +import { IRawStyle, keyframes } from '@uifabric/merge-styles/lib/index'; + +const DEFAULT_DURATION = '14s'; +const DEFAULT_DELAY = '2s'; +const DEFAULT_ITERATION_COUNT = '1'; + +function _continuousPulseStepOne(beaconColorOne: string, innerDimension: string): IRawStyle { + return { + borderColor: beaconColorOne, + borderWidth: '0px', + width: innerDimension, + height: innerDimension + }; +} + +function _continuousPulseStepTwo(borderWidth: string): IRawStyle { + return { + opacity: 1, + borderWidth: borderWidth + }; +} + +function _continuousPulseStepThree(): IRawStyle { + return { + opacity: 1 + }; +} + +function _continuousPulseStepFour(beaconColorTwo: string, outerDimension: string): IRawStyle { + return { + borderWidth: '0', + width: outerDimension, + height: outerDimension, + opacity: 0, + borderColor: beaconColorTwo + }; +} + +function _continuousPulseStepFive(beaconColorOne: string, innerDimension: string): IRawStyle { + return { + ..._continuousPulseStepOne(beaconColorOne, innerDimension), + ...{ + opacity: 0 + } + }; +} + +function _continuousPulseAnimation( + beaconColorOne: string, + beaconColorTwo: string, + innerDimension: string, + outerDimension: string, + borderWidth: string +): string { + return keyframes({ + '0%': _continuousPulseStepOne(beaconColorOne, innerDimension), + '1.42%': _continuousPulseStepTwo(borderWidth), + '3.57%': _continuousPulseStepThree(), + '7.14%': _continuousPulseStepFour(beaconColorTwo, outerDimension), + '8%': _continuousPulseStepFive(beaconColorOne, innerDimension), + '29.99%': _continuousPulseStepFive(beaconColorOne, innerDimension), + '30%': _continuousPulseStepOne(beaconColorOne, innerDimension), + '31.42%': _continuousPulseStepTwo(borderWidth), + '33.57%': _continuousPulseStepThree(), + '37.14%': _continuousPulseStepFour(beaconColorTwo, outerDimension), + '38%': _continuousPulseStepFive(beaconColorOne, innerDimension), + '79.42%': _continuousPulseStepFive(beaconColorOne, innerDimension), + '79.43': _continuousPulseStepOne(beaconColorOne, innerDimension), + '81.85': _continuousPulseStepTwo(borderWidth), + '83.42': _continuousPulseStepThree(), + '87%': _continuousPulseStepFour(beaconColorTwo, outerDimension), + '100%': {} + }); +} + +function _createDefaultAnimation( + animationName: string, +): IRawStyle { + return { + animationName, + animationIterationCount: DEFAULT_ITERATION_COUNT, + animationDuration: DEFAULT_DURATION, + animationDelay: DEFAULT_DELAY + }; +} + +export const PulsingBeaconAnimationStyles = { + continuousPulseAnimation: _continuousPulseAnimation, + createDefaultAnimation: _createDefaultAnimation +}; \ No newline at end of file