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

MDCMigration: Restyle all plugins selector component for MDC migration. #6612

Merged

Conversation

bmd3k
Copy link
Contributor

@bmd3k bmd3k commented Oct 2, 2023

This is another attempt at restyling the plugins selector component for MDC Migration.

We start by reverting the previous attempt so that we have a good base for the conversion.
(See b846aae)

We then take the approach of attempting to adjust the current styling to mdc components as much as possible, in order to preserve current styling and current behavior.
(See 4012cae for the clean diff compared to original)

The end result is:

  • The header plugin tabs appear and behave almost identically to current.
  • The inactive plugin selector is styled slightly differently but still, in spirit, is similar to current.

Some sample screenshots but please patch it locally to play with it:

image

image

@bmd3k bmd3k force-pushed the mdc-migration-plugin-component-attempt-2 branch from 4012cae to 663297e Compare October 2, 2023 15:43
@bmd3k bmd3k requested a review from JamesHollyer October 2, 2023 16:45
Copy link
Contributor

@JamesHollyer JamesHollyer left a comment

Choose a reason for hiding this comment

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

The only major thing is the pagination color in light mode. Looks good.

@@ -36,12 +37,13 @@
</mat-tab-group>
<mat-form-field
floatLabel="never"
*ngIf="disabledPlugins.length"
*ngIf="disabledPlugins.length > 0"
Copy link
Contributor

Choose a reason for hiding this comment

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

I think just checking length is sufficient.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Probably but this is the code that was there before we made the branch so I prefer not to change it.

right: 0;
}

.mat-mdc-tab-header-pagination {
Copy link
Contributor

Choose a reason for hiding this comment

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

The color of the pagination carrot is black in light mode which looks strange. I think it should stay the same color in both light and dark mode just like the plugin name text.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Done.

class="active-plugin-list"
[selectedIndex]="getActivePluginIndex()"
animationDuration="100ms"
>
<mat-tab *ngFor="let plugin of activePlugins">
<mat-tab *ngFor="let plugin of activePlugins" [disabled]="!plugin.enabled">
Copy link
Contributor

Choose a reason for hiding this comment

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

We had some weird bugs around this disabled property before. However, this seems to all be working great.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I just kept the code that was originally there before we made the branch.

@bmd3k bmd3k merged commit 9757188 into tensorflow:MDCMigration Oct 3, 2023
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