Skip to content

Commit

Permalink
feat(dashboard): Add support for applications
Browse files Browse the repository at this point in the history
  • Loading branch information
FranklinWaller committed Aug 21, 2019
1 parent 68ce425 commit 4a4bafd
Show file tree
Hide file tree
Showing 17 changed files with 280 additions and 112 deletions.
11 changes: 1 addition & 10 deletions index.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>Authentication</title>
<title>PlayOS</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
Expand All @@ -13,15 +13,6 @@
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-76140988-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments) };
gtag('js', new Date());

gtag('config', 'UA-76140988-1');
</script>
</head>
<body>
<div id="app"></div>
Expand Down
16 changes: 10 additions & 6 deletions src/js/components/molecules/App/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,10 @@ import { confirm } from 'material-ui-dialogs';
import Configuration from '../../../Configuration';
import AppUninstallDialog from '../../molecules/AppUninstallDialog';
import AppService from '../../../services/AppService';
import styles from './App.scss';
import { openApp } from '../../../store/AppCanvasStore';
import Grid from '@material-ui/core/Grid';

const styles = require('./App.scss');

const popoverStyle = {
textAlign: 'center',
Expand Down Expand Up @@ -119,13 +121,13 @@ class App extends React.Component {

render() {
return (
<div className="col-3-sm" onTouchEnd={this.handleTouchEnd} onContextMenu={this.handleContextMenuRequest} ref={(elem) => { this.wrapperElem = elem; }}>
<Grid item xs={3} sm={2} md={2} lg={2} ref={(elem) => this.wrapperElem = elem}>
<AppUninstallDialog app={this.props.app} onRequestClose={this.handleDialogClose} isOpen={this.state.showUninstsallDialog} />
<div ref={(tappable) => { this.tappableElem = tappable; }} className="App" component="div" onClick={this.handleAppClick}>
<div className="App-Icon">
<div ref={(tappable) => { this.tappableElem = tappable; }} className={styles['App']} component="div" onClick={this.handleAppClick}>
<div className={styles['App-Icon']}>
<img alt={this.props.app.title} src={this.getAppIcon()} />
</div>
<span className="App-Title">
<span className={styles['App-Title']}>
<Typography noWrap variant="body1">{this.props.app.title}</Typography>
</span>
<Popover
Expand All @@ -141,7 +143,9 @@ class App extends React.Component {
</Menu>
</Popover>
</div>
</div>
</Grid>
// <div className="col-3-sm" onTouchEnd={this.handleTouchEnd} onContextMenu={this.handleContextMenuRequest} ref={(elem) => { this.wrapperElem = elem; }}>
// </div>
);
}
}
Expand Down
57 changes: 54 additions & 3 deletions src/js/components/molecules/App/App.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,56 @@
$amountOfApps: 4;
.App {
width: 100%;
height: 145px;
text-align: center;
cursor: pointer;
// text-shadow: black 0px 0px 15px;
// white-space: nowrap;
// text-overflow: ellipsis;
// font-size: 21px;
// overflow: hidden;

:local .appWrapper {
width: calc(100% * (1 / #{$amountOfApps}));
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

&-UninstallButton {
position: absolute;
background: white;
color: gray;
border:2px solid gray;
width: 35px;
height: 35px;
border-radius: 50%;
text-align: center;
line-height: 35px;
font-size: 19px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
}

&-Title {
position: relative;
z-index: 2;
display: block;
color: #373737;
}

&-Icon {
// filter: drop-shadow(5px 15px 16px #000000);
position: relative;
z-index: 1;

img {
width: 100%;
max-height: 100%;
}
}
}
46 changes: 0 additions & 46 deletions src/js/components/organims/AppSection/AppSection.jsx

This file was deleted.

15 changes: 10 additions & 5 deletions src/js/components/organims/AppSection/AppSection.styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -59,10 +59,14 @@ $max-width-app-section-wrapper: 1000px;
.AppSection {
max-width: $app-section-width;
margin:0 auto;
overflow: scroll;
-webkit-overflow-scrolling: touch;
// overflow: scroll;
// -webkit-overflow-scrolling: touch;
padding-top: 50px;

&-Title {
margin-bottom: 1.5em!important;
}

&-Wrapper-Shadow-Top {
display: none;
width: 100%;
Expand All @@ -88,12 +92,13 @@ $max-width-app-section-wrapper: 1000px;
// background: rgba(255, 255, 255, 0.71);

&-Wrapper {
background-color: rgba(255, 255, 255, 0.40);
box-shadow: 0 40px 60px 0 rgba(0,0,0,0.05);
background-color: rgba(255, 255, 255, 0.90)!important;
// box-shadow: 0 40px 60px 0 rgba(0,0,0,0.05);
overflow-y: auto;
margin: 10px;
max-height: calc(98% - 6px);


&.shadow-top {
.AppSection-Wrapper-Shadow-Top {
display: block;
Expand Down Expand Up @@ -128,7 +133,7 @@ $max-width-app-section-wrapper: 1000px;

&-Wrapper {
max-width: $max-width-app-section-wrapper;
margin: 236px auto 0;
margin: 96px auto 0;
max-height: 85%;
}

Expand Down
46 changes: 46 additions & 0 deletions src/js/components/organims/AppSection/AppSection.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import * as React from 'react';
import { connect } from 'react-redux';
import Typography from '@material-ui/core/Typography';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import App from '../../molecules/App';
import Application from '../../../models/Application';
// import Folder from '../Folder';
const styles = require('./AppSection.styles.scss');

interface Props {
apps: Application[];
}

function AppSection(props: Props) {
return (
<React.Fragment>
<Paper className={styles['AppSection-Wrapper']}>
<div className={styles.AppSection}>
<div className={styles['AppSection-Apps']}>
<Typography variant="h4" className={styles['AppSection-Title']}>Apps</Typography>
<Grid container spacing={4}>
{props.apps.map((app) => {
if (app.isFolder) {
// return <Folder key={app.id} folder={app} />;
}

return <App key={app.id} app={app} />;
})}
</Grid>
</div>
</div>
</Paper>
</React.Fragment>
);
}

const mapStateToProps = (store: any) => {
console.log('[] store -> ', store);
return {
apps: store.ApplicationStore.apps,
};
};

// @ts-ignore
export default connect(mapStateToProps)(AppSection);
8 changes: 7 additions & 1 deletion src/js/layout/DefaultLayout.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@ class DefaultLayout extends React.Component {
[styles.defaultLayoutBackgroundDefault]: !wallpaper,
});

console.log('[] styles -> ', styles);

return (
<MuiThemeProvider>
<div className={styles.defaultLayout}>
Expand All @@ -54,7 +56,11 @@ class DefaultLayout extends React.Component {
</section>
}

{this.props.currentPathName === '/home' && <div>{this.props.children}</div> }
{this.props.currentPathName === '/home' &&
<div className={styles.childrenWrapper}>
{this.props.children}
</div>
}
<SnackBarMessage />
</div>
</MuiThemeProvider>
Expand Down
10 changes: 8 additions & 2 deletions src/js/layout/DefaultLayout.scss
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
.defaultLayout {
position: fixed;
// position: fixed;
width: 100%;
height: 100%;

&Background {
position: absolute;
top: 0;
background-color: #252525;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
transition: background-image 2s ease-in-out;
width: 100%;
height: 100%;
z-index: -1;

&Default {
background-image: url('/res/img/background.jpg')!important;
Expand Down Expand Up @@ -61,3 +61,9 @@
}

}

.childrenWrapper {
position: absolute;
width: 100%;
height: 100%;
}
14 changes: 6 additions & 8 deletions src/js/models/Application.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,26 +10,24 @@ interface ApplicationProperties {
},
}

enum ApplicationStatus {
export enum ApplicationStatus {
STANDARD = 'STANDARD',
}

interface Application {
id: string,
title: string,
storeTitle: string,
namespace: string,
main: string,
icon: string,
properties?: ApplicationProperties,
status: ApplicationStatus,
isFolder?: boolean,
isRemoteFolder?: boolean,
// isRemoteFolder?: boolean,
apps?: Application[],
businessInfo: {
name: string,
id: string,
},
// businessInfo: {
// name: string,
// id: string,
// },
supportedDeviceTypes: string[],
}

Expand Down
6 changes: 4 additions & 2 deletions src/js/pages/HomePage/HomePage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { UserInfo, loadUserInfo } from '../../store/UserInfoStore';
import KeyService from '../../services/KeyService';
import Header from '../../components/molecules/Header';
import AppSection from '../../components/organims/AppSection';
import { loadApps } from '../../store/ApplicationStore';
const styles = require('./HomePage.scss');

interface Props {
Expand All @@ -27,6 +28,7 @@ class HomePage extends React.Component<Props, State> {

if (!this.props.user.info.fullName && keys) {
this.props.dispatch(loadUserInfo(keys));
this.props.dispatch(loadApps());
}
}

Expand All @@ -48,10 +50,10 @@ class HomePage extends React.Component<Props, State> {
<LoginLoadingScreen />
}
{this.state.isLoaded &&
<div>
<>
<Header />
<AppSection />
</div>
</>
}
</React.Fragment>
);
Expand Down
11 changes: 11 additions & 0 deletions src/js/services/UserService.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,16 @@
import IProvider, { PrivateKey } from './providers/IProvider';
import Configuration from '../Configuration';
import Application from '../models/Application';

class UserService {
static async logout() {

}

static async getInstalled(keys: PrivateKey): Promise<Application[]> {
const provider: IProvider = Configuration.get('provider');
return provider.getInstalledApplications(keys);
}
}

export default UserService;
Loading

0 comments on commit 4a4bafd

Please sign in to comment.