Commit 84a10485 authored by StreatCodes's avatar StreatCodes
Browse files

Add ability to clear color to their default values

Improve link hover legibility
parent 2c4e20b0
......@@ -9,6 +9,13 @@ import { svgList } from '../svg-list'
export function CheckSVGOptions({options, updateOptions}) {
const svgOptions = svgList.map(svgName => <option value={svgName}>{svgName}</option>)
const clearField = (e, field) => {
e.preventDefault();
let opts = {};
opts[field] = null;
updateOptions(opts);
}
return <div class="card-options">
<label>Icinga Host or Service</label>
<IcingaCheckList checkId={options.checkId}
......@@ -19,7 +26,7 @@ export function CheckSVGOptions({options, updateOptions}) {
onInput={e => updateOptions({okSvg: e.currentTarget.value})}>
{svgOptions}
</select>
<label for="ok-stroke-color">OK Stroke color</label>
<label for="ok-stroke-color">OK Stroke color <a onClick={e => clearField(e, 'okStrokeColor')}>clear</a></label>
<div class="left spacer">
<input type="color" name="ok-stroke-color" id="ok-stroke-color" value={options.okStrokeColor}
onInput={e => updateOptions({okStrokeColor: e.currentTarget.value})}/>
......@@ -32,7 +39,7 @@ export function CheckSVGOptions({options, updateOptions}) {
onInput={e => updateOptions({warningSvg: e.currentTarget.value})}>
{svgOptions}
</select>
<label for="warning-stroke-color">Warning Stroke color</label>
<label for="warning-stroke-color">Warning Stroke color <a onClick={e => clearField(e, 'warningStrokeColor')}>clear</a></label>
<div class="left spacer">
<input type="color" name="warning-stroke-color" id="warning-stroke-color" value={options.warningStrokeColor}
onInput={e => updateOptions({warningStrokeColor: e.currentTarget.value})}/>
......@@ -45,7 +52,7 @@ export function CheckSVGOptions({options, updateOptions}) {
onInput={e => updateOptions({unknownSvg: e.currentTarget.value})}>
{svgOptions}
</select>
<label for="unknown-stroke-color">Unknown Stroke color</label>
<label for="unknown-stroke-color">Unknown Stroke color <a onClick={e => clearField(e, 'unknownStrokeColor')}>clear</a></label>
<div class="left spacer">
<input type="color" name="unknown-stroke-color" id="unknown-stroke-color" value={options.unknownStrokeColor}
onInput={e => updateOptions({unknownStrokeColor: e.currentTarget.value})}/>
......@@ -58,7 +65,7 @@ export function CheckSVGOptions({options, updateOptions}) {
onInput={e => updateOptions({criticalSvg: e.currentTarget.value})}>
{svgOptions}
</select>
<label for="critical-stroke-color">Critical Stroke color</label>
<label for="critical-stroke-color">Critical Stroke color <a onClick={e => clearField(e, 'criticalStrokeColor')}>clear</a></label>
<div class="left spacer">
<input type="color" name="critical-stroke-color" id="critical-stroke-color" value={options.criticalStrokeColor}
onInput={e => updateOptions({criticalStrokeColor: e.currentTarget.value})}/>
......
......@@ -6,6 +6,13 @@ import { svgList } from '../svg-list';
export function StaticSVGOptions({options, updateOptions}) {
const svgOptions = svgList.map(svgName => <option value={svgName}>{svgName}</option>)
const clearField = (e, field) => {
e.preventDefault();
let opts = {};
opts[field] = null;
updateOptions(opts);
}
return <Fragment>
<label for="svg">SVG</label>
<select id="svg" name="svg" value={options.svg}
......@@ -13,7 +20,7 @@ export function StaticSVGOptions({options, updateOptions}) {
{svgOptions}
</select>
<label for="stroke-color">Stroke color</label>
<label for="stroke-color">Stroke color <a onClick={e => clearField(e, 'strokeColor')}>clear</a></label>
<div class="left spacer">
<input type="color" name="stroke-color" id="stroke-color" value={options.strokeColor}
onInput={e => updateOptions({strokeColor: e.currentTarget.value})}/>
......
......@@ -2,6 +2,13 @@ import { h, Fragment } from 'preact';
import { useState, useEffect } from 'preact/hooks';
export function StaticTextOptions({options, updateOptions}) {
const clearField = (e, field) => {
e.preventDefault();
let opts = {};
opts[field] = null;
updateOptions(opts);
}
return <Fragment>
<label for="text">Text</label>
<textarea id="text" name="text" value={options.text}
......@@ -32,14 +39,14 @@ export function StaticTextOptions({options, updateOptions}) {
</div>
<label for="font-color">Font Color</label>
<label for="font-color">Font Color <a onClick={e => clearField(e, 'fontColor')}>clear</a></label>
<div class="lefty-righty spacer">
<input id="font-color" name="font-color" type="color" value={options.fontColor}
onInput={e => updateOptions({fontColor: e.currentTarget.value})}/>
<input type="text" value={options.fontColor} disabled/>
</div>
<label for="background-color">Background Color</label>
<label for="background-color">Background Color <a onClick={e => clearField(e, 'backgroundColor')}>clear</a></label>
<div class="lefty-righty spacer">
<input id="background-color" name="background-color" type="color" value={options.backgroundColor}
onInput={e => updateOptions({backgroundColor: e.currentTarget.value})}/>
......
......@@ -2,8 +2,9 @@
--color-dark-orange: #f0570d;
--color-orange: #ec6c30;
--color-light-orange: #ff854c;
--color-light-blue: #cce5eb;
--color-dark-blue: #213b5c;
--color-blue: #476C9B;
--color-light-blue: #cce5eb;
--color-teal: #468C98;
--color-black: #101419;
--color-gray: #797979;
......@@ -99,10 +100,11 @@ hr {
a {
color: var(--color-blue);
cursor: pointer;
font-weight: normal;
}
a:hover, a:focus {
color: var(--color-light-blue);
color: var(--color-dark-blue);
}
.lefty-righty {
......
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