From 97b30b1a6508dfd8442909a9fdb204b413ae38e9 Mon Sep 17 00:00:00 2001
From: AliceBalfanz <alicja.balfanz@brockmann-consult.de>
Date: Thu, 13 Aug 2020 10:32:31 +0200
Subject: [PATCH] some styling

---
 src/renderer/containers/LayersPanel.tsx     |   2 -
 src/renderer/containers/OperationsPanel.tsx |   2 +-
 src/renderer/containers/StylesPanel.tsx     |  63 +++++-----
 src/renderer/containers/WorkspacePanel.tsx  | 128 +++++++++++---------
 4 files changed, 106 insertions(+), 89 deletions(-)

diff --git a/src/renderer/containers/LayersPanel.tsx b/src/renderer/containers/LayersPanel.tsx
index af83d08..6acdf80 100644
--- a/src/renderer/containers/LayersPanel.tsx
+++ b/src/renderer/containers/LayersPanel.tsx
@@ -207,7 +207,6 @@ class LayersPanel extends React.Component<ILayersPanelProps & DispatchProp<State
                     onClick={this.handleMoveLayerUpButtonClicked}
                     icon="arrow-up"
                     tooltipPosition={'top'}
-
                 />
                 <ToolButton
                     tooltipContent="Move layer down"
@@ -215,7 +214,6 @@ class LayersPanel extends React.Component<ILayersPanelProps & DispatchProp<State
                     onClick={this.handleMoveLayerDownButtonClicked}
                     icon="arrow-down"
                     tooltipPosition={'top'}
-
                 />
                 <LayerSourcesDialog/>
             </ButtonGroup>
diff --git a/src/renderer/containers/OperationsPanel.tsx b/src/renderer/containers/OperationsPanel.tsx
index e1ddaf8..767cd36 100644
--- a/src/renderer/containers/OperationsPanel.tsx
+++ b/src/renderer/containers/OperationsPanel.tsx
@@ -148,7 +148,7 @@ class OperationsPanel extends React.Component<IOperationsPanelProps & DispatchPr
             const actionComponent = (
                 <ButtonGroup>
                     <ToolButton
-                        tooltipContent={<span>Add a new operation step to<br />the workspace's workflow</span>}
+                        tooltipContent={<span>Add a new operation step to<br/>the workspace's workflow</span>}
                         intent={Intent.PRIMARY}
                         onClick={this.handleAddOperationStepButtonClicked}
                         disabled={!canAddStepOperation}
diff --git a/src/renderer/containers/StylesPanel.tsx b/src/renderer/containers/StylesPanel.tsx
index 6fa7e11..251f23c 100644
--- a/src/renderer/containers/StylesPanel.tsx
+++ b/src/renderer/containers/StylesPanel.tsx
@@ -1,4 +1,4 @@
-import { connect, DispatchProp } from 'react-redux';
+import {connect, DispatchProp} from 'react-redux';
 import {
     ColorMapCategoryState,
     ColorMapState,
@@ -15,8 +15,8 @@ import {
     VectorLayerState
 } from '../state';
 import * as React from 'react';
-import { NO_ENTITY_FOR_STYLE, NO_LAYER_FOR_STYLE } from '../messages';
-import { SubPanelHeader } from '../components/SubPanelHeader';
+import {NO_ENTITY_FOR_STYLE, NO_LAYER_FOR_STYLE} from '../messages';
+import {SubPanelHeader} from '../components/SubPanelHeader';
 import {
     AnchorButton,
     Button,
@@ -38,18 +38,18 @@ import {
 } from '@blueprintjs/core';
 import * as actions from '../actions';
 import * as selectors from '../selectors';
-import { NumericRangeField } from '../components/field/NumericRangeField';
-import { FieldValue } from '../components/field/Field';
-import { ListBox, ListBoxSelectionMode } from '../components/ListBox';
-import { TextField } from '../components/field/TextField';
+import {NumericRangeField} from '../components/field/NumericRangeField';
+import {FieldValue} from '../components/field/Field';
+import {ListBox, ListBoxSelectionMode} from '../components/ListBox';
+import {TextField} from '../components/field/TextField';
 import SketchPicker from 'react-color/lib/components/sketch/Sketch';
-import { ColorState } from 'react-color';
-import { SimpleStyle } from '../../common/geojson-simple-style';
-import { NumericField } from '../components/field/NumericField';
-import { ViewState } from '../components/ViewState';
+import {ColorState} from 'react-color';
+import {SimpleStyle} from '../../common/geojson-simple-style';
+import {NumericField} from '../components/field/NumericField';
+import {ViewState} from '../components/ViewState';
 import * as Cesium from 'cesium';
-import { getLayerDisplayName } from '../state-util';
-import { ToolButton } from '../components/ToolButton';
+import {getLayerDisplayName} from '../state-util';
+import {ToolButton} from '../components/ToolButton';
 
 function getDisplayFractionDigits(min: number, max: number) {
     const n = Math.round(Math.log10(max - min));
@@ -230,12 +230,15 @@ class StylesPanel extends React.Component<IStylesPanelProps & DispatchProp<State
                                            onChange={this.handleChangedDisplayMinMax}
                                            uncontrolled={true}
                         />
-                        <ToolButton tooltipContent="Compute valid min/max"
-                                    intent={Intent.PRIMARY}
-                                    icon="arrows-horizontal"
-                                    style={{flex: 'none', marginTop: '5px'}}
-                                    disabled={this.props.isComputingVariableStatistics}
-                                    onClick={this.handleUpdateDisplayStatistics}/>
+                        <ToolButton
+                            tooltipContent="Compute valid min/max"
+                            intent={Intent.PRIMARY}
+                            icon="arrows-horizontal"
+                            tooltipPosition={'top'}
+                            style={{flex: 'none', marginTop: '5px'}}
+                            disabled={this.props.isComputingVariableStatistics}
+                            onClick={this.handleUpdateDisplayStatistics}
+                        />
                     </div>
                 </Label>
                 <div style={StylesPanel.SLIDER_DIV_STYLE_15}>
@@ -632,13 +635,13 @@ class StylesPanel extends React.Component<IStylesPanelProps & DispatchProp<State
             return;
         }
         this.props.dispatch(actions.getWorkspaceVariableStatistics(resource.name, variable.name, imageLayer.varIndex,
-                                                                   (statistics) => {
-                                                                       return actions.updateLayer(this.props.activeView.id, imageLayer, {
-                                                                           displayMin: statistics.min,
-                                                                           displayMax: statistics.max,
-                                                                           statistics
-                                                                       });
-                                                                   }
+            (statistics) => {
+                return actions.updateLayer(this.props.activeView.id, imageLayer, {
+                    displayMin: statistics.min,
+                    displayMax: statistics.max,
+                    statistics
+                });
+            }
         ) as any);
     }
 
@@ -710,12 +713,12 @@ class StylesPanel extends React.Component<IStylesPanelProps & DispatchProp<State
         //style = {...this.props.vectorStyle, ...style};
         if (this.props.styleContext === STYLE_CONTEXT_ENTITY) {
             this.props.dispatch(actions.updateEntityStyle(this.props.activeView,
-                                                          this.props.selectedEntity,
-                                                          style) as any);
+                this.props.selectedEntity,
+                style) as any);
         } else {
             this.props.dispatch(actions.updateLayerStyle(this.props.activeView.id,
-                                                         this.props.selectedVectorLayer.id,
-                                                         style));
+                this.props.selectedVectorLayer.id,
+                style));
         }
     }
 }
diff --git a/src/renderer/containers/WorkspacePanel.tsx b/src/renderer/containers/WorkspacePanel.tsx
index 83f7c59..1329739 100644
--- a/src/renderer/containers/WorkspacePanel.tsx
+++ b/src/renderer/containers/WorkspacePanel.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { CSSProperties } from 'react';
-import { connect, DispatchProp } from 'react-redux';
+import {CSSProperties} from 'react';
+import {connect, DispatchProp} from 'react-redux';
 import {
     ButtonGroup,
     Icon,
@@ -13,12 +13,12 @@ import {
     Tabs,
     Tooltip
 } from '@blueprintjs/core';
-import { Cell, Column, Table, TruncatedFormat, TruncatedPopoverMode } from '@blueprintjs/table';
-import { ListBox } from '../components/ListBox';
-import { LabelWithType } from '../components/LabelWithType';
+import {Cell, Column, Table, TruncatedFormat, TruncatedPopoverMode} from '@blueprintjs/table';
+import {ListBox} from '../components/ListBox';
+import {LabelWithType} from '../components/LabelWithType';
 import WorkflowStepPropertiesDialog from './WorkflowStepPropertiesDialog';
 import OperationStepDialog from './OperationStepDialog';
-import { ContentWithDetailsPanel } from '../components/ContentWithDetailsPanel';
+import {ContentWithDetailsPanel} from '../components/ContentWithDetailsPanel';
 import * as assert from '../../common/assert';
 import * as actions from '../actions'
 import * as selectors from '../selectors'
@@ -29,15 +29,16 @@ import {
     ResourceState,
     State,
     WorkflowPortState,
-    WorkflowStepState, WorkspacePanelMode,
+    WorkflowStepState,
+    WorkspacePanelMode,
     WorkspaceState
 } from '../state';
-import { ScrollablePanelContent } from '../components/ScrollableContent';
-import { NO_WORKFLOW_STEPS, NO_WORKSPACE, NO_WORKSPACE_RESOURCES } from '../messages';
-import { findOperation, isDataFrameResource, isFigureResource } from '../state-util';
-import { isBoolean, isDefined, isString, isUndefined, isUndefinedOrNull } from '../../common/types';
-import { ToolButton } from '../components/ToolButton';
-import { EDIT_OPERATION_STEP_DIALOG_ID } from './operation-step-dialog-ids';
+import {ScrollablePanelContent} from '../components/ScrollableContent';
+import {NO_WORKFLOW_STEPS, NO_WORKSPACE, NO_WORKSPACE_RESOURCES} from '../messages';
+import {findOperation, isDataFrameResource, isFigureResource} from '../state-util';
+import {isBoolean, isDefined, isString, isUndefined, isUndefinedOrNull} from '../../common/types';
+import {ToolButton} from '../components/ToolButton';
+import {EDIT_OPERATION_STEP_DIALOG_ID} from './operation-step-dialog-ids';
 
 interface IWorkspacePanelProps {
     workspace: WorkspaceState;
@@ -205,12 +206,12 @@ class WorkspacePanel extends React.PureComponent<IWorkspacePanelProps & Dispatch
 
     private getEffectiveWorkflowStep() {
         return this.props.workspacePanelMode === 'steps'
-               ? this.props.selectedWorkflowStep : this.props.selectedResourceWorkflowStep;
+            ? this.props.selectedWorkflowStep : this.props.selectedResourceWorkflowStep;
     }
 
     private getEffectiveResource() {
         return this.props.workspacePanelMode === 'resources'
-               ? this.props.selectedResource : this.props.selectedWorkflowStepResource;
+            ? this.props.selectedResource : this.props.selectedWorkflowStepResource;
     }
 
     private getEffectiveResourceName() {
@@ -249,8 +250,8 @@ class WorkspacePanel extends React.PureComponent<IWorkspacePanelProps & Dispatch
         assert.ok(resources);
 
         const workspaceName = (workspace.isScratch || !workspace.baseDir)
-                              ? '<unnamed>'
-                              : workspace.baseDir.split(/[\\/]/).pop();
+            ? '<unnamed>'
+            : workspace.baseDir.split(/[\\/]/).pop();
         const workspaceLabel = (
             <Tooltip content={workspace.baseDir} position={PopoverPosition.AUTO_START}>
                 <strong>{workspaceName}</strong>
@@ -269,16 +270,21 @@ class WorkspacePanel extends React.PureComponent<IWorkspacePanelProps & Dispatch
             );
         }
         const openItemButton = (
-            <ToolButton tooltipContent="Show workspace directory in file system"
-                        onClick={this.handleOpenWorkspaceDirectoryClicked}
-                        icon="folder-open"
+            <ToolButton
+                tooltipContent="Show workspace directory in file system"
+                onClick={this.handleOpenWorkspaceDirectoryClicked}
+                icon="folder-open"
+                tooltipPosition={'top'}
             />
         );
         const copyItemButton = (
             <Popover position={PopoverPosition.LEFT}>
-                <ToolButton tooltipContent="Copy workflow"
-                            disabled={!steps.length}
-                            icon="clipboard"/>
+                <ToolButton
+                    tooltipContent="Copy workflow"
+                    disabled={!steps.length}
+                    icon="clipboard"
+                    tooltipPosition={'top'}
+                />
                 <Menu>
                     <MenuItem onClick={this.handleCopyWorkflowAsPythonScript} text="Copy workflow as Python Script"/>
                     <MenuItem onClick={this.handleCopyWorkflowAsShellScript} text="Copy workflow as Shell Script"/>
@@ -320,42 +326,52 @@ class WorkspacePanel extends React.PureComponent<IWorkspacePanelProps & Dispatch
         const canShowTableView = isDataFrameResource(resource);
         return (
             <ButtonGroup>
-                <ToolButton tooltipContent="Show figure"
-                            disabled={!canShowFigure}
-                            icon="eye-open"
-                            tooltipPosition={'top'}
-                            onClick={this.handleShowFigureButtonClicked}/>
-                <ToolButton tooltipContent="Show data in table"
-                            disabled={!canShowTableView}
-                            icon="th"
-                            tooltipPosition={'top'}
-                            onClick={this.handleShowResourceTableView}
+                <ToolButton
+                    tooltipContent="Show figure"
+                    disabled={!canShowFigure}
+                    icon="eye-open"
+                    tooltipPosition={'top'}
+                    onClick={this.handleShowFigureButtonClicked}/>
+                <ToolButton
+                    tooltipContent="Show data in table"
+                    disabled={!canShowTableView}
+                    icon="th"
+                    tooltipPosition={'top'}
+                    onClick={this.handleShowResourceTableView}
+                />
+                <ToolButton
+                    tooltipContent="Resource/step properties"
+                    disabled={!resource}
+                    icon="label"
+                    tooltipPosition={'top'}
+                    onClick={this.handleWorkflowStepPropertiesButtonClicked}
+                />
+                <ToolButton
+                    tooltipContent="Edit workflow step"
+                    intent={Intent.PRIMARY}
+                    disabled={!workflowStep}
+                    icon="edit"
+                    tooltipPosition={'top'}
+                    onClick={this.handleEditOperationStepButtonClicked}
+                />
+                <ToolButton
+                    tooltipContent="Remove workflow step and its resource"
+                    disabled={!workflowStep}
+                    icon="remove"
+                    tooltipPosition={'top'}
+                    onClick={this.handleRemoveOperationStepButtonClicked}
+                />
+                <ToolButton
+                    tooltipContent="Clean workspace, remove all steps and resources"
+                    disabled={!hasSteps}
+                    icon="delete"
+                    tooltipPosition={'top'}
+                    onClick={this.handleCleanWorkflowButtonClicked}
                 />
-                <ToolButton tooltipContent="Resource/step properties"
-                            disabled={!resource}
-                            icon="label"
-                            tooltipPosition={'top'}
-                            onClick={this.handleWorkflowStepPropertiesButtonClicked}/>
-                <ToolButton tooltipContent="Edit workflow step"
-                            intent={Intent.PRIMARY}
-                            disabled={!workflowStep}
-                            icon="edit"
-                            tooltipPosition={'top'}
-                            onClick={this.handleEditOperationStepButtonClicked}/>
-                <ToolButton tooltipContent="Remove workflow step and its resource"
-                            disabled={!workflowStep}
-                            icon="remove"
-                            tooltipPosition={'top'}
-                            onClick={this.handleRemoveOperationStepButtonClicked}/>
-                <ToolButton tooltipContent="Clean workspace, remove all steps and resources"
-                            disabled={!hasSteps}
-                            icon="delete"
-                            tooltipPosition={'top'}
-                            onClick={this.handleCleanWorkflowButtonClicked}/>
                 {workflowStep ? <WorkflowStepPropertiesDialog selectedWorkflowStep={workflowStep}/> : null}
                 {isOperationStepSelected
-                 ? <OperationStepDialog id={EDIT_OPERATION_STEP_DIALOG_ID} operationStep={workflowStep}/>
-                 : null}
+                    ? <OperationStepDialog id={EDIT_OPERATION_STEP_DIALOG_ID} operationStep={workflowStep}/>
+                    : null}
             </ButtonGroup>
         );
     }