Fix the way sass files are loaded

CHANGELOG.md

@@ -2,6 +2,7 @@
 #### Fixes
 * Fix devtools opening when using full-screen shortcut.
 * Disable text selection in settings menu.
+* Fix canvas positioning to allow laying multiple canvases.
 
 
 ### v1.0.0-alpha.1 (2016-07-25)

README.md

@@ -1,5 +1,3 @@
-# SKQW
-
 ![SKQW Logo](src/assets/images/logo.png)
 
 A native desktop audio visualizer, built with Electron and Angular 2.

src/render/app.component.ts

@@ -1,4 +1,4 @@
-import {Component, ChangeDetectorRef, ViewChild, HostListener} from '@angular/core';
+import {Component, ChangeDetectorRef, ViewChild, HostListener, ViewEncapsulation} from '@angular/core';
 import {
     START_ANALYZER, SAMPLE, REQUEST_DEVICE_LIST, RECEIVE_DEVICE_LIST, SET_INPUT_DEVICE_ID,
     SET_GAIN, TOGGLE_NORMALIZATION, MAX_GAIN, MIN_GAIN, TOGGLE_FULLSCREEN, TOGGLE_DEVTOOLS
@@ -16,11 +16,12 @@ const {app, dialog} = require('electron').remote;
 const path = require('path');
 const storage = require('electron-json-storage');
 
-require('./styles/app.scss');
+require('style!./styles/app.scss');
 
 @Component({
     selector: 'app',
     template: require('./app.component.html'),
+    encapsulation: ViewEncapsulation.None,
     directives: [Visualizer, SettingsPanel, VSelector, Notification]
 })
 export class App {

src/render/components/gain-selector/gain-selector.component.ts

@@ -5,7 +5,7 @@ import {MAX_GAIN, MIN_GAIN} from '../../../common/constants';
 @Component({
     selector: 'gain-selector',
     template: require('./gain-selector.component.html'),
-    styles: [`:host { display: block; }`, require('./gain-selector.scss').toString()]
+    styles: [require('./gain-selector.scss')]
 })
 export class GainSelector {
     @Input() state: IState;

src/render/components/gain-selector/gain-selector.scss

@@ -1,3 +1 @@
-.gain-selector-container {
-
-}
+:host { display: block; }

src/render/components/library-path-selector/library-path-selector.component.ts

@@ -3,7 +3,7 @@ import {Component, Input, EventEmitter, Output} from '@angular/core';
 @Component({
     selector: 'library-path-selector',
     template: require('./library-path-selector.component.html'),
-    styles: [`:host { position: relative; }`, require('./library-path-selector.scss').toString()]
+    styles: [require('./library-path-selector.scss')]
 }) 
 export class LibraryPathSelector { 
     @Input() library: { id: number; name: string; }[];

src/render/components/library-path-selector/library-path-selector.scss

@@ -1,3 +1,7 @@
+:host {
+  position: relative;
+}
+
 .none-found {
   color: #af211a !important;
 }

src/render/components/notification/notification.component.ts

@@ -5,7 +5,7 @@ import {NotificationService} from '../../providers/notification.service';
 @Component({
     selector: 'notification',
     template: `<div class="notification-message" [class.visible]="visible">{{ message }}</div>`,
-    styles: [require('./notification.scss').toString()]
+    styles: [require('./notification.scss')]
 })
 export class Notification {
     private visible: boolean = false;

src/render/components/parameter-controls/parameter-controls.component.ts

@@ -4,7 +4,7 @@ import {IParameter, IParamUpdate} from '../../../common/models';
 @Component({
     selector: 'parameter-controls',
     template: require('./parameter-controls.component.html'),
-    styles: [`:host { display: block; }`, require('./parameter-controls.scss').toString()]
+    styles: [require('./parameter-controls.scss')]
 }) 
 export class ParameterControls {
     @Input() params: { [name: string]: IParameter };

src/render/components/parameter-controls/parameter-controls.scss

@@ -1,2 +1,3 @@
+:host { display: block; }
 .parameter-controls {
 }

src/render/components/settings-group/settings-group.component.ts

@@ -3,7 +3,7 @@ import {Component, ElementRef, Input, ViewChild} from '@angular/core';
 @Component({
     selector: 'settings-group',
     template: require('./settings-group.component.html'),
-    styles: [require('./settings-group.scss').toString()]
+    styles: [require('./settings-group.scss')]
 })
 
 export class SettingsGroup {

src/render/components/settings-panel/settings-panel.component.ts

@@ -13,7 +13,7 @@ declare var VERSION: string;
 @Component({
     selector: 'settings-panel',
     template: require('./settings-panel.component.html'),
-    styles: [require('./settings-panel.scss').toString()],
+    styles: [require('./settings-panel.scss')],
     directives: [VSelector, InputSelector, GainSelector, ParameterControls, LibraryPathSelector, SettingsGroup]
 })
 export class SettingsPanel {

src/render/components/v-selector/v-selector.component.ts

@@ -7,7 +7,7 @@ import {NotificationService} from '../../providers/notification.service';
 @Component({
     selector: 'v-selector',
     template: require('./v-selector.component.html'),
-    styles: [require('./v-selector.scss').toString()],
+    styles: [require('./v-selector.scss')],
     directives: []
 })
 export class VSelector {

src/render/components/visualizer/visualizer.component.ts

@@ -10,14 +10,7 @@ export interface IDimensions {
 @Component({
     selector: 'visualizer',
     template: ``,
-    styles: [`:host { 
-        position: absolute; 
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-    }
-    `]
+    styles: [require('./visualizer.scss')]
 })
 export class Visualizer {
 

src/render/components/visualizer/visualizer.scss

@@ -0,0 +1,17 @@
+:host {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  /deep/ canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+}
+
+

webpack.config.js

@@ -101,7 +101,7 @@ module.exports = [
                 {test: /\.css$/, loader: 'raw'},
 
                 // all css required in src/app files will be merged in js files
-                {test: /\.s[ac]ss$/, loader: 'style!css!sass'},
+                {test: /\.s[ac]ss$/, loader: 'raw!sass'},
 
                 // support for .html as raw text
                 // todo: change the loader to something that adds a hash to images