Skip to content

Commit b846aae

Browse files
bmd3kbmd3k
committed
Revert "MDCMigration: Restyle the header tabs (tensorflow#6606)"
This reverts commit bdd7eaa.
1 parent ad8114d commit b846aae

File tree

3 files changed

+136
-50
lines changed

3 files changed

+136
-50
lines changed

‎tensorboard/webapp/header/plugin_selector_component.ng.html

+2-6
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
[selectedIndex]="getActivePluginIndex()"
2020
animationDuration="100ms"
2121
>
22-
<mat-tab *ngFor="let plugin of activePlugins">
22+
<mat-tab *ngFor="let plugin of activePlugins" [disabled]="!plugin.enabled">
2323
<ng-template mat-tab-label>
2424
<!-- Manually subscribe to the click event on the tab content element.
2525
Cannot trust the selectedTabChange event since it is async and can cause
@@ -34,11 +34,7 @@
3434
</ng-template>
3535
</mat-tab>
3636
</mat-tab-group>
37-
<mat-form-field
38-
floatLabel="never"
39-
*ngIf="disabledPlugins.length"
40-
subscriptSizing="dynamic"
41-
>
37+
<mat-form-field floatLabel="never" *ngIf="disabledPlugins.length > 0">
4238
<mat-label>Inactive</mat-label>
4339
<mat-select
4440
[value]="selectedPlugin"

‎tensorboard/webapp/header/plugin_selector_component.scss

+132-37
Original file line numberDiff line numberDiff line change
@@ -14,59 +14,154 @@ limitations under the License.
1414
==============================================================================*/
1515
@import 'tensorboard/webapp/theme/tb_theme';
1616

17-
@mixin plugin-text {
18-
color: map-get($tb-dark-foreground, text);
19-
font-weight: 500;
20-
text-transform: uppercase;
21-
}
22-
2317
:host {
2418
align-items: center;
2519
display: flex;
2620
flex: 1 1 auto;
2721
font-size: 14px;
2822
height: 100%;
29-
justify-content: space-between;
3023
overflow: hidden;
24+
}
3125

32-
// Mat tabs use the theme primary color as their text color.
33-
mat-tab-group ::ng-deep {
34-
.mat-mdc-tab {
35-
padding: 0 8px;
36-
margin: 0 16px;
37-
height: 64px;
26+
mat-form-field {
27+
flex: 0 0;
28+
/* visually center align with _text_ of the select to the center. */
29+
margin-top: 5px;
30+
/* default width is 180px */
31+
width: 130px;
32+
}
3833

39-
.mdc-tab-indicator__content {
40-
border-color: currentColor;
41-
}
34+
mat-label,
35+
mat-select,
36+
mat-option {
37+
font-weight: 500;
38+
text-transform: uppercase;
39+
}
40+
41+
.active-plugin-list {
42+
align-self: stretch;
43+
flex: 1 1 auto;
44+
overflow: hidden;
45+
}
46+
47+
.plugin-name {
48+
align-items: center;
49+
display: inline-flex;
50+
height: 100%;
51+
justify-content: center;
52+
padding: 0 12px;
53+
width: 100%;
54+
}
55+
56+
// TODO(tensorboard-team): Can probably remove after migrating away from Legacy Material components.
57+
// These styles exist in `mat-toolbar` already, but the combination of the
58+
// dark theme selector being `body.dark-theme` and the legacy select component
59+
// being used causes the styles to be overwritten in a dark theme.
60+
:host ::ng-deep .mat-form-field.mat-form-field.mat-form-field {
61+
.mat-form-field-underline,
62+
.mat-form-field-ripple,
63+
&.mat-focused .mat-form-field-ripple {
64+
background-color: currentColor;
65+
}
66+
67+
.mat-select-value,
68+
.mat-select-arrow,
69+
&.mat-focused .mat-form-field-label,
70+
&.mat-focused .mat-select-arrow {
71+
color: inherit;
72+
}
73+
}
74+
75+
:host ::ng-deep .active-plugin-list {
76+
// Override mat-tab styling. By default, mat-tab has the right styling but,
77+
// here, we are using it under dark header background. Must invert the color.
78+
79+
&.mat-primary .mat-tab-list .mat-ink-bar {
80+
background-color: currentColor;
81+
}
82+
83+
.mat-tab-label,
84+
.mat-tab-link {
85+
// Inherit from `color` on the toolbar.
86+
color: inherit;
87+
// default is .6 and it is too dark against dark background.
88+
opacity: 0.7;
89+
90+
&.mat-tab-label-active {
91+
opacity: 1;
4292
}
4393
}
4494

45-
mat-form-field ::ng-deep {
46-
// There are only two appearance options
47-
// 1) "filled" - with a background
48-
// 2) "outline" - with a border
49-
// Both will require a restyle like this. I'm opting for filled
50-
// because it is the default.
51-
.mdc-text-field--filled {
52-
background: none;
95+
.mat-tab-header-pagination-chevron {
96+
border-color: currentColor;
97+
}
98+
99+
.mat-tab-header-pagination-disabled {
100+
visibility: hidden;
101+
}
102+
103+
.mat-tab-disabled {
104+
display: none;
105+
}
106+
107+
mat-tab-list,
108+
.mat-tab-header,
109+
.mat-tab-labels,
110+
.mat-tab-label {
111+
height: 100%;
112+
}
113+
114+
.mat-tab-label {
115+
min-width: 48px; /* default is 160px which is too big for us */
116+
padding: 0; /* default is 24px */
117+
text-transform: uppercase;
118+
}
119+
120+
.mat-tab-label-content {
121+
height: 100%;
122+
}
123+
124+
mat-tab-header {
125+
.mat-tab-list {
126+
// 36px is the size of the chevron. Please see [1] for the reason.
127+
padding: 0 36px;
53128
}
54129

55-
// The bottom border of the select menu.
56-
.mdc-text-field--filled {
57-
::before {
58-
border-bottom-color: map-get($tb-dark-foreground, text);
130+
> {
131+
:first-child,
132+
.mat-tab-label-container,
133+
:last-child {
134+
// [1]: Reason for customizing the mat-tab-header.
135+
//
136+
// Default mat-tab only renders the directional overflow chevron when
137+
// width of the label container is smaller than mat-tab-header. This
138+
// causes visual jank when user resizes the screen as the mat-tab with
139+
// the chevron appears to have more padding (visually; directional
140+
// chevron can have `visibility: hidden` in case it is not needed and
141+
// appear as padding). To have the same experience as the Polymer based
142+
// Material tab header, we always set the padding of 36px on each sides
143+
// but that causes the scroll calculation to be incorrect and causes a
144+
// bug [2].
145+
// To work around it, we make everything `position: absolute`.
146+
// [2]: https://github.com/tensorflow/tensorboard/issues/4841
147+
bottom: 0;
148+
position: absolute;
149+
top: 0;
150+
}
151+
152+
:first-child,
153+
.mat-tab-label-container {
154+
left: 0;
59155
}
60-
}
61156

62-
mat-label,
63-
.mat-mdc-select-arrow {
64-
@include plugin-text;
157+
:last-child,
158+
.mat-tab-label-container {
159+
right: 0;
160+
}
161+
162+
.mat-tab-header-pagination {
163+
@include tb-theme-background-prop(background-color, app-bar);
164+
}
65165
}
66166
}
67167
}
68-
69-
mat-option,
70-
.plugin-name {
71-
@include plugin-text;
72-
}

‎tensorboard/webapp/header/plugin_selector_container.ts

+2-7
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,6 @@ const getUiPlugins = createSelector(getPlugins, (listing): UiPluginMetadata[] =>
2323
Object.keys(listing).map((key) => Object.assign({}, {id: key}, listing[key]))
2424
);
2525

26-
const getActivePlugins = createSelector(
27-
getUiPlugins,
28-
(plugins): UiPluginMetadata[] => plugins.filter((plugin) => plugin.enabled)
29-
);
30-
3126
const getDisabledPlugins = createSelector(
3227
getUiPlugins,
3328
(plugins): UiPluginMetadata[] => plugins.filter((plugin) => !plugin.enabled)
@@ -37,7 +32,7 @@ const getDisabledPlugins = createSelector(
3732
selector: 'plugin-selector',
3833
template: `
3934
<plugin-selector-component
40-
[activePlugins]="activePlugins$ | async"
35+
[activePlugins]="plugins$ | async"
4136
[disabledPlugins]="disabledPlugins$ | async"
4237
[selectedPlugin]="activePlugin$ | async"
4338
(onPluginSelectionChanged)="onPluginSelectionChange($event)"
@@ -46,7 +41,7 @@ const getDisabledPlugins = createSelector(
4641
})
4742
export class PluginSelectorContainer {
4843
readonly activePlugin$ = this.store.pipe(select(getActivePlugin));
49-
readonly activePlugins$ = this.store.pipe(select(getActivePlugins));
44+
readonly plugins$ = this.store.pipe(select(getUiPlugins));
5045
readonly disabledPlugins$ = this.store.pipe(select(getDisabledPlugins));
5146

5247
constructor(private readonly store: Store<State>) {}

0 commit comments

Comments
 (0)