mirror of
https://github.com/balena-io/etcher.git
synced 2025-04-24 15:27:17 +00:00
Refactor tooltip modal to use react
Signed-off-by: Lucian <lucian.buzzo@gmail.com>
This commit is contained in:
Lucian
Lorenzo Alberto Maria Ambrosi
parent
a7a7f83e3e
commit
177f10f76d
@ -99,12 +99,14 @@ class ImageSelector extends React.Component {
|
||||
|
||||
this.state = {
|
||||
...getState(),
|
||||
warning: null
|
||||
warning: null,
|
||||
showImageDetails: false
|
||||
}
|
||||
|
||||
this.openImageSelector = this.openImageSelector.bind(this)
|
||||
this.reselectImage = this.reselectImage.bind(this)
|
||||
this.handleOnDrop = this.handleOnDrop.bind(this)
|
||||
this.showSelectedImageDetails = this.showSelectedImageDetails.bind(this)
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
@ -285,12 +287,26 @@ class ImageSelector extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
showSelectedImageDetails () {
|
||||
analytics.logEvent('Show selected image tooltip', {
|
||||
imagePath: selectionState.getImagePath(),
|
||||
flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid,
|
||||
applicationSessionUuid: store.getState().toJS().applicationSessionUuid
|
||||
})
|
||||
|
||||
this.setState({
|
||||
showImageDetails: true
|
||||
})
|
||||
}
|
||||
|
||||
// TODO add a visual change when dragging a file over the selector
|
||||
render () {
|
||||
const {
|
||||
flashing,
|
||||
showSelectedImageDetails
|
||||
flashing
|
||||
} = this.props
|
||||
const {
|
||||
showImageDetails
|
||||
} = this.state
|
||||
|
||||
const hasImage = selectionState.hasImage()
|
||||
|
||||
@ -315,7 +331,7 @@ class ImageSelector extends React.Component {
|
||||
<React.Fragment>
|
||||
<StepNameButton
|
||||
plain
|
||||
onClick={showSelectedImageDetails}
|
||||
onClick={this.showSelectedImageDetails}
|
||||
tooltip={imageBasename}
|
||||
>
|
||||
{/* eslint-disable no-magic-numbers */}
|
||||
@ -376,14 +392,24 @@ class ImageSelector extends React.Component {
|
||||
<ModalText dangerouslySetInnerHTML={{ __html: this.state.warning.message }} />
|
||||
</Modal>
|
||||
)}
|
||||
|
||||
{showImageDetails && (
|
||||
<Modal
|
||||
title="Image File Name"
|
||||
done={() => {
|
||||
this.setState({ showImageDetails: false })
|
||||
}}
|
||||
>
|
||||
{selectionState.getImagePath()}
|
||||
</Modal>
|
||||
)}
|
||||
</ThemedProvider>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
ImageSelector.propTypes = {
|
||||
flashing: propTypes.bool,
|
||||
showSelectedImageDetails: propTypes.func
|
||||
flashing: propTypes.bool
|
||||
}
|
||||
|
||||
module.exports = ImageSelector
|
||||
|
||||
@ -1,38 +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, tooltipData) {
|
||||
/**
|
||||
* @summary Tooltip data
|
||||
* @type {Object}
|
||||
* @public
|
||||
*/
|
||||
this.data = tooltipData
|
||||
|
||||
/**
|
||||
* @summary Close the modal
|
||||
* @function
|
||||
* @public
|
||||
*
|
||||
* @example
|
||||
* TooltipModalController.closeModal();
|
||||
*/
|
||||
this.closeModal = () => {
|
||||
$uibModalInstance.dismiss()
|
||||
}
|
||||
}
|
||||
@ -1,49 +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'
|
||||
|
||||
const _ = require('lodash')
|
||||
|
||||
module.exports = function (ModalService) {
|
||||
/**
|
||||
* @summary Open the tooltip modal
|
||||
* @function
|
||||
* @public
|
||||
*
|
||||
* @param {Object} options - tooltip options
|
||||
* @param {String} options.title - tooltip title
|
||||
* @param {String} options.message - tooltip message
|
||||
* @returns {Promise}
|
||||
*
|
||||
* @example
|
||||
* TooltipModalService.show({
|
||||
* title: 'Important tooltip',
|
||||
* message: 'Tooltip contents'
|
||||
* });
|
||||
*/
|
||||
this.show = (options) => {
|
||||
return ModalService.open({
|
||||
name: 'tooltip',
|
||||
template: require('../templates/tooltip-modal.tpl.html'),
|
||||
controller: 'TooltipModalController as modal',
|
||||
size: 'tooltip-modal',
|
||||
resolve: {
|
||||
tooltipData: _.constant(options)
|
||||
}
|
||||
}).result
|
||||
}
|
||||
}
|
||||
@ -1,23 +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-tooltip-modal .modal-body {
|
||||
text-align: center;
|
||||
margin: 15px;
|
||||
color: $palette-theme-light-foreground;
|
||||
background-color: darken($palette-theme-light-background, 5%);
|
||||
word-wrap: break-word;
|
||||
}
|
||||
@ -1,6 +0,0 @@
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">{{ ::modal.data.title }}</h4>
|
||||
<button class="close" ng-click="modal.closeModal()">×</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">{{ ::modal.data.message }}</div>
|
||||
@ -1,32 +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 Etcher.Components.TooltipModal
|
||||
*/
|
||||
|
||||
const angular = require('angular')
|
||||
const MODULE_NAME = 'Etcher.Components.TooltipModal'
|
||||
const TooltipModal = angular.module(MODULE_NAME, [
|
||||
require('../modal/modal')
|
||||
])
|
||||
|
||||
TooltipModal.controller('TooltipModalController', require('./controllers/tooltip-modal'))
|
||||
TooltipModal.service('TooltipModalService', require('./services/tooltip-modal'))
|
||||
|
||||
module.exports = MODULE_NAME
|
||||
@ -29,7 +29,6 @@ const messages = require('../../../../../shared/messages')
|
||||
const prettyBytes = require('pretty-bytes')
|
||||
|
||||
module.exports = function (
|
||||
TooltipModalService,
|
||||
OSOpenExternalService,
|
||||
$filter,
|
||||
$scope
|
||||
@ -83,29 +82,6 @@ module.exports = function (
|
||||
return !selectionState.hasDrive() || this.shouldDriveStepBeDisabled()
|
||||
}
|
||||
|
||||
/**
|
||||
* @summary Display a tooltip with the selected image details
|
||||
* @function
|
||||
* @public
|
||||
*
|
||||
* @returns {Promise}
|
||||
*
|
||||
* @example
|
||||
* MainController.showSelectedImageDetails()
|
||||
*/
|
||||
this.showSelectedImageDetails = () => {
|
||||
analytics.logEvent('Show selected image tooltip', {
|
||||
imagePath: selectionState.getImagePath(),
|
||||
flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid,
|
||||
applicationSessionUuid: store.getState().toJS().applicationSessionUuid
|
||||
})
|
||||
|
||||
return TooltipModalService.show({
|
||||
title: 'Image File Name',
|
||||
message: selectionState.getImagePath()
|
||||
}).catch(exceptionReporter.report)
|
||||
}
|
||||
|
||||
/**
|
||||
* @summary Get drive title based on device quantity
|
||||
* @function
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
<div class="col-xs">
|
||||
<image-selector
|
||||
flashing="main.state.isFlashing()"
|
||||
showSelectedImageDetails={main.showSelectedImageDetails}
|
||||
>
|
||||
</image-selector>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user