Minor UI improvements

thelevicole · Mar 24, 2018 · 75aa6ac · 75aa6ac
1 parent fa5d023
commit 75aa6ac
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 13 deletions.
diff --git a/assets/javascripts/app.js b/assets/javascripts/app.js
@@ -131,7 +131,7 @@
 				return false;
 			},
 			set: function() {
-				app.light = this.data.id;
+				app.light = this.data;
 
 				return false;
 			}
@@ -143,20 +143,22 @@
 	 */
 	Vue.component('color-picker', {
 		template: '#color-picker-template',
-		computed: {
-			light: function() {
-				return app.get_light( app.light );
-			}
-		},
 		methods: {
 			close: function() {
 				app.light = null;
 				return false;
 			}
 		},
+		computed: {
+			light: () => {
+				return app.light;
+			}
+		},
 		mounted: function() {
 			const light = this.light;
 
+			console.log(light);
+
 			var timing = false;
 
 			$(this.$el).LifxColorPicker({
@@ -177,10 +179,10 @@
 					timing = setTimeout(function() {
 
 						// Send updates to Lifx
-						connection.set_color('id:'+app.light, color.hue, color.saturation);
+						connection.set_color('id:'+light.id, color.hue, color.saturation);
 
 						// Update UI
-						app.update_light(app.light, {
+						app.update_light(light.id, {
 							color: {
 								hue: color.hue,
 								saturation: color.saturation

diff --git a/assets/sass/app.scss b/assets/sass/app.scss
@@ -27,10 +27,21 @@ header {
 	right: 0;
 	height: $header-height;
 	background: #141316;
-	text-align: right;
-	font-size: 0.75rem;
-	padding: 12px;
+	text-align: center;
+	font-size: 1rem;
+	height: 38px;
+	line-height: 38px;
 	-webkit-app-region: drag;
+	font-weight: bold;
+
+	a {
+		position: absolute;
+		top: 0;
+		right: 12px;
+		bottom: 0;
+		font-weight: normal;
+		font-size: 0.75rem;
+	}
 }
 
 .btn {

diff --git a/css/app.css b/css/app.css
diff --git a/index.html b/index.html
@@ -10,6 +10,7 @@
 	<div vue-app>
 
 		<header>
+			{{ light ? light.label : 'Lifx' }}
 			<a v-on:click.prevent="logout" v-if="access_token && lights.length">Logout</a>
 		</header>
 
@@ -29,6 +30,7 @@ <h3>An access token is required</h3>
 			<!-- List all lights -->
 			<div v-if="!light">
 				<div id="bulbs" class="text-center" v-if="lights.length">
+					<h1>Lights</h1>
 					<light-switch v-for="light in lights" :key="light.id" :data="light"/>
 				</div>
 				<h1 v-if="!lights.length" class="text-center text-white">Loading...</h1>

diff --git a/js/app.js b/js/app.js
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
   "devDependencies": {
     "babel-core": "^6.26.0",
     "electron": "~1.8.2",
+    "electron-packager": "^11.2.0",
     "gulp": "^3.9.1",
     "gulp-autoprefixer": "^5.0.0",
     "gulp-babel": "^7.0.1",