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.

Sign up for GitHub

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: Update mat-slider in RangeInputComponent #6659

Merged
merged 2 commits into from
Oct 25, 2023
Merged

MDCMigration: Update mat-slider in RangeInputComponent #6659

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9c1cd68
MDCMigration: Update mat-slider in RangeInputComponent
JamesHollyer Oct 20, 2023
ba47394
Update tensorboard/webapp/widgets/data_table/filter_dialog_test.ts
JamesHollyer Oct 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions tensorboard/webapp/widgets/data_table/filter_dialog_test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,8 +65,8 @@ describe('filter dialog', () => {
);
expect(rangeInput).toBeTruthy();
const [lower, upper, ...rest] = rangeInput.queryAll(By.css('input'));
// There should only be two input fields.
expect(rest.length).toEqual(0);
// There should two other input fields: one for each thumb in the slider.
JamesHollyer marked this conversation as resolved.
Show resolved Hide resolved
expect(rest.length).toEqual(2);
expect(lower.nativeElement.value).toEqual('7');
expect(upper.nativeElement.value).toEqual('18');
});
Expand Down
4 changes: 3 additions & 1 deletion tensorboard/webapp/widgets/range_input/BUILD
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ tf_ng_module(
"//tensorboard/webapp/angular:expect_angular_legacy_material_slider",
"@npm//@angular/common",
"@npm//@angular/core",
"@npm//@angular/forms",
"@npm//rxjs",
],
)
Expand All @@ -47,9 +48,10 @@ tf_ts_library(
":range_input",
":types",
"//tensorboard/webapp/angular:expect_angular_core_testing",
"//tensorboard/webapp/angular:expect_angular_legacy_material_slider",
"//tensorboard/webapp/angular:expect_angular_material_slider",
"//tensorboard/webapp/angular:expect_angular_platform_browser_animations",
"@npm//@angular/core",
"@npm//@angular/forms",
"@npm//@angular/platform-browser",
"@npm//@types/jasmine",
],
Expand Down
48 changes: 13 additions & 35 deletions tensorboard/webapp/widgets/range_input/range_input_component.ng.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,41 +25,19 @@
class="upper-input"
type="number"
[disabled]="!enabled"
[value]="upperValue !== null ? upperValue : ''"
[value]="upperValue"
(change)="handleInputChange($event, Position.RIGHT)"
/>

<mat-slider
class="single-slider"
*ngIf="upperValue === null; else range"
[disabled]="!enabled"
color="primary"
[min]="min"
[max]="max"
[step]="1"
[value]="lowerValue"
(input)="handleSingleSliderChange($event.value)"
></mat-slider>

<ng-template #range>
<span *ngIf="min !== max" class="container" #container>
<span class="slider-track"></span>
<span
class="slider-track-fill"
[style.left]="getThumbPosition(lowerValue)"
[style.width]="getTrackWidth()"
></span>
<span
class="thumb"
(mousedown)="handleMouseDown($event, Position.LEFT)"
[style.left]="getThumbPosition(lowerValue)"
[class.active]="isThumbActive(Position.LEFT)"
></span>
<span
class="thumb"
(mousedown)="handleMouseDown($event, Position.RIGHT)"
[style.left]="getThumbPosition(upperValue)"
[class.active]="isThumbActive(Position.RIGHT)"
></span>
</span>
</ng-template>
<mat-slider class="slider" [min]="min" [max]="max" [step]="calculateStepSize()">
<input
matSliderStartThumb
(valueChange)="startThumbDrag($event)"
[(ngModel)]="lowerValue"
/>
<input
matSliderEndThumb
(valueChange)="endThumbDrag($event)"
[(ngModel)]="upperValue"
/>
</mat-slider>
71 changes: 1 addition & 70 deletions tensorboard/webapp/widgets/range_input/range_input_component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,6 @@ limitations under the License.
@use '@angular/material' as mat;
@import 'tensorboard/webapp/theme/tb_theme';

// Keep this in sync with range_input_component.ts's `THUMB_SIZE_PX`.
$_thumb-size: 12px;

:host {
box-sizing: border-box;
display: inline-grid;
Expand All @@ -28,7 +25,6 @@ $_thumb-size: 12px;
grid-template-columns: 1fr 1fr;
font-size: 0;
min-width: 100px;
padding: $_thumb-size * 0.5;
}

input {
Expand All @@ -49,71 +45,6 @@ input {
justify-self: flex-end;
}

.single-slider {
grid-area: slider;
padding: 0px;
::ng-deep .mat-slider-wrapper {
top: 5px;
left: 0px;
right: 0px;
}
}
::ng-deep .single-slider.mat-slider-horizontal {
height: 12px;
}

.container {
.slider {
grid-area: slider;
align-items: center;
box-sizing: border-box;
display: inline-flex;
height: $_thumb-size;
justify-content: center;
position: relative;
width: 100%;
}

.slider-track {
@include tb-theme-foreground-prop(background, slider-off);
height: 2px;
width: 100%;
}

.slider-track-fill {
position: absolute;
height: 2px;
}

.thumb {
@include tb-theme-foreground-prop(box-sadhow, slider-off, 0 0 0 1px);
border-radius: 100%;
display: inline-block;
height: $_thumb-size;
margin-left: -$_thumb-size * 0.5;
position: absolute;
top: 0;
transform-origin: center;
transition: transform 0.3s ease;
width: $_thumb-size;
will-change: transform;

&:hover {
cursor: grab;
}
&:active {
cursor: grabbing;
}
}

.thumb.active {
transform: scale(1.2);
}

.slider-track-fill,
.thumb {
background: mat.get-color-from-palette($tb-primary);

@include tb-dark-theme {
background: mat.get-color-from-palette($tb-dark-primary);
}
}
Loading