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

Remove sidebar for normal users and add logo to header bar

Browse Source
This commit is contained in:
Johannes Zellner
2025-03-23 10:37:33 +01:00
parent c4452c99ae
commit bb12da6777
8 changed files with 35 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,7 +6,7 @@ import { eachLimit } from 'async';
import { Button, Popover } from 'pankow';
import NotificationsModel from '../models/NotificationsModel.js';
const props = defineProps(['profile', 'subscription']);
const props = defineProps(['config', 'profile', 'subscription']);
const notificationModel = NotificationsModel.create();
const notificationButton = useTemplateRef('notificationButton');
@@ -53,7 +53,7 @@ async function refresh() {
}
onMounted(async () => {
await refresh();
if (props.profile.isAtLeastAdmin) await refresh();
});
</script>
@@ -80,7 +80,14 @@ onMounted(async () => {
</div>
</Popover>
<div v-if="!profile.isAtLeastUserManager">
<a href="#/" class="headerbar-logo" @click="onClose()">
<img :src="`https://${config.adminFqdn}/api/v1/cloudron/avatar`" width="40" height="40"/> {{ config.cloudronName || 'Cloudron' }}
</a>
</div>
<div style="flex-grow: 1;"></div>
<div v-show="profile.isAtLeastOwner && (subscription.plan.id === 'free' || subscription.plan.id === 'expired')" ng-click="openSubscriptionSetup()" style="cursor: pointer">
<span class="badge" ng-class="{'badge-danger': subscription.plan.id !== 'free', 'badge-success': subscription.plan.id === 'free' }">
{{ $t(subscription.plan.id === 'free' ? 'settings.appstoreAccount.subscriptionSetupAction' : 'settings.appstoreAccount.subscriptionReactivateAction') }}
@@ -91,7 +98,7 @@ onMounted(async () => {
</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 v-if="profile.isAtLeastAdmin" href="#/profile"><img :src="profile.avatarUrl" class="headerbar-avatar"/> {{ profile.username }}</Button>
<Button plain secondary href="#/profile"><img :src="profile.avatarUrl" class="headerbar-avatar"/> {{ profile.username }}</Button>
</div>
</template>
@@ -99,7 +106,8 @@ onMounted(async () => {
.headerbar {
display: flex;
padding: 6px;
padding: 10px;
padding-bottom: 6px;
align-items: center;
gap: 15px;
}
@@ -116,6 +124,20 @@ onMounted(async () => {
border-radius: var(--pankow-border-radius);
}
.headerbar-logo img {
margin-right: 10px;
border-radius: var(--pankow-border-radius);
}
.headerbar-logo,
.headerbar-logo:hover {
display: flex;
align-items: center;
color: var(--pankow-text-color);
text-decoration: none;
/* padding-left: 10px;*/
}
.notification-item {
margin-bottom: 10px;
padding-bottom: 10px;