Skip to content

Things list: Add dynamic blue dot to status badges if status detail is set #4069

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
florian-h05 merged 20 commits into from
Apr 20, 2026
Merged

Things list: Add dynamic blue dot to status badges if status detail is set #4069

Changes from 15 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
9a1910a
wip
andrewfg Mar 31, 2026
5c9a456
Merge remote-tracking branch 'upstream/main' into thing-info-badge
andrewfg Mar 31, 2026
d0a2f57
add margin
andrewfg Mar 31, 2026
779f1c3
change badge color
andrewfg Mar 31, 2026
18e44b7
npm run format
andrewfg Mar 31, 2026
64f5b33
statusInfo.description may be html
andrewfg Apr 2, 2026
67778fa
change to blue dot marker
andrewfg Apr 2, 2026
7b919ce
remove lock file
andrewfg Apr 2, 2026
3f398e5
restore lock file
andrewfg Apr 2, 2026
d989b5e
add border
andrewfg Apr 2, 2026
8735cef
fix lint error
andrewfg Apr 2, 2026
7c52105
lock file
andrewfg Apr 2, 2026
5716530
remove dependency on NONE detail
andrewfg Apr 9, 2026
e31c142
linting
andrewfg Apr 9, 2026
928e36a
Merge remote-tracking branch 'upstream/main' into thing-info-badge
andrewfg Apr 10, 2026
cfba656
use stylus
andrewfg Apr 11, 2026
2c9b7a3
Merge remote-tracking branch 'upstream/main' into thing-info-badge
andrewfg Apr 12, 2026
88981ea
remove scoped keyword
andrewfg Apr 12, 2026
f59c1de
Isolate badge CSS in parent class .things-list
florian-h05 Apr 20, 2026
85c658e
Minor styling enhancement
florian-h05 Apr 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 28 additions & 3 deletions bundles/org.openhab.ui/web/src/pages/settings/things/things-list.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,9 +174,15 @@
</div>
</template>
<template #after>
<f7-badge :color="thingStatusBadgeColor(thing.statusInfo)" :tooltip="thing.statusInfo.description">
{{ thingStatusBadgeText(thing.statusInfo) }}
</f7-badge>
<div class="badge-with-marker">
<f7-badge :color="thingStatusBadgeColor(thing.statusInfo)" :tooltip="thing.statusInfo.description || null">
{{ thingStatusBadgeText(thing.statusInfo) }}
</f7-badge>
<span
v-if="thing.statusInfo.status === 'ONLINE' && thing.statusInfo.description && thing.statusInfo.description !== ''"
class="badge-marker-dot">
</span>
</div>
</template>
<template #after-title>
<f7-icon v-if="!thing.editable" f7="lock_fill" size="1rem" color="gray" />
Expand Down Expand Up @@ -217,6 +223,25 @@
margin-bottom calc(var(--f7-fab-size) + 2 * calc(var(--f7-fab-margin) + var(--f7-safe-area-bottom)))
</style>

<style scoped>
Comment thread
andrewfg marked this conversation as resolved.
Outdated
.badge-with-marker {
position: relative;
display: inline-block;
}

.badge-marker-dot {
position: absolute;
top: -2px;
right: -2px;
width: 10px;
height: 10px;
background-color: var(--f7-color-blue);
border: 1px solid var(--f7-list-bg-color);
border-radius: 50%;
pointer-events: none;
}
</style>

<script>
import { nextTick } from 'vue'
import { f7, theme } from 'framework7-vue'
Expand Down
Loading