misty.cafe/mistykey
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

merge: Fix moderation status badges (!1223)

Browse source 
View MR for information: https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/1223

Approved-by: dakkar <dakkar@thenautilus.net>
Approved-by: Marie <github@yuugi.dev>
This commit is contained in:
Hazelnoot 2025-09-13 14:32:49 -04:00
commit 857ed9b90a
1 changed files with 13 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

36
packages/frontend/src/components/SkBadgeStrip.vue
View file

@ -10,7 +10,11 @@ Horizontal strip that displays a user's badges.
<div
v-for="badge of badges"
:key="badge.key"
:class="[$style.badge, semanticClass(badge)]"
:class="$style.badge"
:style="{
'color': color(badge),
'border-color': color(badge),
}"
>
{{ badge.label }}
</div>
@ -39,17 +43,18 @@ export interface Badge {
</script>
<script setup lang="ts">
import { useCssModule } from 'vue';
const $style = useCssModule();
defineProps<{
badges: Badge[],
}>();
function semanticClass(badge: Badge): string {
const style = badge.style ?? 'neutral';
return $style[`semantic_${style}`];
// These can't be classes, or Vite will optimize them away from production builds.
function color(badge: Badge) {
switch (badge.style) {
case 'success': return 'var(--MI_THEME-success)';
case 'warning': return 'var(--MI_THEME-warn)';
case 'error': return 'var(--MI_THEME-error)';
default: return 'unset';
}
}
</script>
@ -68,19 +73,4 @@ function semanticClass(badge: Badge): string {
padding: 2px 6px;
font-size: 85%;
}
.semantic_error {
color: var(--MI_THEME-error);
border-color: var(--MI_THEME-error);
}
.semantic_warning {
color: var(--MI_THEME-warn);
border-color: var(--MI_THEME-warn);
}
.semantic_success {
color: var(--MI_THEME-success);
border-color: var(--MI_THEME-success);
}
</style>