Basic App Layout

app/client/src/constants/ActionConstants.tsx

@@ -9,6 +9,11 @@ export type ActionType =
   | "REMOVE_WIDGET_CANVAS"
   | "LOAD_WIDGET_PANE"
   | "FETCH_PAGE"
+  | "ZOOM_IN_CANVAS"
+  | "ZOOM_OUT_CANVAS"
+  | "PUBLISH"
+  | "UNDO_CANVAS_ACTION"
+  | "REDO_CANVAS_ACTION"
 
 export const ActionTypes: { [id: string]: ActionType } = {
   UPDATE_CANVAS: "UPDATE_CANVAS",
@@ -17,7 +22,12 @@ export const ActionTypes: { [id: string]: ActionType } = {
   FETCH_PAGE: "FETCH_PAGE",
   DROP_WIDGET_CANVAS: "DROP_WIDGET_CANVAS",
   REMOVE_WIDGET_CANVAS: "REMOVE_WIDGET_CANVAS",
-  LOAD_WIDGET_PANE: "LOAD_WIDGET_PANE"
+  LOAD_WIDGET_PANE: "LOAD_WIDGET_PANE",
+  ZOOM_IN_CANVAS: "ZOOM_IN_CANVAS",
+  ZOOM_OUT_CANVAS: "ZOOM_OUT_CANVAS",
+  UNDO_CANVAS_ACTION: "UNDO_CANVAS_ACTION",
+  REDO_CANVAS_ACTION: "REDO_CANVAS_ACTION",
+  PUBLISH: "PUBLISH"
 }
 
 export interface ReduxAction<T> {
@@ -33,3 +43,5 @@ export interface LoadCanvasPayload {
 export interface LoadWidgetPanePayload {
   widgets: IWidgetProps[]
 }
+
+

app/client/src/editorComponents/ContainerComponent.tsx

@@ -4,8 +4,8 @@ import styled from "../constants/DefaultTheme"
 import React from "react"
 
 export const Container = styled("div")<IContainerProps>`
-  display: "flex"
-  flexDirection: ${props => {
+  display: flex;
+  flex-direction: ${props => {
     return props.orientation === "HORIZONTAL" ? "row" : "column"
   }};
   background: ${props => props.style.backgroundColor};

app/client/src/index.css

@@ -6,6 +6,7 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background: #efefef;
 }
 
 code {

app/client/src/mockResponses/CanvasResponse.tsx

@@ -6,9 +6,9 @@ const CanvasResponse: IContainerWidgetProps<any> = {
   widgetType: "CONTAINER_WIDGET",
   snapColumns: 10,
   snapRows: 10,
-  topRow: 100,
+  topRow: 60,
   bottomRow: 700,
-  leftColumn: 100,
+  leftColumn: 300,
   rightColumn: 1000,
   parentColumnSpace: 1,
   parentRowSpace: 1,

app/client/src/pages/Editor/Canvas.tsx

@@ -19,11 +19,7 @@ class Canvas extends Component<{
 
   render() {
     const pageWidget = this.props.pageWidget
-    return (
-      <div>
-        {pageWidget ? WidgetFactory.createWidget(pageWidget) : undefined}
-      </div>
-    )
+    return pageWidget ? WidgetFactory.createWidget(pageWidget) : null
   }
 }
 

app/client/src/pages/Editor/EditorHeader.tsx

@@ -0,0 +1,36 @@
+import React, { Component } from "react"
+import styled from "styled-components"
+import { connect } from "react-redux"
+import { AppState } from "../../reducers"
+import WidgetFactory from "../../utils/WidgetFactory"
+import { EditorHeaderReduxState } from "../../reducers/uiReducers/editorHeaderReducer";
+import { IWidgetProps } from "../../widgets/BaseWidget";
+
+const Header = styled.header`
+  height: 50px;
+  box-shadow: 0px 0px 3px #ccc;
+  background: #fff;
+`;
+
+
+class EditorHeader extends Component<EditorHeaderReduxState> {
+  render() {
+    return (
+      <Header>
+      </Header>
+    )
+  }
+}
+
+const mapStateToProps = (state: AppState, props: any): EditorHeaderReduxState => {
+  return {}
+}
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {}
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(EditorHeader)

app/client/src/pages/Editor/WidgetPane.tsx

@@ -7,9 +7,9 @@ import { IWidgetProps } from "../../widgets/BaseWidget";
 
 class WidgetPane extends Component<WidgetPaneReduxState> {
   render() {
-    return (<div style={{ height: "600px", width: "300px", backgroundColor: "#f4f4f4", position: "absolute", top: 100 }}>
+    return (<div style={{ width: "300px", backgroundColor: "#fff", borderRadius: "5px", boxShadow: "0px 0px 3px #ccc", padding: "5px 10px", display: "flex", flexFlow: "row wrap" }}>
       {this.props.widgets.map((widget: IWidgetProps) => {
-        return WidgetFactory.createWidget(widget)
+        
       })}
     </div>)
   }

app/client/src/pages/Editor/index.tsx

@@ -1,13 +1,40 @@
 import React, { Component } from "react"
+import styled from "styled-components"
 import Canvas from "./Canvas"
 import WidgetPane from "./WidgetPane"
+import EditorHeader from "./EditorHeader"
+import { CALCULATOR } from "@blueprintjs/icons/lib/esm/generated/iconContents";
+
+const ArtBoard = styled.section`
+  height: 100%;
+  width: 100%;
+  position: relative;
+  overflow-x: hidden;
+  overflow-y: auto;
+  margin: 0px 10px;
+`;
 
 class Editor extends Component {
   render() {
     return (
-      <div style={{ display: "flex", flexDirection: "row-reverse" }}>
-        <Canvas />
+      <div style={{
+
+      }}>
+        <EditorHeader></EditorHeader>
+      <div style={{ 
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "stretch",
+        justifyContent: "flex-start",
+        width: "100vw",
+        overflow: "hidden",
+        padding: "10px",
+        height: "calc(100vh - 60px)"}}>
         <WidgetPane />
+        <ArtBoard>
+          <Canvas />
+        </ArtBoard>
+      </div>
       </div>
     )
   }

app/client/src/reducers/index.tsx

@@ -4,6 +4,7 @@ import uiReducer from "./uiReducers"
 import { CanvasReduxState } from "./uiReducers/canvasReducer"
 import { CanvasWidgetsReduxState } from "./entityReducers/canvasWidgetsReducers"
 import { WidgetPaneReduxState } from "./uiReducers/widgetPaneReducer"
+import { EditorHeaderReduxState } from "./uiReducers/editorHeaderReducer"
 
 const appReducer = combineReducers({
   entities: entityReducer,
@@ -16,6 +17,7 @@ export interface AppState {
   ui: {
     canvas: CanvasReduxState
     widgetPane: WidgetPaneReduxState
+    editorHeader: EditorHeaderReduxState
   }
   entities: {
     canvasWidgets: CanvasWidgetsReduxState

app/client/src/reducers/uiReducers/editorHeaderReducer.tsx

@@ -0,0 +1,13 @@
+import { createReducer } from "../../utils/PicassoUtils"
+import {
+  ActionTypes,
+  ReduxAction
+} from "../../constants/ActionConstants"
+
+const initialState: EditorHeaderReduxState = {}
+
+const editorHeaderReducer = createReducer(initialState, {})
+
+export interface EditorHeaderReduxState {}
+
+export default editorHeaderReducer

app/client/src/reducers/uiReducers/index.tsx

@@ -1,6 +1,7 @@
 import { combineReducers } from "redux"
 import canvasReducer from "./canvasReducer"
-import widgetPaneReducer from "./widgetPaneReducer";
+import widgetPaneReducer from "./widgetPaneReducer"
+import editorHeaderReducer from "./editorHeaderReducer"
 
-const uiReducer = combineReducers({ canvas: canvasReducer, widgetPane: widgetPaneReducer })
+const uiReducer = combineReducers({ canvas: canvasReducer, widgetPane: widgetPaneReducer, editorHeader: editorHeaderReducer })
 export default uiReducer

app/client/yarn.lock

@@ -2962,6 +2962,15 @@ dnd-core@^7.4.0:
     lodash "^4.17.11"
     redux "^4.0.1"
 
+dnd-core@^7.7.0:
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/dnd-core/-/dnd-core-7.7.0.tgz#3166aefc8c5b85ca4ade4ae836712a3108975fab"
+  integrity sha512-+YqwflWEY1MEAEl2QiEiRaglYkCwIZryyQwximQGuTOm/ns7fS6Lg/i7OCkrtjM10D5FhArf/VUHIL4ZaRBK0g==
+  dependencies:
+    asap "^2.0.6"
+    invariant "^2.2.4"
+    redux "^4.0.1"
+
 dns-equal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/dns-equal/-/dns-equal-1.0.0.tgz#b39e7f1da6eb0a75ba9c17324b34753c47e0654d"
@@ -7695,12 +7704,12 @@ react-dev-utils@^7.0.1:
     strip-ansi "4.0.0"
     text-table "0.2.0"
 
-react-dnd-html5-backend@^7.4.3:
-  version "7.4.0"
-  resolved "https://registry.yarnpkg.com/react-dnd-html5-backend/-/react-dnd-html5-backend-7.4.0.tgz#d9c328a0c2a3ec0b73ae805c038f09827a7490ce"
+react-dnd-html5-backend@^7.4.0:
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/react-dnd-html5-backend/-/react-dnd-html5-backend-7.7.0.tgz#e2b8ea61a1bc34ba743b89cafcda6213b006c06a"
+  integrity sha512-JgKmWOxqorFyfGPeWV+SAPhVGFe6+LrOR24jETE9rrYZU5hCppzwK9ujjS508kWibeDvbfEgi9j5qC2wB1/MoQ==
   dependencies:
-    dnd-core "^7.4.0"
-    lodash "^4.17.11"
+    dnd-core "^7.7.0"
 
 react-dnd@^7.4.3:
   version "7.4.3"