60 lines
1.9 KiB
JavaScript
60 lines
1.9 KiB
JavaScript
/**
|
|
* app-header.js
|
|
* ==============
|
|
* Top toolbar: logo, online-users component, notifications,
|
|
* clear-highlights button.
|
|
*/
|
|
|
|
import {
|
|
leftDrawer,
|
|
highlightedRowId,
|
|
highlightedDateStr,
|
|
clearHighlights
|
|
} from '../../services/planner-state.js';
|
|
|
|
import OnlineUsers from '../online-users/online-users.js';
|
|
|
|
export default {
|
|
name: 'AppHeader',
|
|
components: { OnlineUsers },
|
|
setup() {
|
|
return {
|
|
leftDrawer,
|
|
highlightedRowId,
|
|
highlightedDateStr,
|
|
clearHighlights
|
|
};
|
|
},
|
|
template: `
|
|
<q-header class="bg-white text-grey-9 border-b" style="border-bottom: 1px solid #e2e8f0">
|
|
<q-toolbar class="q-py-sm">
|
|
<q-btn flat round dense icon="menu" color="grey-7" @click="leftDrawer = !leftDrawer"></q-btn>
|
|
<div class="row items-center q-ml-md">
|
|
<q-toolbar-title class="text-weight-bold text-subtitle1 text-grey-9 ellipsis" style="max-width: 200px;">Hotline Planner</q-toolbar-title>
|
|
</div>
|
|
<q-space></q-space>
|
|
|
|
<div class="row items-center q-gutter-sm">
|
|
<!-- Clear highlights button -->
|
|
<transition appear enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
|
|
<q-btn v-if="highlightedRowId || highlightedDateStr"
|
|
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 (reactive, WSS-driven) -->
|
|
<online-users></online-users>
|
|
|
|
<q-btn flat dense icon="notifications" color="grey-6" class="gt-xs q-ml-sm" label="Alerts"></q-btn>
|
|
</div>
|
|
</q-toolbar>
|
|
</q-header>
|
|
`
|
|
};
|