From cee7a02277d6bcb84b91e22ec3a9ac0ec78002de Mon Sep 17 00:00:00 2001 From: Seth Trowbridge Date: Mon, 12 Dec 2022 08:26:56 -0500 Subject: [PATCH] icon fixes --- src/twind.js | 3 +++ src/ui.js | 75 +++++++++++++++++++++++++++++++++++----------------- 2 files changed, 54 insertions(+), 24 deletions(-) diff --git a/src/twind.js b/src/twind.js index 956c1e2..1169bfc 100644 --- a/src/twind.js +++ b/src/twind.js @@ -67,6 +67,9 @@ export const Configure = { "box-shadow": "rgb(0 0 0 / 50%) 0px -2px 3px inset, rgb(255 255 255 / 50%) 0px 10px 10px inset" } ], + [ + 'text-shadow-lcd', {"text-shadow": "0px 2px 3px #00000096"} + ], [ 'box-notch', "border-t(1 [#ffffff]) border-b(1 [#00000033]) flex items-center justify-end gap-1 p-2" ], [ "box-buttons", "flex gap-1 items-center p-2 rounded-lg bg-gradient-to-b from-[#00000022] border-b(1 [#ffffff]) border-t(1 [#00000033])"] ], diff --git a/src/ui.js b/src/ui.js index 0d60948..20fd86e 100644 --- a/src/ui.js +++ b/src/ui.js @@ -24,11 +24,11 @@ export function Button({children, icon, light, disabled, inactive, onClick, clas ${ FlashGet > 0 && html`` } - ${ icon && html` + ${ icon && html` ${icon} ` } -
+
${children}
@@ -99,17 +99,33 @@ export const Controls =()=>
Frequency
-
${Store.ColumnMapping[State.Freq.Value][0]} Hz
- <${Button} disabled=${State.Freq.Value == State.Freq.Min} onClick=${()=>Dispatch({Name:"Freq", Data:-1})}>- - <${Button} disabled=${State.Freq.Value == State.Freq.Max} onClick=${()=>Dispatch({Name:"Freq", Data:1})}>+ +
${Store.ColumnMapping[State.Freq.Value][0]} Hz
+ <${Button} disabled=${State.Freq.Value == State.Freq.Min} onClick=${()=>Dispatch({Name:"Freq", Data:-1})}> + + <${Glyph.Minus}/> + + + <${Button} disabled=${State.Freq.Value == State.Freq.Max} onClick=${()=>Dispatch({Name:"Freq", Data:1})}> + + <${Glyph.Plus}/> + +
Stimulus
-
${State.Stim.Value} dbHL
- <${Button} disabled=${State.Stim.Value == State.Stim.Min} onClick=${()=>Dispatch({Name:"Stim", Data:-1})}>- - <${Button} disabled=${State.Stim.Value == State.Stim.Max} onClick=${()=>Dispatch({Name:"Stim", Data:1})}>+ +
${State.Stim.Value} dbHL
+ <${Button} disabled=${State.Stim.Value == State.Stim.Min} onClick=${()=>Dispatch({Name:"Stim", Data:-1})}> + + <${Glyph.Minus}/> + + + <${Button} disabled=${State.Stim.Value == State.Stim.Max} onClick=${()=>Dispatch({Name:"Stim", Data:1})}> + + <${Glyph.Plus}/> + +
@@ -176,9 +192,8 @@ export const Controls =()=> <${Button} icon=${html` - - - + + <${Glyph.Null}/> `} onClick=${()=>Dispatch({Name:"Mark", Data:null })} @@ -272,29 +287,41 @@ export function Chart({children}) } /** @type {Record} */ -const Glyph = { +export const Glyph = { Arrow:()=> html` - - - `, + + + `, X: ({children})=> html` - - - ${children}`, + + + ${children}`, O: ({children})=> html` - - ${children}` + + ${children}`, + + Minus:()=>html` `, + Plus:()=>html` + `, + + Null:()=>html` + + + ` + }; /** @type {({right, response, x, y, classes}:{right:boolean, response?:boolean, x:number|string, y:number|string, classes:string})=>preact.VNode} */ export const Mark =({right, response, x, y, classes})=> { return html` - - <${ right ? Glyph.O : Glyph.X }> - ${ !response && html`<${Glyph.Arrow}/>` } - + + + <${ right ? Glyph.O : Glyph.X }> + ${ !response && html`<${Glyph.Arrow}/>` } + + `; }; \ No newline at end of file