lorentz/wulf-pulse
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

feat: improve ticker layout and speed controls

Browse source 
- Restructured ticker to show ticket number and title on first line
- Company name now displays on second line below ticket
- Adjusted ticker speed slider range: 8s-120s (was 10s-120s)
- Changed step from 5s to 2s for finer speed control
- Allows 25% faster speed adjustment (down to 8s)
- Better two-line layout for improved readability
This commit is contained in:
lorentz 2026-02-05 08:13:25 -05:00
parent 73a2e9b9a3
commit a1e0e7c7c0
2 changed files with 42 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

31
components/kiosk/settings-panel.tsx
View file

@ -8,11 +8,14 @@ import { Slider } from '@/components/ui/slider';
interface SettingsPanelProps {
cycleInterval: number;
onIntervalChange: (interval: number) => void;
tickerSpeed: number;
onTickerSpeedChange: (speed: number) => void;
}
export function SettingsPanel({ cycleInterval, onIntervalChange }: SettingsPanelProps) {
export function SettingsPanel({ cycleInterval, onIntervalChange, tickerSpeed, onTickerSpeedChange }: SettingsPanelProps) {
const [isOpen, setIsOpen] = useState(false);
const [localInterval, setLocalInterval] = useState(cycleInterval);
const [localTickerSpeed, setLocalTickerSpeed] = useState(tickerSpeed);
useEffect(() => {
if (!isOpen) {
@ -26,6 +29,8 @@ export function SettingsPanel({ cycleInterval, onIntervalChange }: SettingsPanel
const handleSave = () => {
onIntervalChange(localInterval);
localStorage.setItem('kiosk-cycle-interval', localInterval.toString());
onTickerSpeedChange(localTickerSpeed);
localStorage.setItem('kiosk-ticker-speed', localTickerSpeed.toString());
setIsOpen(false);
};
@ -47,7 +52,7 @@ export function SettingsPanel({ cycleInterval, onIntervalChange }: SettingsPanel
<div className="space-y-4">
<div>
<label className="text-gray-300 text-lg mb-2 block">
Cycle Interval: {localInterval} seconds
Card Cycle Speed: {localInterval} seconds
</label>
<Slider
value={[localInterval]}
@ -58,8 +63,26 @@ export function SettingsPanel({ cycleInterval, onIntervalChange }: SettingsPanel
className="w-full"
/>
<div className="flex justify-between text-sm text-gray-500 mt-1">
<span>3s</span>
<span>15s</span>
<span>3s (Fast)</span>
<span>15s (Slow)</span>
</div>
</div>
<div>
<label className="text-gray-300 text-lg mb-2 block">
Ticker Scroll Speed: {localTickerSpeed} seconds
</label>
<Slider
value={[localTickerSpeed]}
onValueChange={(value: number[]) => setLocalTickerSpeed(value[0])}
min={8}
max={120}
step={2}
className="w-full"
/>
<div className="flex justify-between text-sm text-gray-500 mt-1">
<span>8s (Very Fast)</span>
<span>120s (Slow)</span>
</div>
</div>

25
components/kiosk/ticker.tsx
View file

@ -51,17 +51,22 @@ export function Ticker({ activities, speed }: TickerProps) {
{[...activities, ...activities].map((activity, index) => (
<div
key={`${activity.ticketNumber}-${index}`}
className="inline-flex items-center mx-8 text-2xl"
className="inline-flex items-center mx-8"
>
<span className="mr-3">{getPriorityIcon(activity.priority)}</span>
<span className={`font-bold mr-2 ${getPriorityColor(activity.priority)}`}>
#{activity.ticketNumber}
</span>
<span className="text-white mr-2">-</span>
<span className="text-gray-300 mr-2">{activity.companyName}</span>
<span className="text-white mr-2">-</span>
<span className="text-gray-400 mr-2">{activity.title.substring(0, 60)}</span>
<span className="text-gray-500 text-xl">({activity.statusLabel})</span>
<span className="mr-3 text-2xl">{getPriorityIcon(activity.priority)}</span>
<div className="flex flex-col">
<div className="flex items-center text-xl">
<span className={`font-bold mr-2 ${getPriorityColor(activity.priority)}`}>
#{activity.ticketNumber}
</span>
<span className="text-white mr-2">-</span>
<span className="text-gray-400">{activity.title.substring(0, 60)}</span>
<span className="text-gray-500 text-lg ml-2">({activity.statusLabel})</span>
</div>
<div className="text-lg text-gray-300 mt-1">
{activity.companyName}
</div>
</div>
</div>
))}
</div>