added support for directory images and cleaned up display of the home…

… directory view
finos · Mar 28, 2022 · 9af95d6 · 9af95d6
1 parent ff769b3
commit 9af95d6
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 8 deletions.
diff --git a/directory/src/data/apps.ts b/directory/src/data/apps.ts
@@ -2,6 +2,7 @@ export const appData = [
   {
     intents: [],
     icons: [{ icon: 'https://appd.kolbito.com/images/fdc3-logo.png' }],
+    images: [ {url:"https://appd.kolbito.com/demos/channel-manager/screen-1.png"}],
     start_url: 'https://appd.kolbito.com/demos/channel-manager/',
     appId: 'Channel-Manager',
     description: 'View and manage context on all channels.',
@@ -25,6 +26,7 @@ export const appData = [
       },
     ],
     icons: [{ icon: 'https://www.tradingview.com/static/images/favicon.ico' }],
+    images: [ {url:"https://appd.kolbito.com/demos/tradingview-blotter/screen-1.png"}],
     start_url: 'https://appd.kolbito.com/demos/tradingview-blotter/',
     appId: 'TradingViewBlotter',
     description: 'TradingView-based Blotter App',
@@ -43,6 +45,7 @@ export const appData = [
       },
     ],
     icons: [{ icon: 'https://newsapi.org/favicon-32x32.png' }],
+    images: [ {url:"https://appd.kolbito.com/demos/news-demo/screen-1.png"}],
     start_url: 'https://appd.kolbito.com/demos/news-demo/',
     appId: 'News-Demo',
     description: 'Demo fdc3 news feed using services from NewsAPI.org',
@@ -63,6 +66,7 @@ export const appData = [
     icons: [
       { icon: 'https://appd.kolbito.com/demos/tradingview-chart/icon.png' },
     ],
+    images: [ {url:"https://appd.kolbito.com/demos/tradingview-chart/screen-1.png"}],
     start_url: 'https://appd.kolbito.com/demos/tradingview-chart/',
     appId: 'TradingViewChart',
     description: 'Demo fdc3 chart using widgets from TradingView',
@@ -81,6 +85,7 @@ export const appData = [
       },
     ],
     icons: [{ icon: 'https://polygon.io/favicon.ico' }],
+    images: [ {url:"https://appd.kolbito.com/demos/ticker-demo/screen-1.png"}],
     start_url: 'https://appd.kolbito.com/demos/ticker-demo/',
     appId: 'Ticker-Demo',
     description: 'Demo fdc3 company information using services from Polygon.io',
@@ -93,6 +98,7 @@ export const appData = [
   {
     intents: [],
     icons: [{ icon: 'https://appd.kolbito.com/images/fdc3-logo.png' }],
+    images: [ {url:"https://appd.kolbito.com/demos/ticker-grid/screen-1.png"}],
     start_url: 'https://appd.kolbito.com/demos/ticker-grid/',
     appId: 'Ticker-Grid',
     description: 'fdc3 enabled grid of the S&P 500',

diff --git a/packages/main/src/types/FDC3Data.ts b/packages/main/src/types/FDC3Data.ts
@@ -66,6 +66,7 @@ export interface DirectoryApp {
   manifest_type: string;
   description: string;
   icons: Array<DirectoryIcon>;
+  images: Array<DirectoryImage>;
   appId: string;
   intents: Array<DirectoryIntent>;
 }
@@ -74,6 +75,10 @@ export interface DirectoryIcon {
   icon: string;
 }
 
+export interface DirectoryImage {
+  url: string;
+}
+
 export interface DirectoryIntent {
   name: string;
   display_name: string;

diff --git a/packages/renderer/homeView/src/DirectoryView.tsx b/packages/renderer/homeView/src/DirectoryView.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {Paper, Card, CardContent, CardMedia, Typography, CardActions, Button, Grid} from '@mui/material';
+import {Paper, Card, CardContent, CardMedia, CardHeader, Typography, CardActions, Button, Grid} from '@mui/material';
 import {TOPICS} from '../../../main/src/constants';
 import {DirectoryApp} from "../../../main/src/types/FDC3Data";
 
@@ -16,7 +16,16 @@ export class DirectoryView extends React.Component {
             //fetch apps from the directory, using system API (only available to system apps)
             if ((globalThis as any).home && (globalThis as any).home.getApps){
                 (globalThis as any).home.getApps().then(apps => {
-                    console.log("got apps", apps);
+                    //clean up / normalize some of the directory data
+                    apps.forEach((app : DirectoryApp) => {
+                        //put in place holder images and icons if they aren't there... 
+                        if (!app.images){
+                            app.images = [];
+                        }
+                        if (!app.icons) {
+                            app.icons = [];
+                        }
+                    });
                     this.setState({apps:apps});
                 });
             }
@@ -44,17 +53,28 @@ export class DirectoryView extends React.Component {
             backgroundColor:"#ccc"
         }}>
 
-            <Grid container spacing={3}>
+            <Grid container spacing={2} columns={{ xs: 4, sm: 8, md: 12 }}>
             {this.state.apps.map((app : DirectoryApp) => 
-                <Grid item xs={6}>
-                    <Card sx={{ maxWidth: 345 }}>
-                        {app.icons.map((icon) => 
-                        <CardMedia component="img" image={icon.icon} height="80">
+                <Grid item xs={4}>
+                    <Card sx={{ maxWidth: 345, minHeight: 350}}>
+                        {app.images.length > 0 ? 
+                        app.images.map((image) => 
+                        <CardMedia component="img" image={image.url} height="120">
 
                         </CardMedia>
-                        )}
+                        )
+                        :
+                        <CardHeader sx={{
+                            backgroundColor:"#999",
+                            height:80
+                        }}>
+                        </CardHeader>
+                        }
                      <CardContent>
                             <Typography gutterBottom variant="h5" component="div">
+                                {app.icons && app.icons.length > 0 &&
+                                    <img src={app.icons[0].icon} className="appIcon"></img>
+                                }
                                 {app.title}
                             </Typography>
                             <Typography variant="body2" color="text.secondary">

diff --git a/packages/renderer/homeView/src/index.css b/packages/renderer/homeView/src/index.css
@@ -0,0 +1,4 @@
+.appIcon {
+    width:1rem;
+    margin-right:.3rem;
+}