font stylez!!!

1 files changed, 64 insertions, 2 deletions

diff --git a/frontend/views/page/components/tile.form.js b/frontend/views/page/components/tile.form.js
index 0935538..c3d509d 100644
--- a/frontend/views/page/components/tile.form.js
+++ b/frontend/views/page/components/tile.form.js
@@ -5,7 +5,7 @@ import { Link } from 'react-router-dom'
 
 import { session } from '../../../session'
 
-import { TextInput, NumberInput, Select, LabelDescription, TextArea, Checkbox, SubmitButton, Loader } from '../../../common'
+import { TextInput, NumberInput, ColorInput, Select, LabelDescription, TextArea, Checkbox, SubmitButton, Loader } from '../../../common'
 import { preloadImage } from '../../../util'
 
 import * as tileActions from '../../tile/tile.actions'
@@ -34,6 +34,14 @@ const IMAGE_TILE_STYLES = [
   'tile', 'cover', 'contain', 'contain no-repeat'
 ].map(style => ({ name: style, label: style }))
 
+const TEXT_FONT_FAMILIES = [
+  'sans-serif', 'serif', 'fantasy', 'monospace', 'cursive',
+].map(style => ({ name: style, label: style }))
+
+const TEXT_FONT_STYLES = [
+  'normal', 'bold', 'italic', 'bold-italic',
+].map(style => ({ name: style, label: style }))
+
 // target_page_id = Column(Integer, ForeignKey('page.id'), nullable=True)
 // https://s3.amazonaws.com/i.asdf.us/im/1c/gradient_gold1-SpringGreen1_1321159749.jpg
 
@@ -53,7 +61,11 @@ const newText = (data) => ({
   settings: {
     ...newPosition(),
     content: "What is up... I have no idea actually",
-    color: 'rgb(255,255,255)',
+    font_family: 'sans-serif',
+    font_size: 16,
+    font_style: 'normal',
+    font_color: '#dddddd',
+    background_color: 'transparent',
     width: 0,
     height: 0,
   },
@@ -66,6 +78,7 @@ const newPosition = () => ({
   x: 0, y: 0,
   width: 0, height: 0,
   rotation: 0, scale: 1,
+  opacity: 1,
   align: "center_center",
 })
 
@@ -387,6 +400,49 @@ class TileForm extends Component {
           onChange={this.handleSettingsChange.bind(this)}
           autoComplete="off"
         />
+        <div className='row font'>
+          <Select
+            title="Font"
+            name='font_family'
+            selected={temporaryTile.settings.font_family || 'sans-serif'}
+            options={TEXT_FONT_FAMILIES}
+            title=''
+            onChange={this.handleSettingsSelect.bind(this)}
+          />
+          <NumberInput
+            title=''
+            name='font_size'
+            data={temporaryTile.settings}
+            min={1}
+            max={1200}
+            error={errorFields.has('font_size')}
+            onChange={this.handleSettingsChange.bind(this)}
+            autoComplete="off"
+          />
+          <Select
+            name='font_style'
+            selected={temporaryTile.settings.font_style || 'normal'}
+            options={TEXT_FONT_STYLES}
+            title=''
+            onChange={this.handleSettingsSelect.bind(this)}
+          />
+        </div>
+        <ColorInput
+          title='Text'
+          name='font_color'
+          data={temporaryTile.settings}
+          error={errorFields.has('font_color')}
+          onChange={this.handleSettingsChange.bind(this)}
+          autoComplete="off"
+        />
+        <ColorInput
+          title='BG'
+          name='background_color'
+          data={temporaryTile.settings}
+          error={errorFields.has('background_color')}
+          onChange={this.handleSettingsChange.bind(this)}
+          autoComplete="off"
+        />
         <div className='row pair'>
           <NumberInput
             title="Width"
@@ -413,6 +469,12 @@ class TileForm extends Component {
     )
   }
 }
+    // font_family: 'sans-serif',
+    // font_size: 16,
+    // font_style: 'normal',
+    // font_color: '#ffffff',
+    // background_color: '#333333',
+
 
 const mapStateToProps = state => ({
   graph: state.graph,