From 84fe7a7406acd66c5afbcf741c3863120e157046 Mon Sep 17 00:00:00 2001 From: Arko Gupta Date: Fri, 23 Nov 2018 19:28:13 +0530 Subject: [PATCH 1/7] added back animation for drag-drop --- .../DetailsList/DetailsColumn.base.tsx | 16 +++++++- .../DetailsList/DetailsColumn.styles.ts | 40 +++++++++---------- .../DetailsList/DetailsColumn.types.ts | 2 + 3 files changed, 37 insertions(+), 21 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.base.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.base.tsx index e4255eb941e5db..4048fb209d00c9 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.base.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.base.tsx @@ -142,12 +142,20 @@ export class DetailsColumnBase extends BaseComponent { if (this.props.isDropped) { if (this._root!.current!) { this._root!.current!.classList!.add(classNames.borderAfterDropping); + + this._async.setTimeout(() => { + if (this._root!.current!) { + this._root!.current!.classList!.add(classNames.noBorderAfterDropping); + } + }, 20); } + this._async.setTimeout(() => { if (this._root!.current!) { this._root!.current!.classList!.remove(classNames.borderAfterDropping); + this._root!.current!.classList!.remove(classNames.noBorderAfterDropping); } - }, 1500); + }, 1520); } } @@ -245,6 +253,11 @@ export class DetailsColumnBase extends BaseComponent { if (itemIndex) { this._updateHeaderDragInfo(itemIndex); this._root.current.classList.add(classNames.borderWhileDragging); + this._async.setTimeout(() => { + if (this._root!.current!) { + this._root!.current!.classList!.add(classNames.noBorderWhileDragging); + } + }, 20); } } @@ -254,6 +267,7 @@ export class DetailsColumnBase extends BaseComponent { this._updateHeaderDragInfo(-1, event); } this._root.current.classList.remove(classNames.borderWhileDragging); + this._root.current.classList.remove(classNames.noBorderWhileDragging); } private _updateHeaderDragInfo(itemIndex: number, event?: MouseEvent) { diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.styles.ts b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.styles.ts index 85ad345b764e6d..ff7e449e899fef 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.styles.ts +++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.styles.ts @@ -53,6 +53,20 @@ export const getStyles = (props: IDetailsColumnStyleProps): IDetailsColumnStyles paddingLeft: 8 }; + const borderWhileDragging: IStyle = [ + { + borderStyle: 'solid', + borderWidth: 1, + borderColor: palette.themePrimary + } + ]; + + const borderAfterDragOrDrop: IStyle = [ + { + borderColor: 'transparent' + } + ]; + return { root: [ getCellStyles(props), @@ -179,26 +193,12 @@ export const getStyles = (props: IDetailsColumnStyleProps): IDetailsColumnStyles accessibleLabel: [hiddenContentStyle], - borderAfterDropping: [ - { - borderStyle: 'solid', - borderWidth: 1, - borderColor: palette.themePrimary, - left: -1, - lineHeight: 31 - } - ], + borderWhileDragging: borderWhileDragging, - borderWhileDragging: [ - { - selectors: { - '.ms-DetailsHeader &.ms-DetailsHeader-cell': { - borderStyle: 'solid', - borderWidth: 1, - borderColor: palette.themePrimary - } - } - } - ] + noBorderWhileDragging: [borderAfterDragOrDrop, { transition: 'border-color 0.2s ease' }], + + borderAfterDropping: [borderWhileDragging, { left: -1, lineHeight: 31 }], + + noBorderAfterDropping: [borderAfterDragOrDrop, { transition: 'border-color 1.5s ease' }] }; }; diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.types.ts b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.types.ts index b2cb453ee8e5ee..ef5a6ada104dce 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.types.ts +++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.types.ts @@ -47,5 +47,7 @@ export interface IDetailsColumnStyles { sortIcon: IStyle; filterChevron: IStyle; borderAfterDropping: IStyle; + noBorderAfterDropping: IStyle; borderWhileDragging: IStyle; + noBorderWhileDragging: IStyle; } From ea47e0f06d4f2458b589c3e6354f753d56905fba Mon Sep 17 00:00:00 2001 From: Arko Gupta Date: Fri, 23 Nov 2018 19:29:45 +0530 Subject: [PATCH 2/7] added change file --- ...upta-dragDropBorderAnimation_2018-11-23-13-59.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/office-ui-fabric-react/arkgupta-dragDropBorderAnimation_2018-11-23-13-59.json diff --git a/common/changes/office-ui-fabric-react/arkgupta-dragDropBorderAnimation_2018-11-23-13-59.json b/common/changes/office-ui-fabric-react/arkgupta-dragDropBorderAnimation_2018-11-23-13-59.json new file mode 100644 index 00000000000000..f61255211eadce --- /dev/null +++ b/common/changes/office-ui-fabric-react/arkgupta-dragDropBorderAnimation_2018-11-23-13-59.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "re-adding animation for drag-n-drop to reorder columns", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "arkgupta@microsoft.com" +} \ No newline at end of file From c8f49cb00b7bbd42122313093c660574869aefde Mon Sep 17 00:00:00 2001 From: Arko Gupta Date: Fri, 30 Nov 2018 18:30:43 +0530 Subject: [PATCH 3/7] using transition duration as a styleProp --- .../src/components/DetailsList/DetailsColumn.base.tsx | 6 +++++- .../src/components/DetailsList/DetailsColumn.styles.ts | 8 +++++--- .../src/components/DetailsList/DetailsColumn.types.ts | 2 ++ 3 files changed, 12 insertions(+), 4 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.base.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.base.tsx index 4048fb209d00c9..4854dc78c13bd6 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.base.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.base.tsx @@ -12,6 +12,8 @@ import { IDetailsColumnStyleProps, IDetailsColumnProps } from './DetailsColumn.t const MOUSEDOWN_PRIMARY_BUTTON = 0; // for mouse down event we are using ev.button property, 0 means left button const getClassNames = classNamesFunction(); +const TRANSITION_DURATION_DRAG = 0.2; // sec +const TRANSITION_DURATION_DROP = 1.5; // sec export class DetailsColumnBase extends BaseComponent { private _root: any; @@ -41,7 +43,9 @@ export class DetailsColumnBase extends BaseComponent { isIconVisible: column.isSorted || column.isGrouped || column.isFiltered, isPadded: column.isPadded, isIconOnly: column.isIconOnly, - cellStyleProps + cellStyleProps, + transitionDurationDrag: TRANSITION_DURATION_DRAG, + transitionDurationDrop: TRANSITION_DURATION_DROP }); const classNames = this._classNames; diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.styles.ts b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.styles.ts index ff7e449e899fef..026b1d7585a413 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.styles.ts +++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.styles.ts @@ -33,7 +33,9 @@ export const getStyles = (props: IDetailsColumnStyleProps): IDetailsColumnStyles isIconVisible, isPadded, isIconOnly, - cellStyleProps = DEFAULT_CELL_STYLE_PROPS + cellStyleProps = DEFAULT_CELL_STYLE_PROPS, + transitionDurationDrag, + transitionDurationDrop } = props; const { semanticColors, palette } = theme; @@ -195,10 +197,10 @@ export const getStyles = (props: IDetailsColumnStyleProps): IDetailsColumnStyles borderWhileDragging: borderWhileDragging, - noBorderWhileDragging: [borderAfterDragOrDrop, { transition: 'border-color 0.2s ease' }], + noBorderWhileDragging: [borderAfterDragOrDrop, { transition: `border-color ${transitionDurationDrag}s ease` }], borderAfterDropping: [borderWhileDragging, { left: -1, lineHeight: 31 }], - noBorderAfterDropping: [borderAfterDragOrDrop, { transition: 'border-color 1.5s ease' }] + noBorderAfterDropping: [borderAfterDragOrDrop, { transition: `border-color ${transitionDurationDrop}s ease` }] }; }; diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.types.ts b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.types.ts index ef5a6ada104dce..76c5886b085474 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.types.ts +++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.types.ts @@ -33,6 +33,8 @@ export type IDetailsColumnStyleProps = Required Date: Fri, 30 Nov 2018 18:43:07 +0530 Subject: [PATCH 4/7] using variables for setTimeout intervals for classname addition/removal --- .../src/components/DetailsList/DetailsColumn.base.tsx | 11 ++++++----- .../components/DetailsList/DetailsColumn.styles.ts | 4 ++-- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.base.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.base.tsx index 4854dc78c13bd6..6fa78700a490d5 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.base.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.base.tsx @@ -12,8 +12,9 @@ import { IDetailsColumnStyleProps, IDetailsColumnProps } from './DetailsColumn.t const MOUSEDOWN_PRIMARY_BUTTON = 0; // for mouse down event we are using ev.button property, 0 means left button const getClassNames = classNamesFunction(); -const TRANSITION_DURATION_DRAG = 0.2; // sec -const TRANSITION_DURATION_DROP = 1.5; // sec +const TRANSITION_DURATION_DRAG = 200; // ms +const TRANSITION_DURATION_DROP = 1500; // ms +const CLASSNAME_ADD_INTERVAL = 20; // ms export class DetailsColumnBase extends BaseComponent { private _root: any; @@ -151,7 +152,7 @@ export class DetailsColumnBase extends BaseComponent { if (this._root!.current!) { this._root!.current!.classList!.add(classNames.noBorderAfterDropping); } - }, 20); + }, CLASSNAME_ADD_INTERVAL); } this._async.setTimeout(() => { @@ -159,7 +160,7 @@ export class DetailsColumnBase extends BaseComponent { this._root!.current!.classList!.remove(classNames.borderAfterDropping); this._root!.current!.classList!.remove(classNames.noBorderAfterDropping); } - }, 1520); + }, TRANSITION_DURATION_DROP + CLASSNAME_ADD_INTERVAL); } } @@ -261,7 +262,7 @@ export class DetailsColumnBase extends BaseComponent { if (this._root!.current!) { this._root!.current!.classList!.add(classNames.noBorderWhileDragging); } - }, 20); + }, CLASSNAME_ADD_INTERVAL); } } diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.styles.ts b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.styles.ts index 026b1d7585a413..a148f976eaedc4 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.styles.ts +++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.styles.ts @@ -197,10 +197,10 @@ export const getStyles = (props: IDetailsColumnStyleProps): IDetailsColumnStyles borderWhileDragging: borderWhileDragging, - noBorderWhileDragging: [borderAfterDragOrDrop, { transition: `border-color ${transitionDurationDrag}s ease` }], + noBorderWhileDragging: [borderAfterDragOrDrop, { transition: `border-color ${transitionDurationDrag}ms ease` }], borderAfterDropping: [borderWhileDragging, { left: -1, lineHeight: 31 }], - noBorderAfterDropping: [borderAfterDragOrDrop, { transition: `border-color ${transitionDurationDrop}s ease` }] + noBorderAfterDropping: [borderAfterDragOrDrop, { transition: `border-color ${transitionDurationDrop}ms ease` }] }; }; From a1433fa371704605453bbce38224f46d8811c304 Mon Sep 17 00:00:00 2001 From: Kevin Coughlin Date: Fri, 30 Nov 2018 11:13:56 -0800 Subject: [PATCH 5/7] Update arkgupta-dragDropBorderAnimation_2018-11-23-13-59.json --- .../arkgupta-dragDropBorderAnimation_2018-11-23-13-59.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/common/changes/office-ui-fabric-react/arkgupta-dragDropBorderAnimation_2018-11-23-13-59.json b/common/changes/office-ui-fabric-react/arkgupta-dragDropBorderAnimation_2018-11-23-13-59.json index f61255211eadce..3a8e43b9073b0b 100644 --- a/common/changes/office-ui-fabric-react/arkgupta-dragDropBorderAnimation_2018-11-23-13-59.json +++ b/common/changes/office-ui-fabric-react/arkgupta-dragDropBorderAnimation_2018-11-23-13-59.json @@ -2,10 +2,10 @@ "changes": [ { "packageName": "office-ui-fabric-react", - "comment": "re-adding animation for drag-n-drop to reorder columns", + "comment": "DetailsList: Re-adding border fade animation as transition on column reorder", "type": "patch" } ], "packageName": "office-ui-fabric-react", "email": "arkgupta@microsoft.com" -} \ No newline at end of file +} From 7a817aa051242dd35a544918cdf6a5f76a011930 Mon Sep 17 00:00:00 2001 From: Kevin Coughlin Date: Fri, 30 Nov 2018 11:24:56 -0800 Subject: [PATCH 6/7] Condense DnD border fade classList removals into one call --- .../src/components/DetailsList/DetailsColumn.base.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.base.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.base.tsx index 6fa78700a490d5..d5078419ecf835 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.base.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.base.tsx @@ -157,8 +157,7 @@ export class DetailsColumnBase extends BaseComponent { this._async.setTimeout(() => { if (this._root!.current!) { - this._root!.current!.classList!.remove(classNames.borderAfterDropping); - this._root!.current!.classList!.remove(classNames.noBorderAfterDropping); + this._root!.current!.classList!.remove(classNames.borderAfterDropping, classNames.noBorderAfterDropping); } }, TRANSITION_DURATION_DROP + CLASSNAME_ADD_INTERVAL); } @@ -271,8 +270,7 @@ export class DetailsColumnBase extends BaseComponent { if (event) { this._updateHeaderDragInfo(-1, event); } - this._root.current.classList.remove(classNames.borderWhileDragging); - this._root.current.classList.remove(classNames.noBorderWhileDragging); + this._root.current.classList.remove(classNames.borderWhileDragging, classNames.noBorderWhileDragging); } private _updateHeaderDragInfo(itemIndex: number, event?: MouseEvent) { From bade480ffad6244fffd87b1d451e6bbde67f24f9 Mon Sep 17 00:00:00 2001 From: Kevin Coughlin Date: Fri, 30 Nov 2018 11:40:32 -0800 Subject: [PATCH 7/7] Revert "Condense DnD border fade classList removals into one call" This reverts commit 7a817aa051242dd35a544918cdf6a5f76a011930. --- .../src/components/DetailsList/DetailsColumn.base.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.base.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.base.tsx index d5078419ecf835..6fa78700a490d5 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.base.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.base.tsx @@ -157,7 +157,8 @@ export class DetailsColumnBase extends BaseComponent { this._async.setTimeout(() => { if (this._root!.current!) { - this._root!.current!.classList!.remove(classNames.borderAfterDropping, classNames.noBorderAfterDropping); + this._root!.current!.classList!.remove(classNames.borderAfterDropping); + this._root!.current!.classList!.remove(classNames.noBorderAfterDropping); } }, TRANSITION_DURATION_DROP + CLASSNAME_ADD_INTERVAL); } @@ -270,7 +271,8 @@ export class DetailsColumnBase extends BaseComponent { if (event) { this._updateHeaderDragInfo(-1, event); } - this._root.current.classList.remove(classNames.borderWhileDragging, classNames.noBorderWhileDragging); + this._root.current.classList.remove(classNames.borderWhileDragging); + this._root.current.classList.remove(classNames.noBorderWhileDragging); } private _updateHeaderDragInfo(itemIndex: number, event?: MouseEvent) {