44 lines
1.4 KiB
JavaScript
44 lines
1.4 KiB
JavaScript
import OnlineUsersStack from '../online-users-stack/online-users-stack.js';
|
|
import OnlineUsersMenu from '../online-users-menu/online-users-menu.js';
|
|
|
|
const { inject } = Vue;
|
|
const { useQuasar } = Quasar;
|
|
|
|
export default {
|
|
name: 'HeaderActions',
|
|
components: { OnlineUsersStack, OnlineUsersMenu },
|
|
setup() {
|
|
const appState = inject('appState');
|
|
const $q = useQuasar();
|
|
return { ...appState, $q };
|
|
},
|
|
template: `
|
|
<div class="header-actions-root row items-center q-gutter-sm">
|
|
<transition appear enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
|
|
<q-btn
|
|
v-if="hasHighlights"
|
|
outline
|
|
rounded
|
|
dense
|
|
color="amber-9"
|
|
icon="highlight_off"
|
|
:label="$q.screen.gt.xs ? 'Clear Highlights' : ''"
|
|
class="q-mr-xs bg-amber-1"
|
|
@click="clearHighlights"
|
|
>
|
|
<q-tooltip v-if="!$q.screen.gt.xs">Clear Highlights</q-tooltip>
|
|
</q-btn>
|
|
</transition>
|
|
|
|
<online-users-stack class="gt-sm"></online-users-stack>
|
|
<online-users-menu class="lt-md"></online-users-menu>
|
|
|
|
<q-separator vertical inset class="gt-xs q-mx-sm"></q-separator>
|
|
<q-btn flat round dense icon="notifications" color="grey-6" class="gt-xs"></q-btn>
|
|
<q-avatar size="32px" class="cursor-pointer q-ml-xs">
|
|
<img src="https://i.pravatar.cc/150?u=me">
|
|
</q-avatar>
|
|
</div>
|
|
`
|
|
};
|