From 177f10f76d3846d8c0c7eca35582e938b728e370 Mon Sep 17 00:00:00 2001 From: Lucian Date: Wed, 4 Dec 2019 13:16:35 +0000 Subject: [PATCH] Refactor tooltip modal to use react Signed-off-by: Lucian --- .../image-selector/image-selector.jsx | 38 +++++++++++--- .../controllers/tooltip-modal.js | 38 -------------- .../tooltip-modal/services/tooltip-modal.js | 49 ------------------- .../tooltip-modal/styles/_tooltip-modal.scss | 23 --------- .../templates/tooltip-modal.tpl.html | 6 --- .../components/tooltip-modal/tooltip-modal.js | 32 ------------ lib/gui/app/pages/main/controllers/main.js | 24 --------- .../app/pages/main/templates/main.tpl.html | 1 - 8 files changed, 32 insertions(+), 179 deletions(-) delete mode 100644 lib/gui/app/components/tooltip-modal/controllers/tooltip-modal.js delete mode 100644 lib/gui/app/components/tooltip-modal/services/tooltip-modal.js delete mode 100644 lib/gui/app/components/tooltip-modal/styles/_tooltip-modal.scss delete mode 100644 lib/gui/app/components/tooltip-modal/templates/tooltip-modal.tpl.html delete mode 100644 lib/gui/app/components/tooltip-modal/tooltip-modal.js diff --git a/lib/gui/app/components/image-selector/image-selector.jsx b/lib/gui/app/components/image-selector/image-selector.jsx index c23c34dc..74c63560 100644 --- a/lib/gui/app/components/image-selector/image-selector.jsx +++ b/lib/gui/app/components/image-selector/image-selector.jsx @@ -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 { {/* eslint-disable no-magic-numbers */} @@ -376,14 +392,24 @@ class ImageSelector extends React.Component { )} + + {showImageDetails && ( + { + this.setState({ showImageDetails: false }) + }} + > + {selectionState.getImagePath()} + + )} ) } } ImageSelector.propTypes = { - flashing: propTypes.bool, - showSelectedImageDetails: propTypes.func + flashing: propTypes.bool } module.exports = ImageSelector diff --git a/lib/gui/app/components/tooltip-modal/controllers/tooltip-modal.js b/lib/gui/app/components/tooltip-modal/controllers/tooltip-modal.js deleted file mode 100644 index fe3e929d..00000000 --- a/lib/gui/app/components/tooltip-modal/controllers/tooltip-modal.js +++ /dev/null @@ -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() - } -} diff --git a/lib/gui/app/components/tooltip-modal/services/tooltip-modal.js b/lib/gui/app/components/tooltip-modal/services/tooltip-modal.js deleted file mode 100644 index dcc32b27..00000000 --- a/lib/gui/app/components/tooltip-modal/services/tooltip-modal.js +++ /dev/null @@ -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 - } -} diff --git a/lib/gui/app/components/tooltip-modal/styles/_tooltip-modal.scss b/lib/gui/app/components/tooltip-modal/styles/_tooltip-modal.scss deleted file mode 100644 index 532491e1..00000000 --- a/lib/gui/app/components/tooltip-modal/styles/_tooltip-modal.scss +++ /dev/null @@ -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; -} diff --git a/lib/gui/app/components/tooltip-modal/templates/tooltip-modal.tpl.html b/lib/gui/app/components/tooltip-modal/templates/tooltip-modal.tpl.html deleted file mode 100644 index 226a3dd7..00000000 --- a/lib/gui/app/components/tooltip-modal/templates/tooltip-modal.tpl.html +++ /dev/null @@ -1,6 +0,0 @@ -
-

{{ ::modal.data.title }}

- -
- -
{{ ::modal.data.message }}
diff --git a/lib/gui/app/components/tooltip-modal/tooltip-modal.js b/lib/gui/app/components/tooltip-modal/tooltip-modal.js deleted file mode 100644 index b99f60f2..00000000 --- a/lib/gui/app/components/tooltip-modal/tooltip-modal.js +++ /dev/null @@ -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 diff --git a/lib/gui/app/pages/main/controllers/main.js b/lib/gui/app/pages/main/controllers/main.js index c995e7bc..681c939e 100644 --- a/lib/gui/app/pages/main/controllers/main.js +++ b/lib/gui/app/pages/main/controllers/main.js @@ -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 diff --git a/lib/gui/app/pages/main/templates/main.tpl.html b/lib/gui/app/pages/main/templates/main.tpl.html index c17acc03..87ce38c8 100644 --- a/lib/gui/app/pages/main/templates/main.tpl.html +++ b/lib/gui/app/pages/main/templates/main.tpl.html @@ -2,7 +2,6 @@