summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--frontend/common/form.component.js20
-rw-r--r--frontend/common/index.js2
-rw-r--r--frontend/views/graph/graph.css4
-rw-r--r--frontend/views/page/components/page.editor.js8
-rw-r--r--frontend/views/page/components/tile.form.js66
-rw-r--r--frontend/views/page/page.css44
6 files changed, 139 insertions, 5 deletions
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
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-11 23:10:00 +0000