Lists of primitives (#247)

* Improving highlighting when clicking * Showing int cells right aligned * Improved how array of primitives and data cells are shown * Renamed the link to a more semantic ObjectCell * Fixed a type error * Do a delayed focus of the window * Only opening external links in the external browser * Major overhaul * Aligning on the way lists are displayed * Objects might be not sat
realm · Oct 13, 2017 · c94948e · c94948e
1 parent 87988aa
commit c94948e
Show file tree

Hide file tree

Showing 24 changed files with 1,039 additions and 533 deletions.
diff --git a/src/main/window-manager.ts b/src/main/window-manager.ts
@@ -33,6 +33,10 @@ export default class WindowManager {
         window.webContents.openDevTools({
           mode: 'detach',
         });
+        // Focus to original window, to prevent the dev tools from overlaying itself
+        setTimeout(() => {
+          window.focus();
+        }, 500);
       });
     }
 
@@ -63,8 +67,10 @@ export default class WindowManager {
 
     // Open all links in the external browser
     window.webContents.on('new-window', (event, openedUrl: string) => {
-      event.preventDefault();
-      shell.openExternal(openedUrl);
+      if (openedUrl.indexOf('http') === 0) {
+        event.preventDefault();
+        shell.openExternal(openedUrl);
+      }
     });
 
     window.on('closed', () => {

diff --git a/src/ui/realm-browser/Cell.tsx b/src/ui/realm-browser/Cell.tsx
@@ -2,86 +2,82 @@ import * as classnames from 'classnames';
 import * as React from 'react';
 import * as Realm from 'realm';
 
+import { IPropertyWithName } from './focus';
+import { DataCell } from './types/DataCell';
 import { DefaultCell } from './types/DefaultCell';
 import { ListCell } from './types/ListCell';
 import { ObjectCell } from './types/ObjectCell';
 import { StringCellContainer } from './types/StringCellContainer';
 
-export const Cell = ({
+const getCellContent = ({
   onUpdateValue,
-  onCellClick,
   property,
-  style,
   value,
-  width,
-  isHighlight,
-  onContextMenu,
 }: {
   onUpdateValue: (value: string) => void;
-  onCellClick: (property: Realm.ObjectSchemaProperty, value: any) => void;
   property: Realm.ObjectSchemaProperty;
-  style: React.CSSProperties;
   value: any;
-  width: number;
-  isHighlight: boolean;
-  onContextMenu: (e: React.SyntheticEvent<any>) => void;
 }) => {
-  let content;
   switch (property.type) {
     case 'int':
     case 'float':
     case 'double':
     case 'bool':
     case 'string':
     case 'date': {
-      content = (
+      return (
         <StringCellContainer
           property={property}
           value={value}
           onUpdateValue={onUpdateValue}
-          onContextMenu={onContextMenu}
-          onClick={onCellClick}
         />
       );
-      break;
     }
+    case 'data':
+      return <DataCell property={property} value={value} />;
     case 'list':
-      content = (
-        <ListCell
-          onContextMenu={onContextMenu}
-          property={property}
-          value={value}
-          onClick={onCellClick}
-        />
-      );
-      break;
+      return <ListCell property={property} value={value} />;
     case 'object':
-      content = (
-        <ObjectCell
-          onContextMenu={onContextMenu}
-          property={property}
-          value={value}
-          onClick={onCellClick}
-        />
-      );
-      break;
+      return <ObjectCell property={property} value={value} />;
     default:
-      content = (
-        <DefaultCell
-          onContextMenu={onContextMenu}
-          property={property}
-          value={value}
-        />
-      );
+      return <DefaultCell property={property} value={value} />;
   }
+};
 
+export const Cell = ({
+  onUpdateValue,
+  onCellClick,
+  property,
+  style,
+  value,
+  width,
+  isHighlighted,
+  onContextMenu,
+}: {
+  onUpdateValue: (value: string) => void;
+  onCellClick: (property: Realm.ObjectSchemaProperty, value: any) => void;
+  property: IPropertyWithName;
+  style: React.CSSProperties;
+  value: any;
+  width: number;
+  isHighlighted: boolean;
+  onContextMenu: (e: React.SyntheticEvent<any>) => void;
+}) => {
+  const content = getCellContent({
+    onUpdateValue,
+    property,
+    value,
+  });
   return (
     <div
+      className={classnames('RealmBrowser__Content__Cell', {
+        'RealmBrowser__Content__Cell--highlighted': isHighlighted,
+      })}
+      onClick={() => {
+        onCellClick(property, value);
+      }}
+      onContextMenu={onContextMenu}
       style={style}
-      className={classnames(
-        'RealmBrowser__Content__Cell',
-        isHighlight && 'Highlight',
-      )}
     >
       {content}
     </div>