Cardoza_Construction/EstiMaker
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Calculator UI Fix

Browse Source
This commit is contained in:
Timothy Cardoza
2026-03-18 17:27:45 -05:00
parent aac836501e
commit c5b750bd08
1 changed files with 35 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/CalculatorPopover.tsx
+34 -13
View File
@@ -145,12 +145,31 @@ const CalculatorPopover: Component = () => {
}
};
const handlePaste = (e: ClipboardEvent) => {
if (!isOpen()) return;
// Don't intercept if an input is focused
const activeElement = document.activeElement;
const isInputFocused = activeElement instanceof HTMLInputElement ||
activeElement instanceof HTMLTextAreaElement ||
activeElement?.hasAttribute('contenteditable');
if (isInputFocused) return;
const pastedText = e.clipboardData?.getData('text/plain');
if (pastedText && !isNaN(parseFloat(pastedText))) {
addValue(parseFloat(pastedText), 'Pasted Value');
}
};
onMount(() => {
window.addEventListener('keydown', handleKeyDown);
window.addEventListener('paste', handlePaste);
});
onCleanup(() => {
window.removeEventListener('keydown', handleKeyDown);
window.removeEventListener('paste', handlePaste);
});
return (
@@ -182,19 +201,19 @@ const CalculatorPopover: Component = () => {
</div>
{/* Display */}
<div class="p-8 bg-foreground text-background min-h-[220px] flex flex-col justify-end items-end relative overflow-hidden group/display">
<div class="absolute top-6 left-8 text-[10px] font-black text-background/30 uppercase tracking-[0.3em]">Calculation History</div>
<div class="p-8 bg-muted text-foreground min-h-[220px] flex flex-col justify-end items-end relative overflow-hidden group/display border-b border-border">
<div class="absolute top-6 left-8 text-[10px] font-black text-muted-foreground/30 uppercase tracking-[0.3em]">Calculation History</div>
<div class="flex flex-col items-end gap-2 mb-4 max-h-56 overflow-y-auto w-full custom-scrollbar pr-2 scroll-smooth">
<For each={entries()}>
{(entry) => (
<Show when={entry.type === 'marker'} fallback={
<div class={`flex items-center gap-3 group/entry transition-all ${entry.type === 'result' ? 'mt-3 pt-3 border-t border-background/10 w-full justify-end' : ''}`}>
<div class={`flex items-center gap-3 group/entry transition-all ${entry.type === 'result' ? 'mt-3 pt-3 border-t border-border w-full justify-end' : ''}`}>
<Show when={entry.label}>
<span class="text-[9px] font-black text-background/40 uppercase tracking-wider truncate max-w-[200px] group-hover/entry:text-background/60 transition-colors">{entry.label}</span>
<span class="text-[9px] font-black text-muted-foreground/40 uppercase tracking-wider truncate max-w-[200px] group-hover/entry:text-muted-foreground/60 transition-colors">{entry.label}</span>
</Show>
<div class={`px-3 py-1 rounded-xl text-xs font-black shadow-sm transition-transform group-hover/entry:scale-105 ${entry.type === 'field' ? 'bg-primary text-primary-foreground shadow-primary/20' :
entry.type === 'result' ? 'bg-primary/20 text-primary border border-primary/30' : 'bg-background/10 text-background/80'
entry.type === 'result' ? 'bg-primary/20 text-primary border border-primary/30' : 'bg-background text-foreground/80 border border-border/60'
}`}>
{entry.type === 'result' && <span class="mr-2 opacity-60">=</span>}
{formatNumber(entry.value || 0)}
@@ -202,11 +221,11 @@ const CalculatorPopover: Component = () => {
</div>
}>
<div class="w-full flex items-center gap-4 my-4 opacity-50">
<div class="h-px flex-1 bg-gradient-to-r from-transparent to-background/20"></div>
<span class="text-[9px] font-black text-background/60 uppercase tracking-[0.2em] whitespace-nowrap bg-background/5 px-3 py-1 rounded-full border border-background/10 italic">
<div class="h-px flex-1 bg-gradient-to-r from-transparent to-border"></div>
<span class="text-[9px] font-black text-muted-foreground/60 uppercase tracking-[0.2em] whitespace-nowrap bg-muted px-3 py-1 rounded-full border border-border italic">
{entry.label}
</span>
<div class="h-px flex-1 bg-gradient-to-l from-transparent to-background/20"></div>
<div class="h-px flex-1 bg-gradient-to-l from-transparent to-border"></div>
</div>
</Show>
)}
@@ -259,18 +278,20 @@ const CalculatorPopover: Component = () => {
</div>
</Show>
<button
onClick={() => setIsOpen(!isOpen())}
class={`p-5 rounded-full shadow-elevated transition-all duration-500 group relative border-2 ${isOpen() ? 'bg-foreground text-background border-foreground rotate-90 scale-110' : 'bg-primary text-primary-foreground border-primary shadow-primary/20 hover:scale-110 hover:shadow-2xl'}`}
>
{isOpen() ? <X class="w-6 h-6" /> : <Calculator class="w-6 h-6" />}
<div class="group relative flex items-center">
<Show when={!isOpen()}>
<span class="absolute right-full mr-6 px-4 py-2 bg-foreground text-background text-[10px] font-black uppercase tracking-widest rounded-xl opacity-0 group-hover:opacity-100 transition-all translate-x-4 group-hover:translate-x-0 pointer-events-none shadow-2xl flex items-center gap-2">
<Calculator class="w-3 h-3 text-primary" /> Calculator
</span>
</Show>
<button
onClick={() => setIsOpen(!isOpen())}
class={`p-5 rounded-full shadow-elevated transition-all duration-500 relative border-2 ${isOpen() ? 'bg-foreground text-background border-foreground rotate-90 scale-110' : 'bg-primary text-primary-foreground border-primary shadow-primary/20 hover:scale-110 hover:shadow-2xl'}`}
>
{isOpen() ? <X class="w-6 h-6" /> : <Calculator class="w-6 h-6" />}
</button>
</div>
</div>
</Portal>
);