09af7af228
- Changed background color in AppHeader.vue and AppNavigation.vue to a new shade for improved aesthetics. - Adjusted hover states and submenu background colors in AppNavigation.vue to match the updated theme. - Refactored FamilyView.vue to enhance layout with additional padding for better alignment of elements.
128 lines
2.7 KiB
Vue
128 lines
2.7 KiB
Vue
<template>
|
|
<header>
|
|
<div class="logo"><img src="/images/logos/logo.png" /></div>
|
|
<div class="advertisement">Advertisement</div>
|
|
<div class="connection-status" v-if="isLoggedIn">
|
|
<div class="status-indicator" :class="backendStatusClass">
|
|
<span class="status-dot"></span>
|
|
<span class="status-text">B</span>
|
|
</div>
|
|
<div class="status-indicator" :class="daemonStatusClass">
|
|
<span class="status-dot"></span>
|
|
<span class="status-text">D</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex';
|
|
|
|
export default {
|
|
name: 'AppHeader',
|
|
computed: {
|
|
...mapGetters(['isLoggedIn', 'connectionStatus', 'daemonConnectionStatus']),
|
|
backendStatusClass() {
|
|
return {
|
|
'status-connected': this.connectionStatus === 'connected',
|
|
'status-connecting': this.connectionStatus === 'connecting',
|
|
'status-disconnected': this.connectionStatus === 'disconnected',
|
|
'status-error': this.connectionStatus === 'error'
|
|
};
|
|
},
|
|
daemonStatusClass() {
|
|
return {
|
|
'status-connected': this.daemonConnectionStatus === 'connected',
|
|
'status-connecting': this.daemonConnectionStatus === 'connecting',
|
|
'status-disconnected': this.daemonConnectionStatus === 'disconnected',
|
|
'status-error': this.daemonConnectionStatus === 'error'
|
|
};
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 10px;
|
|
background-color: #f8a22b;
|
|
}
|
|
.logo, .title, .advertisement {
|
|
text-align: center;
|
|
}
|
|
.advertisement {
|
|
flex: 1;
|
|
}
|
|
.logo > img {
|
|
max-height: 50px;
|
|
}
|
|
|
|
.connection-status {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 10px;
|
|
gap: 5px;
|
|
}
|
|
|
|
.status-indicator {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
font-size: 6pt;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.status-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
margin-right: 4px;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
.status-connected .status-dot {
|
|
background-color: #4caf50;
|
|
}
|
|
|
|
.status-connecting .status-dot {
|
|
background-color: #ff9800;
|
|
}
|
|
|
|
.status-disconnected .status-dot {
|
|
background-color: #f44336;
|
|
}
|
|
|
|
.status-error .status-dot {
|
|
background-color: #f44336;
|
|
}
|
|
|
|
.status-connected {
|
|
background-color: rgba(76, 175, 80, 0.1);
|
|
color: #2e7d32;
|
|
}
|
|
|
|
.status-connecting {
|
|
background-color: rgba(255, 152, 0, 0.1);
|
|
color: #f57c00;
|
|
}
|
|
|
|
.status-disconnected {
|
|
background-color: rgba(244, 67, 54, 0.1);
|
|
color: #d32f2f;
|
|
}
|
|
|
|
.status-error {
|
|
background-color: rgba(244, 67, 54, 0.1);
|
|
color: #d32f2f;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
100% { opacity: 1; }
|
|
}
|
|
</style>
|