soeren/fotospiel-app
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Improve active states for admin tabs and filters

Browse Source
This commit is contained in:
Codex Agent
2026-02-04 08:44:50 +01:00
parent ba8890839b
commit 197e9c988b
7 changed files with 178 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
resources/js/admin/mobile/BrandingPage.tsx
View File

@@ -129,7 +129,7 @@ export default function MobileBrandingPage() {
const slug = slugParam ?? null;
const navigate = useNavigate();
const { t } = useTranslation('management');
const { textStrong, muted, subtle, border, primary, accentSoft, danger, surfaceMuted, surface } = useAdminTheme();
const { textStrong, text, muted, subtle, border, primary, accentSoft, danger, surfaceMuted, surface } = useAdminTheme();
const [event, setEvent] = React.useState<TenantEvent | null>(null);
const [form, setForm] = React.useState<BrandingFormValues>(() => buildBrandingFormBase(BRANDING_FORM_DEFAULTS));
@@ -645,13 +645,41 @@ export default function MobileBrandingPage() {
>
<MobileCard gap="$2">
<Tabs.List gap="$2">
<Tabs.Tab value="branding" flex={1} paddingVertical="$2.5" paddingHorizontal="$3" borderRadius="$4">
<Text fontSize="$sm" fontWeight="600" textAlign="center">
<Tabs.Tab
value="branding"
flex={1}
paddingVertical="$2.5"
paddingHorizontal="$3"
borderRadius="$4"
hoverStyle={{ backgroundColor: '$backgroundHover' }}
pressStyle={{ backgroundColor: '$backgroundPress' }}
activeStyle={{ backgroundColor: '$backgroundPress' }}
>
<Text
fontSize="$sm"
fontWeight={activeTab === 'branding' ? '700' : '600'}
color={activeTab === 'branding' ? text : muted}
textAlign="center"
>
{t('events.branding.titleShort', 'Branding')}
</Text>
</Tabs.Tab>
<Tabs.Tab value="watermark" flex={1} paddingVertical="$2.5" paddingHorizontal="$3" borderRadius="$4">
<Text fontSize="$sm" fontWeight="600" textAlign="center">
<Tabs.Tab
value="watermark"
flex={1}
paddingVertical="$2.5"
paddingHorizontal="$3"
borderRadius="$4"
hoverStyle={{ backgroundColor: '$backgroundHover' }}
pressStyle={{ backgroundColor: '$backgroundPress' }}
activeStyle={{ backgroundColor: '$backgroundPress' }}
>
<Text
fontSize="$sm"
fontWeight={activeTab === 'watermark' ? '700' : '600'}
color={activeTab === 'watermark' ? text : muted}
textAlign="center"
>
{t('events.watermark.tab', 'Wasserzeichen')}
</Text>
</Tabs.Tab>

72
resources/js/admin/mobile/EventControlRoomPage.tsx
View File

@@ -1383,39 +1383,31 @@ export default function MobileEventControlRoomPage() {
orientation="horizontal"
flexDirection="row"
alignItems="center"
padding="$1"
gap="$1.5"
borderRadius="$pill"
borderWidth={1}
borderColor={border}
backgroundColor={surfaceMuted}
gap="$2"
>
{MODERATION_FILTERS.map((option) => {
const count = moderationCounts[option.value] ?? 0;
const active = option.value === moderationFilter;
return (
<ToggleGroup.Item
key={option.value}
value={option.value}
borderRadius="$pill"
paddingVertical="$1.5"
borderRadius="$4"
borderWidth={1}
borderColor={border}
paddingVertical="$2"
paddingHorizontal="$3"
hoverStyle={{ backgroundColor: '$backgroundHover' }}
pressStyle={{ backgroundColor: '$backgroundPress' }}
activeStyle={{ backgroundColor: '$backgroundPress', borderColor: '$borderColorPress' }}
>
<XStack alignItems="center" gap="$1.5">
<Text fontSize="$xs" fontWeight="600">
<XStack alignItems="center" gap="$2">
<Text fontSize="$xs" fontWeight={active ? '700' : '600'} color={active ? text : muted}>
{t(option.labelKey, option.fallback)}
</Text>
<XStack
paddingHorizontal="$1.5"
paddingVertical="$0.5"
borderRadius="$pill"
borderWidth={1}
borderColor={border}
backgroundColor="$backgroundStrong"
>
<Text fontSize={10} fontWeight="700">
{count}
</Text>
</XStack>
<Text fontSize={10} fontWeight="700" color={active ? text : muted}>
{count}
</Text>
</XStack>
</ToggleGroup.Item>
);
@@ -1563,39 +1555,31 @@ export default function MobileEventControlRoomPage() {
orientation="horizontal"
flexDirection="row"
alignItems="center"
padding="$1"
gap="$1.5"
borderRadius="$pill"
borderWidth={1}
borderColor={border}
backgroundColor={surfaceMuted}
gap="$2"
>
{LIVE_STATUS_OPTIONS.map((option) => {
const count = liveCounts[option.value] ?? 0;
const active = option.value === liveStatusFilter;
return (
<ToggleGroup.Item
key={option.value}
value={option.value}
borderRadius="$pill"
paddingVertical="$1.5"
borderRadius="$4"
borderWidth={1}
borderColor={border}
paddingVertical="$2"
paddingHorizontal="$3"
hoverStyle={{ backgroundColor: '$backgroundHover' }}
pressStyle={{ backgroundColor: '$backgroundPress' }}
activeStyle={{ backgroundColor: '$backgroundPress', borderColor: '$borderColorPress' }}
>
<XStack alignItems="center" gap="$1.5">
<Text fontSize="$xs" fontWeight="600">
<XStack alignItems="center" gap="$2">
<Text fontSize="$xs" fontWeight={active ? '700' : '600'} color={active ? text : muted}>
{t(option.labelKey, option.fallback)}
</Text>
<XStack
paddingHorizontal="$1.5"
paddingVertical="$0.5"
borderRadius="$pill"
borderWidth={1}
borderColor={border}
backgroundColor="$backgroundStrong"
>
<Text fontSize={10} fontWeight="700">
{count}
</Text>
</XStack>
<Text fontSize={10} fontWeight="700" color={active ? text : muted}>
{count}
</Text>
</XStack>
</ToggleGroup.Item>
);

54
resources/js/admin/mobile/EventRecapPage.tsx
View File

@@ -215,18 +215,60 @@ export default function MobileEventRecapPage() {
flexDirection="column"
>
<Tabs.List gap="$2">
<Tabs.Tab value="overview" flex={1} paddingVertical="$2.5" paddingHorizontal="$3" borderRadius="$4">
<Text fontSize="$sm" fontWeight="600" textAlign="center">
<Tabs.Tab
value="overview"
flex={1}
paddingVertical="$2.5"
paddingHorizontal="$3"
borderRadius="$4"
hoverStyle={{ backgroundColor: '$backgroundHover' }}
pressStyle={{ backgroundColor: '$backgroundPress' }}
activeStyle={{ backgroundColor: '$backgroundPress' }}
>
<Text
fontSize="$sm"
fontWeight={activeTab === 'overview' ? '700' : '600'}
color={activeTab === 'overview' ? text : muted}
textAlign="center"
>
{t('events.recap.tabs.overview', 'Overview')}
</Text>
</Tabs.Tab>
<Tabs.Tab value="engagement" flex={1} paddingVertical="$2.5" paddingHorizontal="$3" borderRadius="$4">
<Text fontSize="$sm" fontWeight="600" textAlign="center">
<Tabs.Tab
value="engagement"
flex={1}
paddingVertical="$2.5"
paddingHorizontal="$3"
borderRadius="$4"
hoverStyle={{ backgroundColor: '$backgroundHover' }}
pressStyle={{ backgroundColor: '$backgroundPress' }}
activeStyle={{ backgroundColor: '$backgroundPress' }}
>
<Text
fontSize="$sm"
fontWeight={activeTab === 'engagement' ? '700' : '600'}
color={activeTab === 'engagement' ? text : muted}
textAlign="center"
>
{t('events.recap.tabs.engagement', 'Engagement')}
</Text>
</Tabs.Tab>
<Tabs.Tab value="compliance" flex={1} paddingVertical="$2.5" paddingHorizontal="$3" borderRadius="$4">
<Text fontSize="$sm" fontWeight="600" textAlign="center">
<Tabs.Tab
value="compliance"
flex={1}
paddingVertical="$2.5"
paddingHorizontal="$3"
borderRadius="$4"
hoverStyle={{ backgroundColor: '$backgroundHover' }}
pressStyle={{ backgroundColor: '$backgroundPress' }}
activeStyle={{ backgroundColor: '$backgroundPress' }}
>
<Text
fontSize="$sm"
fontWeight={activeTab === 'compliance' ? '700' : '600'}
color={activeTab === 'compliance' ? text : muted}
textAlign="center"
>
{t('events.recap.tabs.compliance', 'Compliance')}
</Text>
</Tabs.Tab>

5
resources/js/admin/mobile/EventTasksPage.tsx
View File

@@ -1190,8 +1190,11 @@ export default function MobileEventTasksPage() {
justifyContent="center"
borderRightWidth={index === arr.length - 1 ? 0 : 1}
borderRightColor={border}
hoverStyle={{ backgroundColor: '$backgroundHover' }}
pressStyle={{ backgroundColor: '$backgroundPress' }}
activeStyle={{ backgroundColor: '$backgroundPress' }}
>
<Text fontSize="$sm" fontWeight={isActive ? '700' : '600'}>
<Text fontSize="$sm" fontWeight={isActive ? '700' : '600'} color={isActive ? text : muted}>
{tab.label}
</Text>
</Tabs.Tab>

54
resources/js/admin/mobile/EventsPage.tsx
View File

@@ -319,40 +319,34 @@ function EventsList({
orientation="horizontal"
flexDirection="row"
alignItems="center"
padding="$1"
gap="$1.5"
borderRadius="$pill"
borderWidth={1}
borderColor={border}
backgroundColor={surfaceMuted}
gap="$2"
>
{filters.map((filter) => (
<ToggleGroup.Item
key={filter.key}
value={filter.key}
borderRadius="$pill"
paddingVertical="$1.5"
paddingHorizontal="$3"
>
<XStack alignItems="center" gap="$1.5">
<Text fontSize="$xs" fontWeight="600">
{filter.label}
</Text>
<XStack
paddingHorizontal="$1.5"
paddingVertical="$0.5"
borderRadius="$pill"
borderWidth={1}
borderColor={border}
backgroundColor="$backgroundStrong"
>
<Text fontSize={10} fontWeight="700">
{filters.map((filter) => {
const active = filter.key === statusFilter;
return (
<ToggleGroup.Item
key={filter.key}
value={filter.key}
borderRadius="$4"
borderWidth={1}
borderColor={border}
paddingVertical="$2"
paddingHorizontal="$3"
hoverStyle={{ backgroundColor: '$backgroundHover' }}
pressStyle={{ backgroundColor: '$backgroundPress' }}
activeStyle={{ backgroundColor: '$backgroundPress', borderColor: '$borderColorPress' }}
>
<XStack alignItems="center" gap="$2">
<Text fontSize="$xs" fontWeight={active ? '700' : '600'} color={active ? text : muted}>
{filter.label}
</Text>
<Text fontSize={10} fontWeight="700" color={active ? text : muted}>
{filter.count}
</Text>
</XStack>
</XStack>
</ToggleGroup.Item>
))}
</ToggleGroup.Item>
);
})}
</ToggleGroup>
</ScrollView>
</YStack>

36
resources/js/admin/mobile/ProfileAccountPage.tsx
View File

@@ -584,13 +584,41 @@ export default function MobileProfileAccountPage() {
flexDirection="column"
>
<Tabs.List gap="$2">
<Tabs.Tab value="account" flex={1} paddingVertical="$2.5" paddingHorizontal="$3" borderRadius="$4">
<Text fontSize="$sm" fontWeight="600" textAlign="center">
<Tabs.Tab
value="account"
flex={1}
paddingVertical="$2.5"
paddingHorizontal="$3"
borderRadius="$4"
hoverStyle={{ backgroundColor: '$backgroundHover' }}
pressStyle={{ backgroundColor: '$backgroundPress' }}
activeStyle={{ backgroundColor: '$backgroundPress' }}
>
<Text
fontSize="$sm"
fontWeight={activeTab === 'account' ? '700' : '600'}
color={activeTab === 'account' ? text : muted}
textAlign="center"
>
{t('profile.tabs.account', 'Account')}
</Text>
</Tabs.Tab>
<Tabs.Tab value="branding" flex={1} paddingVertical="$2.5" paddingHorizontal="$3" borderRadius="$4">
<Text fontSize="$sm" fontWeight="600" textAlign="center">
<Tabs.Tab
value="branding"
flex={1}
paddingVertical="$2.5"
paddingHorizontal="$3"
borderRadius="$4"
hoverStyle={{ backgroundColor: '$backgroundHover' }}
pressStyle={{ backgroundColor: '$backgroundPress' }}
activeStyle={{ backgroundColor: '$backgroundPress' }}
>
<Text
fontSize="$sm"
fontWeight={activeTab === 'branding' ? '700' : '600'}
color={activeTab === 'branding' ? text : muted}
textAlign="center"
>
{t('profile.tabs.branding', 'Standard-Branding')}
</Text>
</Tabs.Tab>

10
resources/js/admin/mobile/components/Primitives.tsx
View File

@@ -434,6 +434,7 @@ export function ContentTabs({
tabs: { value: string; label: string; content: React.ReactNode }[];
header?: React.ReactNode;
}) {
const { muted, text } = useAdminTheme();
return (
<Tabs
defaultValue={value}
@@ -456,8 +457,15 @@ export function ContentTabs({
paddingHorizontal="$3"
alignItems="center"
justifyContent="center"
hoverStyle={{ backgroundColor: '$backgroundHover' }}
pressStyle={{ backgroundColor: '$backgroundPress' }}
activeStyle={{ backgroundColor: '$backgroundPress' }}
>
<Text fontSize="$sm" fontWeight="600">
<Text
fontSize="$sm"
fontWeight={value === tab.value ? '700' : '600'}
color={value === tab.value ? text : muted}
>
{tab.label}
</Text>
</Tabs.Tab>