-
-
-
-
-
+
diff --git a/lib/scss/components/_modal.scss b/lib/scss/components/_modal.scss
new file mode 100644
index 00000000..7ffcc133
--- /dev/null
+++ b/lib/scss/components/_modal.scss
@@ -0,0 +1,77 @@
+/*
+ * 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.
+ */
+
+.modal-header {
+ display: flex;
+ align-items: baseline;
+ text-transform: uppercase;
+ font-size: 11px;
+}
+
+.modal-title {
+ font-size: inherit;
+ flex-grow: 1;
+}
+
+.modal-header {
+ color: $btn-default-color;
+ padding: 11px 10px 9px 20px;
+}
+
+.modal-body {
+ color: #666;
+ padding: 0 20px;
+ max-height: 250px;
+ overflow: auto;
+}
+
+// Since Etcher opens with a known width & height and its
+// not resizable, we can safely use an absolute value here
+.modal-content {
+ height: 320px;
+}
+
+.modal-body .list-group-item {
+ display: flex;
+ align-items: center;
+ border-left: none;
+ border-right: none;
+ border-radius: 0;
+ border-color: #eee;
+ padding: 12px 0;
+
+ & > .tick {
+ font-size: 11px;
+ }
+}
+
+.modal-body .list-group-item-heading {
+ font-size: 13px;
+}
+
+.modal-body .list-group-item-text {
+ line-height: 1;
+ font-size: 11px;
+ color: #aaa;
+}
+
+.modal-body .list-group-item :first-child {
+ flex-grow: 1;
+}
+
+.modal-body .list-group-item:first-child {
+ border-top: none;
+}
diff --git a/lib/scss/components/_tick.scss b/lib/scss/components/_tick.scss
index 9c2c2639..fe6eb2bf 100644
--- a/lib/scss/components/_tick.scss
+++ b/lib/scss/components/_tick.scss
@@ -19,18 +19,28 @@
display: inline-block;
border-radius: 50%;
- padding: 5px;
+ padding: 3px;
font-size: 18px;
+ color: white;
+ border: 2px solid;
+
+ &[disabled] {
+ color: lighten($color-disabled, 40);
+ border-color: lighten($color-disabled, 40);
+ background-color: transparent;
+ }
}
.tick--success {
@extend .glyphicon-ok;
background-color: rgb(95, 184, 53);
+ border-color: rgb(95, 184, 53);
}
.tick--error {
@extend .glyphicon-remove;
background-color: #d9534f;
+ border-color: #d9534f;
}
diff --git a/lib/scss/main.scss b/lib/scss/main.scss
index 69e17ccf..14252a2d 100644
--- a/lib/scss/main.scss
+++ b/lib/scss/main.scss
@@ -26,8 +26,8 @@ $btn-disabled: rgb(49, 51, 57);
$btn-min-width: 170px;
$link-color: $gray-light;
$link-hover-decoration: none;
-$btn-default-bg: rgb(243, 243, 243);
-$btn-default-color: #9a9a9a;
+$btn-default-bg: #ececec;
+$btn-default-color: #b3b3b3;
@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
@@ -38,6 +38,7 @@ $btn-default-color: #9a9a9a;
@import "./components/button";
@import "./components/tick";
@import "./components/progress-button";
+@import "./components/modal";
hero-icon[disabled] .caption {
color: $color-disabled;
@@ -51,10 +52,6 @@ hero-icon[disabled] path {
display: block;
}
-.dropdown-menu {
- width: 170px;
-}
-
body {
letter-spacing: 1px;
}
diff --git a/lib/scss/modules/_bootstrap.scss b/lib/scss/modules/_bootstrap.scss
index d78ae8fe..9180a92f 100644
--- a/lib/scss/modules/_bootstrap.scss
+++ b/lib/scss/modules/_bootstrap.scss
@@ -31,3 +31,8 @@ html {
.checkbox input[type="checkbox"]:not(:checked) + * {
color: $gray-light;
}
+
+// Disable modal opacity
+.modal-backdrop.in {
+ opacity: 0;
+}
diff --git a/package.json b/package.json
index af55b6ce..8698474f 100644
--- a/package.json
+++ b/package.json
@@ -73,8 +73,8 @@
"removedrive": "^1.0.0"
},
"dependencies": {
- "angular": "^1.4.6",
- "angular-ui-bootstrap": "^1.2.1",
+ "angular": "^1.5.3",
+ "angular-ui-bootstrap": "^1.2.5",
"angular-ui-router": "^0.2.18",
"bluebird": "^3.0.5",
"bootstrap-sass": "^3.3.5",
diff --git a/tests/browser/components/drive-selector.spec.js b/tests/browser/components/drive-selector.spec.js
new file mode 100644
index 00000000..0a0bb858
--- /dev/null
+++ b/tests/browser/components/drive-selector.spec.js
@@ -0,0 +1,135 @@
+'use strict';
+
+const m = require('mochainon');
+const angular = require('angular');
+require('angular-mocks');
+require('../../../lib/browser/components/drive-selector');
+
+describe('Browser: DriveSelector', function() {
+
+ beforeEach(angular.mock.module('Etcher.Components.DriveSelector'));
+
+ describe('DriveSelectorStateService', function() {
+
+ let DriveSelectorStateService;
+
+ beforeEach(angular.mock.inject(function(_DriveSelectorStateService_) {
+ DriveSelectorStateService = _DriveSelectorStateService_;
+ }));
+
+ describe('.toggleSelectDrive()', function() {
+
+ it('should be able to toggle a drive', function() {
+ const drive = {
+ device: '/dev/disk2',
+ name: 'USB Drive',
+ size: '16GB'
+ };
+
+ m.chai.expect(DriveSelectorStateService.getSelectedDrive()).to.not.exist;
+ DriveSelectorStateService.toggleSelectDrive(drive);
+ m.chai.expect(DriveSelectorStateService.getSelectedDrive()).to.deep.equal(drive);
+ DriveSelectorStateService.toggleSelectDrive(drive);
+ m.chai.expect(DriveSelectorStateService.getSelectedDrive()).to.not.exist;
+ });
+
+ it('should be able to change the current selected drive', function() {
+ const drive1 = {
+ device: '/dev/disk2',
+ name: 'USB Drive',
+ size: '16GB'
+ };
+
+ const drive2 = {
+ device: '/dev/disk3',
+ name: 'SDCARD Reader',
+ size: '4GB'
+ };
+
+ DriveSelectorStateService.toggleSelectDrive(drive1);
+ m.chai.expect(DriveSelectorStateService.getSelectedDrive()).to.deep.equal(drive1);
+ DriveSelectorStateService.toggleSelectDrive(drive2);
+ m.chai.expect(DriveSelectorStateService.getSelectedDrive()).to.deep.equal(drive2);
+ });
+
+ });
+
+ describe('.isSelectedDrive()', function() {
+
+ it('should always return false if no drive', function() {
+ const drive = {
+ device: '/dev/disk2',
+ name: 'USB Drive',
+ size: '16GB'
+ };
+
+ DriveSelectorStateService.selectedDrive = null;
+ m.chai.expect(DriveSelectorStateService.isSelectedDrive(drive)).to.be.false;
+ });
+
+ it('should return true if the selected drive matches', function() {
+ const drive = {
+ device: '/dev/disk2',
+ name: 'USB Drive',
+ size: '16GB'
+ };
+
+ DriveSelectorStateService.toggleSelectDrive(drive);
+ m.chai.expect(DriveSelectorStateService.isSelectedDrive(drive)).to.be.true;
+ });
+
+ it('should return false if the selected drive does not match', function() {
+ const drive1 = {
+ device: '/dev/disk2',
+ name: 'USB Drive',
+ size: '16GB'
+ };
+
+ const drive2 = {
+ device: '/dev/disk3',
+ name: 'SDCARD Reader',
+ size: '4GB'
+ };
+
+ DriveSelectorStateService.toggleSelectDrive(drive1);
+ m.chai.expect(DriveSelectorStateService.isSelectedDrive(drive2)).to.be.false;
+ });
+
+ it('should return false if there is no selected drive and an empty object is passed', function() {
+ DriveSelectorStateService.selectedDrive = undefined;
+ m.chai.expect(DriveSelectorStateService.isSelectedDrive({})).to.be.false;
+ });
+
+ });
+
+ describe('.getSelectedDrive()', function() {
+
+ it('should return undefined if no selected drive', function() {
+ DriveSelectorStateService.selectedDrive = null;
+ const drive = DriveSelectorStateService.getSelectedDrive();
+ m.chai.expect(drive).to.not.exist;
+ });
+
+ it('should return undefined if the selected drive is an empty object', function() {
+ DriveSelectorStateService.selectedDrive = {};
+ const drive = DriveSelectorStateService.getSelectedDrive();
+ m.chai.expect(drive).to.not.exist;
+ });
+
+ it('should return the selected drive if there is one', function() {
+ const selectedDrive = {
+ device: '/dev/disk2',
+ name: 'USB Drive',
+ size: '16GB'
+ };
+
+ DriveSelectorStateService.toggleSelectDrive(selectedDrive);
+ const drive = DriveSelectorStateService.getSelectedDrive();
+ m.chai.expect(drive).to.deep.equal(selectedDrive);
+ });
+
+ });
+
+ });
+
+});