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 ac7d4a2283
commit 66013a696c
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;
}