jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Use custom styled headerbar actions

Browse Source
This commit is contained in:
Johannes Zellner
2025-03-26 11:30:45 +01:00
parent 8a88a8a9ef
commit 7a747774fd
1 changed files with 21 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
dashboard/src/components/Headerbar.vue
View File

@@ -3,7 +3,7 @@
import { onMounted, ref, useTemplateRef } from 'vue';
import { marked } from 'marked';
import { eachLimit } from 'async';
import { Button, Popover } from 'pankow';
import { Button, Popover, Icon } from 'pankow';
import NotificationsModel from '../models/NotificationsModel.js';
const props = defineProps(['config', 'profile', 'subscription']);
@@ -81,8 +81,8 @@ onMounted(async () => {
</Popover>
<div v-if="!profile.isAtLeastUserManager">
<a href="#/" class="headerbar-logo">
<img :src="`https://${config.adminFqdn}/api/v1/cloudron/avatar`" width="40" height="40"/> {{ config.cloudronName || 'Cloudron' }}
<a href="#/" class="headerbar-action">
<img :src="`https://${config.adminFqdn}/api/v1/cloudron/avatar`"/> {{ config.cloudronName || 'Cloudron' }}
</a>
</div>
@@ -96,9 +96,9 @@ onMounted(async () => {
<div v-show="!profile.isAtLeastOwner && subscription.plan.id === 'expired'">
<span class="badge badge-danger">Subscription Expired</span>
</div>
<Button plain secondary tool v-if="profile.isAtLeastAdmin" ref="notificationButton" @click="onOpenNotifications(notificationPopover, $event, notificationButton.$el)" :icon="notifications.length ? 'fas fa-bell' : 'far fa-bell'">{{ notifications.length > 99 ? '99+' : notifications.length }}</Button>
<Button plain secondary tool v-if="profile.isAtLeastAdmin" href="#/support" icon="fa fa-question fa-fw"/>
<Button plain secondary href="#/profile"><img :src="profile.avatarUrl" class="headerbar-avatar"/> {{ profile.username }}</Button>
<div class="headerbar-action" v-if="profile.isAtLeastAdmin" ref="notificationButton" @click="onOpenNotifications(notificationPopover, $event, notificationButton.$el)"><Icon :icon="notifications.length ? 'fas fa-bell' : 'far fa-bell'"/> {{ notifications.length > 99 ? '99+' : notifications.length }}</div>
<a class="headerbar-action" v-if="profile.isAtLeastAdmin" href="#/support"><Icon icon="fa fa-question"/></a>
<a class="headerbar-action" href="#/profile"><img :src="profile.avatarUrl" /> {{ profile.username }}</a>
</div>
</template>
@@ -106,8 +106,7 @@ onMounted(async () => {
.headerbar {
display: flex;
padding: 10px;
padding-bottom: 6px;
padding: 15px;
align-items: center;
gap: 15px;
}
@@ -124,30 +123,23 @@ body.has-background .headerbar {
}
}
.headerbar a {
display: flex;
align-items: center;
}
.headerbar-avatar {
width: 32px;
height: 32px;
margin-right: 10px;
border-radius: var(--pankow-border-radius);
}
.headerbar-logo img {
margin-right: 10px;
border-radius: var(--pankow-border-radius);
}
.headerbar-logo,
.headerbar-logo:hover {
.headerbar-action {
display: flex;
align-items: center;
cursor: pointer;
color: var(--pankow-text-color);
text-decoration: none;
/* padding-left: 10px;*/
padding: 4px 15px;
}
.headerbar-action img {
margin-right: 10px;
width: 40px;
height: 40px;
border-radius: var(--pankow-border-radius);
}
.headerbar-action:hover {
color: var(--pankow-color-primary-hover);
}
.notification-item {