LED brightness UI (#520)

* Add nouislider

* Add LEDBrightnessComponent

* Move LEDBrightnessComponent to correct folder

* Add LED brightness page to side menu and device routes

* Add LEDBrightnessComponent to device index file

* Add LEDBrightnessComponent and NouisliderModule to shared module

* Remove ngModelChange from LEDBrightnessComponent until onChange is implemented

* Fix stylelint issue in led brightness component

* Add nouislider files to webpack.config.js

* Add adjusting LED brightness sliders with arrow keys

* Various tweaks to LEDBrightnessComponent

* Fix linting issues in LEDBrightnessComponent

* Allow "::ng-deep" pseudo element in stylelint config

* Add reading LED brightness settings from user configuration

* led-brightness save

* Move slider to its own wrapper component, add debounce for slider change events

* Small fixes to imports and exports of SliderWrapperComponent

* Fix slide component making change event when initial value is set

* Export SliderPips interface

* Fix LED Brightness slider pips

* Add support for value unit in SliderWrapperComponent

* Add a bit of space before LED brightness sliders so the slider handle doesn't go beyond the page in the min position

* Implement onDestroy, fix slider pip values and imports in LEDBrightnessComponent

* Fix imports, implement onDestroy in SliderWrapperComponent

* Move fix for slider pip value style to global styles file

* Reorder stylelint rules

packages/uhk-web/src/app/store/actions/user-config.ts

@@ -1,5 +1,6 @@
 import { Action } from '@ngrx/store';
 import { type, UserConfiguration, ConfigurationReply } from 'uhk-common';
+import { UserConfigurationValue } from '../../models/user-configuration-value';
 
 const PREFIX = '[user-config] ';
 
@@ -13,7 +14,8 @@ export const ActionTypes = {
     SAVE_USER_CONFIG_IN_JSON_FILE: type(PREFIX + 'Save User Config in JSON file'),
     SAVE_USER_CONFIG_IN_BIN_FILE: type(PREFIX + 'Save User Config in binary file'),
     LOAD_RESET_USER_CONFIGURATION: type(PREFIX + 'Load reset user configuration'),
-    RENAME_USER_CONFIGURATION: type(PREFIX + 'Rename user configuration')
+    RENAME_USER_CONFIGURATION: type(PREFIX + 'Rename user configuration'),
+    SET_USER_CONFIGURATION_VALUE: type(PREFIX + 'Set user configuration value')
 };
 
 export class LoadUserConfigAction implements Action {
@@ -67,6 +69,13 @@ export class RenameUserConfigurationAction implements Action {
     }
 }
 
+export class SetUserConfigurationValueAction implements Action {
+    type = ActionTypes.SET_USER_CONFIGURATION_VALUE;
+
+    constructor(public payload: UserConfigurationValue) {
+    }
+}
+
 export type Actions
     = LoadUserConfigAction
     | LoadUserConfigSuccessAction
@@ -77,4 +86,5 @@ export type Actions
     | SaveUserConfigInBinaryFileAction
     | LoadResetUserConfigurationAction
     | RenameUserConfigurationAction
+    | SetUserConfigurationValueAction
     ;

packages/uhk-web/src/app/store/effects/user-config.ts

@@ -72,7 +72,7 @@ export class UserConfigEffects {
             KeymapActions.SET_DEFAULT, KeymapActions.REMOVE, KeymapActions.SAVE_KEY,
             MacroActions.ADD, MacroActions.DUPLICATE, MacroActions.EDIT_NAME, MacroActions.REMOVE, MacroActions.ADD_ACTION,
             MacroActions.SAVE_ACTION, MacroActions.DELETE_ACTION, MacroActions.REORDER_ACTION,
-            ActionTypes.RENAME_USER_CONFIGURATION) as
+            ActionTypes.RENAME_USER_CONFIGURATION, ActionTypes.SET_USER_CONFIGURATION_VALUE) as
         Observable<KeymapAction | MacroAction | RenameUserConfigurationAction>)
         .withLatestFrom(this.store.select(getUserConfiguration), this.store.select(getPrevUserConfiguration))
         .mergeMap(([action, config, prevUserConfiguration]) => {

packages/uhk-web/src/app/store/reducers/user-configuration.ts

@@ -246,6 +246,11 @@ export function reducer(state = initialState, action: Action & { payload?: any }
             break;
         }
 
+        case ActionTypes.SET_USER_CONFIGURATION_VALUE: {
+            changedUserConfiguration[action.payload.propertyName] = action.payload.value;
+            break;
+        }
+
         default:
             break;
     }