feat: switch between split, code, map and legend view with a group bu…

…tton instead of a accordion
geostyler · May 2, 2023 · ced0095 · ced0095
1 parent 6735f00
commit ced0095
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 36 deletions.
diff --git a/src/App.css b/src/App.css
@@ -71,31 +71,21 @@
   background-color: #e8e8e8;
   flex: 2;
   max-width: calc(100% / 3);
-}
-
-.right-wrapper .ant-collapse {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  padding: unset;
-}
-
-.right-wrapper .ant-collapse .ant-collapse-item-active {
-  flex: 1;
   display: flex;
   flex-direction: column;
 }
 
-.right-wrapper .ant-collapse .ant-collapse-content-active {
-  flex: 1;
+.code-display-container {
+  margin-top: 5px;
+  height: 100%;
 }
 
-.right-wrapper .ant-collapse .ant-collapse-content-box {
+.code-display-container > div {
   height: 100%;
 }
 
-.right-wrapper .ant-collapse .ant-collapse-content > .ant-collapse-content-box {
-  padding: unset;
+.code-display-container > div.split-map-display {
+  height: 50%;
 }
 
 .gs-symbolizer-preview {

diff --git a/src/App.tsx b/src/App.tsx
@@ -3,7 +3,6 @@ import * as React from 'react';
 import {
   Switch,
   Button,
-  Collapse,
   Form,
   notification,
   Radio
@@ -47,8 +46,6 @@ import OlView from 'ol/View';
 import OlLayerTile from 'ol/layer/Tile';
 import OlSourceTileWMS from 'ol/source/TileWMS';
 import { fromLonLat } from 'ol/proj';
-import Tooltip from 'antd/es/tooltip';
-import { ExclamationOutlined } from '@ant-design/icons';
 import { LanguageSwitcher } from './LanguageSwitcher';
 import QGISStyleParser from 'geostyler-qgis-parser';
 import { GeoStylerContextInterface } from 'geostyler/dist/context/GeoStylerContext/GeoStylerContext';
@@ -83,6 +80,7 @@ interface AppState {
   locale: AppLocale & GeoStylerLocale;
   cardLayout: boolean;
   ruleRendererType?: 'SLD' | 'OpenLayers';
+  styleDisplayMode?: 'Map' | 'Code' | 'Split' | 'Legend';
   examplesModalVisible: boolean;
 }
 
@@ -131,6 +129,7 @@ class App extends React.Component<AppProps, AppState> {
       },
       cardLayout: false,
       ruleRendererType: 'SLD',
+      styleDisplayMode: 'Split',
       examplesModalVisible: false,
       style: {
         name: 'GeoStyler Demo',
@@ -157,6 +156,11 @@ class App extends React.Component<AppProps, AppState> {
     this.setState({ruleRendererType});
   }
 
+  onStyleModeChange = (e: any) => {
+    const styleDisplayMode = e.target.value;
+    this.setState({styleDisplayMode})
+  }
+
   onCardLayoutSwitchChange = (cardLayout: boolean) => {
     this.setState({cardLayout});
   }
@@ -190,7 +194,8 @@ class App extends React.Component<AppProps, AppState> {
       style,
       data,
       cardLayout,
-      ruleRendererType
+      ruleRendererType,
+      styleDisplayMode
     } = this.state;
 
     const appContext: GeoStylerContextInterface = {
@@ -360,8 +365,25 @@ class App extends React.Component<AppProps, AppState> {
               )}
             </div>
             <div className="right-wrapper">
-              <Collapse defaultActiveKey={['code-editor']}>
-                <Collapse.Panel header={locale.codeEditor} key="code-editor">
+            <Form layout="inline">
+              <Form.Item label="Display">
+                  <Radio.Group
+                    className="renderer-select"
+                    onChange={this.onStyleModeChange}
+                    value={styleDisplayMode}
+                  >
+                    <Radio.Button value="Split">Split</Radio.Button>
+                    <Radio.Button value="Code">Code</Radio.Button>
+                    <Radio.Button value="Map">Map</Radio.Button>
+                    <Radio.Button value="Legend">Legend</Radio.Button>
+                  </Radio.Group>
+                </Form.Item>
+              </Form>
+              {/* <Collapse defaultActiveKey={['code-editor']}> */}
+                {/* <Collapse.Panel header={locale.codeEditor} key="code-editor"> */}
+              <div className="code-display-container">
+                <div hidden={styleDisplayMode !== 'Code' && styleDisplayMode !== 'Split'} 
+                  className={styleDisplayMode === 'Split' ? 'split-map-display' : ''}>
                   <CodeEditor
                     style={style}
                     parsers={[
@@ -370,33 +392,33 @@ class App extends React.Component<AppProps, AppState> {
                       this._sldStyleParser,
                       this._sldStyleParserSE
                     ]}
+
                     defaultParser={this._sldStyleParser}
                     onStyleChange={(style: GsStyle) => {
                       this.setState({style});
                     }}
                     showSaveButton={true}
                     showCopyButton={true}
                   />
-                </Collapse.Panel>
-                <Collapse.Panel
-                  header={locale.previewMap} key="preview-map"
-                  extra={
-                    <Tooltip title={locale.previewMapDataProjection}>
-                      <ExclamationOutlined />
-                    </Tooltip>
-                  }
-                >
+                </div>
+
+                <div hidden={styleDisplayMode !== 'Map' && styleDisplayMode !== 'Split'}
+                    className={styleDisplayMode === 'Split' ? 'split-map-display' : ''}>
+                  <p>{locale.previewMapDataProjection}</p>
                   <PreviewMap
                     style={style}
                     map={map}
                     mapHeight="100%"
                     data={data}
                   />
-                </Collapse.Panel>
-                <Collapse.Panel header={locale.legend} key="legend">
-                  <div id="legend" />
-                </Collapse.Panel>
-              </Collapse>
+                </div>
+
+                <div hidden={styleDisplayMode !== 'Legend'}>
+                  <h2>{locale.legend}</h2>
+                  <div id="legend"></div>
+                </div>
+              </div>
+
             </div>
           </div>
           <ExamplesDialog