mirror of
https://github.com/balena-io/etcher.git
synced 2025-04-24 07:17:18 +00:00
Show an informative label if a drive is not large enough (#474)
This is a huge improvement over our current approach, which was simply to cross out the drive without further explanation. Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
This commit is contained in:
parent
dc7b31f061
commit
51b6de4634
@ -6433,6 +6433,27 @@ button.btn:focus, button.progress-button:focus {
|
||||
.svg-icon[disabled] path {
|
||||
fill: #787c7f; }
|
||||
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
.component-drive-selector-body .list-group-item-header {
|
||||
margin-bottom: 8px; }
|
||||
|
||||
.component-drive-selector-body .list-group-item[disabled] .list-group-item-heading {
|
||||
color: #aaaaaa; }
|
||||
|
||||
/*
|
||||
* Copyright 2016 Resin.io
|
||||
*
|
||||
|
@ -0,0 +1,23 @@
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
|
||||
.component-drive-selector-body .list-group-item-header {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.component-drive-selector-body .list-group-item[disabled] .list-group-item-heading {
|
||||
color: darken($gray-light, 20%);
|
||||
}
|
@ -3,12 +3,18 @@
|
||||
<button class="close" ng-click="modal.closeModal()">×</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<div class="component-drive-selector-body modal-body">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item" ng-repeat="drive in modal.drives.getDrives()"
|
||||
ng-disabled="!modal.state.isDriveLargeEnough(drive)"
|
||||
ng-click="modal.state.isDriveLargeEnough(drive) && modal.state.toggleSetDrive(drive)">
|
||||
<div>
|
||||
<header class="list-group-item-header">
|
||||
<span class="label label-danger"
|
||||
ng-hide="modal.state.isDriveLargeEnough(drive)">
|
||||
<i class="glyphicon glyphicon-resize-small"></i>
|
||||
TOO SMALL FOR IMAGE</span>
|
||||
</header>
|
||||
<h4 class="list-group-item-heading">{{ drive.description }} - {{ drive.size | gigabyte | number:1 }} GB</h4>
|
||||
<p class="list-group-item-text">{{ drive.name }}</p>
|
||||
</div>
|
||||
|
@ -47,6 +47,7 @@ $alert-padding: 13px;
|
||||
@import "../components/update-notifier/styles/update-notifier";
|
||||
@import "../components/progress-button/styles/progress-button";
|
||||
@import "../components/svg-icon/styles/svg-icon";
|
||||
@import "../components/drive-selector/styles/drive-selector";
|
||||
@import "../pages/settings/styles/settings";
|
||||
@import "../pages/finish/styles/finish";
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user