Skip to content

Commit 34606fb

Browse files
allyoucanmapallyoucanmap
authored
Widget Builder and Catalog are not contained in Map Viewer of API (#3327)
1 parent 0440298 commit 34606fb

4 files changed

Lines changed: 49 additions & 29 deletions

File tree

‎web/client/components/misc/panels/DockPanel.jsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ const PanelHeader = require('./PanelHeader');
3131
* @prop {string} glyph glyph displayed on top corner of panel
3232
* @prop {node} header additional element for header
3333
* @prop {node} footer footer content
34+
* @prop {bool} hideHeader hide header
3435
*/
3536

3637
module.exports = withState('fullscreen', 'onFullscreen', false)(
@@ -52,7 +53,8 @@ module.exports = withState('fullscreen', 'onFullscreen', false)(
5253
footer,
5354
children,
5455
onFullscreen = () => {},
55-
fixed = false
56+
fixed = false,
57+
hideHeader
5658
}) =>
5759
<div className={'ms-side-panel ' + (!fixed ? 'ms-absolute-dock ' : '') + className}>
5860
<Dock
@@ -65,7 +67,7 @@ module.exports = withState('fullscreen', 'onFullscreen', false)(
6567
zIndex={zIndex}>
6668
<BorderLayout
6769
header={
68-
<PanelHeader
70+
!hideHeader && <PanelHeader
6971
position={position}
7072
onClose={onClose}
7173
bsStyle={bsStyle}

‎web/client/components/misc/panels/__tests__/DockPanel-test.jsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,4 +65,18 @@ describe("test DockPanel", () => {
6565
TestUtils.Simulate.click(buttons[0]);
6666
expect(buttons[0].children[0].getAttribute('class')).toBe('glyphicon glyphicon-chevron-right');
6767
});
68+
69+
it('hide header', () => {
70+
ReactDOM.render(
71+
<DockPanel
72+
open
73+
hideHeader
74+
header={<div className="my-custom-head-row"/>}
75+
footer={<div className="my-custom-footer"/>}>
76+
<div className="my-custom-body-child"/>
77+
</DockPanel>, document.getElementById("container"));
78+
79+
const header = document.getElementsByClassName('my-custom-head-row');
80+
expect(header.length).toBe(0);
81+
});
6882
});

‎web/client/plugins/MetadataExplorer.jsx‎

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -13,21 +13,21 @@ const assign = require('object-assign');
1313
const {createSelector} = require("reselect");
1414
const {Glyphicon, Panel} = require('react-bootstrap');
1515
const ContainerDimensions = require('react-container-dimensions').default;
16-
const Dock = require('react-dock').default;
1716

1817
const {addService, deleteService, textSearch, changeCatalogFormat, changeCatalogMode,
1918
changeUrl, changeTitle, changeAutoload, changeType, changeSelectedService,
2019
addLayer, addLayerError, resetCatalog, focusServicesList} = require("../actions/catalog");
2120
const {zoomToExtent} = require("../actions/map");
2221
const {currentLocaleSelector} = require("../selectors/locale");
23-
const {setControlProperty, toggleControl} = require("../actions/controls");
22+
const {setControlProperty} = require("../actions/controls");
2423
const {resultSelector, serviceListOpenSelector, newServiceSelector,
2524
newServiceTypeSelector, selectedServiceTypeSelector, searchOptionsSelector,
2625
servicesSelector, formatsSelector, loadingErrorSelector, selectedServiceSelector,
2726
modeSelector, layerErrorSelector, activeSelector, savingSelector, authkeyParamNameSelector
2827
} = require("../selectors/catalog");
2928
const {mapLayoutValuesSelector} = require('../selectors/maplayout');
3029
const Message = require("../components/I18N/Message");
30+
const DockPanel = require("../components/misc/panels/DockPanel");
3131
require('./metadataexplorer/css/style.css');
3232

3333
const CatalogUtils = require('../utils/CatalogUtils');
@@ -113,8 +113,7 @@ class MetadataExplorerComponent extends React.Component {
113113
width: 660,
114114
dockProps: {
115115
dimMode: "none",
116-
size: 0.30,
117-
fluid: true,
116+
fluid: false,
118117
position: "right",
119118
zIndex: 1030
120119
},
@@ -123,18 +122,25 @@ class MetadataExplorerComponent extends React.Component {
123122

124123
render() {
125124
const panel = <Catalog zoomToLayer={this.props.zoomToLayer} searchOnStartup={this.props.searchOnStartup} active={this.props.active} {...this.props}/>;
126-
const panelHeader = (<span><Glyphicon glyph="folder-open"/> <span className="metadataexplorer-panel-title"><Message msgId="catalog.title"/></span><span className="shapefile-panel-close panel-close" onClick={ toggleControl.bind(null, 'styler', null)}></span><button onClick={this.props.toggleControl} className="catalog-close close">{this.props.closeGlyph ? <Glyphicon glyph={this.props.closeGlyph} /> : <span>×</span>}</button></span>);
127-
return this.props.active ? (
128-
<ContainerDimensions>
129-
{ ({ width }) =>
130-
<Dock dockStyle={this.props.dockStyle} {...this.props.dockProps} isVisible={this.props.active} size={this.props.width / width > 1 ? 1 : this.props.width / width} >
131-
<Panel id={this.props.id} header={panelHeader} style={this.props.panelStyle} className={this.props.panelClassName}>
132-
{panel}
133-
</Panel>
134-
</Dock>
135-
}
136-
</ContainerDimensions>
137-
) : null;
125+
return (
126+
<div style={{width: '100%', height: '100%', pointerEvents: 'none'}}>
127+
<ContainerDimensions>
128+
{({ width }) => (<DockPanel
129+
open={this.props.active}
130+
size={this.props.width / width > 1 ? width : this.props.width}
131+
position="right"
132+
bsStyle="primary"
133+
title={<Message msgId="catalog.title"/>}
134+
onClose={() => this.props.toggleControl()}
135+
glyph="folder-open"
136+
style={this.props.dockStyle}>
137+
<Panel id={this.props.id} style={this.props.panelStyle} className={this.props.panelClassName}>
138+
{panel}
139+
</Panel>
140+
</DockPanel>)}
141+
</ContainerDimensions>
142+
</div>
143+
);
138144
}
139145
}
140146

‎web/client/plugins/WidgetsBuilder.jsx‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
const React = require('react');
1010
const PropTypes = require('prop-types');
1111

12-
const Dock = require('react-dock').default;
12+
const DockPanel = require("../components/misc/panels/DockPanel");
1313

1414
const {connect} = require('react-redux');
1515
const {createSelector} = require('reselect');
@@ -71,19 +71,17 @@ class SideBarComponent extends React.Component {
7171
this.props.onUnmount();
7272
}
7373
render() {
74-
return (<Dock
75-
id={this.props.id}
74+
return (
75+
<DockPanel
76+
open={this.props.enabled}
77+
size={this.props.dockSize}
7678
zIndex={this.props.zIndex}
7779
position={this.props.position}
78-
size={this.props.dockSize}
79-
dimMode={this.props.dimMode}
80-
isVisible={this.props.enabled}
81-
onSizeChange={this.limitDockHeight}
82-
fluid={this.props.fluid}
83-
dockStyle={{...this.props.layout, background: "white" /* TODO set it to undefined when you can inject a class inside Dock, to use theme */}}
84-
>
80+
bsStyle="primary"
81+
hideHeader
82+
style={{...this.props.layout, background: "white"}}>
8583
<Builder enabled={this.props.enabled} onClose={this.props.onClose} typeFilter={({ type } = {}) => type !== 'map' && type !== 'legend' }/>
86-
</Dock>);
84+
</DockPanel>);
8785

8886
}
8987
}

0 commit comments

Comments
 (0)