64 lines
1.8 KiB
Vue
64 lines
1.8 KiB
Vue
|
<script setup>
|
||
|
|
|
||
|
|
const props = defineProps(['profile', 'subscription']);
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="headerbar">
|
||
|
|
<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') }}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div v-show="!profile.isAtLeastOwner && subscription.plan.id === 'expired'">
|
||
|
|
<span class="badge badge-danger">Subscription Expired</span>
|
||
|
|
</div>
|
||
|
|
<a v-show="profile.isAtLeastAdmin" href="#/notifications">
|
||
|
|
<i class="fas fa-bell" v-if="notificationCount"></i>
|
||
|
|
<i class="far fa-bell" v-else></i>
|
||
|
|
<span v-show="notificationCount">{{ notificationCount === 100 ? '100+' : notificationCount }}</span>
|
||
|
|
</a>
|
||
|
|
<a v-show="profile.isAtLeastAdmin" href="#/support">
|
||
|
|
<i class="fa fa-question fa-fw"></i>
|
||
|
|
</a>
|
||
|
|
<a href="#/profile">
|
||
|
|
<img :src="profile.avatarUrl" class="headerbar-avatar"/> {{ profile.username }}
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
|
||
|
|
.headerbar {
|
||
|
|
display: flex;
|
||
|
|
padding: 10px;
|
||
|
|
align-items: center;
|
||
|
|
gap: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.headerbar a {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding: 6px 15px;
|
||
|
|
border-radius: var(--pankow-border-radius);
|
||
|
|
color: var(--pankow-text-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.headerbar a:focus,
|
||
|
|
.headerbar a:active,
|
||
|
|
.headerbar a:hover {
|
||
|
|
text-decoration: none;
|
||
|
|
background-color: var(--pankow-color-background-hover);
|
||
|
|
}
|
||
|
|
|
||
|
|
.headerbar-avatar {
|
||
|
|
width: 32px;
|
||
|
|
height: 32px;
|
||
|
|
margin-right: 10px;
|
||
|
|
border-radius: var(--pankow-border-radius);
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|