mirror of https://github.com/requarks/wiki
NGPixel
4 weeks ago
parent
99ccdc1326
commit
57cda5162c
@ -0,0 +1,184 @@
|
||||
<template>
|
||||
<w-btn
|
||||
class="header-actions-btn ml-4"
|
||||
flat
|
||||
round
|
||||
dense
|
||||
icon="la:ellipsis-v"
|
||||
aria-label="More Actions">
|
||||
<w-menu ref="menu" class="translucent-menu" anchor="bottom right" self="top right">
|
||||
<!--
|
||||
Every row's icon takes its colour as a literal `text-*` class rather than through `WIcon`'s
|
||||
`color` prop, which builds `text-${color}` at runtime: Tailwind generates a utility only for a
|
||||
class name it can find as literal text in the source, so a constructed one resolves to nothing
|
||||
and the icon falls back to the menu's own ink. `color="positive"` happens to work because that
|
||||
string is written literally elsewhere in the app; `color="amber"` and `color="blue-4"` are not,
|
||||
and rendered black. The colours themselves match the buttons these rows stand in for.
|
||||
-->
|
||||
<w-list padding style="min-width: 250px">
|
||||
<!--
|
||||
Who is signed in. The account button this stands in for led with the same two lines, and
|
||||
nothing else in the phone header says whose session this is.
|
||||
-->
|
||||
<template v-if="userStore.authenticated">
|
||||
<w-item>
|
||||
<w-item-section avatar>
|
||||
<w-avatar v-if="userStore.hasAvatar" size="32px">
|
||||
<img :src="`/_user/current/avatar`" />
|
||||
</w-avatar>
|
||||
<w-icon v-else name="la:user-circle" />
|
||||
</w-item-section>
|
||||
<w-item-section>
|
||||
<w-item-label>{{ userStore.name }}</w-item-label>
|
||||
<w-item-label caption>{{ userStore.email }}</w-item-label>
|
||||
</w-item-section>
|
||||
</w-item>
|
||||
<w-separator class="my-2" />
|
||||
</template>
|
||||
<!--
|
||||
A submenu, because New Page is a choice of editor rather than a single action -- the same
|
||||
choice, from the same component, as the header button on a wide screen. It anchors to this row
|
||||
because `WMenu` takes the nearest `.w-item` as its trigger.
|
||||
|
||||
`hide-asset-btn` because this menu has a File Manager row of its own directly below, and
|
||||
`@new-page` closes this menu once the submenu has acted: the editor opens behind it otherwise,
|
||||
with the menu still floating over it.
|
||||
-->
|
||||
<w-item v-if="userStore.can(`write:pages`)" clickable>
|
||||
<w-item-section avatar>
|
||||
<w-icon name="la:plus-circle" class="text-blue-4" />
|
||||
</w-item-section>
|
||||
<w-item-section>Create New Page</w-item-section>
|
||||
<w-item-section side>
|
||||
<w-icon name="la:angle-right" />
|
||||
</w-item-section>
|
||||
<page-new-menu hide-asset-btn @new-page="close" />
|
||||
</w-item>
|
||||
<!--
|
||||
-> Whoever may put a file somewhere: `write:assets` outright, or `write:pages` for an author
|
||||
whose rules cover the pages but not the assets beside them, since the editor sends them
|
||||
here to insert an image. Every folder and every file is checked again by the endpoints
|
||||
behind the manager, which answer per path, so this decides only whether the door is shown.
|
||||
-->
|
||||
<w-item v-if="canUseFileManager" clickable @click="openFileManager">
|
||||
<w-item-section avatar>
|
||||
<w-icon name="la:folder-open" class="text-positive" />
|
||||
</w-item-section>
|
||||
<w-item-section>File Manager</w-item-section>
|
||||
</w-item>
|
||||
<w-item v-if="userStore.authenticated" clickable to="/_inbox" @click="close">
|
||||
<w-item-section avatar>
|
||||
<w-icon name="mdi:inbox-full" class="text-amber" />
|
||||
</w-item-section>
|
||||
<w-item-section>{{ t('inbox.title') }}</w-item-section>
|
||||
</w-item>
|
||||
<w-item v-if="userStore.can(`access:admin`)" clickable to="/_admin" @click="close">
|
||||
<w-item-section avatar>
|
||||
<w-icon name="la:tools" class="text-pink" />
|
||||
</w-item-section>
|
||||
<w-item-section>{{ t('common.header.admin') }}</w-item-section>
|
||||
</w-item>
|
||||
<w-separator class="my-2" />
|
||||
<!--
|
||||
The account rows, flattened into this list rather than opened as a second submenu: they are two
|
||||
plain actions, and the panel they live in on a wide screen is 300px of card -- wider than this
|
||||
menu is on the screens it exists for.
|
||||
-->
|
||||
<template v-if="userStore.authenticated">
|
||||
<w-item clickable to="/_profile" @click="close">
|
||||
<w-item-section avatar>
|
||||
<w-icon name="la:user-alt" class="text-primary" />
|
||||
</w-item-section>
|
||||
<w-item-section>{{ t('common.header.profile') }}</w-item-section>
|
||||
</w-item>
|
||||
<w-item clickable @click="logout">
|
||||
<w-item-section avatar>
|
||||
<w-icon name="la:sign-out-alt" class="text-red" />
|
||||
</w-item-section>
|
||||
<w-item-section>{{ t('common.header.logout') }}</w-item-section>
|
||||
</w-item>
|
||||
</template>
|
||||
<!-- -> The header's Login button is one of the ones this menu stands in for, so a guest has to
|
||||
find it in here -->
|
||||
<w-item v-else clickable to="/login" @click="close">
|
||||
<w-item-section avatar>
|
||||
<w-icon name="la:sign-in-alt" class="text-primary" />
|
||||
</w-item-section>
|
||||
<w-item-section>{{ t('common.actions.login') }}</w-item-section>
|
||||
</w-item>
|
||||
</w-list>
|
||||
</w-menu>
|
||||
</w-btn>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import { useSiteStore } from '@/stores/site'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
|
||||
import PageNewMenu from '@/components/PageNewMenu.vue'
|
||||
|
||||
/**
|
||||
* The phone header's overflow menu: one button standing in for every action the bar shows as its own
|
||||
* icon on a wide screen -- New Page, File Manager, Inbox, Administration, and the account.
|
||||
*
|
||||
* Rendered only below the `sm` breakpoint; see `HeaderNav`. The rows repeat the permission tests the
|
||||
* buttons they replace make, rather than being handed a list, so the two cannot drift apart.
|
||||
*/
|
||||
|
||||
// STORES
|
||||
|
||||
const siteStore = useSiteStore()
|
||||
const userStore = useUserStore()
|
||||
|
||||
// I18N
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
// REFS
|
||||
|
||||
const menu = ref(null)
|
||||
|
||||
// COMPUTED
|
||||
|
||||
const canUseFileManager = computed(
|
||||
() => userStore.can('write:assets') || userStore.can('write:pages')
|
||||
)
|
||||
|
||||
// METHODS
|
||||
|
||||
/**
|
||||
* Dismiss the menu.
|
||||
*
|
||||
* Every row calls it, rather than the menu carrying `auto-close`: that closes on ANY click inside,
|
||||
* including the New Page row -- which would take the submenu's trigger out of the document in the same
|
||||
* tick it was pressed.
|
||||
*/
|
||||
function close() {
|
||||
menu.value?.hide()
|
||||
}
|
||||
|
||||
/*
|
||||
Closed before the manager opens: it is a full-screen overlay, and a menu teleported to the body
|
||||
outranks it -- so the menu would be left floating over the panel it had just opened.
|
||||
*/
|
||||
function openFileManager() {
|
||||
close()
|
||||
siteStore.openFileManager()
|
||||
}
|
||||
|
||||
function logout() {
|
||||
close()
|
||||
userStore.logout()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
// -> Where the button gets its colour, so it carries no `color` prop: `WBtn` emits an inline `color`,
|
||||
// which would outrank this rule. Matches `.account-avbtn`, the button it stands in for.
|
||||
.header-actions-btn {
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue