Skip to content
This repository has been archived by the owner on Aug 29, 2023. It is now read-only.

Commit

Permalink
Merge pull request #75 from CCI-Tools/alicja-12-tooltip-flickering
Browse files Browse the repository at this point in the history 
Alicja 12 tooltip flickering
  • Loading branch information
@AliceBalfanz
AliceBalfanz authored Aug 13, 2020
2 parents 2d56837 + 97b30b1 commit 08842ae
Show file tree
Hide file tree
Showing 9 changed files with 318 additions and 226 deletions.
1 change: 1 addition & 0 deletions CHANGES.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
* The UI uses now web versions of native (electron) file and directory choosers. (#64)
* The UI uses now web versions of native (electron) message boxes. (#47)
* Fixed storing of preferences
* Fixed flickering tooltips

### Changes in v2.0.0-dev.4

Expand Down
31 changes: 19 additions & 12 deletions src/renderer/components/ToolButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react';
import { CSSProperties } from 'react';
import { AnchorButton, IconName, Intent, PopoverPosition, Tooltip } from '@blueprintjs/core';
import {CSSProperties} from 'react';
import {AnchorButton, IconName, Intent, Popover, PopoverPosition, Tooltip} from '@blueprintjs/core';

export interface IToolButtonProps {
onClick?: () => void;
Expand All @@ -25,20 +25,27 @@ export function ToolButton(props: IToolButtonProps) {
className = `${className} ${props.className}`;
}
const button = (
<AnchorButton className={className}
onClick={props.onClick}
disabled={props.disabled}
icon={props.icon}
intent={props.intent}
style={props.style}
text={props.text}
active={props.active}
<AnchorButton
className={className}
onClick={props.onClick}
disabled={props.disabled}
icon={props.icon}
intent={props.intent}
style={props.style}
text={props.text}
active={props.active}
/>
);
if (props.tooltipContent) {
return (
<Tooltip content={props.tooltipContent}
position={props.tooltipPosition || PopoverPosition.AUTO}>{button}</Tooltip>
<Popover>
<Tooltip
content={props.tooltipContent}
position={props.tooltipPosition || PopoverPosition.AUTO}
>
{button}
</Tooltip>
</Popover>
);
} else {
return button;
Expand Down
104 changes: 61 additions & 43 deletions src/renderer/containers/DataSourcesPanel.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import * as React from 'react';
import { CSSProperties } from 'react';
import { connect } from 'react-redux';
import { Cell, Column, Table, TruncatedFormat } from '@blueprintjs/table';
import {CSSProperties} from 'react';
import {connect} from 'react-redux';
import {Cell, Column, Table, TruncatedFormat} from '@blueprintjs/table';
import ReactMarkdown from 'react-markdown';
import { EcvMeta } from '../ecv-meta';
import { DataSourceState, DataStoreNotice, DataStoreState, State } from '../state';
import {EcvMeta} from '../ecv-meta';
import {DataSourceState, DataStoreNotice, DataStoreState, State} from '../state';
import {
AnchorButton,
ButtonGroup,
Expand All @@ -22,19 +22,19 @@ import {
Tabs,
Tag
} from '@blueprintjs/core';
import { ListBox, ListBoxSelectionMode } from '../components/ListBox';
import { Card } from '../components/Card';
import { ScrollablePanelContent } from '../components/ScrollableContent';
import { ContentWithDetailsPanel } from '../components/ContentWithDetailsPanel';
import { ToolButton } from '../components/ToolButton';
import { TextWithLinks } from '../components/TextWithLinks';
import {ListBox, ListBoxSelectionMode} from '../components/ListBox';
import {Card} from '../components/Card';
import {ScrollablePanelContent} from '../components/ScrollableContent';
import {ContentWithDetailsPanel} from '../components/ContentWithDetailsPanel';
import {ToolButton} from '../components/ToolButton';
import {TextWithLinks} from '../components/TextWithLinks';
import DownloadDatasetDialog from './DownloadDataSourceDialog';
import OpenDatasetDialog from './OpenDatasetDialog';
import AddDatasetDialog from './AddDatasetDialog';
import RemoveDatasetDialog from './RemoveDatasetDialog';
import * as actions from '../actions';
import * as selectors from '../selectors';
import { NO_DATA_SOURCES_FOUND, NO_DATA_STORES_FOUND, NO_LOCAL_DATA_SOURCES } from '../messages';
import {NO_DATA_SOURCES_FOUND, NO_DATA_STORES_FOUND, NO_LOCAL_DATA_SOURCES} from '../messages';

import _ecvMeta from '../resources/ecv-meta.json';

Expand Down Expand Up @@ -206,32 +206,44 @@ class DataSourcesPanel extends React.Component<IDataSourcesPanelProps & IDataSou
let primaryAction;
if (isLocalStore) {
primaryAction = (
<ToolButton tooltipContent="Open file data source"
intent={Intent.PRIMARY}
onClick={this.handleShowOpenDatasetDialog}
disabled={!canOpen}
icon="folder-shared-open"/>
<ToolButton
tooltipContent="Open file data source"
intent={Intent.PRIMARY}
onClick={this.handleShowOpenDatasetDialog}
disabled={!canOpen}
icon="folder-shared-open"
tooltipPosition={'top'}
/>
);
} else {
primaryAction = (
<ToolButton tooltipContent="Download and/or open remote data source"
intent={Intent.PRIMARY}
onClick={this.handleShowDownloadDataSourceDialog}
disabled={!canDownload}
icon="cloud-download"/>
<ToolButton
tooltipContent="Download and/or open remote data source"
intent={Intent.PRIMARY}
onClick={this.handleShowDownloadDataSourceDialog}
disabled={!canDownload}
icon="cloud-download"
tooltipPosition={'top'}
/>
);
}
const actionComponent = (
<ButtonGroup>
<ToolButton tooltipContent="Add file data source"
intent={(isDynamicLocalStore && !hasDataSources) ? Intent.PRIMARY : Intent.NONE}
onClick={this.handleAddDatasetDialog}
disabled={!canAdd}
icon="add"/>
<ToolButton tooltipContent="Remove file data source"
onClick={this.handleRemoveDatasetDialog}
disabled={!canRemove}
icon="trash"/>
<ToolButton
tooltipContent="Add file data source"
intent={(isDynamicLocalStore && !hasDataSources) ? Intent.PRIMARY : Intent.NONE}
onClick={this.handleAddDatasetDialog}
disabled={!canAdd}
icon="add"
tooltipPosition={'top'}
/>
<ToolButton
tooltipContent="Remove file data source"
onClick={this.handleRemoveDatasetDialog}
disabled={!canRemove}
icon="trash"
tooltipPosition={'top'}
/>
{primaryAction}
<AddDatasetDialog/>
<RemoveDatasetDialog/>
Expand Down Expand Up @@ -363,16 +375,22 @@ class DataSourcesPanel extends React.Component<IDataSourcesPanelProps & IDataSou
</Label>
<span style={DataSourcesPanel.SPACER_STYLE}/>
<ButtonGroup>
<ToolButton tooltipContent="Show/hide data store description"
onClick={this.handleShowDataStoreDescriptionChanged}
disabled={!hasDataStoreDescription}
active={showDataStoreDescription}
icon="help"/>
<ToolButton tooltipContent="Show/hide data store notices"
onClick={this.handleShowDataStoreNoticesChanged}
disabled={!hasDataStoreNotices}
active={showDataStoreNotices}
icon="notifications"/>
<ToolButton
tooltipContent="Show/hide data store description"
onClick={this.handleShowDataStoreDescriptionChanged}
disabled={!hasDataStoreDescription}
active={showDataStoreDescription}
icon="help"
tooltipPosition={'top'}
/>
<ToolButton
tooltipContent="Show/hide data store notices"
onClick={this.handleShowDataStoreNoticesChanged}
disabled={!hasDataStoreNotices}
active={showDataStoreNotices}
icon="notifications"
tooltipPosition={'top'}
/>
</ButtonGroup>
</div>

Expand Down Expand Up @@ -538,8 +556,8 @@ class DataSourcesList extends React.PureComponent<IDataSourcesListProps, null> {
<div className="user-selectable" style={DataSourcesList.ID_DIV_STYLE}>{dataSource.id}</div>
</div>
) : (
<span className="user-selectable">{title}</span>
)}
<span className="user-selectable">{title}</span>
)}
</div>
);
}
Expand Down
68 changes: 40 additions & 28 deletions src/renderer/containers/LayersPanel.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { connect, DispatchProp } from 'react-redux';
import {connect, DispatchProp} from 'react-redux';
import {
ColorMapCategoryState,
ImageLayerState,
Expand All @@ -11,18 +11,18 @@ import {
VariableImageLayerState,
VariableState
} from '../state';
import { ButtonGroup, Checkbox, Icon, Intent, Label, Radio, RadioGroup, Slider } from '@blueprintjs/core';
import { ListBox, ListBoxSelectionMode } from '../components/ListBox';
import {ButtonGroup, Checkbox, Icon, Intent, Label, Radio, RadioGroup, Slider} from '@blueprintjs/core';
import {ListBox, ListBoxSelectionMode} from '../components/ListBox';
import * as actions from '../actions';
import * as selectors from '../selectors';
import { ContentWithDetailsPanel } from '../components/ContentWithDetailsPanel';
import {ContentWithDetailsPanel} from '../components/ContentWithDetailsPanel';
import LayerSourcesDialog from './LayerSourcesDialog';
import { AUTO_LAYER_ID, getLayerDisplayName, getLayerTypeIconName } from '../state-util';
import { ScrollablePanelContent } from '../components/ScrollableContent';
import { ViewState } from '../components/ViewState';
import { NO_LAYER_SELECTED, NO_LAYERS_EMPTY_VIEW, NO_LAYERS_NO_VIEW } from '../messages';
import { SubPanelHeader } from '../components/SubPanelHeader';
import { ToolButton } from '../components/ToolButton';
import {AUTO_LAYER_ID, getLayerDisplayName, getLayerTypeIconName} from '../state-util';
import {ScrollablePanelContent} from '../components/ScrollableContent';
import {ViewState} from '../components/ViewState';
import {NO_LAYER_SELECTED, NO_LAYERS_EMPTY_VIEW, NO_LAYERS_NO_VIEW} from '../messages';
import {SubPanelHeader} from '../components/SubPanelHeader';
import {ToolButton} from '../components/ToolButton';

interface ILayersPanelProps {
selectedVariable: VariableState | null,
Expand Down Expand Up @@ -154,8 +154,8 @@ class LayersPanel extends React.Component<ILayersPanelProps & DispatchProp<State

private handleChangedLayerSplitMode(event) {
this.props.dispatch(actions.setLayerSplitMode(this.props.activeView.id,
this.props.selectedLayerId,
event.target.value));
this.props.selectedLayerId,
event.target.value));
}

private handleChangedLayerSelection(newSelection: string[]) {
Expand Down Expand Up @@ -187,22 +187,34 @@ class LayersPanel extends React.Component<ILayersPanelProps & DispatchProp<State
const canMoveLayerDown = selectedLayerIndex >= 0 && selectedLayerIndex < layerCount - 1;
return (
<ButtonGroup>
<ToolButton tooltipContent="Add a new layer"
intent={Intent.PRIMARY}
onClick={this.handleAddLayerButtonClicked}
icon="add"/>
<ToolButton tooltipContent="Remove selected layer"
disabled={!canRemoveLayer}
onClick={this.handleRemoveLayerButtonClicked}
icon="remove"/>
<ToolButton tooltipContent="Move layer up"
disabled={!canMoveLayerUp}
onClick={this.handleMoveLayerUpButtonClicked}
icon="arrow-up"/>
<ToolButton tooltipContent="Move layer down"
disabled={!canMoveLayerDown}
onClick={this.handleMoveLayerDownButtonClicked}
icon="arrow-down"/>
<ToolButton
tooltipContent="Add a new layer"
intent={Intent.PRIMARY}
onClick={this.handleAddLayerButtonClicked}
icon="add"
tooltipPosition={'top'}
/>
<ToolButton
tooltipContent="Remove selected layer"
disabled={!canRemoveLayer}
onClick={this.handleRemoveLayerButtonClicked}
icon="remove"
tooltipPosition={'top'}
/>
<ToolButton
tooltipContent="Move layer up"
disabled={!canMoveLayerUp}
onClick={this.handleMoveLayerUpButtonClicked}
icon="arrow-up"
tooltipPosition={'top'}
/>
<ToolButton
tooltipContent="Move layer down"
disabled={!canMoveLayerDown}
onClick={this.handleMoveLayerDownButtonClicked}
icon="arrow-down"
tooltipPosition={'top'}
/>
<LayerSourcesDialog/>
</ButtonGroup>
);
Expand Down
37 changes: 20 additions & 17 deletions src/renderer/containers/OperationsPanel.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { connect, DispatchProp } from 'react-redux';
import {connect, DispatchProp} from 'react-redux';
import {
ButtonGroup,
Classes,
Expand All @@ -11,19 +11,19 @@ import {
PopoverInteractionKind,
Tag
} from '@blueprintjs/core';
import { ContentWithDetailsPanel } from '../components/ContentWithDetailsPanel';
import { LabelWithType } from '../components/LabelWithType';
import { ListBox, ListBoxSelectionMode } from '../components/ListBox';
import { Card } from '../components/Card';
import {ContentWithDetailsPanel} from '../components/ContentWithDetailsPanel';
import {LabelWithType} from '../components/LabelWithType';
import {ListBox, ListBoxSelectionMode} from '../components/ListBox';
import {Card} from '../components/Card';
import OperationStepDialog from './OperationStepDialog';
import { OperationInputState, OperationOutputState, OperationState, State, WorkspaceState } from '../state';
import {OperationInputState, OperationOutputState, OperationState, State, WorkspaceState} from '../state';
import * as actions from '../actions';
import * as selectors from '../selectors';
import { ScrollablePanelContent } from '../components/ScrollableContent';
import { NO_OPERATIONS_FOUND } from '../messages';
import { ToolButton } from '../components/ToolButton';
import { NEW_OPERATION_STEP_DIALOG_ID } from './operation-step-dialog-ids';
import { TextWithLinks } from '../components/TextWithLinks';
import {ScrollablePanelContent} from '../components/ScrollableContent';
import {NO_OPERATIONS_FOUND} from '../messages';
import {ToolButton} from '../components/ToolButton';
import {NEW_OPERATION_STEP_DIALOG_ID} from './operation-step-dialog-ids';
import {TextWithLinks} from '../components/TextWithLinks';


interface IOperationsPanelProps {
Expand Down Expand Up @@ -147,12 +147,15 @@ class OperationsPanel extends React.Component<IOperationsPanelProps & DispatchPr
const canAddStepOperation = this.props.selectedOperation && this.props.workspace;
const actionComponent = (
<ButtonGroup>
<ToolButton tooltipContent="Add a new operation step to the workspace's workflow"
intent={Intent.PRIMARY}
onClick={this.handleAddOperationStepButtonClicked}
disabled={!canAddStepOperation}
text="Add Step..."
icon="play"/>
<ToolButton
tooltipContent={<span>Add a new operation step to<br/>the workspace's workflow</span>}
intent={Intent.PRIMARY}
onClick={this.handleAddOperationStepButtonClicked}
disabled={!canAddStepOperation}
text="Add Step..."
icon="play"
tooltipPosition={'top'}
/>
{canAddStepOperation ? <OperationStepDialog id={NEW_OPERATION_STEP_DIALOG_ID}/> : null}
</ButtonGroup>
);
Expand Down
Loading

0 comments on commit 08842ae

Please sign in to comment.