Mouse speed UI (#537)

* Add SliderProps interface to SliderWrapperComponent

* Implement mouse speed page

* Remove duplicate DefaultUserConfigurationService from shared module

* Add Reset speeds to default button

* Move reset button to bottom of mouse speed page

* Change mouse move slider step to 25

* Add label and tooltip handling to SliderWrapperComponent

* Use altered SliderWrapperComponent in mouse speed page

* Use altered SliderWrapperComponent in LED brightness page

* Move Reset mouse speeds confirmation popover to above button

* Add reset mouse speed settings action and effect

* Use ResetMouseSpeedSettingsAction in mouse speed page to reset settings

* Remove unused import

packages/uhk-web/src/app/components/slider-wrapper/slider-wrapper.component.html

@@ -1,13 +1,24 @@
-<div class="slider-container">
-    <nouislider
-        [min]="min"
-        [max]="max"
-        [step]="step"
-        [keyboard]="true"
-        [tooltips]="true"
-        [(ngModel)]="value"
-        (ngModelChange)="onSliderChange($event)"></nouislider>
-</div>
-<div class="slider-value">
-    <div class="value-indicator">{{value}} {{valueUnit}}</div>
+<label *ngIf="label">
+    <span>{{label}}</span>
+    <icon name="question-circle"
+            data-toggle="tooltip"
+            [title]="tooltip"
+            html="true"
+            data-placement="bottom"
+            *ngIf="tooltip"></icon>
+</label>
+<div class="slider-wrapper">
+    <div class="slider-container">
+        <nouislider
+            [min]="min"
+            [max]="max"
+            [step]="step"
+            [keyboard]="true"
+            [tooltips]="true"
+            [(ngModel)]="value"
+            (ngModelChange)="onSliderChange($event)"></nouislider>
+    </div>
+    <div class="slider-value">
+        <div class="value-indicator">{{value}} {{valueUnit}}</div>
+    </div>
 </div>

packages/uhk-web/src/app/components/slider-wrapper/slider-wrapper.component.scss

@@ -1,6 +1,18 @@
 :host {
-    display: flex;
-    flex-direction: row;
+    label {
+        display: block;
+        font-weight: normal;
+
+        icon {
+            display: inline-block;
+        }
+    }
+
+    .slider-wrapper {
+        display: flex;
+        flex-direction: row;
+        padding-left: 1.6rem;
+    }
 
     .slider-container {
         width: 80%;

packages/uhk-web/src/app/components/slider-wrapper/slider-wrapper.component.ts

@@ -13,6 +13,14 @@ export interface SliderPips {
     stepped?: boolean;
 }
 
+export interface SliderProps {
+    min: number;
+    max: number;
+    step?: number;
+    pips?: SliderPips;
+    valueUnit?: string;
+}
+
 @Component({
     selector: 'slider-wrapper',
     templateUrl: './slider-wrapper.component.html',
@@ -23,6 +31,8 @@ export interface SliderPips {
 })
 export class SliderWrapperComponent implements AfterViewInit, ControlValueAccessor, OnDestroy {
     @ViewChild(NouisliderComponent) slider: NouisliderComponent;
+    @Input() label: string;
+    @Input() tooltip: string;
     @Input() min: number;
     @Input() max: number;
     @Input() step: number;