Commit 322313ba authored by StreatCodes's avatar StreatCodes
Browse files

Move static renderings and options to their own files

Impliment static svg options and rendering
parent a30fc769
......@@ -8,6 +8,8 @@ import { CardElement } from './elements/card';
import { removeParam } from './util';
import { StaticText } from './statics/text';
import { StaticSVG } from './statics/svg';
import { StaticImage } from './statics/image';
//Manage dashboard state
const dashboardReducer = (state, action) => {
......@@ -266,6 +268,8 @@ function DashboardStatics({dashboardDispatch, selectedStaticId, statics}) {
let element = null;
if(static_.type === 'text') { element = <StaticText options={static_.options}/> }
if(static_.type === 'svg') { element = <StaticSVG options={static_.options}/> }
if(static_.type === 'image') { element = <StaticImage options={static_.options}/> }
return <TransformableElement rect={static_.rect} updateRect={updateRect}
glow={selectedStaticId === index}>
......@@ -284,7 +288,7 @@ function DashboardView({dashboard, dashboardDispatch, selectedCheckId, selectedS
body: JSON.stringify(dashboard)
}).then(res => res.json());
route(`/edit/${data.slug}`)
route(`/edit/${data.slug}${window.location.search}`)
//TODO show success
} catch (e) {
//TODO improve
......
import { h, Fragment } from 'preact';
import { useState, useEffect } from 'preact/hooks';
import { svgList } from './svg-list';
import { routeParam, removeParam } from './util';
import { route } from 'preact-router';
import { StaticTextOptions } from './statics/text';
import { StaticSVGOptions } from './statics/svg';
import { StaticImageOptions } from './statics/image';
function StaticListPanel({statics, addStatic}) {
if(statics.length < 1) {
......@@ -25,36 +26,6 @@ function StaticListPanel({statics, addStatic}) {
</div>
}
function SVGOptions({options, updateOptions}) {
const svgOptions = svgList.map(svgName => <option>{svgName}</option>)
return <Fragment>
<label for="svg">SVG</label>
<select id="svg" name="svg">
{svgOptions}
</select>
<label for="color">Color</label>
<div class="left spacer">
<input type="color" name="color" id="color" value={options.color}
onInput={e => updateOptions({color: e.currentTarget.value})}/>
<input type="text" value={options.color} disabled />
</div>
<label for="stroke-width">Stroke width</label>
<input id="stroke-width" name="stroke-width" type="number" min="0" value={options.strokeWidth}
onInput={e => updateOptions({strokeWidth: e.currentTarget.value})}/>
</Fragment>
}
function ImageOptions({options, updateOptions}) {
return <Fragment>
<label for="image">Image</label>
<input id="image" name="image" type="file" value={options.image} accept="image/*"
onInput={e => updateOptions({image: e.currentTarget.value})}/>
</Fragment>
}
export function StaticSettings({selectedStatic, updateStatic}) {
if(selectedStatic === null) {
return null;
......@@ -67,8 +38,8 @@ export function StaticSettings({selectedStatic, updateStatic}) {
const staticTypeOptions = {
'text': <StaticTextOptions updateOptions={updateOptions} options={selectedStatic.options} />,
'svg': <SVGOptions updateOptions={updateOptions} options={selectedStatic.options} />,
'image': <ImageOptions updateOptions={updateOptions} options={selectedStatic.options} />,
'svg': <StaticSVGOptions updateOptions={updateOptions} options={selectedStatic.options} />,
'image': <StaticImageOptions updateOptions={updateOptions} options={selectedStatic.options} />,
}
const options = staticTypeOptions[selectedStatic.type]
......
import { h, Fragment } from 'preact';
import { useState, useEffect } from 'preact/hooks';
export function StaticImageOptions({options, updateOptions}) {
return <Fragment>
<label for="image">Image</label>
<input id="image" name="image" type="file" value={options.image} accept="image/*"
onInput={e => updateOptions({image: e.currentTarget.value})}/>
</Fragment>
}
export function StaticImage({options}) {
return <div>image todo</div>
}
\ No newline at end of file
import { h, Fragment } from 'preact';
import { useState, useEffect } from 'preact/hooks';
import { svgList } from '../svg-list';
export function StaticSVGOptions({options, updateOptions}) {
const svgOptions = svgList.map(svgName => <option value={svgName}>{svgName}</option>)
return <Fragment>
<label for="svg">SVG</label>
<select id="svg" name="svg" value={options.svg}
onInput={e => updateOptions({svg: e.currentTarget.value})}>
{svgOptions}
</select>
<label for="stroke-color">Stroke color</label>
<div class="left spacer">
<input type="color" name="stroke-color" id="stroke-color" value={options.strokeColor}
onInput={e => updateOptions({strokeColor: e.currentTarget.value})}/>
<input type="text" value={options.strokeColor} disabled />
</div>
<label for="stroke-width">Stroke width</label>
<input id="stroke-width" name="stroke-width" type="number" min="0" step="any" value={options.strokeWidth}
onInput={e => updateOptions({strokeWidth: e.currentTarget.value})}/>
</Fragment>
}
export function StaticSVG({options}) {
let styles = '';
if(typeof options.strokeColor !== 'undefined') {
styles += `stroke: ${options.strokeColor}; `;
}
if(typeof options.strokeWidth !== 'undefined') {
styles += `stroke-width: ${options.strokeWidth}; `;
}
return <div class="check-content svg">
<svg class="feather" style={styles}>
<use xlinkHref={`/res/svgs/feather-sprite.svg#${options.svg}`}/>
</svg>
</div>
}
\ No newline at end of file
......@@ -507,6 +507,11 @@ div.editor {
display: flex;
}
.check > .svg > svg {
width: 100%;
height: 100%;
}
.check > .card {
padding: 6px 10px;
text-align: center;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment