Skip to content

Commit beea4ee

Browse files
nreesenreese
authored
[Maps] expand/collapse Layer TOC (#34506)
* [Maps] expand/collapse Layer TOC * Design edits (#30) * fix jest test snapshots * make default isLayerTOCOpen a constant * use newly release EUI menuLeft and menuRight icons instead of arrow icon
1 parent 2fd678c commit beea4ee

11 files changed

Lines changed: 334 additions & 127 deletions

File tree

‎x-pack/plugins/maps/public/angular/map_controller.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
* you may not use this file except in compliance with the Elastic License.
55
*/
66

7+
import _ from 'lodash';
78
import chrome from 'ui/chrome';
89
import 'ui/listen';
910
import React from 'react';
@@ -25,10 +26,12 @@ import {
2526
clearTransientLayerStateAndCloseFlyout,
2627
} from '../actions/store_actions';
2728
import {
29+
DEFAULT_IS_LAYER_TOC_OPEN,
2830
enableFullScreen,
2931
getIsFullScreen,
3032
updateFlyout,
31-
FLYOUT_STATE
33+
FLYOUT_STATE,
34+
setIsLayerTOCOpen
3235
} from '../store/ui';
3336
import { getUniqueIndexPatternIds } from '../selectors/map_selectors';
3437
import { getInspectorAdapters } from '../store/non_serializable_instances';
@@ -138,6 +141,11 @@ app.controller('GisMapController', ($scope, $route, config, kbnUrl, localStorage
138141
}));
139142
}
140143

144+
if (savedMap.uiStateJSON) {
145+
const uiState = JSON.parse(savedMap.uiStateJSON);
146+
store.dispatch(setIsLayerTOCOpen(_.get(uiState, 'isLayerTOCOpen', DEFAULT_IS_LAYER_TOC_OPEN)));
147+
}
148+
141149
const layerList = getInitialLayers(savedMap.layerListJSON);
142150
store.dispatch(replaceLayerList(layerList));
143151

‎x-pack/plugins/maps/public/angular/services/saved_gis_map.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {
1717
getRefreshConfig,
1818
getQuery,
1919
} from '../../selectors/map_selectors';
20+
import { getIsLayerTOCOpen } from '../../store/ui';
2021
import { convertMapExtentToPolygon } from '../../elasticsearch_geo_utils';
2122
import { copyPersistentState } from '../../store/util';
2223
import { extractReferences, injectReferences } from '../../../common/migrations/references';
@@ -99,7 +100,9 @@ module.factory('SavedGisMap', function (Private) {
99100
query: _.omit(getQuery(state), 'queryLastTriggeredAt'),
100101
});
101102

102-
this.uiStateJSON = JSON.stringify({});
103+
this.uiStateJSON = JSON.stringify({
104+
isLayerTOCOpen: getIsLayerTOCOpen(state)
105+
});
103106

104107
this.bounds = convertMapExtentToPolygon(getMapExtent(state));
105108
};

‎x-pack/plugins/maps/public/components/widget_overlay/_widget_overlay.scss‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,13 @@
1818
max-width: 24rem;
1919
}
2020

21+
.mapWidgetOverlay__layerWrapper {
22+
align-items: flex-end;
23+
}
24+
2125
.mapWidgetControl {
2226
max-height: 100%;
27+
width: 100%;
2328
overflow: hidden;
2429
padding-bottom: $euiSizeS; // ensures the scrollbar doesn't appear unnecessarily because of flex group negative margins
2530
border-color: transparent !important;
@@ -30,11 +35,12 @@
3035
&.mapWidgetControl-hasShadow {
3136
@include euiBottomShadowLarge;
3237
}
38+
}
3339

34-
.mapWidgetControl__header {
35-
padding: $euiSizeS $euiSize;
36-
flex-shrink: 0;
37-
}
40+
.mapWidgetControl__header {
41+
padding: 0 $euiSize;
42+
flex-shrink: 0;
43+
text-transform: uppercase;
3844
}
3945

4046

‎x-pack/plugins/maps/public/components/widget_overlay/layer_control/__snapshots__/view.test.js.snap‎

Lines changed: 145 additions & 84 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎x-pack/plugins/maps/public/components/widget_overlay/layer_control/_layer_control.scss‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,20 @@
33
overflow-y: auto;
44
flex-basis: auto !important; // Fixes IE and ensures the layer items are visible
55
}
6+
7+
.mapLayerControl__addLayerButton,
8+
.mapLayerControl__openLayerTOCButton {
9+
pointer-events: all;
10+
11+
&:enabled,
12+
&:enabled:hover,
13+
&:enabled:focus {
14+
@include euiBottomShadowLarge;
15+
}
16+
}
17+
18+
.mapLayerControl__openLayerTOCButton,
19+
.mapLayerControl__closeLayerTOCButton {
20+
@include size($euiSizeXL);
21+
background-color: $euiColorEmptyShade;
22+
}

‎x-pack/plugins/maps/public/components/widget_overlay/layer_control/index.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,16 @@ import { connect } from 'react-redux';
88
import { LayerControl } from './view';
99
import {
1010
getIsReadOnly,
11+
getIsLayerTOCOpen,
1112
updateFlyout,
1213
FLYOUT_STATE,
14+
setIsLayerTOCOpen,
1315
} from '../../../store/ui';
1416

1517
function mapStateToProps(state = {}) {
1618
return {
1719
isReadOnly: getIsReadOnly(state),
20+
isLayerTOCOpen: getIsLayerTOCOpen(state),
1821
};
1922
}
2023

@@ -23,6 +26,12 @@ function mapDispatchToProps(dispatch) {
2326
showAddLayerWizard: () => {
2427
dispatch(updateFlyout(FLYOUT_STATE.ADD_LAYER_WIZARD));
2528
},
29+
closeLayerTOC: () => {
30+
dispatch(setIsLayerTOCOpen(false));
31+
},
32+
openLayerTOC: () => {
33+
dispatch(setIsLayerTOCOpen(true));
34+
},
2635
};
2736
}
2837

0 commit comments

Comments
 (0)