5 files changed, 62 insertions, 2 deletions
diff --git a/frontend/app/views/page/components/page.editor.js b/frontend/app/views/page/components/page.editor.js
index a3e8513..cd61932 100644
--- a/frontend/app/views/page/components/page.editor.js
+++ b/frontend/app/views/page/components/page.editor.js
@@ -24,6 +24,7 @@ const defaultState = {
     w: 0, h: 0,
   },
   tile: null,
+  cursors: {},
 }
 
 class PageEditor extends Component {
@@ -62,7 +63,15 @@ class PageEditor extends Component {
     document.body.addEventListener('mouseup', this.handleMouseUp)
     window.addEventListener('resize', this.handleWindowResize)
     const bounds = this.getBoundingClientRect()
-    this.setState({ bounds })
+
+    let cursors = this.props.graph.show.res.uploads
+      .filter(upload => upload.tag === 'cursor')
+      .reduce((a,b) => {
+        a[b.id] = b
+        return a
+      }, {})
+
+    this.setState({ bounds, cursors })
   }
 
   componentDidUpdate(prevProps) {
@@ -196,6 +205,7 @@ class PageEditor extends Component {
               tile={tile}
               bounds={this.state.bounds}
               videoBounds={videoBounds}
+              cursors={this.state.cursors}
               box={currentTile && tile.id === currentTile.id && currentBox}
               onMouseDown={e => this.handleMouseDown(e, tile)}
               onDoubleClick={e => this.props.pageActions.showEditTileForm(tile.id)}
@@ -210,6 +220,7 @@ class PageEditor extends Component {
             tile={temporaryTile}
             bounds={this.state.bounds}
             videoBounds={videoBounds}
+            cursors={this.state.cursors}
             box={currentTile && temporaryTile.id === currentTile.id && currentBox}
             onMouseDown={e => this.handleMouseDown(e, temporaryTile)}
             onMouseEnter={e => {}}
diff --git a/frontend/app/views/page/page.actions.js b/frontend/app/views/page/page.actions.js
index e42d539..4a87a7f 100644
--- a/frontend/app/views/page/page.actions.js
+++ b/frontend/app/views/page/page.actions.js
@@ -50,6 +50,16 @@ export const toggleTileList = () => dispatch => {
   dispatch({ type: types.page.toggle_tile_list })
 }
 
+// Cursor list
+
+export const toggleCursorList = visible => dispatch => {
+  dispatch({ type: types.page.toggle_cursor_list, visible })
+}
+
+export const pickCursor = cursor => dispatch => {
+  dispatch({ type: types.page.pick_cursor, cursor })
+}
+
 // Popups
 
 export const loadPopups = (page, popups) => dispatch => {
diff --git a/frontend/app/views/page/page.container.js b/frontend/app/views/page/page.container.js
index 0ad9806..27cf928 100644
--- a/frontend/app/views/page/page.container.js
+++ b/frontend/app/views/page/page.container.js
@@ -1,5 +1,4 @@
 import React, { Component } from 'react'
-import { Route } from 'react-router-dom'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 
@@ -16,6 +15,7 @@ import PageEdit from 'app/views/graph/components/page.edit'
 import TileNew from 'app/views/tile/components/tile.new'
 import TileEdit from 'app/views/tile/components/tile.edit'
 import TileList from 'app/views/tile/components/tile.list'
+import CursorList from 'app/views/graph/components/cursor.list'
 
 import PageHeader from './components/page.header'
 import PageEditor from './components/page.editor'
@@ -72,6 +72,7 @@ class PageContainer extends Component {
         <div className='body'>
           <PageEditor />
           <div className={this.props.page.editor.sidebarOnRight ? 'sidebar' : 'sidebar left'}>
+            {this.props.page.editor.cursorList && <CursorList onClick={this.props.pageActions.pickCursor} />}
             {this.props.graph.editor.editingPage && <PageEdit />}
             {this.props.page.editor.addingTile && <TileNew />}
             {this.props.page.editor.editingTile && <TileEdit />}
diff --git a/frontend/app/views/page/page.css b/frontend/app/views/page/page.css
index 2e0efb9..8e6e156 100644
--- a/frontend/app/views/page/page.css
+++ b/frontend/app/views/page/page.css
@@ -174,3 +174,10 @@
   width: 6rem;
   max-width: 6rem;
 }
+
+/* sample cursor */
+
+.sampleCursor {
+  max-width: 50px;
+  max-height: 50px;
+}
diff --git a/frontend/app/views/page/page.reducer.js b/frontend/app/views/page/page.reducer.js
index a1f281a..9eb6ff7 100644
--- a/frontend/app/views/page/page.reducer.js
+++ b/frontend/app/views/page/page.reducer.js
@@ -11,7 +11,9 @@ const initialState = crudState('page', {
     tileList: false,
     showingPopups: true,
     sidebarOnRight: true,
+    cursorList: false,
     popups: {},
+    pickedCursor: null,
   },
   options: {
   }
@@ -98,6 +100,7 @@ export default function pageReducer(state = initialState, action) {
           addingTile: true,
           editingTile: false,
           tileList: false,
+          cursorList: false,
         }
       }
 
@@ -107,6 +110,7 @@ export default function pageReducer(state = initialState, action) {
         editor: {
           ...state.editor,
           addingTile: false,
+          cursorList: false,
         }
       }
 
@@ -118,6 +122,7 @@ export default function pageReducer(state = initialState, action) {
           addingTile: !state.editor.addingTile,
           editingTile: false,
           tileList: false,
+          cursorList: false,
         }
       }
 
@@ -131,6 +136,7 @@ export default function pageReducer(state = initialState, action) {
           editingTile: true,
           currentEditTileId: action.tile_id,
           tileList: false,
+          cursorList: false,
         }
       }
 
@@ -140,6 +146,7 @@ export default function pageReducer(state = initialState, action) {
         editor: {
           ...state.editor,
           editingTile: false,
+          cursorList: false,
         }
       }
 
@@ -152,6 +159,7 @@ export default function pageReducer(state = initialState, action) {
           addingTile: false,
           editingTile: false,
           tileList: true,
+          cursorList: false,
         }
       }
 
@@ -161,6 +169,7 @@ export default function pageReducer(state = initialState, action) {
         editor: {
           ...state.editor,
           tileList: false,
+          cursorList: false,
         }
       }
 
@@ -172,6 +181,7 @@ export default function pageReducer(state = initialState, action) {
           addingTile: false,
           editingTile: false,
           tileList: !state.editor.tileList,
+          cursorList: false,
         }
       }
 
@@ -183,6 +193,27 @@ export default function pageReducer(state = initialState, action) {
           addingTile: false,
           editingTile: false,
           tileList: false,
+          cursorList: false,
+        }
+      }
+
+    case types.page.toggle_cursor_list:
+      return {
+        ...state,
+        editor: {
+          ...state.editor,
+          cursorList: (typeof action.visible !== undefined)
+            ? action.visible : !state.editor.cursorList   
+        }
+      }
+
+    case types.page.pick_cursor:
+      return {
+        ...state,
+        editor: {
+          ...state.editor,
+          cursorList: false,
+          pickedCursor: action.cursor,
         }
       }