fix(core): fixed card layout performance #7701

platon-rov · 2022-02-08T13:20:06Z

Related Issue(s)

Description

Fixed card layout rework due to the performance issues. Previously there were nested *ngFor that were updated on the window's resize doing recalculation/reinitialization of the columns.

New approach based on the angular/components#13372 (comment), with the layout approach from https://tobiasahlin.com/blog/masonry-with-css. That makes possible to have only one array with all the cards, that positioned using flex-direction: column while keeping Z flow of the cards.

Also, due to the new approach fdDndKeyboardGroup & fdDndKeyboardItem directives that provide dnd with keyboard were extended and rtl support added.

Screenshots

No visual changes.

Breaking changes

Interface CardDropped of the event emitted after the cards reorganised using drag & drop feature changed, container & prevContainer fields removed.
Input property dndKeyboardDisabled removed from the DndKeyboardItemDirective, please use input property disableKeyboardDragDrop of the DndKeyboardGroupDirective instead.

Wiki https://github.com/SAP/fundamental-ngx/wiki/0.34.0-Breaking-Changes

netlify · 2022-02-08T13:26:43Z

✅ Deploy Preview for fundamental-ngx ready!

Name	Link
🔨 Latest commit	`0aa4b22`
🔍 Latest deploy log	https://app.netlify.com/sites/fundamental-ngx/deploys/623d82923600930008d6b21c
😎 Deploy Preview	https://deploy-preview-7701--fundamental-ngx.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

github-actions · 2022-02-12T00:05:07Z

This pull request is stale because it has been open 2 days with no activity. Remove stale label or comment or this will be closed in 3 days

github-actions · 2022-02-15T16:55:11Z

Visit the preview URL for this PR (updated for commit 0aa4b22):

https://fundamental-ngx-gh--pr7701-fix-core-fixed-card-csbunxei.web.app

_{(expires Mon, 28 Mar 2022 09:01:17 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

dmitry-stepanenko

nice one!

noticed a few minor things

libs/core/src/lib/fixed-card-layout/fixed-card-layout.component.ts

libs/core/src/lib/utils/drag-and-drop/dnd-keyboard-group/dnd-keyboard-group.directive.ts

...fixed-card-layout/fixed-card-layout-docs-header/fixed-card-layout-docs-header.component.html

github-actions · 2022-02-19T00:06:11Z

This pull request is stale because it has been open 2 days with no activity. Remove stale label or comment or this will be closed in 3 days

libs/core/src/lib/fixed-card-layout/fixed-card-layout.component.scss

github-actions · 2022-02-28T00:06:55Z

This pull request is stale because it has been open 2 days with no activity. Remove stale label or comment or this will be closed in 3 days

g-cheishvili · 2022-03-14T21:47:31Z

I do not know what, but something is wrong. When I launch locally I get this:

Plus I could not make any of the examples, both on hosted and local versions drag at all. Am I doing something wrong? @platon-rov connect with me

github-actions · 2022-03-17T00:06:54Z

This pull request is stale because it has been open 2 days with no activity. Remove stale label or comment or this will be closed in 3 days

platon-rov · 2022-03-17T08:46:45Z

I do not know what, but something is wrong. When I launch locally I get this. Plus I could not make any of the examples, both on hosted and local versions drag at all. Am I doing something wrong? @platon-rov connect with me

Try now, but do npm i before.

github-actions · 2022-03-20T00:07:43Z

This pull request is stale because it has been open 2 days with no activity. Remove stale label or comment or this will be closed in 3 days

BREAKING CHANGE: * CardDropped interface from the FixedCardLayoutComponent changed * Input prop dndKeyboardDisabled removed from DndKeyboardItemDirective

platon-rov added bug Something isn't working enhancement New feature or request core Core library specific issues labels Feb 8, 2022

platon-rov self-assigned this Feb 8, 2022

platon-rov force-pushed the fix/core/fixed-card-layout-perf branch from 4faebe6 to c655992 Compare February 8, 2022 13:30

platon-rov requested review from a team February 8, 2022 13:48

platon-rov changed the title ~~fix(core): fixed card layout performance~~ [WIP] fix(core): fixed card layout performance Feb 8, 2022

platon-rov force-pushed the fix/core/fixed-card-layout-perf branch from c655992 to 4b4ed90 Compare February 8, 2022 18:59

platon-rov changed the title ~~[WIP] fix(core): fixed card layout performance~~ fix(core): fixed card layout performance Feb 8, 2022

droshev added this to the Sprint 81 - Santiago milestone Feb 9, 2022

github-actions bot added the stale label Feb 12, 2022

droshev removed the stale label Feb 14, 2022

dmitry-stepanenko reviewed Feb 16, 2022

View reviewed changes

github-actions bot added the stale label Feb 19, 2022

droshev requested a review from a team February 19, 2022 01:09

droshev removed the stale label Feb 19, 2022

InnaAtanasova modified the milestones: Sprint 81 - Santiago, Sprint 82 - Buenos Aires Feb 21, 2022

mikerodonnell89 reviewed Feb 22, 2022

View reviewed changes

libs/core/src/lib/fixed-card-layout/fixed-card-layout.component.scss Outdated Show resolved Hide resolved

platon-rov mentioned this pull request Feb 25, 2022

fix: fixed card layout refactoring SAP/fundamental-styles#3208

Merged

github-actions bot added the stale label Feb 28, 2022

dmitry-stepanenko approved these changes Feb 28, 2022

View reviewed changes

mikerodonnell89 removed the stale label Mar 1, 2022

platon-rov force-pushed the fix/core/fixed-card-layout-perf branch from 8e4e539 to 5f08b54 Compare March 12, 2022 13:41

github-actions bot added the stale label Mar 17, 2022

N1XUS force-pushed the fix/core/fixed-card-layout-perf branch from 5f08b54 to ec39e6f Compare March 17, 2022 07:28

github-actions bot removed the stale label Mar 18, 2022

github-actions bot added the stale label Mar 20, 2022

platon-rov removed the stale label Mar 21, 2022

platon-rov force-pushed the fix/core/fixed-card-layout-perf branch from 9da6a70 to 3b95b8d Compare March 21, 2022 09:18

InnaAtanasova modified the milestones: Sprint 83 - Georgetown, Sprint 84 - Valencia Mar 22, 2022

platon-rov added 11 commits March 23, 2022 18:32

fix(core): fixed card layout perf issue

8352a4b

fix(core): fixed card layout dnd & keyboard dnd

a548476

BREAKING CHANGE: * CardDropped interface from the FixedCardLayoutComponent changed * Input prop dndKeyboardDisabled removed from DndKeyboardItemDirective

test(core): fixed card layout unit tests, refactoring

8099dc7

fix(core): fixed card layout refactoring, dnd fixes

1429bab

test(core): fixed card layout e2e

4f610a4

fix(core): fixed card layout code improvements

1f2fc2d

fix(core): fixed card layout improvements

ba764d9

fix(core): fixed card layout refactoring

deaa765

chore(core): styles version bump

100698f

fix(core): fixed card layout scrollbar issue

d3c08a9

fix(core): fixed card layout dnd placeholder styles fixes

18f263b

platon-rov force-pushed the fix/core/fixed-card-layout-perf branch from 3b95b8d to 18f263b Compare March 23, 2022 16:43

platon-rov added 2 commits March 23, 2022 19:31

test(platform): exclude flaky unit test

bd312c8

test(core): fix e2e fixed card layout

0aa4b22

platon-rov merged commit 54199c1 into main Mar 25, 2022

platon-rov deleted the fix/core/fixed-card-layout-perf branch March 25, 2022 09:30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(core): fixed card layout performance #7701

fix(core): fixed card layout performance #7701

platon-rov commented Feb 8, 2022 •

edited

Loading

netlify bot commented Feb 8, 2022 •

edited

Loading

github-actions bot commented Feb 12, 2022

github-actions bot commented Feb 15, 2022 •

edited

Loading

dmitry-stepanenko left a comment

github-actions bot commented Feb 19, 2022

github-actions bot commented Feb 28, 2022

g-cheishvili commented Mar 14, 2022

github-actions bot commented Mar 17, 2022

platon-rov commented Mar 17, 2022

github-actions bot commented Mar 20, 2022

fix(core): fixed card layout performance #7701

fix(core): fixed card layout performance #7701

Conversation

platon-rov commented Feb 8, 2022 • edited Loading

Related Issue(s)

Description

Screenshots

Breaking changes

netlify bot commented Feb 8, 2022 • edited Loading

✅ Deploy Preview for fundamental-ngx ready!

github-actions bot commented Feb 12, 2022

github-actions bot commented Feb 15, 2022 • edited Loading

dmitry-stepanenko left a comment

Choose a reason for hiding this comment

github-actions bot commented Feb 19, 2022

github-actions bot commented Feb 28, 2022

g-cheishvili commented Mar 14, 2022

github-actions bot commented Mar 17, 2022

platon-rov commented Mar 17, 2022

github-actions bot commented Mar 20, 2022

platon-rov commented Feb 8, 2022 •

edited

Loading

netlify bot commented Feb 8, 2022 •

edited

Loading

github-actions bot commented Feb 15, 2022 •

edited

Loading