refactor(GUI): reuse WarningModalService in FlashErrorModal (#1051)

This is the first commit in a series of changes to normalise the use of
modals throughout the application.

`FlashStateModel` is basically a `WarningModalService` that cleans the
flash state, therefore making it re-use `WarningModalService` directly
removes unnecessary duplication.

Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
This commit is contained in:
Juan Cruz Viotti 2017-01-25 17:06:49 -04:00 committed by GitHub
parent 4649bace00
commit 9dd9065305
5 changed files with 14 additions and 99 deletions

View File

@ -1,47 +0,0 @@
/*
* 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.exports = function(
$uibModalInstance,
FlashStateModel,
AnalyticsService,
flashErrorData
) {
/**
* @summary Flash error data
* @property
* @public
*/
this.data = flashErrorData;
/**
* @summary Retry flash process
* @function
* @public
*
* @example
* FlashErrorModalController.retry();
*/
this.retry = () => {
FlashStateModel.resetState();
AnalyticsService.logEvent('Restart after failure');
$uibModalInstance.dismiss();
};
};

View File

@ -23,12 +23,12 @@
const angular = require('angular');
const MODULE_NAME = 'Etcher.Components.FlashErrorModal';
const FlashErrorModal = angular.module(MODULE_NAME, [
require('../modal/modal'),
require('../warning-modal/warning-modal'),
require('../../models/flash-state'),
require('../../models/selection-state'),
require('../../modules/analytics')
]);
FlashErrorModal.controller('FlashErrorModalController', require('./controllers/flash-error-modal'));
FlashErrorModal.service('FlashErrorModalService', require('./services/flash-error-modal'));
module.exports = MODULE_NAME;

View File

@ -16,9 +16,7 @@
'use strict';
const _ = require('lodash');
module.exports = function(ModalService) {
module.exports = function(WarningModalService, FlashStateModel, SelectionStateModel, AnalyticsService) {
/**
* @summary Open the flash error modal
@ -32,16 +30,18 @@ module.exports = function(ModalService) {
* FlashErrorModalService.show('The drive is not large enough!');
*/
this.show = (message) => {
return ModalService.open({
template: './components/flash-error-modal/templates/flash-error-modal.tpl.html',
controller: 'FlashErrorModalController as modal',
size: 'flash-error-modal',
resolve: {
flashErrorData: _.constant({
message: message
})
return WarningModalService.display({
confirmationLabel: 'Retry',
description: message
}).then((confirmed) => {
FlashStateModel.resetState();
if (confirmed) {
AnalyticsService.logEvent('Restart after failure');
} else {
SelectionStateModel.clear();
}
}).result;
});
};
};

View File

@ -1,19 +0,0 @@
/*
* 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-flash-error-modal .modal-title .glyphicon {
color: $palette-theme-danger-background;
}

View File

@ -1,19 +0,0 @@
<div class="modal-header">
<h4 class="modal-title">
<span class="glyphicon glyphicon-exclamation-sign"></span>
<span>An error ocurred!</span>
</h4>
<button class="close" ng-click="modal.retry()">&times;</button>
</div>
<div class="modal-body">
<div class="modal-text">
<p>{{ ::modal.data.message }}</p>
</div>
</div>
<div class="modal-footer">
<button class="button button-danger button-block"
ng-click="modal.retry()">Retry</button>
</div>