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.

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

compactMode: add collapsible functionality + reog job card layout #697

Merged
merged 12 commits into from
Mar 11, 2024

Conversation

ivnnv
Copy link
Contributor

@ivnnv ivnnv commented Feb 27, 2024

Yeah this definitelly had a regression bug when I introduced getting the collapseJob settingsStore, this also corrects the double button, having the Collapsible.Trigger is not really needed if we control the state in our Button.

@ivnnv
Copy link
Contributor Author

ivnnv commented Mar 3, 2024

hey @felixmosh, modified this and should be ready to merge now

@felixmosh
Copy link
Owner

Cool, I'll review it asap

@felixmosh
Copy link
Owner

I've reviewed the PR, it looks buggy...
Toggle on the settings should reflect on the screen, but it doesn't, refresh updates to the expected state.

"Collapse job" should define if the card can be collapseable or not (I prefere the full card view), this means that it should add / remove the arrow button.

max-height: 500px;
}

.card + .card {
margin-top: 2rem;
margin-top: 0.75rem;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why?

@@ -3,14 +3,13 @@
box-shadow: 0 1px 1px 0 rgba(60, 75, 100, 0.14), 0 2px 1px -1px rgba(60, 75, 100, 0.12),
0 1px 3px 0 rgba(60, 75, 100, 0.2);
border-radius: 0.25rem;
padding: 1em;
padding: 0.66em;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why?

React.useEffect(() => {
if (isOpen === undefined)
setIsOpen(!jobUrl ? true : !collapseJob)
}), [];
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This probably won't work :]

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it definitelly works, try it :)

this is "onComponentMount" so the initial state is undefined:

  • If we are on a job page, the card is instantly expanded, and then theres no collapse button.
  • If we are on the list page, the card takes the value defined in the app setting and from them controlled by only the state

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It doesn't, since the array of deps is outside of the useEffect :P

Copy link
Contributor Author

@ivnnv ivnnv Mar 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I reworked the logic to make it "useEffect-free" and handle the global state "live":

  • It defaults to the state defined globally
  • if the state at job level is changed, this is this is preserved even if the global state changed after, because now the job uses the local as its source of truth.
globalCollapse.mov

@ivnnv
Copy link
Contributor Author

ivnnv commented Mar 6, 2024

I've reviewed the PR, it looks buggy... Toggle on the settings should reflect on the screen, but it doesn't, refresh updates to the expected state.

This is not needed and it adds unneccesary complexity to the state, a user will normally just define this for the whole session/forever, wont toggle this all the time, but yeah I could make make it work as desired.

"Collapse job" should define if the card can be collapseable or not (I prefere the full card view), this means that it should add / remove the arrow button.

In this case a user would be in need of clicking like crazy for collapsing cards all the time to have a better view of the jobs that are being consumed by the second (if jobs are being properly named you most probably can infer the data they have inside an only would need to expand for specific ones which errors or logs). This would be completely unusable tbh.
If this one is a no-no for you, then is a no-no for me too and ill just continue on my fork.

@felixmosh
Copy link
Owner

@ivnnv think about it, I want the current view (without the clutter of collase expand at all... maybe only the change of the extraction of the id location to the head).

When I enable the collapse job I expect it to collapse all jobs (which is what happining if you refresh the page).

@ivnnv
Copy link
Contributor Author

ivnnv commented Mar 6, 2024

@ivnnv think about it, I want the current view (without the clutter of collase expand at all... maybe only the change of the extraction of the id location to the head).

When I enable the collapse job I expect it to collapse all jobs (which is what happining if you refresh the page).

No yeah, I get this point, its def doable and expected if all of the other settings work real-time 👍🏽

@ivnnv ivnnv requested a review from felixmosh March 6, 2024 23:35
@ivnnv
Copy link
Contributor Author

ivnnv commented Mar 9, 2024

@felixmosh this should be ready as per your requested changes now

@felixmosh felixmosh merged commit 3a0867d into felixmosh:master Mar 11, 2024
4 checks passed
@felixmosh
Copy link
Owner

Thank you, released in v5.15.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants