feat(ui): cosmetic tweaks — profile pencil, pills, search, ticket count, map icon, avatar trigger, no overlay animations #105
1 changed files with 6 additions and 3 deletions
fix(activities): let temporal filter pills respect palette radius + shadow
Drop the hardcoded rounded-full on the temporal filter pills so they inherit each palette's --radius (square under neobrut, gently rounded elsewhere) and the theme's offset drop-shadow, instead of overriding it. Add pb-1 pr-1 so neobrut's hard 4px shadow isn't clipped by the overflow-x-auto scroll box. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
commit
1f68660783
|
|
@ -26,13 +26,16 @@ const options: { value: TemporalFilter; labelKey: string }[] = [
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="flex gap-2 overflow-x-auto" style="-ms-overflow-style: none; scrollbar-width: none;">
|
<!-- pb-1 pr-1 keep the theme's offset drop-shadow (neobrut casts a hard 4px
|
||||||
|
shadow down and to the right) from being clipped at the scroll box's
|
||||||
|
bottom/right edges (overflow-x-auto forces overflow-y to auto). -->
|
||||||
|
<div class="flex gap-2 overflow-x-auto pb-1 pr-1" style="-ms-overflow-style: none; scrollbar-width: none;">
|
||||||
<Button
|
<Button
|
||||||
v-for="option in options"
|
v-for="option in options"
|
||||||
:key="option.value"
|
:key="option.value"
|
||||||
:variant="props.modelValue === option.value ? 'default' : 'outline'"
|
:variant="props.modelValue === option.value ? 'default' : 'outline'"
|
||||||
size="sm"
|
size="sm"
|
||||||
class="rounded-full text-xs shrink-0"
|
class="text-xs shrink-0"
|
||||||
@click="emit('update:modelValue', option.value)"
|
@click="emit('update:modelValue', option.value)"
|
||||||
>
|
>
|
||||||
{{ t(option.labelKey) }}
|
{{ t(option.labelKey) }}
|
||||||
|
|
@ -45,7 +48,7 @@ const options: { value: TemporalFilter; labelKey: string }[] = [
|
||||||
<Button
|
<Button
|
||||||
:variant="props.showPast ? 'default' : 'outline'"
|
:variant="props.showPast ? 'default' : 'outline'"
|
||||||
size="sm"
|
size="sm"
|
||||||
class="rounded-full text-xs shrink-0 gap-1.5"
|
class="text-xs shrink-0 gap-1.5"
|
||||||
@click="emit('toggle-past')"
|
@click="emit('toggle-past')"
|
||||||
>
|
>
|
||||||
<History class="w-3 h-3" />
|
<History class="w-3 h-3" />
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue