#8821 Add tooltip for layer titles in legend widgets and make them re…

…sponsive (#8822) (#8834)
geosolutions-it · Nov 17, 2022 · e99aa9f · e99aa9f
1 parent 3d6e3b2
commit e99aa9f
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 133 deletions.
diff --git a/web/client/components/widgets/view/WidgetsView.jsx b/web/client/components/widgets/view/WidgetsView.jsx
@@ -50,6 +50,7 @@ export default pure(({
  editWidget = () => { },
  onLayoutChange = () => { },
  language,
+ currentLocale,
  env,
  ...actions
 } = {}) => {
@@ -122,6 +123,7 @@ export default pure(({
  onDelete={() => deleteWidget(w)}
  onEdit={() => editWidget(w)}
  language={language}
+ currentLocale={currentLocale}
  env={env} /></div>))
  }
  </ResponsiveReactGridLayout>);

diff --git a/web/client/components/widgets/widget/LegendView.jsx b/web/client/components/widgets/widget/LegendView.jsx
@@ -6,8 +6,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-
-import { Grid, Row, Col } from 'react-bootstrap';
 import WMSLegend from '../../TOC/fragments/WMSLegend';
 import OpacitySlider from "../../TOC/fragments/OpacitySlider";
 import Title from "../../TOC/fragments/Title";
@@ -39,7 +37,7 @@ export default ({
  );
 
  return (<div className={"legend-widget"}>
- {layers.map((layer, index) => (<div key={index} className="widget-legend-toc">
+ {layers.map((layer, index) => (<div key={index} className={`widget-legend-toc${(layer.expanded || legendExpanded) ? ' expanded' : ''}`}>
  <div className="toc-default-layer-head">
  {!disableVisibility && <LayersTool
  tooltip={'toc.toggleLayerVisibility'}
@@ -48,31 +46,28 @@ export default ({
  glyph={layer.visibility ? "eye-open" : "eye-close"}
  onClick={()=> updateProperty('visibility', !layer.visibility, layer.id)}
  />}
- <Title node={layer} currentLocale={currentLocale}/>
+ <Title node={layer} currentLocale={currentLocale} tooltip/>
  {!legendExpanded && layer.type === "wms" && <LayersTool
  node={layer}
  tooltip="toc.displayLegendAndTools"
  key="toollegend"
  className={`toc-legend-icon ${layer.expanded ? 'expanded' : ''}`}
  glyph="chevron-left"
  onClick={()=> updateProperty('expanded', !layer.expanded, layer.id)} />}
- {!layer.expanded && renderOpacitySlider(layer)}
  </div>
- {(layer.expanded || legendExpanded) ? <div key="legend" className="expanded-legend-view">
- <Grid fluid>
- <Row>
- <Col xs={12}>
- <WMSLegend
- node={{ ...layer }}
- currentZoomLvl={currentZoomLvl}
- scales={scales}
- language={language}
- {...legendProps} />
- </Col>
- </Row>
- </Grid>
+ <div>
+ {(layer.expanded || legendExpanded)
+ ? <div key="legend" className="expanded-legend-view">
+ <WMSLegend
+ node={{ ...layer }}
+ currentZoomLvl={currentZoomLvl}
+ scales={scales}
+ language={language}
+ {...legendProps} />
+ </div>
+ : null}
  {renderOpacitySlider(layer)}
- </div> : null}
+ </div>
  </div>))}
  </div>);
 };
diff --git a/web/client/plugins/Dashboard.jsx b/web/client/plugins/Dashboard.jsx
@@ -32,7 +32,7 @@ import {
  isDashboardLoading,
  showConnectionsSelector
 } from '../selectors/dashboard';
-import { currentLocaleLanguageSelector } from '../selectors/locale';
+import { currentLocaleLanguageSelector, currentLocaleSelector } from '../selectors/locale';
 import { isLocalizedLayerStylesEnabledSelector, localizedLayerStylesEnvSelector } from '../selectors/localizedLayerStyles';
 import {
  dependenciesSelector,
@@ -64,8 +64,9 @@ const WidgetsView = compose(
  isLocalizedLayerStylesEnabledSelector,
  localizedLayerStylesEnvSelector,
  getMaximizedState,
+ currentLocaleSelector,
  (resource, widgets, layouts, dependencies, selectionActive, editingWidget, groups, showGroupColor, loading, isMobile, currentLocaleLanguage, isLocalizedLayerStylesEnabled,
- env, maximized) => ({
+ env, maximized, currentLocale) => ({
  resource,
  loading,
  canEdit: isMobile ? !isMobile : resource && !!resource.canEdit,
@@ -78,7 +79,8 @@ const WidgetsView = compose(
  showGroupColor,
  language: isLocalizedLayerStylesEnabled ? currentLocaleLanguage : null,
  env,
- maximized
+ maximized,
+ currentLocale
  })
  ), {
  editWidget,

diff --git a/web/client/themes/default/less/widget.less b/web/client/themes/default/less/widget.less
@@ -51,16 +51,6 @@
  .mapstore-widget-options {
  .color-var(@theme-vars[primary]);
  }
-
- .legend-widget {
- .widget-legend-toc {
- .toc-default-layer-head {
- .color-var(@theme-vars[main-color]);
- .background-color-var(@theme-vars[main-bg]);
- .border-bottom-color-var(@theme-vars[main-border-color]);
- }
- }
- }
  }
  }
 
@@ -96,6 +86,16 @@
  .ms-widget-empty-message {
  .background-color-var(@theme-vars[main-bg]);
  }
+
+ .legend-widget {
+ .widget-legend-toc {
+ .toc-default-layer-head {
+ .color-var(@theme-vars[main-color]);
+ .background-color-var(@theme-vars[main-bg]);
+ .border-bottom-color-var(@theme-vars[main-border-color]);
+ }
+ }
+ }
 }
 
 // **************
@@ -327,68 +327,6 @@
  .counter-widget .ms2-border-layout-body {
  position: relative;
  }
- .legend-widget {
- .setFontSize(@font-size-small);
- font-size: @fSize;
- padding-top: 0;
- .em(padding-right, 15);
- .em(padding-bottom, 15);
- .em(padding-left, 15);
- .widget-legend-toc {
- -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06), 0 4px 8px rgba(0, 0, 0, 0.12), 2px -2px 6px rgba(0, 0, 0, 0.06);
- -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06), 0 4px 8px rgba(0, 0, 0, 0.12), 2px -2px 6px rgba(0, 0, 0, 0.06);
- box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06), 0 4px 8px rgba(0, 0, 0, 0.12), 2px -2px 6px rgba(0, 0, 0, 0.06);
- padding: 0;
- .em(margin-top, 10);
- .toc-default-layer-head {
- .em(height, 44);
- width: 100%;
- margin-bottom: 0;
- .em(padding-top, 14);
- .em(padding-right, 14);
- padding-bottom: 0;
- padding-left: 0;
- .em(border-bottom-width, 1);
- border-bottom-style: solid;
- .visibility-check{
- &.glyphicon {
- cursor: pointer;
- float: left;
- margin-top: 0;
- margin-right: 0;
- .em(margin-bottom, 10);
- .em(margin-left, 10);
- }
- }
- .toc-title {
- overflow: hidden;
- .em(height, 15);
- margin-top: 0;
- margin-right: 0;
- .em(margin-bottom, 5);
- .em(margin-left, 5);
- .em(width, 140);
- line-height: 1;
- }
- .toc-legend-icon {
- &.expanded {
- transform: rotate(-90deg);
- }
- &.glyphicon {
- cursor: pointer;
- float: right;
- .em(margin-right, 10);
- }
- }
- .mapstore-slider {
- .em(margin-top, -8);
- }
- }
- .expanded-legend-view {
- .em(margin-top, 15);
- }
- }
- }
  .map-widget-view, .chart-widget-view {
  .widget-icons, .widget-title {
  .em(margin-bottom, 6);
@@ -422,6 +360,55 @@
  }
 }
 
+.legend-widget {
+ .setFontSize(@font-size-small);
+ font-size: @fSize;
+ padding-top: 0;
+ .em(padding-right, 15);
+ .em(padding-bottom, 15);
+ .em(padding-left, 15);
+ .widget-legend-toc {
+ .shadow-soft();
+ .em(margin-top, 10);
+ .toc-default-layer-head {
+ .em(padding, 8);
+ padding-bottom: 0;
+ display: flex;
+ align-items: center;
+ width: 100%;
+ .toc-title {
+ flex: 1;
+ max-width: none;
+ .em(padding-right, 8);
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
+ .visibility-check + .toc-title {
+ .em(padding-left, 8);
+ }
+ .toc-legend-icon {
+ &.expanded {
+ transform: rotate(-90deg);
+ }
+ }
+ .toc-layer-tool {
+ cursor: pointer;
+ }
+ }
+ .expanded-legend-view {
+ .em(padding, 8);
+ }
+ &.expanded {
+ .toc-default-layer-head {
+ .em(border-bottom-width, 1);
+ border-bottom-style: solid;
+ .em(padding-bottom, 8);
+ }
+ }
+ }
+}
+
 .mapstore-widget-remove {
  height: 32px;
  font-size: 18px;

diff --git a/web/client/themes/default/less/wizard.less b/web/client/themes/default/less/wizard.less
@@ -15,19 +15,6 @@
 // **************
 // Layout
 // **************
-#ms-components-theme(@theme-vars) {
- .ms-wizard.map-options {
- .legend-widget{
- .widget-legend-toc {
- .toc-default-layer-head {
- .color-var(@theme-vars[main-color]);
- .background-color-var(@theme-vars[main-bg]);
- }
- }
- }
- }
-}
-
 
 .ms-wizard {
  position: absolute;
@@ -123,32 +110,6 @@
  }
  }
  }
- .legend-widget {
- .widget-legend-toc {
- -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06), 0 4px 8px rgba(0, 0, 0, 0.12), 2px -2px 6px rgba(0, 0, 0, 0.06);
- -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06), 0 4px 8px rgba(0, 0, 0, 0.12), 2px -2px 6px rgba(0, 0, 0, 0.06);
- box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06), 0 4px 8px rgba(0, 0, 0, 0.12), 2px -2px 6px rgba(0, 0, 0, 0.06);
- padding: 0;
- margin-top: 10px;
- .toc-default-layer-head {
- height: 52px;
- width: 100%;
- margin-bottom: 0;
- padding: 18px 0;
- .toc-title {
- overflow: hidden;
- font-weight: 600;
- height: 15px;
- margin: 0 10px;
- width: 140px;
- line-height: 1;
- }
- }
- .expanded-legend-view {
- padding-bottom: 15px;
- }
- }
- }
  .react-grid-Grid {
  .react-grid-Viewport{
  .react-grid-Canvas {