Earmark/audiogram-beta
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

icon fixes

Browse Source
This commit is contained in:
Seth Trowbridge 2022-12-12 08:26:56 -05:00
parent 2018b8210a
commit cee7a02277
2 changed files with 54 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/twind.js
View File

@ -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" "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-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])"] [ "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])"]
], ],

75
src/ui.js
View File

@ -24,11 +24,11 @@ export function Button({children, icon, light, disabled, inactive, onClick, clas
<span class="absolute top-0 left-0 w-full h-full rounded-lg bg-black transition-opacity duration-300 opacity-0 ${(!inactive && !disabled) && "group-hover:opacity-50"}"></span> <span class="absolute top-0 left-0 w-full h-full rounded-lg bg-black transition-opacity duration-300 opacity-0 ${(!inactive && !disabled) && "group-hover:opacity-50"}"></span>
${ FlashGet > 0 && html`<span key=${FlashGet} class="absolute top-0 left-0 w-full h-full rounded-lg bg-green-400 shadow-glow-green-300 animate-flash"></span>` } ${ FlashGet > 0 && html`<span key=${FlashGet} class="absolute top-0 left-0 w-full h-full rounded-lg bg-green-400 shadow-glow-green-300 animate-flash"></span>` }
${ icon && html`<span class="flex items-center block relative px-2 border-r(1 [#00000066])"> ${ icon && html`<span class="flex items-center block relative px-2 border-r(1 [#00000088])">
<span class="absolute top-0 left-0 w-full h-full bg-black rounded(tl-lg bl-lg) ${disabled ? "opacity-20" : "opacity-50"}"></span> <span class="absolute top-0 left-0 w-full h-full bg-black rounded(tl-lg bl-lg) ${disabled ? "opacity-20" : "opacity-50"}"></span>
<span class="relative">${icon}</span> <span class="relative">${icon}</span>
</span>` } </span>` }
<div class="flex-1 flex items-center justify-center text-center px-3 py-2 relative border-l(1 [#ffffff44])"> <div class="flex-1 flex items-center justify-center text-center px-3 py-2 relative border-l(1 [#ffffff22])">
<span class="absolute shadow-glow-yellow-500 top-0 left-1/2 w-6 h-[6px] bg-white rounded-full translate(-x-1/2 -y-1/2) transition-all duration-500 ${light ? "opacity-100" : "opacity-0 scale-y-0"}"></span> <span class="absolute shadow-glow-yellow-500 top-0 left-1/2 w-6 h-[6px] bg-white rounded-full translate(-x-1/2 -y-1/2) transition-all duration-500 ${light ? "opacity-100" : "opacity-0 scale-y-0"}"></span>
${children} ${children}
</div> </div>
@ -99,17 +99,33 @@ export const Controls =()=>
<div class="box-notch"> <div class="box-notch">
<div class=${classTitle}>Frequency</div> <div class=${classTitle}>Frequency</div>
<div class="box-buttons"> <div class="box-buttons">
<div class="w-24 text-center"><strong>${Store.ColumnMapping[State.Freq.Value][0]}</strong> Hz</div> <div class="w-24 text-center text-shadow-lcd"><strong>${Store.ColumnMapping[State.Freq.Value][0]}</strong> Hz</div>
<${Button} disabled=${State.Freq.Value == State.Freq.Min} onClick=${()=>Dispatch({Name:"Freq", Data:-1})}>-<//> <${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})}>+<//> <svg class="my-1 h-3 w-3 overflow-visible stroke(white 2)">
<${Glyph.Minus}/>
</svg>
<//>
<${Button} disabled=${State.Freq.Value == State.Freq.Max} onClick=${()=>Dispatch({Name:"Freq", Data:1})}>
<svg class="my-1 h-3 w-3 overflow-visible stroke(white 2)">
<${Glyph.Plus}/>
</svg>
<//>
</div> </div>
</div> </div>
<div class="box-notch"> <div class="box-notch">
<div class=${classTitle}>Stimulus</div> <div class=${classTitle}>Stimulus</div>
<div class="box-buttons"> <div class="box-buttons">
<div class="w-24 text-center"><strong>${State.Stim.Value}</strong> dbHL</div> <div class="w-24 text-center text-shadow-lcd"><strong>${State.Stim.Value}</strong> dbHL</div>
<${Button} disabled=${State.Stim.Value == State.Stim.Min} onClick=${()=>Dispatch({Name:"Stim", Data:-1})}>-<//> <${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})}>+<//> <svg class="my-1 h-3 w-3 overflow-visible stroke(white 2)">
<${Glyph.Minus}/>
</svg>
<//>
<${Button} disabled=${State.Stim.Value == State.Stim.Max} onClick=${()=>Dispatch({Name:"Stim", Data:1})}>
<svg class="my-1 h-3 w-3 overflow-visible stroke(white 2)">
<${Glyph.Plus}/>
</svg>
<//>
</div> </div>
</div> </div>
<div class="box-notch"> <div class="box-notch">
@ -176,9 +192,8 @@ export const Controls =()=>
<//> <//>
<${Button} <${Button}
icon=${html` icon=${html`
<svg x="0" y="0" class="translate-x-1/2 translate-y-1/2 stroke-draw h-2 overflow-visible stroke-white w-2 stroke-2"> <svg class="h-2 w-2 overflow-visible stroke(white 2)">
<ellipse vector-effect="non-scaling-stroke" rx="70%" ry="70%"></ellipse> <${Glyph.Null}/>
<line vector-effect="non-scaling-stroke" x1="-50%" y1="-50%" x2="50%" y2="50%"></line>
</svg> </svg>
`} `}
onClick=${()=>Dispatch({Name:"Mark", Data:null })} onClick=${()=>Dispatch({Name:"Mark", Data:null })}
@ -272,29 +287,41 @@ export function Chart({children})
} }
/** @type {Record<string, BasicElement>} */ /** @type {Record<string, BasicElement>} */
const Glyph = { export const Glyph = {
Arrow:()=> html` Arrow:()=> html`
<line vector-effect="non-scaling-stroke" x1="100%" y1="100%" x2="0%" y2="0%" ></line> <line class="stroke-draw" x1="100%" y1="100%" x2="0%" y2="0%" ></line>
<line vector-effect="non-scaling-stroke" x1="100%" y1="100%" x2="25%" y2="100%"></line> <line class="stroke-draw" x1="100%" y1="100%" x2="25%" y2="100%"></line>
<line vector-effect="non-scaling-stroke" x1="100%" y1="100%" x2="100%" y2="25%" ></line>`, <line class="stroke-draw" x1="100%" y1="100%" x2="100%" y2="25%" ></line>`,
X: ({children})=> html` X: ({children})=> html`
<line x1="-50%" y1="-50%" x2="50%" y2="50%" ></line> <line class="stroke-draw" x1="0%" y1="0%" x2="100%" y2="100%"></line>
<line x1="-50%" y1="50%" x2="50%" y2="-50%"></line> <line class="stroke-draw" x1="0%" y1="100%" x2="100%" y2="0%" ></line>
<g class="scale-50 translate(x-1/2 y-1/2) rotate-[-15deg]">${children}</g>`, <g class="scale-50 translate(x-full y-full) rotate-[-15deg]">${children}</g>`,
O: ({children})=> html` O: ({children})=> html`
<ellipse vector-effect="non-scaling-stroke" rx="60%" ry="60%"></ellipse> <ellipse class="stroke-draw" cx="50%" cy="50%" rx="60%" ry="60%"></ellipse>
<g style="transform: translate(-40%, 40%) rotate(96deg) scale(0.5);">${children}</g>` <g class="scale-50 rotate-[96deg] translate(-x-[0%] y-full)">${children}</g>`,
Minus:()=>html` <line class="stroke-draw" x1="0%" y1="50%" x2="100%" y2="50%"></line>`,
Plus:()=>html` <line class="stroke-draw" x1="0%" y1="50%" x2="100%" y2="50%"></line>
<line class="stroke-draw" y1="0%" x1="50%" y2="100%" x2="50%"></line>`,
Null:()=>html`
<ellipse class="stroke-draw" cx="50%" cy="50%" rx="70%" ry="70%"></ellipse>
<line class="stroke-draw" x1="0%" y1="0%" x2="100%" y2="100%"></line>
`
}; };
/** @type {({right, response, x, y, classes}:{right:boolean, response?:boolean, x:number|string, y:number|string, classes:string})=>preact.VNode} */ /** @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})=> export const Mark =({right, response, x, y, classes})=>
{ {
return html` return html`
<svg x=${x} y=${y} width="20" height="20" class=${`overflow-visible ${classes}`}> <svg x=${x} y=${y} width="20" height="20" class="overflow-visible ${classes}">
<${ right ? Glyph.O : Glyph.X }> <g class="translate(-x-1/2 -y-1/2)">
${ !response && html`<${Glyph.Arrow}/>` } <${ right ? Glyph.O : Glyph.X }>
<//> ${ !response && html`<${Glyph.Arrow}/>` }
<//>
</g>
</svg>`; </svg>`;
}; };