Fix #1318. Reorganized Layer tools (#1346)

- Now Layers tools are only 3 by default. - Expanding the legend/tools you will see the other tools - Animation on Expand and other style improvements - A Tooltip explains every tool
geosolutions-it · Dec 12, 2016 · 685938c · 685938c
1 parent ec9d5a7
commit 685938c
Show file tree

Hide file tree

Showing 10 changed files with 110 additions and 57 deletions.
diff --git a/web/client/components/TOC/DefaultLayer.jsx b/web/client/components/TOC/DefaultLayer.jsx
@@ -16,7 +16,6 @@ const ConfirmModal = require('../maps/modals/ConfirmModal');
 const LayersTool = require('./fragments/LayersTool');
 const SettingsModal = require('./fragments/SettingsModal');
 const Message = require('../I18N/Message');
-const {Glyphicon, Button} = require('react-bootstrap');
 
 var DefaultLayer = React.createClass({
     propTypes: {
@@ -84,81 +83,86 @@ var DefaultLayer = React.createClass({
         };
     },
     renderCollapsible() {
-        if (this.props.node && this.props.node.type === 'wms') {
-            return <WMSLegend position="collapsible"/>;
-        }
-        return [];
-    },
-    renderTools() {
-        const tools = [];
+        let tools = [];
         if (this.props.activateRemoveLayer) {
-            tools.push(
-                <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>
-            );
+            tools.push((<LayersTool
+                        node={this.props.node}
+                        key="removelayer"
+                        className="clayer_removal_button"
+                        onClick={this.displayDeleteDialog}
+                        tooltip="toc.removeLayer"
+                        glyph="1-close"
+                        />));
+        }
+        tools.push(
+            <LayersTool node={this.props.node} key="toolsettings"
+                    tooltip="toc.editLayerProperties"
+                    glyph="cog"
+                    onClick={(node) => this.props.onSettings(node.id, "layers",
+                        {opacity: parseFloat(node.opacity !== undefined ? node.opacity : 1)})}/>
+        );
+        if (this.props.settings && this.props.settings.node === this.props.node.id) {
+            tools.push(<SettingsModal
+                            node={this.props.node}
+                            key="toolsettingsmodal" options={this.props.modalOptions}
+                           {...this.props.settingsOptions}
+                           retrieveLayerData={this.props.retrieveLayerData}
+                           hideSettings={this.props.hideSettings}
+                           settings={this.props.settings}
+                           element={this.props.node}
+                           updateSettings={this.props.updateSettings}
+                           updateNode={this.props.updateNode}
+                           removeNode={this.props.removeNode}
+                           includeDeleteButton={this.props.includeDeleteButtonInSettings}
+                           titleText={this.props.settingsText}
+                           opacityText={this.props.opacityText}
+                           saveText={this.props.saveText}
+                           closeText={this.props.closeText}
+                           groups={this.props.groups}/>
+               );
         }
-        if (this.props.activateSettingsTool) {
+        if (this.props.activateQueryTool) {
             tools.push(
-                <LayersTool key="toolsettings"
+                <LayersTool key="toolquery"
+                        tooltip="toc.searchFeatures"
+                        className="toc-queryTool"
+                        ref="target"
                         style={{"float": "right", cursor: "pointer"}}
-                        glyph="cog"
-                        onClick={(node) => this.props.onSettings(node.id, "layers",
-                            {opacity: parseFloat(node.opacity !== undefined ? node.opacity : 1)})}/>
-            );
-            if (this.props.settings && this.props.settings.node === this.props.node.id) {
-                tools.push(
-                    <SettingsModal key="toolsettingsmodal" options={this.props.modalOptions}
-                               {...this.props.settingsOptions}
-                               retrieveLayerData={this.props.retrieveLayerData}
-                               hideSettings={this.props.hideSettings}
-                               settings={this.props.settings}
-                               element={this.props.node}
-                               updateSettings={this.props.updateSettings}
-                               updateNode={this.props.updateNode}
-                               removeNode={this.props.removeNode}
-                               includeDeleteButton={this.props.includeDeleteButtonInSettings}
-                               titleText={this.props.settingsText}
-                               opacityText={this.props.opacityText}
-                               saveText={this.props.saveText}
-                               closeText={this.props.closeText}
-                               groups={this.props.groups}/>
+                        glyph="search"
+                        onClick={(node) => this.props.onToggleQuerypanel(node.url, node.name)}/>
                 );
-            }
         }
+        return (<div position="collapsible" className="collapsible-toc">
+             <div style={{minHeight: "35px"}}>{tools}</div>
+             <div><WMSLegend node={this.props.node}/></div>
+        </div>);
+    },
+    renderTools() {
+        const tools = [];
         if (this.props.visibilityCheckType) {
             tools.push(
                 <VisibilityCheck key="visibilitycheck"
                    checkType={this.props.visibilityCheckType}
                    propertiesChangeHandler={this.props.propertiesChangeHandler}
-                   style={{"float": "right", cursor: "pointer", marginLeft: 0, marginRight: 0}}/>
+                   style={{"float": "right", cursor: "pointer", marginLeft: 0, marginRight: 0, left: "-3px", fontSize: "29px"}}/>
             );
         }
         if (this.props.activateLegendTool) {
             tools.push(
-                <LayersTool key="toollegend"
+                <LayersTool
+                        tooltip="toc.displayLegendAndTools"
+                        key="toollegend"
                         className="toc-legendTool"
                         ref="target"
                         style={{"float": "right", cursor: "pointer"}}
-                        glyph="list"
+                        glyph="1-menu-manage"
                         onClick={(node) => this.props.onToggle(node.id, node.expanded)}/>
                 );
         }
-        if (this.props.activateQueryTool) {
-            tools.push(
-                <LayersTool key="toolquery"
-                        className="toc-queryTool"
-                        ref="target"
-                        style={{"float": "right", cursor: "pointer"}}
-                        glyph="search"
-                        onClick={(node) => this.props.onToggleQuerypanel(node.url, node.name)}/>
-                );
-        }
         if (this.props.activateZoomTool && this.props.node.bbox && !this.props.node.loadingError) {
             tools.push(
                 <LayersTool key="toolzoom"
+                        tooltip="toc.zoomToLayerExtent"
                         className="toc-zoomTool"
                         ref="target"
                         style={{"float": "right", cursor: "pointer"}}

diff --git a/web/client/components/TOC/Node.jsx b/web/client/components/TOC/Node.jsx
@@ -9,6 +9,7 @@
 var React = require('react');
 var assign = require('object-assign');
 const cx = require('classnames');
+const ReactCSSTransitionGroup = require('react-addons-css-transition-group');
 
 var SortableMixin = assign(require('react-sortable-items/SortableItemMixin'), {
     renderWithSortable: function(item) {
@@ -67,7 +68,7 @@ var Node = React.createClass({
         const nodeStyle = assign({}, this.props.style, this.props.styler(this.props.node));
         let content = (<div key={this.props.node.name} className={(expanded ? prefix + "-expanded" : prefix + "-collapsed") + " " + this.props.className} style={nodeStyle} >
             {this.renderChildren((child) => child && child.props.position !== 'collapsible')}
-            {expanded ? this.renderChildren((child) => child && child.props.position === 'collapsible') : []}
+            <ReactCSSTransitionGroup transitionName="TOC-Node" transitionEnterTimeout={250} transitionLeaveTimeout={250}>{expanded ? this.renderChildren((child) => child && child.props.position === 'collapsible') : []}</ReactCSSTransitionGroup>
         </div>);
         return this.props.isDraggable ? this.renderWithSortable(content) : content;
     }

diff --git a/web/client/components/TOC/fragments/LayersTool.jsx b/web/client/components/TOC/fragments/LayersTool.jsx
@@ -24,7 +24,6 @@ const LayersTool = React.createClass({
     },
     getDefaultProps() {
         return {
-            style: {marginRight: "2px"},
             onClick: () => {}
         };
     },

diff --git a/web/client/components/TOC/fragments/VisibilityCheck.jsx b/web/client/components/TOC/fragments/VisibilityCheck.jsx
@@ -8,12 +8,13 @@
 
 const React = require('react');
 const {isFunction} = require('lodash');
-const {Glyphicon} = require('react-bootstrap');
+const LayersTool = require('./LayersTool');
 require("./css/visibilitycheck.css");
 
 const VisibilityCheck = React.createClass({
     propTypes: {
         node: React.PropTypes.object,
+        tooltip: React.PropTypes.string,
         propertiesChangeHandler: React.PropTypes.func,
         style: React.PropTypes.object,
         checkType: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.func]),
@@ -22,15 +23,17 @@ const VisibilityCheck = React.createClass({
     },
     getDefaultProps() {
         return {
-            style: {marginRight: "2px"},
+            style: {left: "-3px"},
             checkType: "glyph",
             glyphChecked: "eye-open",
+            tooltip: "toc.toggleLayerVisibility",
             glyphUnchecked: "eye-close"
         };
     },
     render() {
         if (this.props.checkType === "glyph") {
-            return (<Glyphicon
+            return (<LayersTool
+                tooltip={this.props.tooltip}
                 style={this.props.style}
                 className={"visibility-check" + (this.props.node.visibility ? " checked" : "")}
                 data-position={this.props.node.storeIndex}

diff --git a/web/client/components/TOC/fragments/css/groupchildren.css b/web/client/components/TOC/fragments/css/groupchildren.css
@@ -33,3 +33,21 @@
 .SortableItem.is-undraggable {
   cursor: not-allowed;
 }
+
+.TOC-Node-enter, .TOC-Node-leave {
+    transition: all 250ms ease-out;
+    -o-transition: all 250ms ease-out;
+    -moz-transition: all 250ms ease-out;
+    -webkit-transition: all 250ms ease-out;
+    overflow: hidden;
+}
+.TOC-Node-enter,.TOC-Node-leave.TOC-Node-leave-active {
+    opacity: 0;
+    transform: scale(1, 0);
+    transform-origin: top;
+}
+.TOC-Node-leave, .TOC-Node-enter.TOC-Node-enter-active {
+    opacity: 1;
+    transform: scale(1, 1);
+    transform-origin: top;
+}
diff --git a/web/client/components/TOC/fragments/css/layertool.css b/web/client/components/TOC/fragments/css/layertool.css
@@ -2,4 +2,8 @@
     float: right;
      margin-top: 5px;
      cursor: pointer;
+     width:27px;
+}
+.collapsible-toc {
+    border-left: 1px solid lightblue;
 }
diff --git a/web/client/translations/data.de-DE b/web/client/translations/data.de-DE
@@ -163,6 +163,12 @@
             }
         },
         "toc": {
+            "toggleLayerVisibility": "Toggle layer visibility",
+            "displayLegendAndTools": "Display legend and tools",
+            "zoomToLayerExtent": "Zoom to layer extent",
+            "editLayerProperties": "Edit layer properties",
+            "searchFeatures": "Search on this layer...",
+            "removeLayer": "Remove layer",
             "loadingerror": "The layer has not been loaded correctly"
         },
         "print":{

diff --git a/web/client/translations/data.en-US b/web/client/translations/data.en-US
@@ -163,6 +163,12 @@
             }
         },
         "toc": {
+            "toggleLayerVisibility": "Toggle layer visibility",
+            "displayLegendAndTools": "Display legend and tools",
+            "zoomToLayerExtent": "Zoom to layer extent",
+            "editLayerProperties": "Edit layer properties",
+            "searchFeatures": "Search on this layer...",
+            "removeLayer": "Remove layer",
             "loadingerror": "The layer has not been loaded correctly"
         },
         "print":{

diff --git a/web/client/translations/data.fr-FR b/web/client/translations/data.fr-FR
@@ -164,6 +164,12 @@
             }
         },
         "toc": {
+            "toggleLayerVisibility": "Activer / désactiver la visibilité du calque",
+            "displayLegendAndTools": "Afficher la légende et les outils",
+            "zoomToLayerExtent": "Zoomer sur l'étendue du calque",
+            "editLayerProperties": "Modifier les propriétés de la couche",
+            "searchFeatures": "Recherche sur ce calque ...",
+            "removeLayer": "Supprimer la couche",
             "loadingerror": "La couche n'a pas été chargée correctement"
         },
         "print":{

diff --git a/web/client/translations/data.it-IT b/web/client/translations/data.it-IT
@@ -163,6 +163,12 @@
             }
         },
         "toc": {
+            "toggleLayerVisibility": "Attiva o disattiva la visibilità del livello",
+            "displayLegendAndTools": "Visualizza legenda e strumenti aggiuntivi",
+            "zoomToLayerExtent": "Zoom all' estensione del livello",
+            "editLayerProperties": "Modifica proprietà dal livello",
+            "searchFeatures": "Effettua una ricerca su questo livello...",
+            "removeLayer": "Rimuovi livello",
             "loadingerror": "Il livello non è stato caricato correttamente"
         },
         "print":{