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:
Juan Cruz Viotti 2016-06-11 13:52:38 -04:00 committed by GitHub
parent dc7b31f061
commit 51b6de4634
4 changed files with 52 additions and 1 deletions

View File

@ -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
*

View File

@ -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%);
}

View File

@ -3,12 +3,18 @@
<button class="close" ng-click="modal.closeModal()">&times;</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>

View File

@ -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";