ntnsndr/protocol-bicorder
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Added Focused mode as default. Also finally adding the icons correctly.

Browse Source
This commit is contained in:
Nathan Schneider
2025-11-29 20:19:08 -05:00
parent bcc6727917
commit 0e437d2b88
7 changed files with 529 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
bicorder-app/src/components/AnalysisDisplay.svelte
View File

@@ -4,6 +4,7 @@
import Tooltip from './Tooltip.svelte';
export let gradient: AnalysisGradient;
export let focusedMode: boolean = false;
const dispatch = createEventDispatcher<{
change: number | null;
@@ -98,12 +99,14 @@
</script>
<div class="analysis-gradient">
<div class="gradient-row">
<div class="term left">
<Tooltip text={gradient.term_left_description}>
{gradient.term_left}
</Tooltip>
</div>
<div class="gradient-row" class:focused={focusedMode}>
{#if !focusedMode}
<div class="term left">
<Tooltip text={gradient.term_left_description}>
{gradient.term_left}
</Tooltip>
</div>
{/if}
<div class="bar-container">
<button
@@ -124,11 +127,13 @@
</button>
</div>
<div class="term right">
<Tooltip text={gradient.term_right_description}>
{gradient.term_right}
</Tooltip>
</div>
{#if !focusedMode}
<div class="term right">
<Tooltip text={gradient.term_right_description}>
{gradient.term_right}
</Tooltip>
</div>
{/if}
</div>
<div class="value-display">
@@ -200,6 +205,15 @@
margin-bottom: 0.5rem;
}
.gradient-row.focused {
display: flex;
justify-content: center;
}
.gradient-row.focused .bar-container {
width: 100%;
}
.term {
text-align: center;
font-size: 0.9rem;
@@ -257,6 +271,11 @@
font-size: 0.9rem;
}
.analysis-gradient .value-display {
margin-top: 0.5rem;
margin-bottom: 0.25rem;
}
.auto-label {
opacity: 0.6;
font-size: 0.8rem;

7
bicorder-app/src/components/ExportControls.svelte
View File

@@ -3,6 +3,7 @@
import type { BicorderState } from '../types';
export let data: BicorderState;
export let focusedMode: boolean = false;
const dispatch = createEventDispatcher<{
reset: void;
@@ -121,7 +122,7 @@
}
</script>
<section class="export-controls">
<section class="export-controls" class:focused={focusedMode}>
<div class="button-group">
<button on:click={exportToJSON}>
💾 Export JSON
@@ -170,6 +171,10 @@
border-top: 2px solid var(--border-color);
}
.export-controls.focused {
border-top: none;
}
.button-group {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

41
bicorder-app/src/components/GradientSlider.svelte
View File

@@ -4,6 +4,7 @@
import Tooltip from './Tooltip.svelte';
export let gradient: Gradient;
export let focusedMode: boolean = false;
const dispatch = createEventDispatcher<{
change: number;
@@ -94,12 +95,14 @@
</script>
<div class="gradient-container">
<div class="gradient-row">
<div class="term left">
<Tooltip text={gradient.term_left_description}>
{gradient.term_left}
</Tooltip>
</div>
<div class="gradient-row" class:focused={focusedMode}>
{#if !focusedMode}
<div class="term left">
<Tooltip text={gradient.term_left_description}>
{gradient.term_left}
</Tooltip>
</div>
{/if}
<div class="bar-container">
<button
@@ -117,11 +120,13 @@
</button>
</div>
<div class="term right">
<Tooltip text={gradient.term_right_description}>
{gradient.term_right}
</Tooltip>
</div>
{#if !focusedMode}
<div class="term right">
<Tooltip text={gradient.term_right_description}>
{gradient.term_right}
</Tooltip>
</div>
{/if}
</div>
<div class="value-display">
@@ -179,6 +184,15 @@
margin-bottom: 0.5rem;
}
.gradient-row.focused {
display: flex;
justify-content: center;
}
.gradient-row.focused .bar-container {
width: 100%;
}
.term {
text-align: center;
font-size: 0.9rem;
@@ -231,6 +245,11 @@
font-size: 0.9rem;
}
.gradient-container .value-display {
margin-top: 0.5rem;
margin-bottom: 0.25rem;
}
.controls {
margin-top: 0.5rem;
display: flex;