mirror of
https://github.com/em-squared/5e-drs.git
synced 2025-10-30 13:14:20 +00:00
search autocomplete
This commit is contained in:
Maxime Moraine
parent
d47ad5e88d
commit
eccc40a123
15 changed files with 1094 additions and 9924 deletions
|
|
@ -1,137 +1,127 @@
|
|||
<template>
|
||||
<div
|
||||
class="theme-container"
|
||||
:class="pageClasses"
|
||||
@touchstart="onTouchStart"
|
||||
@touchend="onTouchEnd"
|
||||
>
|
||||
<Navbar
|
||||
v-if="shouldShowNavbar"
|
||||
@toggle-sidebar="toggleSidebar"
|
||||
/>
|
||||
<v-app>
|
||||
<v-navigation-drawer v-model="drawer" :clipped="$vuetify.breakpoint.lgAndUp" app>
|
||||
<v-list dense>
|
||||
<template v-for="item in items">
|
||||
<v-row v-if="item.heading" :key="item.heading" align="center">
|
||||
<v-col cols="6">
|
||||
<v-subheader v-if="item.heading">
|
||||
{{ item.heading }}
|
||||
</v-subheader>
|
||||
</v-col>
|
||||
<v-col cols="6" class="text-center">
|
||||
<a href="#!" class="body-2 black--text">EDIT</a>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-list-group v-else-if="item.children" :key="item.text" v-model="item.model" :prepend-icon="item.model ? item.icon : item['icon-alt']" append-icon="">
|
||||
<template v-slot:activator>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>
|
||||
{{ item.text }}
|
||||
</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</template>
|
||||
<v-list-item v-for="(child, i) in item.children" :key="i" link>
|
||||
<v-list-item-action v-if="child.icon">
|
||||
<v-icon>{{ child.icon }}</v-icon>
|
||||
</v-list-item-action>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>
|
||||
{{ child.text }}
|
||||
</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-list-group>
|
||||
<v-list-item v-else :key="item.text" link>
|
||||
<v-list-item-action>
|
||||
<v-icon>{{ item.icon }}</v-icon>
|
||||
</v-list-item-action>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>
|
||||
{{ item.text }}
|
||||
</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</template>
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
|
||||
<div
|
||||
class="sidebar-mask"
|
||||
@click="toggleSidebar(false)"
|
||||
/>
|
||||
<Navbar />
|
||||
|
||||
<Sidebar
|
||||
:items="sidebarItems"
|
||||
@toggle-sidebar="toggleSidebar"
|
||||
>
|
||||
<template #top>
|
||||
<slot name="sidebar-top" />
|
||||
</template>
|
||||
<template #bottom>
|
||||
<slot name="sidebar-bottom" />
|
||||
</template>
|
||||
</Sidebar>
|
||||
|
||||
<DefaultGlobalLayout/>
|
||||
</div>
|
||||
<v-content>
|
||||
<v-container class="fill-height" fluid>
|
||||
<v-row align="center" justify="center">
|
||||
<DefaultGlobalLayout/>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-content>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import GlobalLayout from '@app/components/GlobalLayout.vue'
|
||||
import Navbar from '@theme/components/Navbar.vue'
|
||||
import Sidebar from '@theme/components/Sidebar.vue'
|
||||
import { resolveSidebarItems } from '../util'
|
||||
|
||||
export default {
|
||||
name: 'GlobalLayout',
|
||||
|
||||
components: {
|
||||
DefaultGlobalLayout: GlobalLayout,
|
||||
Sidebar,
|
||||
Navbar
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
isSidebarOpen: false
|
||||
items: [
|
||||
{ icon: 'mdi-contacts', text: 'Contacts' },
|
||||
{ icon: 'mdi-history', text: 'Frequently contacted' },
|
||||
{ icon: 'mdi-content-copy', text: 'Duplicates' },
|
||||
{
|
||||
icon: 'mdi-chevron-up',
|
||||
'icon-alt': 'mdi-chevron-down',
|
||||
text: 'Labels',
|
||||
model: true,
|
||||
children: [
|
||||
{ icon: 'mdi-plus', text: 'Create label' },
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: 'mdi-chevron-up',
|
||||
'icon-alt': 'mdi-chevron-down',
|
||||
text: 'More',
|
||||
model: false,
|
||||
children: [
|
||||
{ text: 'Import' },
|
||||
{ text: 'Export' },
|
||||
{ text: 'Print' },
|
||||
{ text: 'Undo changes' },
|
||||
{ text: 'Other contacts' },
|
||||
],
|
||||
},
|
||||
{ icon: 'mdi-settings', text: 'Settings' },
|
||||
{ icon: 'mdi-message', text: 'Send feedback' },
|
||||
{ icon: 'mdi-help-circle', text: 'Help' },
|
||||
{ icon: 'mdi-cellphone-link', text: 'App downloads' },
|
||||
{ icon: 'mdi-keyboard', text: 'Go to the old version' },
|
||||
],
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
shouldShowNavbar () {
|
||||
const { themeConfig } = this.$site
|
||||
const { frontmatter } = this.$page
|
||||
if (
|
||||
frontmatter.navbar === false
|
||||
|| themeConfig.navbar === false) {
|
||||
return false
|
||||
drawer: {
|
||||
get () {
|
||||
return this.$store.state.drawer
|
||||
},
|
||||
set (newValue) {
|
||||
this.$store.commit('setDrawer', newValue)
|
||||
}
|
||||
return (
|
||||
this.$title
|
||||
|| themeConfig.logo
|
||||
|| themeConfig.repo
|
||||
|| themeConfig.nav
|
||||
|| this.$themeLocaleConfig.nav
|
||||
)
|
||||
},
|
||||
|
||||
shouldShowSidebar () {
|
||||
const { frontmatter } = this.$page
|
||||
return (
|
||||
!frontmatter.home
|
||||
&& frontmatter.sidebar !== false
|
||||
&& this.sidebarItems.length
|
||||
)
|
||||
},
|
||||
|
||||
sidebarItems () {
|
||||
return resolveSidebarItems(
|
||||
this.$page,
|
||||
this.$page.regularPath,
|
||||
this.$site,
|
||||
this.$localePath
|
||||
)
|
||||
},
|
||||
|
||||
pageClasses () {
|
||||
const userPageClass = this.$page.frontmatter.pageClass
|
||||
return [
|
||||
{
|
||||
'no-navbar': !this.shouldShowNavbar,
|
||||
'sidebar-open': this.isSidebarOpen,
|
||||
'no-sidebar': !this.shouldShowSidebar
|
||||
},
|
||||
userPageClass
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
this.$router.afterEach(() => {
|
||||
this.isSidebarOpen = false
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
toggleSidebar (to) {
|
||||
this.isSidebarOpen = typeof to === 'boolean' ? to : !this.isSidebarOpen
|
||||
this.$emit('toggle-sidebar', this.isSidebarOpen)
|
||||
},
|
||||
|
||||
// side swipe
|
||||
onTouchStart (e) {
|
||||
this.touchStart = {
|
||||
x: e.changedTouches[0].clientX,
|
||||
y: e.changedTouches[0].clientY
|
||||
}
|
||||
},
|
||||
|
||||
onTouchEnd (e) {
|
||||
const dx = e.changedTouches[0].clientX - this.touchStart.x
|
||||
const dy = e.changedTouches[0].clientY - this.touchStart.y
|
||||
if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 40) {
|
||||
if (dx > 0 && this.touchStart.x <= 80) {
|
||||
this.toggleSidebar(true)
|
||||
} else {
|
||||
this.toggleSidebar(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue