torsten/yourpart3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor StatusBar component: Improve status item rendering by enhancing icon and label display, and update CSS for better alignment and styling. This change enhances the visual clarity and user experience of the status bar.

Browse Source
This commit is contained in:
Torsten Schulz (local)
2026-01-29 11:58:15 +01:00
parent d1e150b306
commit 822ac5984b
1 changed files with 21 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/src/components/falukant/StatusBar.vue
View File

@@ -5,19 +5,22 @@
<img src="/images/icons/falukant/messages24.png" class="menu-icon" />
</div>
<template v-for="item in statusItems" :key="item.key">
<div class="status-item" v-if="item.value !== null && item.image == null" :title="$t(`falukant.statusbar.${item.key}`)">
<span class="status-icon">
<div class="status-item" v-if="item.value !== null && item.image == null">
<span class="status-icon-wrapper">
<template v-if="item.iconImage">
<img :src="'/images/icons/' + item.iconImage" class="inline-icon" width="16" height="16" />:
<img :src="'/images/icons/' + item.iconImage" class="inline-icon" width="16" height="16" :title="String(item.value)" />
</template>
<template v-else>
{{ item.icon }}:
<span class="status-icon-symbol" :title="String(item.value)">{{ item.icon }}</span>
</template>
{{ item.value }}
</span>
<span class="status-label" :title="$t(`falukant.statusbar.${item.key}`)">{{ item.value }}</span>
</div>
<div class="status-item" v-else-if="item.image !== null" :title="$t(`falukant.statusbar.${item.key}`)">
<span class="status-icon">{{ item.icon }}:</span> <img :src="'/images/icons/falukant/relationship-' + item.image + '.png'" class="relationship-icon" />
<div class="status-item" v-else-if="item.image !== null">
<span class="status-icon-wrapper">
<span class="status-icon-symbol" :title="$t(`falukant.statusbar.${item.key}`)">{{ item.icon }}</span>
</span>
<img :src="'/images/icons/falukant/relationship-' + item.image + '.png'" class="relationship-icon" :title="$t(`falukant.statusbar.${item.key}`)" />
</div>
</template>
<span v-if="statusItems.length > 0 && menu.falukant && menu.falukant.children">
@@ -199,7 +202,17 @@ export default {
align-items: center;
}
.status-icon {
.status-icon-wrapper {
display: inline-flex;
align-items: center;
margin-right: 4px;
}
.status-icon-symbol {
font-size: 14px;
}
.status-label {
font-size: 14px;
}