setting page background color

7 files changed, 71 insertions, 14 deletions

diff --git a/frontend/views/graph/components/page.form.js b/frontend/views/graph/components/page.form.js
index 26e30c9..38fee18 100644
--- a/frontend/views/graph/components/page.form.js
+++ b/frontend/views/graph/components/page.form.js
@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom'
 
 import { session } from '../../../session'
 
-import { TextInput, LabelDescription, TextArea, Checkbox, SubmitButton, Loader } from '../../../common'
+import { TextInput, ColorInput, LabelDescription, TextArea, Checkbox, SubmitButton, Loader } from '../../../common'
 
 const newPage = (data) => ({
   path: '',
@@ -11,7 +11,9 @@ const newPage = (data) => ({
   username: session('username'),
   description: '',
   settings: {
-    x: 0.05, y: 0.05,
+    x: 0.05,
+    y: 0.05,
+    background_color: '#000000',
   },
   ...data,
 })
@@ -72,6 +74,19 @@ export default class PageForm extends Component {
     })
   }
 
+  handleSettingsChange(e) {
+    const { name, value } = e.target
+    this.setState({
+      data: {
+        ...this.state.data,
+        settings: {
+          ...this.state.data.settings,
+          [name]: value,
+        }
+      }
+    })
+  }
+
   handleSubmit(e) {
     e.preventDefault()
     const { isNew, onSubmit } = this.props
@@ -95,6 +110,14 @@ export default class PageForm extends Component {
     }
   }
 
+  handleDelete() {
+    const { data } = this.state
+    console.log(data)
+    if (confirm('Really delete this page?')) {
+      actions.page.delete(page_id)
+    }
+  }
+
   render() {
     const { graph, isNew } = this.props
     const { title, submitTitle, errorFields, data } = this.state
@@ -123,16 +146,32 @@ export default class PageForm extends Component {
             onChange={this.handleChange.bind(this)}
             autoComplete="off"
           />
+          <ColorInput
+            title='BG'
+            name='background_color'
+            data={data.settings}
+            onChange={this.handleSettingsChange.bind(this)}
+            autoComplete="off"
+          />
           <TextArea
             title="Description"
             name="description"
             data={data}
             onChange={this.handleChange.bind(this)}
           />
-          <SubmitButton
-            title={submitTitle}
-            onClick={this.handleSubmit.bind(this)}
-          />
+          <div className='row buttons'>
+            <SubmitButton
+              title={submitTitle}
+              onClick={this.handleSubmit.bind(this)}
+            />
+            {!isNew && 
+              <SubmitButton
+                title={'Delete'}
+                className='destroy'
+                onClick={this.handleDelete.bind(this)}
+              />
+            }
+          </div>
           {!!errorFields.size &&
             <label>
               <span></span>
diff --git a/frontend/views/graph/components/page.handle.js b/frontend/views/graph/components/page.handle.js
index 06acc63..13eee45 100644
--- a/frontend/views/graph/components/page.handle.js
+++ b/frontend/views/graph/components/page.handle.js
@@ -19,7 +19,7 @@ export default class PageHandle extends Component {
   measure() {
     const { offsetWidth: width, offsetHeight: height } = this.ref.current
     const { id } = this.props.page
-    console.log(id, width, height)
+    // console.log(id, width, height)
     this.props.onMeasure({ id, width, height })
   }
   render() {
@@ -46,7 +46,7 @@ export default class PageHandle extends Component {
         onDoubleClick={() => history.push(url)}
         style={style}
       >
-        {page.title}
+        {page.path}
         <Link to={url}>{'>'}</Link>
       </div>
     )
diff --git a/frontend/views/graph/graph.reducer.js b/frontend/views/graph/graph.reducer.js
index 60f52ee..37798b3 100644
--- a/frontend/views/graph/graph.reducer.js
+++ b/frontend/views/graph/graph.reducer.js
@@ -90,7 +90,7 @@ export default function graphReducer(state = initialState, action) {
         editor: {
           ...state.editor,
           addingPage: false,
-          editingPage: true,
+          editingPage: !state.editor.editingPage,
         }
       }
 
diff --git a/frontend/views/page/components/page.editor.js b/frontend/views/page/components/page.editor.js
index 297f7e7..3878208 100644
--- a/frontend/views/page/components/page.editor.js
+++ b/frontend/views/page/components/page.editor.js
@@ -158,7 +158,7 @@ class PageEditor extends Component {
   }
 
   render(){
-    if (!this.state.bounds) {
+    if (!this.state.bounds || !this.props.page.show.res) {
       return (
         <div className='page' ref={this.pageRef} />
       )
@@ -167,8 +167,9 @@ class PageEditor extends Component {
     const currentTile = this.state.tile
     const currentBox = this.state.box
     const { res } = this.props.page.show
-    return (    
-      <div className='page' ref={this.pageRef}>
+    const pageStyle = { backgroundColor: res.settings.background_color || '#000000' }
+    return (
+      <div className='page' ref={this.pageRef} style={pageStyle}>
         {res.tiles.map(tile => {
           if (temporaryTile && temporaryTile.id === tile.id) {
             tile = temporaryTile
diff --git a/frontend/views/page/components/tile.form.js b/frontend/views/page/components/tile.form.js
index d570019..bfc5c0b 100644
--- a/frontend/views/page/components/tile.form.js
+++ b/frontend/views/page/components/tile.form.js
@@ -71,7 +71,7 @@ const newImage = (data) => ({
 const newText = (data) => ({
   settings: {
     ...newPosition(),
-    content: "What is up... I have no idea actually",
+    content: "",
     font_family: 'sans-serif',
     font_size: 16,
     font_style: 'normal',
diff --git a/frontend/views/page/page.css b/frontend/views/page/page.css
index 7747ddf..0005031 100644
--- a/frontend/views/page/page.css
+++ b/frontend/views/page/page.css
@@ -2,6 +2,11 @@
   padding: 1rem;
 }
 
+.page {
+  width: 100%;
+  height: 100%;
+}
+
 
 .tile {
   position: absolute;
diff --git a/frontend/views/page/page.reducer.js b/frontend/views/page/page.reducer.js
index 7bffe8e..2d80551 100644
--- a/frontend/views/page/page.reducer.js
+++ b/frontend/views/page/page.reducer.js
@@ -34,13 +34,25 @@ export default function pageReducer(state = initialState, action) {
       }
 
     case types.page.update:
+      console.log(action.data.res, state.show.res)
+      if (state.show.res && state.show.res.id === action.data.res.id) {
+        return {
+          ...state,
+          show: {
+            ...state.show,
+            res: {
+              ...action.data.res,
+              tiles: state.show.res.tiles,
+            }
+          }
+        }
+      }
       return {
         ...state,
         show: {
           ...state.show,
           res: {
             ...action.data.res,
-            tiles: state.show.res.tiles,
           }
         }
       }