-
Notifications
You must be signed in to change notification settings - Fork 316
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
Update dashboard to design v122 (Part 1) #9896
base: develop
Are you sure you want to change the base?
Conversation
Lots more refactors still need to be done so that both backends are always present
I guess I'll avoid stacking the move to tabs on top of this PR, as this is a big PR so there may be a lot of changes needed. |
weird, i seem to be able to reproduce on develop. seems like it might be a regression |
ah. i guess we should store the "currently open project" immediately when the user clicks play, rather than after it actually opens. it's late though so probably won't be fixed today (and possibly will fix on the tabs PR instead.) |
@somebody1234 could you please rebase onto the latest changes so I can review the PR? |
@MrFlashAccount latest changes pulled. |
app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/Dialog.tsx
Outdated
Show resolved
Hide resolved
@@ -150,6 +152,11 @@ export function Dialog(props: types.DialogProps) { | |||
<div className="relative flex-auto overflow-y-auto p-3.5"> | |||
{typeof children === 'function' ? children(opts) : children} | |||
</div> | |||
{closeButton === 'floating' && ( | |||
<div className="m-floating-buttons absolute flex gap-1"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Don't use m-floating-buttons
or any other custom classes, because they make no sense and breaks style deduplication
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
style deduplication should not be a concern though
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It's always a concern
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
but why?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Because:
!important
hell- m-floating-buttons - how'd I understand how much it is in pixels?
- tw-merge doesn't know
m-floating-buttons
- We use the atomic approach, and style deduplication is one of the most important features.
- We have tailwind-variants - if you want to add styles like 'button' use this lib instead.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
!important
hell
should not happen, an m-
is still an m-
.
how'd I understand how much it is in pixels?
you're not supposed to
tw-merge doesn't know
m-floating-buttons
however tw-merge
is trivial to configure so this is not an issue in practice
style deduplication is one of the most important features
not too sure about this. because of variants, we probably end up with much more generated CSS.
We have
tailwind-variants
not sure how this is different to (or better than) using @apply
directly
also remember: the goal of tailwind is not to golf your css. the goal of tailwind is not to deduplicate styles. the goal of tailwind is to encode a design system, and arbitrary pixel values are not a design system.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
not too sure about this. because of variants, we probably end up with much more generated CSS.
It's not
not sure how this is different to (or better than) using @apply directly
Apply is considered a bad practice by the authors of tw.
you're not supposed to
Yes we supposed to. Because we. read. the. code.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We're not going to use m-floating-buttons
, button
or any other classes. Period
@@ -204,14 +184,35 @@ export default function ProjectIcon(props: ProjectIconProps) { | |||
) | |||
|
|||
React.useEffect(() => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please don't do async logic in useEffect. Use useQuery
or useMutation
instead.
@@ -272,6 +266,15 @@ export default function ProjectIcon(props: ProjectIconProps) { | |||
setShouldSwitchPage(event.shouldAutomaticallySwitchPage) | |||
setIsRunningInBackground(event.runInBackground) | |||
void openProject(event.runInBackground) | |||
void backend.getProjectDetails(item.id, item.parentId, item.title).then(project => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do not fetch directly in event handles, use react-query
app/ide-desktop/lib/dashboard/src/components/dashboard/ProjectNameColumn.tsx
Outdated
Show resolved
Hide resolved
QA ⛔️
|
re: 3 - most style issues were fixed in the second PR. i figured it's easier to implement it once rather than having to backport. thoughts? |
Pull Request Description
Close Update the Dashboard to Newest Design #9886
Incidental changes
Important Notes
None
Code review tips
Testing instructions
Screencasts
dashboard-122.mp4
Checklist
Please ensure that the following checklist has been satisfied before submitting the PR:
The documentation has been updated, if necessary.Scala,
Java,
TypeScript,
and
Rust
style guides. In case you are using a language not listed above, follow the Rust style guide.
Unit tests have been written where possible.