soeren/fotospiel-app
1
0
Fork 0
Code Issues Pull Requests Actions 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 slug = slugParam ?? null;
const navigate = useNavigate(); const navigate = useNavigate();
const { t } = useTranslation('management'); 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 [event, setEvent] = React.useState<TenantEvent | null>(null);
const [form, setForm] = React.useState<BrandingFormValues>(() => buildBrandingFormBase(BRANDING_FORM_DEFAULTS)); const [form, setForm] = React.useState<BrandingFormValues>(() => buildBrandingFormBase(BRANDING_FORM_DEFAULTS));
@@ -645,13 +645,41 @@ export default function MobileBrandingPage() {
> >
<MobileCard gap="$2"> <MobileCard gap="$2">
<Tabs.List gap="$2"> <Tabs.List gap="$2">
<Tabs.Tab value="branding" flex={1} paddingVertical="$2.5" paddingHorizontal="$3" borderRadius="$4"> <Tabs.Tab
<Text fontSize="$sm" fontWeight="600" textAlign="center"> 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')} {t('events.branding.titleShort', 'Branding')}
</Text> </Text>
</Tabs.Tab> </Tabs.Tab>
<Tabs.Tab value="watermark" flex={1} paddingVertical="$2.5" paddingHorizontal="$3" borderRadius="$4"> <Tabs.Tab
<Text fontSize="$sm" fontWeight="600" textAlign="center"> 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')} {t('events.watermark.tab', 'Wasserzeichen')}
</Text> </Text>
</Tabs.Tab> </Tabs.Tab>

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

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

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

@@ -215,18 +215,60 @@ export default function MobileEventRecapPage() {
flexDirection="column" flexDirection="column"
> >
<Tabs.List gap="$2"> <Tabs.List gap="$2">
<Tabs.Tab value="overview" flex={1} paddingVertical="$2.5" paddingHorizontal="$3" borderRadius="$4"> <Tabs.Tab
<Text fontSize="$sm" fontWeight="600" textAlign="center"> 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')} {t('events.recap.tabs.overview', 'Overview')}
</Text> </Text>
</Tabs.Tab> </Tabs.Tab>
<Tabs.Tab value="engagement" flex={1} paddingVertical="$2.5" paddingHorizontal="$3" borderRadius="$4"> <Tabs.Tab
<Text fontSize="$sm" fontWeight="600" textAlign="center"> 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')} {t('events.recap.tabs.engagement', 'Engagement')}
</Text> </Text>
</Tabs.Tab> </Tabs.Tab>
<Tabs.Tab value="compliance" flex={1} paddingVertical="$2.5" paddingHorizontal="$3" borderRadius="$4"> <Tabs.Tab
<Text fontSize="$sm" fontWeight="600" textAlign="center"> 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')} {t('events.recap.tabs.compliance', 'Compliance')}
</Text> </Text>
</Tabs.Tab> </Tabs.Tab>

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

@@ -1190,8 +1190,11 @@ export default function MobileEventTasksPage() {
justifyContent="center" justifyContent="center"
borderRightWidth={index === arr.length - 1 ? 0 : 1} borderRightWidth={index === arr.length - 1 ? 0 : 1}
borderRightColor={border} 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} {tab.label}
</Text> </Text>
</Tabs.Tab> </Tabs.Tab>

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

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

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

@@ -584,13 +584,41 @@ export default function MobileProfileAccountPage() {
flexDirection="column" flexDirection="column"
> >
<Tabs.List gap="$2"> <Tabs.List gap="$2">
<Tabs.Tab value="account" flex={1} paddingVertical="$2.5" paddingHorizontal="$3" borderRadius="$4"> <Tabs.Tab
<Text fontSize="$sm" fontWeight="600" textAlign="center"> 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')} {t('profile.tabs.account', 'Account')}
</Text> </Text>
</Tabs.Tab> </Tabs.Tab>
<Tabs.Tab value="branding" flex={1} paddingVertical="$2.5" paddingHorizontal="$3" borderRadius="$4"> <Tabs.Tab
<Text fontSize="$sm" fontWeight="600" textAlign="center"> 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')} {t('profile.tabs.branding', 'Standard-Branding')}
</Text> </Text>
</Tabs.Tab> </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 }[]; tabs: { value: string; label: string; content: React.ReactNode }[];
header?: React.ReactNode; header?: React.ReactNode;
}) { }) {
const { muted, text } = useAdminTheme();
return ( return (
<Tabs <Tabs
defaultValue={value} defaultValue={value}
@@ -456,8 +457,15 @@ export function ContentTabs({
paddingHorizontal="$3" paddingHorizontal="$3"
alignItems="center" alignItems="center"
justifyContent="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} {tab.label}
</Text> </Text>
</Tabs.Tab> </Tabs.Tab>