diff --git a/lib/gui/app/pages/main/controllers/drive-selection.js b/lib/gui/app/pages/main/controllers/drive-selection.js index 9fd4f04f..97abced3 100644 --- a/lib/gui/app/pages/main/controllers/drive-selection.js +++ b/lib/gui/app/pages/main/controllers/drive-selection.js @@ -18,6 +18,7 @@ const _ = require('lodash') const angular = require('angular') +const prettyBytes = require('pretty-bytes') const settings = require('../../../models/settings') const selectionState = require('../../../../../shared/models/selection-state') const analytics = require('../../../modules/analytics') @@ -44,9 +45,35 @@ module.exports = function (DriveSelectorService) { return _.head(drives).description || 'Untitled Device' } + // eslint-disable-next-line no-magic-numbers + if (drives.length === 0) { + return 'No targets found' + } + return `${drives.length} Devices` } + /** + * @summary Get drive subtitle + * @function + * @public + * + * @returns {String} - drives subtitle + * + * @example + * console.log(DriveSelectionController.getDrivesSubtitle()) + * > '32 GB' + */ + this.getDrivesSubtitle = () => { + const drive = selectionState.getCurrentDrive() + + if (drive) { + return prettyBytes(drive.size) + } + + return 'Please insert at least one target device' + } + /** * @summary Get drive list label * @function @@ -109,4 +136,18 @@ module.exports = function (DriveSelectorService) { * DriveSelectionController.getMemoizedSelectedDrives() */ this.getMemoizedSelectedDrives = utils.memoize(selectionState.getSelectedDrives, angular.equals) + + /** + * @summary Should the drive selection button be shown + * @function + * @public + * + * @returns {Boolean} + * + * @example + * DriveSelectionController.shouldShowDrivesButton() + */ + this.shouldShowDrivesButton = () => { + return !process.env.ETCHER_DISABLE_EXPLICIT_DRIVE_SELECTION + } } diff --git a/lib/gui/app/pages/main/styles/_main.scss b/lib/gui/app/pages/main/styles/_main.scss index 45e8cdce..e06fe631 100644 --- a/lib/gui/app/pages/main/styles/_main.scss +++ b/lib/gui/app/pages/main/styles/_main.scss @@ -33,6 +33,10 @@ svg-icon > img[disabled] { color: $palette-theme-dark-disabled-foreground; } +.page-main .step-drive.text-warning { + color: $palette-theme-warning-background; +} + .page-main .relative { position: relative; } @@ -123,8 +127,13 @@ svg-icon > img[disabled] { } .page-main .step-name { + display: flex; + justify-content: center; + align-items: center; + height: 39px; width: 100%; margin-right: 4.5px; + margin-bottom: 10px; font-weight: bold; color: $palette-theme-primary-foreground; } diff --git a/lib/gui/app/pages/main/templates/main.tpl.html b/lib/gui/app/pages/main/templates/main.tpl.html index 10a7b89b..a5f5e22d 100644 --- a/lib/gui/app/pages/main/templates/main.tpl.html +++ b/lib/gui/app/pages/main/templates/main.tpl.html @@ -49,7 +49,7 @@