Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Editor: Do not show 'Add animation' quick action on first page #11748

Merged
merged 4 commits into from
Jun 27, 2022
Merged

Editor: Do not show 'Add animation' quick action on first page #11748

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fc47b30
Editor: Don't render 'Add animation' button on first page of story
Jun 20, 2022
2902b06
Merge branch 'main' into fix/11602-remove-first-page-add-animation-bu…
swissspidy Jun 23, 2022
bfd48f6
Updated `quick-actions.md` doc.
Jun 23, 2022
a494252
Updated tests to not expect rendering of 'Add animation' button.
Jun 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 22 additions & 20 deletions docs/quick-actions.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,31 +19,33 @@ Quick actions are not limited to just the above functionality. In the future it

The actions that are displayed dynamically change depending on which element type is selected. These are outlined below:

|Selected Element Type|Available actions|
|--|--|
|Nothing selected|- Change background color<br/>- Insert media<br/>- Insert text|
|Background Image|- Replace background<br/>- Add animation<br/>- Clear filters and animation|
|Foreground Image|- Replace media<br/>- Add animation<br/>- Add link<br/>- Clear animation|
|Video|- Replace media<br/>- Add animation<br/>- Add link<br/>- Add captions<br/>- Clear filters and animation|
|Shape|- Change color<br/>- Add animation<br/>- Add link<br/>- Clear filters and animation|
|Text|- Change color<br/>- Edit text<br/>- Add animation<br/>- Add link<br/>- Clear animation|
| Selected Element Type | Available actions |
|-----------------------|-----------------------------------------------------------------------------------------------------------|
| Nothing selected | - Change background color<br/>- Insert media <br/>- Insert text |
| Background Image | - Replace background<br/>- Add animation* <br/>- Clear filters and animation |
| Foreground Image | - Replace media<br/>- Add animation* <br/>- Add link<br/>- Clear animation |
| Video | - Replace media<br/>- Add animation* <br/>- Add link<br/>- Add captions<br/>- Clear filters and animation |
| Shape | - Change color<br/>- Add animation* <br/>- Add link<br/>- Clear filters and animation |
| Text | - Change color<br/>- Edit text<br/>- Add animation*<br/>- Add link<br/>- Clear animation |

### Action functionality

Reference this table when needing to know what a quick action will do when clicked.

|Quick Action|Result|
|--|--|
|Add animation|Open and highlight the `animation` panel in the `design pane`. Focus the effect chooser dropdown.|
|Add caption|Open and highlight the `captions and subtitles` panel in the `design pane`. Focus the input.|
|Add link|Open and highlight the `link` panel in the `design pane`. Focus the input.|
|Change background color|Open and highlight the `page background` panel in the `design pane`. Focus the input.|
|Clear animation/filters and animation|Remove all filters and/or animations as specified. Display a snackbar to the user indicating that they were removed. The snackbar will contain an action button that when clicked will re-apply the styles that were removed.|
|Edit text|Open and highlight the `text` panel in the `design pane`. Focus the first input.|
|Insert media|Open and highlight the `media pane` in the `library`. Focus the media tab button.|
|Insert text|Open and highlight the `text pane` in the `library`. Focus the text tab button.|
|Replace background/media|Open and highlight one of the media panes in the `library`. The media pane opened will depend on the type of the element selected. Focus the relevant tab button.|
|Trim video|Enter video trim mode similar to button in design panel.|
| Quick Action | Result |
|---------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| Add animation* | Open and highlight the `animation` panel in the `design pane`. Focus the effect chooser dropdown. |
| Add caption | Open and highlight the `captions and subtitles` panel in the `design pane`. Focus the input. |
| Add link | Open and highlight the `link` panel in the `design pane`. Focus the input. |
| Change background color | Open and highlight the `page background` panel in the `design pane`. Focus the input. |
| Clear animation/filters and animation | Remove all filters and/or animations as specified. Display a snackbar to the user indicating that they were removed. The snackbar will contain an action button that when clicked will re-apply the styles that were removed. |
| Edit text | Open and highlight the `text` panel in the `design pane`. Focus the first input. |
| Insert media | Open and highlight the `media pane` in the `library`. Focus the media tab button. |
| Insert text | Open and highlight the `text pane` in the `library`. Focus the text tab button. |
| Replace background/media | Open and highlight one of the media panes in the `library`. The media pane opened will depend on the type of the element selected. Focus the relevant tab button. |
| Trim video | Enter video trim mode similar to button in design panel. |

> *_Add animation_ action is not available on the first page of a story.

### Visibility

Expand Down
53 changes: 9 additions & 44 deletions packages/story-editor/src/app/highlights/quickActions/test/useQuickActions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,11 +194,6 @@ const defaultQuickActions = [
];

const foregroundCommonActions = [
expect.objectContaining({
label: ACTIONS.ADD_ANIMATION.text,
onClick: expect.any(Function),
Icon: CircleSpeed,
}),
expect.objectContaining({
label: ACTIONS.ADD_LINK.text,
onClick: expect.any(Function),
Expand Down Expand Up @@ -651,12 +646,6 @@ describe('useQuickActions', () => {
const { result } = renderHook(() => useQuickActions());

result.current[1].onClick(mockClickEvent);
expect(highlight).toStrictEqual({
elementId: IMAGE_ELEMENT.id,
highlight: states.ANIMATION,
});

result.current[2].onClick(mockClickEvent);
expect(highlight).toStrictEqual({
elementId: IMAGE_ELEMENT.id,
highlight: states.LINK,
Expand All @@ -675,13 +664,13 @@ describe('useQuickActions', () => {

const { result } = renderHook(() => useQuickActions());

expect(result.current[3]).toBeUndefined();
expect(result.current[2]).toBeUndefined();
});

it('clicking `reset element` should update the element', () => {
const { result } = renderHook(() => useQuickActions());

result.current[3].onClick(mockClickEvent);
result.current[2].onClick(mockClickEvent);
expect(mockUpdateElementsById).toHaveBeenCalledWith({
elementIds: [IMAGE_ELEMENT.id],
properties: expect.any(Function),
Expand Down Expand Up @@ -724,12 +713,6 @@ describe('useQuickActions', () => {
const { result } = renderHook(() => useQuickActions());

result.current[0].onClick(mockClickEvent);
expect(highlight).toStrictEqual({
elementId: SHAPE_ELEMENT.id,
highlight: states.ANIMATION,
});

result.current[1].onClick(mockClickEvent);
expect(highlight).toStrictEqual({
elementId: SHAPE_ELEMENT.id,
highlight: states.LINK,
Expand All @@ -748,13 +731,13 @@ describe('useQuickActions', () => {

const { result } = renderHook(() => useQuickActions());

expect(result.current[2]).toBeUndefined();
expect(result.current[1]).toBeUndefined();
});

it('clicking `clear animations` should call `updateElementsById`', () => {
const { result } = renderHook(() => useQuickActions());

result.current[2].onClick(mockClickEvent);
result.current[1].onClick(mockClickEvent);
expect(mockUpdateElementsById).toHaveBeenCalledWith({
elementIds: [SHAPE_ELEMENT.id],
properties: expect.any(Function),
Expand Down Expand Up @@ -782,12 +765,6 @@ describe('useQuickActions', () => {
const { result } = renderHook(() => useQuickActions());

result.current[1].onClick(mockClickEvent);
expect(highlight).toStrictEqual({
elementId: TEXT_ELEMENT.id,
highlight: states.ANIMATION,
});

result.current[2].onClick(mockClickEvent);
expect(highlight).toStrictEqual({
elementId: TEXT_ELEMENT.id,
highlight: states.LINK,
Expand All @@ -806,7 +783,7 @@ describe('useQuickActions', () => {

const { result } = renderHook(() => useQuickActions());

expect(result.current[3]).toBeUndefined();
expect(result.current[2]).toBeUndefined();
});

it('clicking `reset element` should update the element', () => {
Expand All @@ -826,7 +803,7 @@ describe('useQuickActions', () => {
const { result } = renderHook(() => useQuickActions());
expect(result.current).toStrictEqual(textQuickActionsWithClear);

result.current[3].onClick(mockClickEvent);
result.current[2].onClick(mockClickEvent);
expect(mockUpdateElementsById).toHaveBeenCalledWith({
elementIds: [TEXT_ELEMENT.id],
properties: expect.any(Function),
Expand Down Expand Up @@ -859,18 +836,12 @@ describe('useQuickActions', () => {
const { result } = renderHook(() => useQuickActions());

result.current[1].onClick(mockClickEvent);
expect(highlight).toStrictEqual({
elementId: VIDEO_ELEMENT.id,
highlight: states.ANIMATION,
});

result.current[2].onClick(mockClickEvent);
expect(highlight).toStrictEqual({
elementId: VIDEO_ELEMENT.id,
highlight: states.LINK,
});

result.current[3].onClick(mockClickEvent);
result.current[2].onClick(mockClickEvent);
expect(highlight).toStrictEqual({
elementId: VIDEO_ELEMENT.id,
highlight: states.CAPTIONS,
Expand All @@ -895,7 +866,7 @@ describe('useQuickActions', () => {
it(`should click \`${ACTIONS.RESET_ELEMENT.text} and update the element`, () => {
const { result } = renderHook(() => useQuickActions());

result.current[4].onClick(mockClickEvent);
result.current[3].onClick(mockClickEvent);
expect(mockUpdateElementsById).toHaveBeenCalledWith({
elementIds: [VIDEO_ELEMENT.id],
properties: expect.any(Function),
Expand Down Expand Up @@ -929,12 +900,6 @@ describe('useQuickActions', () => {
const { result } = renderHook(() => useQuickActions());

result.current[0].onClick(mockClickEvent);
expect(highlight).toStrictEqual({
elementId: STICKER_ELEMENT.id,
highlight: states.ANIMATION,
});

result.current[1].onClick(mockClickEvent);
expect(highlight).toStrictEqual({
elementId: STICKER_ELEMENT.id,
highlight: states.LINK,
Expand All @@ -959,7 +924,7 @@ describe('useQuickActions', () => {
it('clicking `reset element` should update the element', () => {
const { result } = renderHook(() => useQuickActions());

result.current[2].onClick(mockClickEvent);
result.current[1].onClick(mockClickEvent);
expect(mockUpdateElementsById).toHaveBeenCalledWith({
elementIds: [STICKER_ELEMENT.id],
properties: expect.any(Function),
Expand Down
81 changes: 50 additions & 31 deletions packages/story-editor/src/app/highlights/quickActions/useQuickActions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -268,17 +268,24 @@ const useQuickActions = () => {
const dispatchStoryEvent = useStoryTriggersDispatch();
const {
backgroundElement,
currentPageNumber,
selectedElementAnimations,
selectedElements,
updateElementsById,
} = useStory(
({
state: { currentPage, selectedElementAnimations, selectedElements },
state: {
currentPage,
currentPageNumber,
selectedElementAnimations,
selectedElements,
},
actions: { updateElementsById },
}) => ({
backgroundElement: currentPage?.elements.find(
(element) => element.isBackground
),
currentPageNumber,
selectedElementAnimations,
selectedElements,
updateElementsById,
Expand Down Expand Up @@ -532,11 +539,16 @@ const useQuickActions = () => {
() => getResetProperties(selectedElement, selectedElementAnimations),
[selectedElement, selectedElementAnimations]
);

const showClearAction = resetProperties.length > 0;

const foregroundCommonActions = useMemo(() => {
const baseActions = [
{
const commonActions = [];

// Don't show the 'Add animation' button on the first page
if (currentPageNumber > 1) {
// 'Add animation' button
commonActions.push({
Icon: CircleSpeed,
label: ACTIONS.ADD_ANIMATION.text,
onClick: (evt) => {
Expand All @@ -548,43 +560,50 @@ const useQuickActions = () => {
});
},
...actionMenuProps,
},
{
Icon: Link,
label: ACTIONS.ADD_LINK.text,
onClick: (evt) => {
handleFocusLinkPanel()(evt);
});
}

trackEvent('quick_action', {
name: ACTIONS.ADD_LINK.trackingEventName,
element: selectedElement?.type,
});
},
...actionMenuProps,
},
];

const clearAction = {
Icon: Eraser,
label: ACTIONS.RESET_ELEMENT.text,
onClick: () => {
handleElementReset({
elementId: selectedElement?.id,
resetProperties,
elementType: selectedElement?.type,
});
// 'Add link' button is always rendered
commonActions.push({
Icon: Link,
label: ACTIONS.ADD_LINK.text,
onClick: (evt) => {
handleFocusLinkPanel()(evt);

trackEvent('quick_action', {
name: ACTIONS.RESET_ELEMENT.trackingEventName,
name: ACTIONS.ADD_LINK.trackingEventName,
element: selectedElement?.type,
});
},
separator: 'top',
...actionMenuProps,
};
});

// Only show 'Reset element' button for modified elements
if (showClearAction) {
// 'Reset element' button
commonActions.push({
Icon: Eraser,
label: ACTIONS.RESET_ELEMENT.text,
onClick: () => {
handleElementReset({
elementId: selectedElement?.id,
resetProperties,
elementType: selectedElement?.type,
});

return showClearAction ? [...baseActions, clearAction] : baseActions;
trackEvent('quick_action', {
name: ACTIONS.RESET_ELEMENT.trackingEventName,
element: selectedElement?.type,
});
},
separator: 'top',
...actionMenuProps,
});
}

return commonActions;
}, [
currentPageNumber,
handleFocusAnimationPanel,
selectedElement?.id,
selectedElement?.type,
Expand Down