diff --git a/src/component/app.tsx b/src/component/app.tsx index a8a66cdeb..9209e41a4 100644 --- a/src/component/app.tsx +++ b/src/component/app.tsx @@ -76,6 +76,9 @@ class App extends React.Component { // Todo: project and page don't update on page change const project = this.props.store.getCurrentProject(); const title = `${project && project.getName()}`; + const previewFrame = project && project.getPreviewFrame(); + const previewFramePath = + previewFrame && PathUtils.join(this.props.store.getStyleGuidePath(), 'alva', previewFrame); const DevTools = getDevTools(); @@ -101,7 +104,7 @@ class App extends React.Component { , - , + , diff --git a/src/component/preview.tsx b/src/component/preview.tsx index ebc7e0ebb..a4df2b428 100644 --- a/src/component/preview.tsx +++ b/src/component/preview.tsx @@ -49,4 +49,6 @@ ipcRenderer.on('open-styleguide', (event: {}, message: JsonObject) => { store.openStyleguide(message.styleGuidePath as string); }); -ReactDom.render(, document.getElementById('app')); +window.onload = () => { + ReactDom.render(, document.getElementById('app')); +}; diff --git a/src/electron/preview.html b/src/electron/preview.html index 363652b30..3780c310b 100644 --- a/src/electron/preview.html +++ b/src/electron/preview.html @@ -6,7 +6,6 @@
- - \ No newline at end of file + diff --git a/src/lsg/patterns/panes/preview-pane/index.tsx b/src/lsg/patterns/panes/preview-pane/index.tsx index 42e2df539..b789c20cc 100644 --- a/src/lsg/patterns/panes/preview-pane/index.tsx +++ b/src/lsg/patterns/panes/preview-pane/index.tsx @@ -2,6 +2,10 @@ import { colors } from '../../colors'; import * as React from 'react'; import styled from 'styled-components'; +export interface PreviewPaneProps { + previewFrame?: string; +} + const StyledPreviewPane = styled.div` flex-grow: 1; flex-shrink: 0; @@ -11,13 +15,21 @@ const StyledPreviewPane = styled.div` overflow: hidden; `; -const PreviewPane: React.StatelessComponent = props => ( - ' - }} - /> -); +export default class PreviewPane extends React.Component { + public constructor(props: PreviewPaneProps) { + super(props); + } + + public render(): JSX.Element { + const { previewFrame } = this.props; -export default PreviewPane; + return ( + ` + }} + /> + ); + } +} diff --git a/src/store/project/project.ts b/src/store/project/project.ts index 3f70e50b6..ed448281f 100644 --- a/src/store/project/project.ts +++ b/src/store/project/project.ts @@ -30,14 +30,21 @@ export class Project { */ @MobX.observable private pages: PageRef[] = []; + /** + * Path to the preview frame, relative to the projects.yaml file. + */ + @MobX.observable private previewFrame: string; + /** * Creates a new project. * @param id The technical (internal) ID of the project. * @param name The human-friendly name of the project. + * @param previewFrame Path to the preview frame, relative to the projects.yaml file. */ - public constructor(id: string, name: string) { + public constructor(id: string, name: string, previewFrame: string) { this.id = id; this.name = name; + this.previewFrame = previewFrame; } /** @@ -46,7 +53,11 @@ export class Project { * @return A new project object containing the loaded data. */ public static fromJsonObject(json: JsonObject, store: Store): Project { - const project: Project = new Project(json.id as string, json.name as string); + const project: Project = new Project( + json.id as string, + json.name as string, + json.previewFrame as string + ); const pages: PageRef[] = []; (json.pages as JsonArray).forEach((pageJson: JsonObject) => { @@ -91,6 +102,14 @@ export class Project { return this.pages as MobX.IObservableArray; } + /** + * Returns the configured path to the preview frame, relative to the projects.yaml file. + * @return Path to the configured preview frame + */ + public getPreviewFrame(): string { + return this.previewFrame; + } + /** * Serializes the project into a JSON object for persistence. * @return The JSON object to be persisted. @@ -104,6 +123,7 @@ export class Project { return { id: this.id, name: this.name, + previewFrame: this.previewFrame, pages: pagesJsonObject }; }