2018-07-27 15:31:39 +00:00
|
|
|
<template>
|
2019-05-19 16:19:41 +00:00
|
|
|
<div id="p-navigation">
|
2019-05-21 11:42:48 +00:00
|
|
|
<v-toolbar dark fixed color="grey darken-3" class="hidden-lg-and-up p-navigation-small" @click.stop="showNavigation()">
|
2019-05-20 16:51:59 +00:00
|
|
|
<v-toolbar-side-icon class="p-navigation-show"></v-toolbar-side-icon>
|
2018-09-26 11:56:13 +00:00
|
|
|
|
2019-05-28 00:48:02 +00:00
|
|
|
<v-toolbar-title class="p-navigation-title">{{ $router.currentRoute.meta.area }}</v-toolbar-title>
|
2018-09-26 11:56:13 +00:00
|
|
|
|
|
|
|
<v-spacer></v-spacer>
|
|
|
|
</v-toolbar>
|
2019-05-22 13:15:56 +00:00
|
|
|
<v-toolbar flat color="transparent" class="hidden-lg-and-up">
|
|
|
|
<!-- empty spacer -->
|
2019-05-21 11:42:48 +00:00
|
|
|
<v-spacer></v-spacer>
|
|
|
|
</v-toolbar>
|
2018-09-26 11:56:13 +00:00
|
|
|
<v-navigation-drawer
|
|
|
|
v-model="drawer"
|
|
|
|
:mini-variant="mini"
|
2019-05-20 08:53:29 +00:00
|
|
|
class="p-navigation-sidebar"
|
2018-09-26 11:56:13 +00:00
|
|
|
width="270"
|
2019-05-20 08:53:29 +00:00
|
|
|
fixed dark app
|
2018-09-26 11:56:13 +00:00
|
|
|
>
|
|
|
|
<v-toolbar flat>
|
|
|
|
<v-list>
|
2019-05-20 09:10:03 +00:00
|
|
|
<v-list-tile class="p-navigation-logo">
|
2018-09-26 11:56:13 +00:00
|
|
|
<v-list-tile-avatar>
|
2019-05-22 11:55:11 +00:00
|
|
|
<img src="/static/img/logo.png">
|
2018-09-26 11:56:13 +00:00
|
|
|
</v-list-tile-avatar>
|
|
|
|
<v-list-tile-content>
|
|
|
|
<v-list-tile-title class="title">
|
|
|
|
PhotoPrism
|
|
|
|
</v-list-tile-title>
|
|
|
|
</v-list-tile-content>
|
|
|
|
<v-list-tile-action class="hidden-md-and-down">
|
2019-05-20 09:10:03 +00:00
|
|
|
<v-btn icon @click.stop="mini = !mini" class="p-navigation-minimize">
|
2018-09-26 11:56:13 +00:00
|
|
|
<v-icon>chevron_left</v-icon>
|
|
|
|
</v-btn>
|
|
|
|
</v-list-tile-action>
|
|
|
|
</v-list-tile>
|
|
|
|
</v-list>
|
|
|
|
</v-toolbar>
|
|
|
|
|
|
|
|
<v-list class="pt-3">
|
2019-05-20 09:10:03 +00:00
|
|
|
<v-list-tile v-if="mini" @click.stop="mini = !mini" class="p-navigation-expand">
|
2018-09-26 11:56:13 +00:00
|
|
|
<v-list-tile-action>
|
|
|
|
<v-icon>chevron_right</v-icon>
|
|
|
|
</v-list-tile-action>
|
|
|
|
</v-list-tile>
|
|
|
|
|
2019-05-20 09:10:03 +00:00
|
|
|
<v-list-tile to="/photos" @click="" class="p-navigation-photos">
|
2018-09-26 11:56:13 +00:00
|
|
|
<v-list-tile-action>
|
|
|
|
<v-icon>photo</v-icon>
|
|
|
|
</v-list-tile-action>
|
|
|
|
|
2018-09-06 21:58:16 +00:00
|
|
|
<v-list-tile-content>
|
2018-09-26 11:56:13 +00:00
|
|
|
<v-list-tile-title>Photos</v-list-tile-title>
|
2018-09-06 21:58:16 +00:00
|
|
|
</v-list-tile-content>
|
2018-09-26 11:56:13 +00:00
|
|
|
</v-list-tile>
|
|
|
|
|
2019-05-28 23:51:53 +00:00
|
|
|
<v-list-tile to="/favorites" @click="">
|
|
|
|
<v-list-tile-action>
|
|
|
|
<v-icon>favorite</v-icon>
|
|
|
|
</v-list-tile-action>
|
|
|
|
|
|
|
|
<v-list-tile-content>
|
|
|
|
<v-list-tile-title>Favorites</v-list-tile-title>
|
|
|
|
</v-list-tile-content>
|
|
|
|
</v-list-tile>
|
|
|
|
|
2019-05-20 09:10:03 +00:00
|
|
|
<v-list-tile to="/places" @click="" class="p-navigation-places">
|
2018-09-06 21:58:16 +00:00
|
|
|
<v-list-tile-action>
|
2018-09-26 11:56:13 +00:00
|
|
|
<v-icon>place</v-icon>
|
2018-09-06 21:58:16 +00:00
|
|
|
</v-list-tile-action>
|
2018-09-26 11:56:13 +00:00
|
|
|
|
|
|
|
<v-list-tile-content>
|
|
|
|
<v-list-tile-title>Places</v-list-tile-title>
|
|
|
|
</v-list-tile-content>
|
2018-09-06 21:58:16 +00:00
|
|
|
</v-list-tile>
|
2018-07-27 15:31:39 +00:00
|
|
|
|
2019-05-28 01:49:44 +00:00
|
|
|
<v-list-tile to="/labels" @click="" class="p-navigation-labels">
|
2018-09-26 11:56:13 +00:00
|
|
|
<v-list-tile-action>
|
|
|
|
<v-icon>label</v-icon>
|
|
|
|
</v-list-tile-action>
|
|
|
|
|
2018-09-07 08:57:23 +00:00
|
|
|
<v-list-tile-content>
|
2019-05-28 01:49:44 +00:00
|
|
|
<v-list-tile-title>Labels</v-list-tile-title>
|
2018-09-07 08:57:23 +00:00
|
|
|
</v-list-tile-content>
|
|
|
|
</v-list-tile>
|
|
|
|
|
2019-06-09 02:37:02 +00:00
|
|
|
<v-list-tile to="/events" @click="" class="p-navigation-events">
|
2018-09-26 11:56:13 +00:00
|
|
|
<v-list-tile-action>
|
2019-06-03 13:34:23 +00:00
|
|
|
<v-icon>date_range</v-icon>
|
2018-09-26 11:56:13 +00:00
|
|
|
</v-list-tile-action>
|
2018-09-07 08:57:23 +00:00
|
|
|
|
2018-09-26 11:56:13 +00:00
|
|
|
<v-list-tile-content>
|
2019-06-09 02:37:02 +00:00
|
|
|
<v-list-tile-title>Events</v-list-tile-title>
|
|
|
|
</v-list-tile-content>
|
|
|
|
</v-list-tile>
|
|
|
|
|
|
|
|
<v-list-tile to="/people" @click="" class="p-navigation-people">
|
|
|
|
<v-list-tile-action>
|
|
|
|
<v-icon>people</v-icon>
|
|
|
|
</v-list-tile-action>
|
|
|
|
|
|
|
|
<v-list-tile-content>
|
|
|
|
<v-list-tile-title>People</v-list-tile-title>
|
2018-09-26 11:56:13 +00:00
|
|
|
</v-list-tile-content>
|
|
|
|
</v-list-tile>
|
2018-09-07 08:57:23 +00:00
|
|
|
|
2018-09-26 11:56:13 +00:00
|
|
|
<v-list-tile v-if="mini" to="/filters" @click="">
|
|
|
|
<v-list-tile-action>
|
|
|
|
<v-icon>search</v-icon>
|
|
|
|
</v-list-tile-action>
|
2018-09-07 08:57:23 +00:00
|
|
|
|
|
|
|
<v-list-tile-content>
|
2018-09-26 11:56:13 +00:00
|
|
|
<v-list-tile-title>Filters</v-list-tile-title>
|
2018-09-07 08:57:23 +00:00
|
|
|
</v-list-tile-content>
|
|
|
|
</v-list-tile>
|
|
|
|
|
2018-09-26 11:56:13 +00:00
|
|
|
<v-list-group v-if="!mini" prepend-icon="search" no-action>
|
|
|
|
<v-list-tile slot="activator" to="/filters" @click="">
|
|
|
|
<v-list-tile-content>
|
|
|
|
<v-list-tile-title>Filters</v-list-tile-title>
|
|
|
|
</v-list-tile-content>
|
|
|
|
</v-list-tile>
|
|
|
|
|
2019-06-09 02:37:02 +00:00
|
|
|
<v-list-tile :to="{ name: 'Photos', query: { q: 'lat:52.459714999999996 long:13.321887700000001 dist:20' }}" :exact="true" @click="">
|
2018-09-26 11:56:13 +00:00
|
|
|
<v-list-tile-content>
|
2019-06-09 02:37:02 +00:00
|
|
|
<v-list-tile-title>Berlin</v-list-tile-title>
|
2018-09-26 11:56:13 +00:00
|
|
|
</v-list-tile-content>
|
|
|
|
</v-list-tile>
|
|
|
|
|
2019-06-09 02:37:02 +00:00
|
|
|
<v-list-tile :to="{ name: 'Photos', query: { q: 'mono:true' }}" :exact="true" @click="">
|
|
|
|
<v-list-tile-content>
|
|
|
|
<v-list-tile-title>Monochrome</v-list-tile-title>
|
|
|
|
</v-list-tile-content>
|
|
|
|
</v-list-tile>
|
|
|
|
|
|
|
|
<v-list-tile :to="{ name: 'Photos', query: { q: 'label:cat' }}" :exact="true" @click="">
|
|
|
|
<v-list-tile-content>
|
|
|
|
<v-list-tile-title>Cats</v-list-tile-title>
|
|
|
|
</v-list-tile-content>
|
|
|
|
</v-list-tile>
|
|
|
|
|
|
|
|
<v-list-tile :to="{ name: 'Photos', query: { q: 'label:computer' }}" :exact="true" @click="">
|
|
|
|
<v-list-tile-content>
|
|
|
|
<v-list-tile-title>Computers</v-list-tile-title>
|
|
|
|
</v-list-tile-content>
|
|
|
|
</v-list-tile>
|
|
|
|
|
|
|
|
<v-list-tile :to="{ name: 'Photos', query: { q: 'color:magenta' }}" :exact="true" @click="">
|
2018-09-26 11:56:13 +00:00
|
|
|
<v-list-tile-content>
|
2019-06-09 02:37:02 +00:00
|
|
|
<v-list-tile-title>Magenta</v-list-tile-title>
|
2018-09-26 11:56:13 +00:00
|
|
|
</v-list-tile-content>
|
|
|
|
</v-list-tile>
|
|
|
|
|
2019-06-09 02:37:02 +00:00
|
|
|
<v-list-tile :to="{ name: 'Photos', query: { q: 'color:red' }}" :exact="true" @click="">
|
|
|
|
<v-list-tile-content>
|
|
|
|
<v-list-tile-title>Red</v-list-tile-title>
|
|
|
|
</v-list-tile-content>
|
|
|
|
</v-list-tile>
|
|
|
|
|
|
|
|
<v-list-tile :to="{ name: 'Photos', query: { q: 'chroma:4' }}" :exact="true" @click="">
|
|
|
|
<v-list-tile-content>
|
|
|
|
<v-list-tile-title>Vibrant</v-list-tile-title>
|
|
|
|
</v-list-tile-content>
|
|
|
|
</v-list-tile>
|
2018-09-26 11:56:13 +00:00
|
|
|
</v-list-group>
|
|
|
|
|
|
|
|
<v-list-tile v-if="mini" to="/albums" @click="">
|
|
|
|
<v-list-tile-action>
|
|
|
|
<v-icon>folder</v-icon>
|
|
|
|
</v-list-tile-action>
|
|
|
|
|
2018-09-07 08:57:23 +00:00
|
|
|
<v-list-tile-content>
|
2018-09-26 11:56:13 +00:00
|
|
|
<v-list-tile-title>Albums</v-list-tile-title>
|
2018-09-07 08:57:23 +00:00
|
|
|
</v-list-tile-content>
|
|
|
|
</v-list-tile>
|
|
|
|
|
2018-09-26 11:56:13 +00:00
|
|
|
<v-list-group v-if="!mini" prepend-icon="folder" no-action>
|
|
|
|
<v-list-tile slot="activator" to="/albums" @click="">
|
|
|
|
<v-list-tile-content>
|
|
|
|
<v-list-tile-title>Albums</v-list-tile-title>
|
|
|
|
</v-list-tile-content>
|
|
|
|
</v-list-tile>
|
|
|
|
|
|
|
|
<v-list-tile @click="">
|
|
|
|
<v-list-tile-content>
|
2019-06-09 02:37:02 +00:00
|
|
|
<v-list-tile-title>Not implemented yet</v-list-tile-title>
|
2018-09-26 11:56:13 +00:00
|
|
|
</v-list-tile-content>
|
|
|
|
</v-list-tile>
|
|
|
|
</v-list-group>
|
|
|
|
|
|
|
|
<v-list-tile to="/import" @click="">
|
|
|
|
<v-list-tile-action>
|
|
|
|
<v-icon>add_circle</v-icon>
|
|
|
|
</v-list-tile-action>
|
|
|
|
|
2018-09-07 08:57:23 +00:00
|
|
|
<v-list-tile-content>
|
2018-09-26 11:56:13 +00:00
|
|
|
<v-list-tile-title>Import</v-list-tile-title>
|
2018-09-07 08:57:23 +00:00
|
|
|
</v-list-tile-content>
|
|
|
|
</v-list-tile>
|
|
|
|
|
2018-09-26 11:56:13 +00:00
|
|
|
<v-list-tile to="/export" @click="">
|
|
|
|
<v-list-tile-action>
|
|
|
|
<v-icon>save</v-icon>
|
|
|
|
</v-list-tile-action>
|
|
|
|
|
2018-09-07 08:57:23 +00:00
|
|
|
<v-list-tile-content>
|
2018-09-26 11:56:13 +00:00
|
|
|
<v-list-tile-title>Export</v-list-tile-title>
|
2018-09-07 08:57:23 +00:00
|
|
|
</v-list-tile-content>
|
2018-09-26 11:56:13 +00:00
|
|
|
</v-list-tile>
|
2018-09-07 08:57:23 +00:00
|
|
|
|
2018-09-26 11:56:13 +00:00
|
|
|
<v-list-tile to="/settings" @click="">
|
2018-09-07 08:57:23 +00:00
|
|
|
<v-list-tile-action>
|
2018-09-26 11:56:13 +00:00
|
|
|
<v-icon>settings</v-icon>
|
2018-09-07 08:57:23 +00:00
|
|
|
</v-list-tile-action>
|
2018-09-26 11:56:13 +00:00
|
|
|
|
|
|
|
<v-list-tile-content>
|
|
|
|
<v-list-tile-title>Settings</v-list-tile-title>
|
|
|
|
</v-list-tile-content>
|
2018-09-07 08:57:23 +00:00
|
|
|
</v-list-tile>
|
2018-09-26 11:56:13 +00:00
|
|
|
</v-list>
|
|
|
|
</v-navigation-drawer>
|
|
|
|
</div>
|
2018-07-27 15:31:39 +00:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
export default {
|
2019-05-21 15:59:12 +00:00
|
|
|
name: "p-navigation",
|
2018-07-27 15:31:39 +00:00
|
|
|
data() {
|
2019-06-09 02:37:02 +00:00
|
|
|
let mini = (window.innerWidth < 1600);
|
|
|
|
|
2018-08-07 18:17:14 +00:00
|
|
|
return {
|
2018-09-06 21:58:16 +00:00
|
|
|
drawer: null,
|
2019-06-09 02:37:02 +00:00
|
|
|
mini: mini,
|
2018-08-07 18:17:14 +00:00
|
|
|
};
|
2018-07-27 15:31:39 +00:00
|
|
|
},
|
|
|
|
methods: {
|
2018-09-26 11:56:13 +00:00
|
|
|
showNavigation: function () {
|
|
|
|
this.drawer = true;
|
|
|
|
this.mini = false;
|
|
|
|
}
|
2018-07-27 15:31:39 +00:00
|
|
|
}
|
|
|
|
};
|
|
|
|
</script>
|