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/common/form.component.js             | 20 ++++++++
 frontend/common/index.js                      |  2 +-
 frontend/views/graph/graph.css                |  4 +-
 frontend/views/page/components/page.editor.js |  8 ++++
 frontend/views/page/components/tile.form.js   | 66 ++++++++++++++++++++++++++-
 frontend/views/page/page.css                  | 44 ++++++++++++++++++
 6 files changed, 139 insertions(+), 5 deletions(-)

(limited to 'frontend')

diff --git a/frontend/common/form.component.js b/frontend/common/form.component.js
index fb5b26d..cc0607d 100644
--- a/frontend/common/form.component.js
+++ b/frontend/common/form.component.js
@@ -39,6 +39,26 @@ export const NumberInput = props => (
   </label>
 )
 
+export const ColorInput = props => (
+  <label className={props.error ? 'error color' : 'text color'}>
+    <span>{props.title}</span>
+    <input
+      type="color"
+      required={props.required}
+      onChange={props.onChange}
+      name={props.name}
+      value={props.data[props.name]}
+    />
+    <input
+      type="text"
+      required={props.required}
+      onChange={props.onChange}
+      name={props.name}
+      value={props.data[props.name]}
+    />
+  </label>
+)
+
 export const TextArea = props => (
   <label className={props.error ? 'textarea error' : 'textarea'}>
     {props.title && <span>{props.title}</span>}
diff --git a/frontend/common/index.js b/frontend/common/index.js
index d33442a..6f9747a 100644
--- a/frontend/common/index.js
+++ b/frontend/common/index.js
@@ -5,7 +5,7 @@ export {
 export {
   Select, Checkbox, Radio, FileInput, FileInputField,
   TextInput, NumberInput, TextArea, SubmitButton,
-  LabelDescription,
+  LabelDescription, ColorInput,
 } from './form.component'
 export {
   Loader, Swatch, Dot, Columns, Statistic, Detections, Progress
diff --git a/frontend/views/graph/graph.css b/frontend/views/graph/graph.css
index 04eefe6..511d15e 100644
--- a/frontend/views/graph/graph.css
+++ b/frontend/views/graph/graph.css
@@ -111,8 +111,8 @@
 }
 .box .pair label {
   flex-direction: row;
-  width: 6rem;
-  margin-right: 1rem;
+  width: 6.5rem;
+  margin-right: 0.5px;
   min-width: auto;
 }
 .box .pair input[type=text] {
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,
diff --git a/frontend/views/page/page.css b/frontend/views/page/page.css
index 5c29a9a..9e84d51 100644
--- a/frontend/views/page/page.css
+++ b/frontend/views/page/page.css
@@ -91,4 +91,48 @@
 }
 .box .pair label:last-child {
   margin-right: 0;
+}
+
+.box .font {
+  justify-content: space-between;
+}
+.box .font input[type=number] {
+  width: 3rem;
+}
+.box .font .select {
+  width: 6rem;
+  padding: 0.25rem;
+  margin-right: 0;
+}
+.box .font label:last-child .select {
+  width: 3.75rem;
+}
+.box .font label {
+  flex-direction: row;
+  width: 6.5rem;
+  margin-right: 0.5rem;
+  min-width: auto;
+}
+.box .font label span {
+  display: none;
+}
+.box form .font label {
+}
+
+.box form label.color span {
+  min-width: 4rem;
+  width: 4rem;
+}
+.box label.color {
+  display: flex;
+  flex-direction: row;
+}
+.box label.color input[type='color'] {
+  width: 2rem;
+  margin-right: 0.5rem;
+  padding: 0;
+}
+.box label.color input[type='text'] {
+  width: 6rem;
+  max-width: 6rem;
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2