changed font casing, revamped opacity slider and improved accessibility with aria labels and keyboard navigation
This commit is contained in:
findthelorax
@@ -15,13 +15,13 @@ jobs:
|
||||
strategy:
|
||||
matrix:
|
||||
include:
|
||||
- image: ghcr.io/${{ github.repository_owner }}/homelable-backend
|
||||
- image: ghcr.io/pouzor/homelable-backend
|
||||
dockerfile: Dockerfile.backend
|
||||
build_args: ""
|
||||
- image: ghcr.io/${{ github.repository_owner }}/homelable-frontend
|
||||
- image: ghcr.io/pouzor/homelable-frontend
|
||||
dockerfile: Dockerfile.frontend
|
||||
build_args: ""
|
||||
- image: ghcr.io/${{ github.repository_owner }}/homelable-frontend-standalone
|
||||
- image: ghcr.io/pouzor/homelable-frontend-standalone
|
||||
dockerfile: Dockerfile.frontend
|
||||
build_args: "VITE_STANDALONE=true"
|
||||
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
/* Custom colored slider track for accent color */
|
||||
.slider-accent::-webkit-slider-runnable-track {
|
||||
height: 4px;
|
||||
background: #00d4ff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.slider-accent::-moz-range-track {
|
||||
height: 4px;
|
||||
background: #00d4ff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.slider-accent::-ms-fill-lower,
|
||||
.slider-accent::-ms-fill-upper {
|
||||
background: #00d4ff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* Ensure the slider bar is visible on dark backgrounds */
|
||||
.slider-thumb-sm {
|
||||
background: transparent;
|
||||
}
|
||||
/* Custom slider thumb for smaller circle */
|
||||
.slider-thumb-sm::-webkit-slider-thumb {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: #00d4ff;
|
||||
border: 2px solid #21262d;
|
||||
}
|
||||
.slider-thumb-sm::-moz-range-thumb {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: #00d4ff;
|
||||
border: 2px solid #21262d;
|
||||
}
|
||||
.slider-thumb-sm::-ms-thumb {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: #00d4ff;
|
||||
border: 2px solid #21262d;
|
||||
}
|
||||
@@ -7,6 +7,7 @@ import { Label } from '@/components/ui/label'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
import type { TextPosition } from '@/types'
|
||||
import { hexToRgba, rgbaToHex8 } from '@/utils/colorUtils'
|
||||
import styles from './GroupRectModal.module.css' // Import custom CSS for slider thumb
|
||||
|
||||
export type BorderStyle = 'solid' | 'dashed' | 'dotted' | 'double' | 'none'
|
||||
|
||||
@@ -138,9 +139,13 @@ export function GroupRectModal({ open, onClose, onSubmit, onDelete, initial, tit
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label className="text-xs text-muted-foreground">Font</Label>
|
||||
<Select value={form.font} onValueChange={(v: string | null) => set('font', v ?? 'inter')}>
|
||||
<SelectTrigger className={`bg-[#21262d] border-[#30363d] text-sm h-8 cursor-pointer ${modalStyles['modal-interactive']} ${modalStyles['modal-radius']}`}>
|
||||
<SelectTrigger
|
||||
className={`bg-[#21262d] border-[#30363d] text-sm h-8 cursor-pointer ${modalStyles['modal-interactive']} ${modalStyles['modal-radius']}`}
|
||||
aria-label="Font selector"
|
||||
>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
|
||||
<SelectContent className="bg-[#21262d] border-[#30363d]">
|
||||
{FONTS.map((f) => (
|
||||
<SelectItem key={f.value} value={f.value} className="text-sm">
|
||||
@@ -164,6 +169,7 @@ export function GroupRectModal({ open, onClose, onSubmit, onDelete, initial, tit
|
||||
title={value}
|
||||
onClick={() => set('text_position', value)}
|
||||
className={`h-8 rounded text-base transition-colors cursor-pointer ${modalStyles['modal-interactive']}`}
|
||||
aria-label={`Text position ${label}`}
|
||||
style={{
|
||||
background: isSelected ? '#00d4ff22' : '#21262d',
|
||||
border: `1px solid ${isSelected ? '#00d4ff88' : '#30363d'}`,
|
||||
@@ -189,6 +195,7 @@ export function GroupRectModal({ open, onClose, onSubmit, onDelete, initial, tit
|
||||
type="button"
|
||||
onClick={() => set('label_position', value)}
|
||||
className={`flex items-center justify-center h-8 rounded text-xs transition-colors cursor-pointer ${modalStyles['modal-interactive']}`}
|
||||
aria-label={`Label position ${label}`}
|
||||
style={{
|
||||
background: isSelected ? '#00d4ff22' : '#21262d',
|
||||
border: `1px solid ${isSelected ? '#00d4ff88' : '#30363d'}`,
|
||||
@@ -228,8 +235,9 @@ export function GroupRectModal({ open, onClose, onSubmit, onDelete, initial, tit
|
||||
max={100}
|
||||
value={alpha}
|
||||
onChange={(e) => set(key, rgbaToHex8(hex6, Number(e.target.value)))}
|
||||
className="w-full h-1 accent-[#00d4ff] cursor-pointer"
|
||||
className={`w-full h-1 cursor-pointer mt-2 ${styles['slider-thumb-sm']} ${styles['slider-accent']}`}
|
||||
title={`Opacity: ${alpha}%`}
|
||||
style={{ accentColor: '#00d4ff' }}
|
||||
/>
|
||||
<span className="text-[9px] text-muted-foreground/60">{label} {alpha}%</span>
|
||||
</div>
|
||||
@@ -250,6 +258,7 @@ export function GroupRectModal({ open, onClose, onSubmit, onDelete, initial, tit
|
||||
type="button"
|
||||
onClick={() => set('text_size', value)}
|
||||
className={`flex items-center justify-center h-8 rounded transition-colors cursor-pointer ${modalStyles['modal-interactive']}`}
|
||||
aria-label={`Text size ${label}`}
|
||||
style={{
|
||||
background: isSelected ? '#00d4ff22' : '#21262d',
|
||||
border: `1px solid ${isSelected ? '#00d4ff88' : '#30363d'}`,
|
||||
@@ -277,6 +286,7 @@ export function GroupRectModal({ open, onClose, onSubmit, onDelete, initial, tit
|
||||
title={label}
|
||||
onClick={() => set('border_style', value)}
|
||||
className={`flex flex-col items-center justify-center h-10 rounded text-xs gap-0.5 transition-colors cursor-pointer ${modalStyles['modal-interactive']}`}
|
||||
aria-label={`Border style ${label}`}
|
||||
style={{
|
||||
background: isSelected ? '#00d4ff22' : '#21262d',
|
||||
border: `1px solid ${isSelected ? '#00d4ff88' : '#30363d'}`,
|
||||
@@ -303,6 +313,7 @@ export function GroupRectModal({ open, onClose, onSubmit, onDelete, initial, tit
|
||||
type="button"
|
||||
onClick={() => set('border_width', value)}
|
||||
className={`flex items-center justify-center h-8 rounded text-xs transition-colors cursor-pointer ${modalStyles['modal-interactive']}`}
|
||||
aria-label={`Border width ${label}`}
|
||||
style={{
|
||||
background: isSelected ? '#00d4ff22' : '#21262d',
|
||||
border: `1px solid ${isSelected ? '#00d4ff88' : '#30363d'}`,
|
||||
@@ -318,11 +329,23 @@ export function GroupRectModal({ open, onClose, onSubmit, onDelete, initial, tit
|
||||
|
||||
{/* Z-order */}
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label className="text-xs text-muted-foreground">Z-Order (1 = furthest back)</Label>
|
||||
<Select value={String(form.z_order)} onValueChange={(v: string | null) => set('z_order', v !== null ? Number(v) : 1)}>
|
||||
<SelectTrigger className={`bg-[#21262d] border-[#30363d] text-sm h-8 cursor-pointer ${modalStyles['modal-interactive']}`}>
|
||||
<Label className="text-xs text-muted-foreground">
|
||||
Z-Order (1 = furthest back)
|
||||
</Label>
|
||||
|
||||
<Select
|
||||
value={String(form.z_order)}
|
||||
onValueChange={(v: string | null) =>
|
||||
set('z_order', v !== null ? Number(v) : 1)
|
||||
}
|
||||
>
|
||||
<SelectTrigger
|
||||
className={`bg-[#21262d] border-[#30363d] text-sm h-8 cursor-pointer ${modalStyles['modal-interactive']}`}
|
||||
aria-label="Z-order selector"
|
||||
>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
|
||||
<SelectContent className="bg-[#21262d] border-[#30363d]">
|
||||
{[1, 2, 3, 4, 5, 6, 7, 8, 9].map((n) => (
|
||||
<SelectItem key={n} value={String(n)} className="text-sm font-mono">
|
||||
|
||||
Reference in New Issue
Block a user