From 61a1527c7e18ecaee5212280f19fb89c93041245 Mon Sep 17 00:00:00 2001 From: Juan Cruz Viotti Date: Tue, 1 Mar 2016 12:22:03 -0400 Subject: [PATCH] Implement settings screen --- build/css/main.css | 37 +++++++--- lib/browser/app.js | 12 +++- lib/browser/modules/settings.js | 94 ++++++++++++++++++++++++++ lib/index.html | 21 +++++- lib/scss/main.scss | 13 ++++ lib/scss/modules/_space.scss | 8 +++ package.json | 1 + tests/browser/modules/settings.spec.js | 51 ++++++++++++++ 8 files changed, 224 insertions(+), 13 deletions(-) create mode 100644 lib/browser/modules/settings.js create mode 100644 tests/browser/modules/settings.spec.js diff --git a/build/css/main.css b/build/css/main.css index 622f8545..a530acbf 100644 --- a/build/css/main.css +++ b/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; @@ -5854,6 +5854,9 @@ button.close { margin-top: 15px; margin-bottom: 15px; } +.space-top-huge { + margin-top: 45px; } + .space-vertical-large { margin-top: 30px; margin-bottom: 30px; } @@ -5862,6 +5865,9 @@ button.close { margin-left: 30px; margin-right: 30px; } +.space-bottom-large { + margin-bottom: 30px; } + .space-bottom-huge { margin-bottom: 45px; } @@ -5971,3 +5977,12 @@ body { .checkbox input[type="checkbox"] { position: initial; margin-right: 2px; } + +.checkbox input[type="checkbox"]:not(:checked) + * { + color: #ddd; } + +.btn-navigation { + position: fixed; + top: 10px; + right: 15px; + font-size: 15px; } diff --git a/lib/browser/app.js b/lib/browser/app.js index 5f818443..bba96930 100644 --- a/lib/browser/app.js +++ b/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; diff --git a/lib/browser/modules/settings.js b/lib/browser/modules/settings.js new file mode 100644 index 00000000..25372dd1 --- /dev/null +++ b/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; + }; + +}); diff --git a/lib/index.html b/lib/index.html index b2cfc368..aae44be1 100644 --- a/lib/index.html +++ b/lib/index.html @@ -25,7 +25,7 @@ -
+
@@ -136,6 +136,25 @@
+
+
+ + +
+

Settings

+ +
+ +
+
+
+
+
diff --git a/lib/scss/main.scss b/lib/scss/main.scss index 45941cf8..61e53c9c 100644 --- a/lib/scss/main.scss +++ b/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"; @@ -177,3 +179,14 @@ body { position: initial; margin-right: 2px; } + +.checkbox input[type="checkbox"]:not(:checked) + * { + color: $gray-light; +} + +.btn-navigation { + position: fixed; + top: 10px; + right: 15px; + font-size: 15px; +} diff --git a/lib/scss/modules/_space.scss b/lib/scss/modules/_space.scss index 9995d131..4fb3b207 100644 --- a/lib/scss/modules/_space.scss +++ b/lib/scss/modules/_space.scss @@ -28,6 +28,10 @@ $spacing-tiny: 5px; margin-bottom: $spacing-medium; } +.space-top-huge { + margin-top: $spacing-huge; +} + .space-vertical-large { margin-top: $spacing-large; margin-bottom: $spacing-large; @@ -38,6 +42,10 @@ $spacing-tiny: 5px; margin-right: $spacing-large; } +.space-bottom-large { + margin-bottom: $spacing-large; +} + .space-bottom-huge { margin-bottom: $spacing-huge; } diff --git a/package.json b/package.json index 2e2190f5..c676673f 100644 --- a/package.json +++ b/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", diff --git a/tests/browser/modules/settings.spec.js b/tests/browser/modules/settings.spec.js new file mode 100644 index 00000000..cdca9bb2 --- /dev/null +++ b/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; + }); + + }); + + }); + +});