fix #1181 improved the delete button on TOC's layer

web/client/components/TOC/DefaultLayer.jsx

@@ -12,11 +12,11 @@ var VisibilityCheck = require('./fragments/VisibilityCheck');
 var Title = require('./fragments/Title');
 var InlineSpinner = require('../misc/spinners/InlineSpinner/InlineSpinner');
 var WMSLegend = require('./fragments/WMSLegend');
-const ConfirmButton = require('../buttons/ConfirmButton');
+const ConfirmModal = require('../maps/modals/ConfirmModal');
 const LayersTool = require('./fragments/LayersTool');
 const SettingsModal = require('./fragments/SettingsModal');
 const Message = require('../I18N/Message');
-const {Glyphicon} = require('react-bootstrap');
+const {Glyphicon, Button} = require('react-bootstrap');
 
 var DefaultLayer = React.createClass({
     propTypes: {
@@ -39,6 +39,7 @@ var DefaultLayer = React.createClass({
         saveText: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]),
         closeText: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]),
         confirmDeleteText: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]),
+        confirmDeleteMessage: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]),
         modalOptions: React.PropTypes.object,
         settingsOptions: React.PropTypes.object,
         visibilityCheckType: React.PropTypes.string,
@@ -58,10 +59,20 @@ var DefaultLayer = React.createClass({
             includeDeleteButtonInSettings: false,
             modalOptions: {},
             settingsOptions: {},
-            confirmDeleteText: <Message msgId="layerProperties.confirmDelete" />,
+            confirmDeleteText: <Message msgId="layerProperties.deleteLayer" />,
+            confirmDeleteMessage: <Message msgId="layerProperties.deleteLayerMessage" />,
             visibilityCheckType: "glyph"
         };
     },
+    onConfirmDelete() {
+        this.props.removeNode(this.props.node.id, "layers");
+        this.closeDeleteDialog();
+    },
+    getInitialState: function() {
+        return {
+          showDeleteDialog: false
+        };
+    },
     renderCollapsible() {
         if (this.props.node && this.props.node.type === 'wms') {
             return <WMSLegend position="collapsible"/>;
@@ -72,14 +83,11 @@ var DefaultLayer = React.createClass({
         const tools = [];
         if (this.props.activateRemoveLayer) {
             tools.push(
-                <ConfirmButton key="removelayer" className="clayer_removal_button"
-                    text={(<Glyphicon glyph="1-close" />)}
-                    style={{"float": "right", cursor: "pointer", backgroundColor: "transparent", marginRight: 3, padding: 0, outline: "none"}}
-                    confirming={{text: this.props.confirmDeleteText,
-                        style: {"float": "right", cursor: "pointer", marginTop: -5}}}
-                        onConfirm={() => {
-                            this.props.removeNode(this.props.node.id, "layers");
-                        }}/>
+                <Button key="removelayer" className="clayer_removal_button"
+                    onClick={this.displayDeleteDialog}
+                    style={{"float": "right", cursor: "pointer", backgroundColor: "transparent", marginRight: 3, padding: 0, outline: "none"}}>
+                    {(<Glyphicon glyph="1-close" />)}
+                </Button>
             );
         }
         if (this.props.activateSettingsTool) {
@@ -141,8 +149,19 @@ var DefaultLayer = React.createClass({
                         />
                 {this.renderCollapsible()}
                 {this.renderTools()}
+                <ConfirmModal ref="removelayer" className="clayer_removal_confirm_button" show= {this.state.showDeleteDialog} onHide={this.closeDeleteDialog} onClose={this.closeDeleteDialog} onConfirm={this.onConfirmDelete} titleText={this.props.confirmDeleteText} confirmText={this.props.confirmDeleteText} cancelText={<Message msgId="cancel" />} body={this.props.confirmDeleteMessage} />
             </Node>
         );
+    },
+    closeDeleteDialog() {
+        this.setState({
+            showDeleteDialog: false
+        });
+    },
+    displayDeleteDialog() {
+        this.setState({
+            showDeleteDialog: true
+        });
     }
 });
 

web/client/components/TOC/__tests__/DefaultLayer-test.jsx

@@ -156,7 +156,7 @@ describe('test DefaultLayer module component', () => {
         const tool = ReactDOM.findDOMNode(TestUtils.scryRenderedDOMComponentsWithClass(comp, "clayer_removal_button")[0]);
         expect(tool).toExist();
         tool.click();
-        const confirmButton = ReactDOM.findDOMNode(TestUtils.scryRenderedDOMComponentsWithClass(comp, "btn-warning")[0]);
+        const confirmButton = document.getElementsByClassName("clayer_removal_confirm_button")[0];
         expect(confirmButton).toExist();
         confirmButton.click();
         expect(spy.calls.length).toBe(1);

web/client/components/TOC/fragments/css/layertool.css

@@ -1,6 +1,5 @@
 .toc-layer-tool {
     float: right;
      margin-top: 5px;
-     margin-right: 10px;
      cursor: pointer;
 }

web/client/components/TOC/fragments/css/visibilitycheck.css

@@ -12,9 +12,6 @@ input[type="checkbox"].visibility-check,input[type="radio"].visibility-check {
     margin-right: 5px;
     margin-top: 5px;
 }
-button.confirm-button.clayer_removal_button {
-    border-color: transparent;
-}
-button.confirm-button.clayer_removal_button .glyphicon {
-    color: #a94442!important;
+button.clayer_removal_button.btn.btn-default {
+    border: transparent;
 }

web/client/components/maps/modals/ConfirmModal.jsx

@@ -20,6 +20,7 @@ const assign = require('object-assign');
 const ConfirmModal = React.createClass({
     propTypes: {
         // props
+        className: React.PropTypes.string,
         show: React.PropTypes.bool,
         options: React.PropTypes.object,
         onConfirm: React.PropTypes.func,
@@ -39,6 +40,7 @@ const ConfirmModal = React.createClass({
             onConfirm: ()=> {},
             onClose: () => {},
             options: {},
+            className: "",
             useModal: true,
             closeGlyph: "",
             style: {},
@@ -56,6 +58,7 @@ const ConfirmModal = React.createClass({
         const footer = (<span role="footer"><div style={{"float": "left"}}></div>
         <Button
             ref="confirmButton"
+            className={this.props.className}
             key="confirmButton"
             bsStyle="primary"
             bsSize={this.props.buttonSize}

web/client/translations/data.en-US

@@ -30,6 +30,8 @@
             "style": "Style",
             "format": "Format",
             "delete": "Delete",
+            "deleteLayer":"Delete Layer",
+            "deleteLayerMessage": "Do you really want to delete this Layer?",
             "confirmDelete": "Are you sure?"
         },
         "background": "Background",

web/client/translations/data.fr-FR

@@ -30,6 +30,8 @@
             "style": "Style",
             "format": "Format",
             "delete": "Effacer",
+            "deleteLayer":"Supprimer le calque",
+            "deleteLayerMessage": "Voulez-vous vraiment supprimer cette couche?",
             "confirmDelete": "Êtes-vous sûr?"
         },
         "enable": "Activer",

web/client/translations/data.it-IT

@@ -30,6 +30,8 @@
             "style": "Stile",
             "format": "Formato",
             "delete": "Elimina",
+            "deleteLayer":"Elimina Livello",
+            "deleteLayerMessage": "Sei sicuro di voler eliminare questo livello?",
             "confirmDelete": "Sei sicuro?"
         },
         "background": "Sfondo",