From c135aed7c9a7e06a46c4697b8d80c80a5c869b64 Mon Sep 17 00:00:00 2001 From: Attila Csanyi Date: Sun, 10 Sep 2017 22:56:03 +0200 Subject: [PATCH] Issue 388 - Device node (#397) * Issue 388 - Device node (first version before review) (#388) * fix: style linting issues * review: revert the same padding size of the level 1 components on the sidebar * feat(uhk-icon): Create uhk-icon set and fix USB device icon visibility in electron * style: Use semicolon in js files --- CONTRIBUTING.md | 8 ++ package-lock.json | 29 ++++- package.json | 1 + packages/uhk-web/src/app/app.routes.ts | 2 + .../app/components/device/device.routes.ts | 15 +++ .../src/app/components/device/index.ts | 2 + .../settings/device-settings.component.html | 4 + .../settings/device-settings.component.scss | 5 + .../settings/device-settings.component.ts | 15 +++ .../side-menu/side-menu.component.html | 122 ++++++++++-------- .../side-menu/side-menu.component.scss | 15 ++- .../side-menu/side-menu.component.ts | 1 + packages/uhk-web/src/app/web.module.ts | 2 + .../src/assets/images/icon-usb-stick.svg | 0 packages/uhk-web/src/styles.scss | 15 +++ packages/uhk-web/src/styles/_variables.scss | 1 + .../uhk-web/src/styles/uhk-icons/uhk-css.svg | 1 + .../src/styles/uhk-icons/uhk-icon.scss | 8 ++ .../uhk-web/src/svgs/icons/0401-usb-stick.svg | 8 ++ .../src/svgs/icons/scss-template.mustache | 10 ++ .../svgs/{ => keyboard/icons}/agent-icon.svg | 0 .../icons}/base-layer--blank.svg | 0 .../icons}/base-layer--dvorak.svg | 0 .../svgs/{ => keyboard/icons}/base-layer.svg | 0 .../svgs/{ => keyboard}/icons/icon__macro.svg | 0 .../icons/kbd__default--long-press.svg | 0 .../icons/kbd__default--modifier-command.svg | 0 .../icons/kbd__default--modifier-option.svg | 0 .../icons/kbd__default--modifier-shift.svg | 0 .../icons/kbd__default--modifier-windows.svg | 0 .../{ => keyboard}/icons/kbd__fn--browser.svg | 0 .../icons/kbd__fn--calculator.svg | 0 .../{ => keyboard}/icons/kbd__fn--eject.svg | 0 .../icons/kbd__fn--screen-lock.svg | 0 .../{ => keyboard}/icons/kbd__fn--search.svg | 0 .../{ => keyboard}/icons/kbd__fn--toggle.svg | 0 .../icons/kbd__media--calculator.svg | 0 .../icons/kbd__media--email-client.svg | 0 .../{ => keyboard}/icons/kbd__media--mute.svg | 0 .../{ => keyboard}/icons/kbd__media--next.svg | 0 .../icons/kbd__media--pause.svg | 0 .../{ => keyboard}/icons/kbd__media--play.svg | 0 .../{ => keyboard}/icons/kbd__media--prev.svg | 0 .../icons/kbd__media--vol-down.svg | 0 .../icons/kbd__media--vol-up.svg | 0 .../icons/kbd__media--web-browser.svg | 0 .../svgs/{ => keyboard}/icons/kbd__media.svg | 0 .../icons/kbd__mod--arrow-down.svg | 0 .../icons/kbd__mod--arrow-left.svg | 0 .../icons/kbd__mod--arrow-right.svg | 0 .../icons/kbd__mod--arrow-up.svg | 0 .../{ => keyboard}/icons/kbd__mod--menu.svg | 0 .../icons/kbd__mod--switch-keymap.svg | 0 .../icons/kbd__mouse--scroll-down.svg | 0 .../icons/kbd__mouse--scroll-left.svg | 0 .../icons/kbd__mouse--scroll-right.svg | 0 .../icons/kbd__mouse--scroll-up.svg | 0 .../svgs/{ => keyboard}/icons/kbd__mouse.svg | 0 .../icons/kbd__system_power_down.svg | 0 .../icons/kbd__system_sleep.svg | 0 .../icons/kbd__system_wake_up.svg | 0 .../{ => keyboard/icons}/segments_dvr.svg | 0 .../{ => keyboard/icons}/segments_qwe.svg | 0 .../icons}/segments_template.svg | 0 scripts/generate-svg-sprites.js | 78 ++++++++--- 65 files changed, 252 insertions(+), 90 deletions(-) create mode 100644 packages/uhk-web/src/app/components/device/device.routes.ts create mode 100644 packages/uhk-web/src/app/components/device/index.ts create mode 100644 packages/uhk-web/src/app/components/device/settings/device-settings.component.html create mode 100644 packages/uhk-web/src/app/components/device/settings/device-settings.component.scss create mode 100644 packages/uhk-web/src/app/components/device/settings/device-settings.component.ts rename images/icons/0401-usb-stick.svg => packages/uhk-web/src/assets/images/icon-usb-stick.svg (100%) create mode 100644 packages/uhk-web/src/styles/uhk-icons/uhk-css.svg create mode 100644 packages/uhk-web/src/styles/uhk-icons/uhk-icon.scss create mode 100644 packages/uhk-web/src/svgs/icons/0401-usb-stick.svg create mode 100644 packages/uhk-web/src/svgs/icons/scss-template.mustache rename packages/uhk-web/src/svgs/{ => keyboard/icons}/agent-icon.svg (100%) rename packages/uhk-web/src/svgs/{ => keyboard/icons}/base-layer--blank.svg (100%) rename packages/uhk-web/src/svgs/{ => keyboard/icons}/base-layer--dvorak.svg (100%) rename packages/uhk-web/src/svgs/{ => keyboard/icons}/base-layer.svg (100%) rename packages/uhk-web/src/svgs/{ => keyboard}/icons/icon__macro.svg (100%) rename packages/uhk-web/src/svgs/{ => keyboard}/icons/kbd__default--long-press.svg (100%) rename packages/uhk-web/src/svgs/{ => keyboard}/icons/kbd__default--modifier-command.svg (100%) rename packages/uhk-web/src/svgs/{ => keyboard}/icons/kbd__default--modifier-option.svg (100%) rename packages/uhk-web/src/svgs/{ => keyboard}/icons/kbd__default--modifier-shift.svg (100%) rename packages/uhk-web/src/svgs/{ => keyboard}/icons/kbd__default--modifier-windows.svg (100%) rename packages/uhk-web/src/svgs/{ => keyboard}/icons/kbd__fn--browser.svg (100%) rename packages/uhk-web/src/svgs/{ => keyboard}/icons/kbd__fn--calculator.svg (100%) rename packages/uhk-web/src/svgs/{ => keyboard}/icons/kbd__fn--eject.svg (100%) rename packages/uhk-web/src/svgs/{ => keyboard}/icons/kbd__fn--screen-lock.svg (100%) rename packages/uhk-web/src/svgs/{ => keyboard}/icons/kbd__fn--search.svg (100%) rename packages/uhk-web/src/svgs/{ => keyboard}/icons/kbd__fn--toggle.svg (100%) rename packages/uhk-web/src/svgs/{ => keyboard}/icons/kbd__media--calculator.svg (100%) rename packages/uhk-web/src/svgs/{ => keyboard}/icons/kbd__media--email-client.svg (100%) rename packages/uhk-web/src/svgs/{ => keyboard}/icons/kbd__media--mute.svg (100%) rename packages/uhk-web/src/svgs/{ => keyboard}/icons/kbd__media--next.svg (100%) rename packages/uhk-web/src/svgs/{ => keyboard}/icons/kbd__media--pause.svg (100%) rename packages/uhk-web/src/svgs/{ => keyboard}/icons/kbd__media--play.svg (100%) rename packages/uhk-web/src/svgs/{ => keyboard}/icons/kbd__media--prev.svg (100%) rename packages/uhk-web/src/svgs/{ => keyboard}/icons/kbd__media--vol-down.svg (100%) rename packages/uhk-web/src/svgs/{ => keyboard}/icons/kbd__media--vol-up.svg (100%) rename packages/uhk-web/src/svgs/{ => keyboard}/icons/kbd__media--web-browser.svg (100%) rename packages/uhk-web/src/svgs/{ => keyboard}/icons/kbd__media.svg (100%) rename packages/uhk-web/src/svgs/{ => keyboard}/icons/kbd__mod--arrow-down.svg (100%) rename packages/uhk-web/src/svgs/{ => keyboard}/icons/kbd__mod--arrow-left.svg (100%) rename packages/uhk-web/src/svgs/{ => keyboard}/icons/kbd__mod--arrow-right.svg (100%) rename packages/uhk-web/src/svgs/{ => keyboard}/icons/kbd__mod--arrow-up.svg (100%) rename packages/uhk-web/src/svgs/{ => keyboard}/icons/kbd__mod--menu.svg (100%) rename packages/uhk-web/src/svgs/{ => keyboard}/icons/kbd__mod--switch-keymap.svg (100%) rename packages/uhk-web/src/svgs/{ => keyboard}/icons/kbd__mouse--scroll-down.svg (100%) rename packages/uhk-web/src/svgs/{ => keyboard}/icons/kbd__mouse--scroll-left.svg (100%) rename packages/uhk-web/src/svgs/{ => keyboard}/icons/kbd__mouse--scroll-right.svg (100%) rename packages/uhk-web/src/svgs/{ => keyboard}/icons/kbd__mouse--scroll-up.svg (100%) rename packages/uhk-web/src/svgs/{ => keyboard}/icons/kbd__mouse.svg (100%) rename packages/uhk-web/src/svgs/{ => keyboard}/icons/kbd__system_power_down.svg (100%) rename packages/uhk-web/src/svgs/{ => keyboard}/icons/kbd__system_sleep.svg (100%) rename packages/uhk-web/src/svgs/{ => keyboard}/icons/kbd__system_wake_up.svg (100%) rename packages/uhk-web/src/svgs/{ => keyboard/icons}/segments_dvr.svg (100%) rename packages/uhk-web/src/svgs/{ => keyboard/icons}/segments_qwe.svg (100%) rename packages/uhk-web/src/svgs/{ => keyboard/icons}/segments_template.svg (100%) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6d801e92..bb6b5a9c 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -13,3 +13,11 @@ Contributors are most welcome and appreciated beyond words! 3. We let you know if somebody is already working on the issue, and thank you for being awesome for considering to contribute. 4. Send a pull request of your contribution. You're welcome to send the PR early on even if it's incomplete. This way, we'll be able to provide early feedback which will save time for everyone involved. 5. Fix your PR if needed, and make sure that it passes continuous integration tests. If everything looks good we'll merge your PR, and pop a bottle of champagne to celebrate you! + +## Add icon to uhk-icon set + +1. Copy svg file(s) to packages/uhk-web/src/svgs/icons folder +2. run `$ npm run sprites` + +The icon available as .uhk-icon- css selector. + diff --git a/package-lock.json b/package-lock.json index efb36c15..88d878cc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1025,7 +1025,7 @@ "dev": true, "requires": { "graceful-fs": "4.1.11", - "mkdirp": "0.5.0" + "mkdirp": "0.5.1" } }, "co": { @@ -2968,6 +2968,21 @@ "ms": "0.7.1" } }, + "minimist": { + "version": "0.0.8", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", + "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", + "dev": true + }, + "mkdirp": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.0.tgz", + "integrity": "sha1-HXMHam35hs2TROFecfzAWkyavxI=", + "dev": true, + "requires": { + "minimist": "0.0.8" + } + }, "ms": { "version": "0.7.1", "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.1.tgz", @@ -4108,7 +4123,7 @@ "requires": { "graceful-fs": "4.1.11", "inherits": "2.0.3", - "mkdirp": "0.5.0", + "mkdirp": "0.5.1", "rimraf": "2.6.1" } }, @@ -6152,9 +6167,9 @@ "dev": true }, "mkdirp": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.0.tgz", - "integrity": "sha1-HXMHam35hs2TROFecfzAWkyavxI=", + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", + "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "dev": true, "requires": { "minimist": "0.0.8" @@ -6257,7 +6272,7 @@ "glob": "7.1.2", "graceful-fs": "4.1.11", "minimatch": "3.0.4", - "mkdirp": "0.5.0", + "mkdirp": "0.5.1", "nopt": "3.0.6", "npmlog": "4.1.2", "osenv": "0.1.4", @@ -9091,7 +9106,7 @@ "loader-runner": "2.3.0", "loader-utils": "0.2.17", "memory-fs": "0.4.1", - "mkdirp": "0.5.0", + "mkdirp": "0.5.1", "node-libs-browser": "2.0.0", "source-map": "0.5.7", "supports-color": "3.2.3", diff --git a/package.json b/package.json index 45a70299..fb59c630 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "exports-loader": "^0.6.3", "file-loader": "^0.10.0", "lerna": "^2.0.0", + "mkdirp": "0.5.1", "npm-run-all": "^4.0.2", "rimraf": "^2.6.1", "standard-version": "^4.2.0", diff --git a/packages/uhk-web/src/app/app.routes.ts b/packages/uhk-web/src/app/app.routes.ts index cfc5b6dc..e44a1989 100644 --- a/packages/uhk-web/src/app/app.routes.ts +++ b/packages/uhk-web/src/app/app.routes.ts @@ -1,6 +1,7 @@ import { ModuleWithProviders } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; +import { deviceRoutes } from './components/device'; import { addOnRoutes } from './components/add-on'; import { keymapRoutes } from './components/keymap'; import { macroRoutes } from './components/macro'; @@ -29,6 +30,7 @@ const appRoutes: Routes = [ component: MainPage, canActivate: [UhkDeviceDisconnectedGuard], children: [ + ...deviceRoutes, ...keymapRoutes, ...macroRoutes, ...addOnRoutes, diff --git a/packages/uhk-web/src/app/components/device/device.routes.ts b/packages/uhk-web/src/app/components/device/device.routes.ts new file mode 100644 index 00000000..dc731c1a --- /dev/null +++ b/packages/uhk-web/src/app/components/device/device.routes.ts @@ -0,0 +1,15 @@ +import { Routes } from '@angular/router'; + +import { DeviceSettingsComponent } from './settings/device-settings.component'; + +export const deviceRoutes: Routes = [ + { + path: '', + redirectTo: 'device', + pathMatch: 'full' + }, + { + path: 'device/settings', + component: DeviceSettingsComponent + } +]; diff --git a/packages/uhk-web/src/app/components/device/index.ts b/packages/uhk-web/src/app/components/device/index.ts new file mode 100644 index 00000000..f5850c53 --- /dev/null +++ b/packages/uhk-web/src/app/components/device/index.ts @@ -0,0 +1,2 @@ +export * from './settings/device-settings.component'; +export * from './device.routes'; diff --git a/packages/uhk-web/src/app/components/device/settings/device-settings.component.html b/packages/uhk-web/src/app/components/device/settings/device-settings.component.html new file mode 100644 index 00000000..33a20c48 --- /dev/null +++ b/packages/uhk-web/src/app/components/device/settings/device-settings.component.html @@ -0,0 +1,4 @@ +

+ + Device settings... +

diff --git a/packages/uhk-web/src/app/components/device/settings/device-settings.component.scss b/packages/uhk-web/src/app/components/device/settings/device-settings.component.scss new file mode 100644 index 00000000..0969ec68 --- /dev/null +++ b/packages/uhk-web/src/app/components/device/settings/device-settings.component.scss @@ -0,0 +1,5 @@ +:host { + overflow-y: auto; + display: block; + height: 100%; +} diff --git a/packages/uhk-web/src/app/components/device/settings/device-settings.component.ts b/packages/uhk-web/src/app/components/device/settings/device-settings.component.ts new file mode 100644 index 00000000..fb409ae7 --- /dev/null +++ b/packages/uhk-web/src/app/components/device/settings/device-settings.component.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'device-settings', + templateUrl: './device-settings.component.html', + styleUrls: ['./device-settings.component.scss'], + host: { + 'class': 'container-fluid' + } +}) +export class DeviceSettingsComponent { + + constructor() {} + +} diff --git a/packages/uhk-web/src/app/components/side-menu/side-menu.component.html b/packages/uhk-web/src/app/components/side-menu/side-menu.component.html index e7ee274f..1a435f6d 100644 --- a/packages/uhk-web/src/app/components/side-menu/side-menu.component.html +++ b/packages/uhk-web/src/app/components/side-menu/side-menu.component.html @@ -1,67 +1,77 @@