closes CCI-Tools/cate#608

CCI-Tools · Apr 17, 2018 · f3790a5 · f3790a5
1 parent 080796d
commit f3790a5
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 19 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -2,6 +2,10 @@
 
 ### New Features and UX Improvements 
 
+* Some (text) areas in the UI should be user-selectable
+  [#608](https://github.com/CCI-Tools/cate/issues/608)
+* Cate Desktop reuses service started by another user
+  [#577](https://github.com/CCI-Tools/cate/issues/577)
 * Improve error messages and handling
   [#393](https://github.com/CCI-Tools/cate/issues/393)
 

diff --git a/app/styles.css b/app/styles.css
@@ -1,5 +1,12 @@
 @import url(node_modules/cesium/Build/Cesium/Widgets/widgets.css);
 
+/*
+ * A class used to mark elements that are user-selectable
+ */
+.user-selectable {
+    user-select: auto;
+}
+
 /*
  * Disable highlighting/selecting across the application
  * Solution taken from https://github.com/electron/electron/issues/2538

diff --git a/src/renderer/containers/DataSourcesPanel.tsx b/src/renderer/containers/DataSourcesPanel.tsx
@@ -363,8 +363,8 @@ class DataSourcesList extends React.PureComponent<IDataSourcesListProps, null> {
             <div style={DataSourcesList.ITEM_DIV_STYLE}>
                 {this.renderIcon(dataSource)}
                 <div>
-                    <div>{title}</div>
-                    <div style={DataSourcesList.ID_DIV_STYLE}>{id}</div>
+                    <div className="user-selectable">{title}</div>
+                    <div className="user-selectable" style={DataSourcesList.ID_DIV_STYLE}>{id}</div>
                 </div>
             </div>
         );
@@ -375,7 +375,7 @@ class DataSourcesList extends React.PureComponent<IDataSourcesListProps, null> {
         return (
             <div style={DataSourcesList.ITEM_DIV_STYLE}>
                 {this.renderIcon(dataSource)}
-                <span>{id}</span>
+                <span className="user-selectable">{id}</span>
             </div>
         );
     }
@@ -440,17 +440,17 @@ class DataSourceDetails extends React.PureComponent<IDataSourceDetailsProps, nul
                     <tbody>
                     <tr>
                         <td/>
-                        <td>{meta_info.bbox_maxy}&#176;</td>
+                        <td className="user-selectable">{meta_info.bbox_maxy}&#176;</td>
                         <td/>
                     </tr>
                     <tr>
-                        <td>{meta_info.bbox_minx}&#176;</td>
+                        <td className="user-selectable">{meta_info.bbox_minx}&#176;</td>
                         <td/>
-                        <td>{meta_info.bbox_maxx}&#176;</td>
+                        <td className="user-selectable">{meta_info.bbox_maxx}&#176;</td>
                     </tr>
                     <tr>
                         <td/>
-                        <td>{meta_info.bbox_miny}&#176;</td>
+                        <td className="user-selectable">{meta_info.bbox_miny}&#176;</td>
                         <td/>
                     </tr>
                     </tbody>
@@ -465,11 +465,11 @@ class DataSourceDetails extends React.PureComponent<IDataSourceDetailsProps, nul
                     <tbody>
                     <tr>
                         <td>Start</td>
-                        <td>{dataSource.temporalCoverage[0]}</td>
+                        <td className="user-selectable">{dataSource.temporalCoverage[0]}</td>
                     </tr>
                     <tr>
                         <td>End</td>
-                        <td>{dataSource.temporalCoverage[1]}</td>
+                        <td className="user-selectable">{dataSource.temporalCoverage[1]}</td>
                     </tr>
                     </tbody>
                 </table>
@@ -479,7 +479,7 @@ class DataSourceDetails extends React.PureComponent<IDataSourceDetailsProps, nul
         let summary;
         if (meta_info.abstract) {
             summary = (<div><h5>Summary</h5>
-                <p>{meta_info.abstract}</p>
+                <p className="user-selectable">{meta_info.abstract}</p>
             </div>)
         }
 
@@ -504,14 +504,14 @@ class DataSourceDetails extends React.PureComponent<IDataSourceDetailsProps, nul
             const variable = variables[rowIndex];
             return (
                 <Cell tooltip={variable.long_name}>
-                    <TruncatedFormat>{variable.name}</TruncatedFormat>
+                    <TruncatedFormat className="user-selectable">{variable.name}</TruncatedFormat>
                 </Cell>
             );
         }
 
         function renderUnit(rowIndex: number) {
             const variable = variables[rowIndex];
-            return (<Cell><TruncatedFormat>{variable.units || '-'}</TruncatedFormat></Cell>);
+            return (<Cell><TruncatedFormat className="user-selectable">{variable.units || '-'}</TruncatedFormat></Cell>);
         }
 
         function getCellClipboardData(row: number, col: number) {

diff --git a/src/renderer/containers/JobFailureDialog.tsx b/src/renderer/containers/JobFailureDialog.tsx
@@ -2,8 +2,7 @@ import * as React from 'react';
 import { ModalDialog } from "../components/ModalDialog";
 import {
     ERROR_CODE_INVALID_PARAMS,
-    ERROR_CODE_OS_ERROR,
-    ERROR_CODE_OUT_OF_MEMORY, getJobFailureIconName, getJobFailureTitle,
+    getJobFailureIconName, getJobFailureTitle,
     JobFailure
 } from "../webapi";
 import { Button, Checkbox, Collapse, IconName, Label } from "@blueprintjs/core";
@@ -115,7 +114,7 @@ class JobFailureDialog extends React.Component<DispatchProp<State> & IJobFailure
                 <div style={{marginTop: '0.5em'}}>
                     <Button onClick={this.handleShowDetails}>{this.state.showDetails ? "Hide" : "Show"} Details</Button>
                     <Collapse isOpen={this.state.showDetails}>
-                        <pre style={{overflow: 'auto', height: '20em'}}>{this.props.jobFailure.data.traceback}</pre>
+                        <pre className="user-selectable" style={{overflow: 'auto', height: '20em'}}>{this.props.jobFailure.data.traceback}</pre>
                     </Collapse>
                 </div>
             );

diff --git a/src/renderer/containers/OperationsPanel.tsx b/src/renderer/containers/OperationsPanel.tsx
@@ -276,7 +276,7 @@ class OperationsPanel extends React.Component<IOperationsPanelProps & DispatchPr
             title = operation.name;
 
             if (operation.description) {
-                description = (<p><em>{operation.description}</em></p>);
+                description = (<p className="user-selectable">{operation.description}</p>);
             }
 
             if (operation.tags) {
@@ -287,7 +287,7 @@ class OperationsPanel extends React.Component<IOperationsPanelProps & DispatchPr
                 const outputElems = operation.outputs.map(output => (
                     <li key={output.name}>
                         <LabelWithType label={output.name} dataType={output.dataType} units={output.units}/>
-                        {OperationsPanel.getOutputDescriptionText(output)}
+                        <span className="user-selectable">{OperationsPanel.getOutputDescriptionText(output)}</span>
                     </li>
                 ));
                 outputs = (
@@ -305,7 +305,7 @@ class OperationsPanel extends React.Component<IOperationsPanelProps & DispatchPr
                 const inputElems = operation.inputs.map(input => (
                     <li key={input.name}>
                         <LabelWithType label={input.name} dataType={input.dataType} units={input.units}/>
-                        {OperationsPanel.getInputDescriptionText(input)}
+                        <span className="user-selectable">{OperationsPanel.getInputDescriptionText(input)}</span>
                     </li>
                 ));
                 inputs = (
@@ -322,7 +322,7 @@ class OperationsPanel extends React.Component<IOperationsPanelProps & DispatchPr
         return (
             <ScrollablePanelContent>
                 <Card>
-                    <h5>{title}</h5>
+                    <h5 className="user-selectable">{title}</h5>
                     {description}
                     {tags}
                     {outputs}