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

Alicja 12 tooltip flickering #75

Merged
merged 4 commits into from
Aug 13, 2020
Merged

Alicja 12 tooltip flickering #75

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6f5dce2
fix tooltip flickering - related to issue #12
AliceBalfanz Aug 12, 2020
f3d76de
fix tooltip of AddStep #12
AliceBalfanz Aug 13, 2020
f268a39
added changes
AliceBalfanz Aug 13, 2020
97b30b1
some styling
AliceBalfanz Aug 13, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGES.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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