Merge pull request #169 from resin-io/feat/settings-screen

Implement settings screen

build/css/main.css

@@ -1085,11 +1085,11 @@ textarea {
   line-height: inherit; }
 
 a {
-  color: #5793db;
+  color: #ddd;
   text-decoration: none; }
   a:hover, a:focus {
-    color: #296cbd;
-    text-decoration: underline; }
+    color: #b7b7b7;
+    text-decoration: none; }
   a:focus {
     outline: thin dotted;
     outline: 5px auto -webkit-focus-ring-color;
@@ -3067,7 +3067,7 @@ fieldset[disabled] a.btn {
     background-color: #fff; }
 
 .btn-link {
-  color: #5793db;
+  color: #ddd;
   font-weight: normal;
   border-radius: 0; }
   .btn-link, .btn-link:active, .btn-link.active, .btn-link[disabled],
@@ -3078,8 +3078,8 @@ fieldset[disabled] a.btn {
   .btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active {
     border-color: transparent; }
   .btn-link:hover, .btn-link:focus {
-    color: #296cbd;
-    text-decoration: underline;
+    color: #b7b7b7;
+    text-decoration: none;
     background-color: transparent; }
   .btn-link[disabled]:hover, .btn-link[disabled]:focus,
   fieldset[disabled] .btn-link:hover,
@@ -3579,7 +3579,7 @@ tbody.collapse.in {
         cursor: initial; }
   .nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
     background-color: #eeeeee;
-    border-color: #5793db; }
+    border-color: #ddd; }
   .nav .nav-divider {
     height: 1px;
     margin: 8px 0;
@@ -4099,7 +4099,7 @@ tbody.collapse.in {
       padding: 6px 12px;
       line-height: 1.42857;
       text-decoration: none;
-      color: #5793db;
+      color: #ddd;
       background-color: #fff;
       border: 1px solid #ddd;
       margin-left: -1px; }
@@ -4116,7 +4116,7 @@ tbody.collapse.in {
   .pagination > li > span:hover,
   .pagination > li > span:focus {
     z-index: 2;
-    color: #296cbd;
+    color: #b7b7b7;
     background-color: #eeeeee;
     border-color: #ddd; }
   .pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus,
@@ -4284,7 +4284,7 @@ a.label:hover, a.label:focus {
     padding: 1px 5px; }
   .list-group-item.active > .badge,
   .nav-pills > .active > a > .badge {
-    color: #5793db;
+    color: #ddd;
     background-color: #fff; }
   .list-group-item > .badge {
     float: right; }
@@ -4357,7 +4357,7 @@ a.badge:hover, a.badge:focus {
 a.thumbnail:hover,
 a.thumbnail:focus,
 a.thumbnail.active {
-  border-color: #5793db; }
+  border-color: #ddd; }
 
 .alert {
   padding: 15px;
@@ -5851,13 +5851,22 @@ button.close {
   margin: 15px; }
 
 .space-vertical-medium {
-  margin: 15px 0; }
+  margin-top: 15px;
+  margin-bottom: 15px; }
+
+.space-top-huge {
+  margin-top: 45px; }
 
 .space-vertical-large {
-  margin: 30px 0; }
+  margin-top: 30px;
+  margin-bottom: 30px; }
 
 .space-horizontal-large {
-  margin: 0 30px; }
+  margin-left: 30px;
+  margin-right: 30px; }
+
+.space-bottom-large {
+  margin-bottom: 30px; }
 
 .space-bottom-huge {
   margin-bottom: 45px; }
@@ -5964,3 +5973,16 @@ body {
 .button-label {
   margin: 0 auto 15px;
   max-width: 165px; }
+
+.checkbox input[type="checkbox"] {
+  position: initial;
+  margin-right: 2px; }
+
+.checkbox input[type="checkbox"]:not(:checked) + * {
+  color: #ddd; }
+
+.btn-navigation {
+  position: fixed;
+  top: 10px;
+  right: 10px;
+  font-size: 15px; }

lib/browser/app.js

@@ -30,6 +30,7 @@ const currentWindow = BrowserWindow.fromId(1);
 
 require('angular-ui-bootstrap');
 require('./browser/modules/selection-state');
+require('./browser/modules/settings');
 require('./browser/modules/drive-scanner');
 require('./browser/modules/image-writer');
 require('./browser/modules/path');
@@ -41,13 +42,22 @@ const app = angular.module('Etcher', [
   // Etcher modules
   'Etcher.path',
   'Etcher.selection-state',
+  'Etcher.settings',
   'Etcher.drive-scanner',
   'Etcher.image-writer',
   'Etcher.analytics'
 ]);
 
-app.controller('AppController', function($q, DriveScannerService, SelectionStateService, ImageWriterService, AnalyticsService) {
+app.controller('AppController', function(
+  $q,
+  DriveScannerService,
+  SettingsService,
+  SelectionStateService,
+  ImageWriterService,
+  AnalyticsService
+) {
   let self = this;
+  this.settings = SettingsService;
   this.selection = SelectionStateService;
   this.writer = ImageWriterService;
   this.scanner = DriveScannerService;

lib/browser/modules/analytics.js

@@ -32,7 +32,8 @@ window.MIXPANEL_CUSTOM_LIB_URL = '../bower_components/mixpanel/mixpanel.js';
 require('../../../bower_components/mixpanel/mixpanel-jslib-snippet.js');
 require('../../../bower_components/angular-mixpanel/src/angular-mixpanel');
 const analytics = angular.module('Etcher.analytics', [
-  'analytics.mixpanel'
+  'analytics.mixpanel',
+  'Etcher.settings'
 ]);
 
 analytics.config(function($mixpanelProvider) {
@@ -55,21 +56,32 @@ analytics.config(function($mixpanelProvider) {
 // TrackJS integration
 // http://docs.trackjs.com/tracker/framework-integrations
 analytics.config(function($provide) {
-  $provide.decorator('$exceptionHandler', function($delegate, $window) {
+  $provide.decorator('$exceptionHandler', function($delegate, $window, $injector) {
     return function(exception, cause) {
-      $window.trackJs.track(exception);
+      const SettingsService = $injector.get('SettingsService');
+
+      if (SettingsService.data.errorReporting) {
+        $window.trackJs.track(exception);
+      }
+
       $delegate(exception, cause);
     };
   });
 
-  $provide.decorator('$log', function($delegate, $window) {
+  $provide.decorator('$log', function($delegate, $window, $injector) {
 
     // Save the original $log.debug()
     let debugFn = $delegate.debug;
 
     $delegate.debug = function(message) {
       message = new Date() + ' ' + message;
-      $window.trackJs.console.debug(message);
+
+      const SettingsService = $injector.get('SettingsService');
+
+      if (SettingsService.data.errorReporting) {
+        $window.trackJs.console.debug(message);
+      }
+
       debugFn.call(null, message);
     };
 
@@ -77,7 +89,7 @@ analytics.config(function($provide) {
   });
 });
 
-analytics.service('AnalyticsService', function($log, $mixpanel) {
+analytics.service('AnalyticsService', function($log, $mixpanel, SettingsService) {
   let self = this;
 
   /**
@@ -115,10 +127,14 @@ analytics.service('AnalyticsService', function($log, $mixpanel) {
    */
   this.logEvent = function(message, data) {
 
-    // Clone data before passing it to `mixpanel.track`
-    // since this function mutates the object adding
-    // some custom private Mixpanel properties.
-    $mixpanel.track(message, _.clone(data));
+    if (SettingsService.data.errorReporting) {
+
+      // Clone data before passing it to `mixpanel.track`
+      // since this function mutates the object adding
+      // some custom private Mixpanel properties.
+      $mixpanel.track(message, _.clone(data));
+
+    }
 
     if (data) {
       message += ` (${JSON.stringify(data)})`;

lib/browser/modules/settings.js

@@ -0,0 +1,94 @@
+/*
+ * Copyright 2016 Resin.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use strict';
+
+/**
+ * @module Etcher.settings
+ */
+
+const angular = require('angular');
+
+require('ngstorage');
+const settings = angular.module('Etcher.settings', [
+  'ngStorage'
+]);
+
+settings.service('SettingsService', function($localStorage) {
+
+  /**
+   * @summary Settings data
+   * @type Object
+   * @public
+   */
+  this.data = $localStorage.$default({
+    errorReporting: true
+  });
+
+  // All this functionality should be gone once
+  // we make use of a real router on the application.
+  // This is not the case yet since when the application
+  // was first prototyped there was only one screen
+  // and therefore a router would have been overkill.
+
+  /**
+   * @summary Configuring state
+   * @type Boolean
+   * @private
+   */
+  let configuring = false;
+
+  /**
+   * @summary Check if the user is configuring
+   * @function
+   * @public
+   *
+   * @returns {Boolean} whether is configuring
+   *
+   * @example
+   * if (SettingsService.isConfiguring()) {
+   *   console.log('User is on settings screen');
+   * }
+   */
+  this.isConfiguring = function() {
+    return configuring;
+  };
+
+  /**
+   * @summary Enter settings screen
+   * @function
+   * @public
+   *
+   * @example
+   * SettingsService.enter();
+   */
+  this.enter = function() {
+    configuring = true;
+  };
+
+  /**
+   * @summary Leave settings screen
+   * @function
+   * @public
+   *
+   * @example
+   * SettingsService.leave();
+   */
+  this.leave = function() {
+    configuring = false;
+  };
+
+});

lib/css/desktop.css

@@ -34,3 +34,7 @@ body {
   overflow: auto;
   -webkit-overflow-scrolling: touch;
 }
+
+button:focus {
+  outline: none !important;
+}

lib/index.html

@@ -25,7 +25,11 @@
     <script src="./browser/app.js"></script>
   </head>
   <body ng-app="Etcher" ng-controller="AppController as app" style="display: none">
-    <div class="content row middle-xs space-horizontal-large">
+    <div class="content row middle-xs space-horizontal-large" ng-hide="app.settings.isConfiguring()">
+      <button class="btn btn-link btn-navigation" ng-click="app.settings.enter()">
+        <span class="glyphicon glyphicon-cog"></span>
+      </button>
+
       <div class="col-xs">
         <div class="row around-xs space-bottom-huge" ng-hide="app.state.progress == 100 && !app.writer.isBurning()">
           <div class="col-xs">
@@ -136,6 +140,25 @@
       </div>
     </div>
 
+    <div class="content row space-horizontal-large space-top-huge" ng-show="app.settings.isConfiguring()">
+      <div class="col-xs" ng-show="app.settings.isConfiguring()">
+        <button class="btn btn-link btn-navigation" ng-click="app.settings.leave()">
+          <span class="glyphicon glyphicon-chevron-left"></span> Back
+        </button>
+
+        <div class="box text-left space-horizontal-large">
+          <h1 class="space-bottom-large">Settings</h1>
+
+          <div class="checkbox">
+            <label>
+              <input type="checkbox" ng-model="app.settings.data.errorReporting">
+              <span>Enable error reporting</span>
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <div class="section-footer row between-xs middle-xs">
       <div class="col-xs">
         <div class="box text-left">

lib/scss/main.scss

@@ -26,6 +26,8 @@ $btn-disabled: rgb(49, 51, 57);
 $badge-disabled: rgb(92, 94, 92);
 $btn-padding: 10px;
 $btn-min-width: 170px;
+$link-color: $gray-light;
+$link-hover-decoration: none;
 
 @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
 
@@ -171,3 +173,20 @@ body {
   // Keep some spacing at the sides
   max-width: $btn-min-width - 5px;
 }
+
+// Fix slighly checkbox vertical alignment issue
+.checkbox input[type="checkbox"] {
+  position: initial;
+  margin-right: 2px;
+}
+
+.checkbox input[type="checkbox"]:not(:checked) + * {
+  color: $gray-light;
+}
+
+.btn-navigation {
+  position: fixed;
+  top: 10px;
+  right: 10px;
+  font-size: 15px;
+}

lib/scss/modules/_space.scss

@@ -24,15 +24,26 @@ $spacing-tiny: 5px;
 }
 
 .space-vertical-medium {
-  margin: $spacing-medium 0;
+  margin-top: $spacing-medium;
+  margin-bottom: $spacing-medium;
+}
+
+.space-top-huge {
+  margin-top: $spacing-huge;
 }
 
 .space-vertical-large {
-  margin: $spacing-large 0;
+  margin-top: $spacing-large;
+  margin-bottom: $spacing-large;
 }
 
 .space-horizontal-large {
-  margin: 0 $spacing-large;
+  margin-left: $spacing-large;
+  margin-right: $spacing-large;
+}
+
+.space-bottom-large {
+  margin-bottom: $spacing-large;
 }
 
 .space-bottom-huge {

package.json

@@ -58,6 +58,7 @@
     "flexboxgrid": "^6.3.0",
     "is-elevated": "^1.0.0",
     "lodash": "^4.5.1",
+    "ngstorage": "^0.3.10",
     "resin-image-write": "^2.0.5",
     "sudo-prompt": "^2.2.0",
     "trackjs": "^2.1.16",

tests/browser/modules/settings.spec.js

@@ -0,0 +1,51 @@
+'use strict';
+
+const m = require('mochainon');
+const angular = require('angular');
+require('angular-mocks');
+require('../../../lib/browser/modules/settings');
+
+describe('Browser: Settings', function() {
+
+  beforeEach(angular.mock.module('Etcher.settings'));
+
+  describe('SettingsService', function() {
+
+    let SettingsService;
+
+    beforeEach(angular.mock.inject(function(_SettingsService_) {
+      SettingsService = _SettingsService_;
+    }));
+
+    describe('.isConfiguring()', function() {
+
+      it('should initially return false', function() {
+        m.chai.expect(SettingsService.isConfiguring()).to.be.false;
+      });
+
+    });
+
+    describe('.enter()', function() {
+
+      it('should be able to enter settings', function() {
+        m.chai.expect(SettingsService.isConfiguring()).to.be.false;
+        SettingsService.enter();
+        m.chai.expect(SettingsService.isConfiguring()).to.be.true;
+      });
+
+    });
+
+    describe('.leave()', function() {
+
+      it('should be able to leave settings', function() {
+        SettingsService.enter();
+        m.chai.expect(SettingsService.isConfiguring()).to.be.true;
+        SettingsService.leave();
+        m.chai.expect(SettingsService.isConfiguring()).to.be.false;
+      });
+
+    });
+
+  });
+
+});