From 00a6735b02f62a1459d8bfc5c27eb2bc0d7084cd Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Sun, 7 Jun 2020 04:18:49 +0200
Subject: font stylez!!!

---
 frontend/views/page/components/page.editor.js |  8 ++++
 frontend/views/page/components/tile.form.js   | 66 ++++++++++++++++++++++++++-
 2 files changed, 72 insertions(+), 2 deletions(-)

(limited to 'frontend/views/page/components')

diff --git a/frontend/views/page/components/page.editor.js b/frontend/views/page/components/page.editor.js
index 0171f56..2c857da 100644
--- a/frontend/views/page/components/page.editor.js
+++ b/frontend/views/page/components/page.editor.js
@@ -243,6 +243,14 @@ const TileHandle = ({ tile, bounds, box, onMouseDown, onDoubleClick }) => {
       className += ' ' + tile.settings.align
       style.width = tile.settings.width ? tile.settings.width + 'px' : 'auto'
       style.height = tile.settings.height ? tile.settings.height + 'px' : 'auto'
+      style.fontFamily = tile.settings.font_family
+      style.fontSize = tile.settings.font_size + 'px'
+      style.lineHeight = 1.5
+      style.fontWeight = (tile.settings.font_style || "").indexOf('bold') !== -1 ? 'bold' : 'normal'
+      style.fontStyle = (tile.settings.font_style || "").indexOf('italic') !== -1 ? 'italic' : 'normal'
+      style.backgroundColor = tile.settings.background_color || 'transparent'
+      style.color = tile.settings.font_color || '#dddddd!important'
+      style.padding = '0.25rem'
       break
   }
   return (
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,
-- 
cgit v1.2.3-70-g09d2