luisgulo/photoprism
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

UX: Improve navigation menu

Browse source
This commit is contained in:
Michael Mayer 2022-05-21 22:00:13 +02:00
parent 441b51b228
commit 8b5fbec950
3 changed files with 85 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
frontend/src/component/navigation.vue
View file

@ -9,7 +9,7 @@
<v-toolbar-title class="nav-title">
<span :class="{'clickable': auth}" @click.stop.prevent="showNavigation()">{{ page.title }}</span>
</v-toolbar-title>
<v-menu v-if="auth && !config.disable.settings" attach="#p-navigation .nav-small" :nudge-bottom="9" :nudge-right="6"
<v-menu v-if="showNavMenu" attach="#p-navigation .nav-small" :nudge-bottom="16" :nudge-right="0"
close-on-content-click fixed disable-keys offset-y bottom left>
<template #activator="{ on }">
<v-btn
@ -23,28 +23,50 @@
</v-btn>
</template>
<v-list class="nav-menu opacity-98">
<v-list class="nav-menu navigation dark elevation-2">
<v-list-tile to="/browse" class="clickable nav-menu-browse">
<v-list-tile-content>
<v-list-tile-title>
<translate>Search</translate>
</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action :title="$gettext('Search')">
<v-icon>search</v-icon>
</v-list-tile-action>
</v-list-tile>
<v-list-tile v-if="auth && !config.readonly && $config.feature('upload')" class="clickable nav-menu-upload" @click.prevent="openUpload()">
<v-list-tile-content>
<v-list-tile-title>
<translate key="Upload">Upload</translate>
</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action class="clickable" @click.prevent="openUpload()">
<v-icon>cloud_upload</v-icon>
</v-list-tile-action>
</v-list-tile>
<v-list-tile v-if="!config.disable.settings" to="/settings" class="nav-menu-settings">
<v-list-tile-content>
<v-list-tile-title>
<v-list-tile-title><translate key="Upload">Upload</translate></v-list-tile-title>
<translate key="Settings">Settings</translate>
</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action :title="$gettext('Settings')">
<v-icon>settings</v-icon>
</v-list-tile-action>
</v-list-tile>
<v-list-tile v-if="auth && !isPublic" class="clickable nav-menu-logout" @click.prevent="logout">
<v-list-tile-content>
<v-list-tile-title>
<translate key="Logout">Logout</translate>
</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action class="clickable" @click.prevent="logout">
<v-icon>power_settings_new</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>
<v-list-tile-title><translate key="Logout">Logout</translate></v-list-tile-title>
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-menu>
@ -596,6 +618,7 @@ export default {
drawer: null,
isMini: localStorage.getItem('last_navigation_mode') !== 'false',
isPublic: this.$config.get("public"),
isDemo: this.$config.get("demo"),
isTest: this.$config.test,
isReadOnly: this.$config.get("readonly"),
session: this.$session,
@ -632,6 +655,9 @@ export default {
const user = this.$session.getUser();
return user.PrimaryEmail ? user.PrimaryEmail : this.$gettext("Account");
},
showNavMenu() {
return (this.isDemo || this.session.auth);
},
},
created() {
this.subscriptions.push(Event.subscribe('index', this.onIndex));
@ -660,13 +686,6 @@ export default {
this.goHome();
}
},
openSettings() {
if (this.auth && this.$config.feature('settings')) {
this.$router.push({ name: 'settings' });
} else {
this.goHome();
}
},
goHome() {
if (this.$route.name !== "home") {
this.$router.push({name: "home"});

24
frontend/src/css/app.css
View file

@ -146,30 +146,6 @@ footer {
top: -8px;
}
#photoprism .nav-menu {
padding: 0;
}
#photoprism .nav-logo .v-list__tile__action,
#photoprism .nav-menu .v-list__tile__action {
min-width: 35px;
}
#photoprism .nav-menu .v-list__tile {
font-size: 15px;
}
#photoprism .nav-menu .v-list__tile .v-icon {
font-size: 20px;
line-height: 1;
}
/*
#photoprism .sidenav-visible .nav-small .v-toolbar__content {
opacity: 0.48;
}
*/
main {
padding: 0;
margin: 0;

52
frontend/src/css/navigation.css
View file

@ -141,6 +141,54 @@ nav .v-list__tile__title.title {
margin-right: 0;
}
#photoprism .nav-logo .v-list__tile__action {
min-width: 35px;
}
#photoprism .nav-menu {
padding: 0;
background-color: #181818;
}
#p-navigation .nav-menu-trigger {
margin: 0 -5px 0 0;
}
margin: 0 -2px 0 0;
}
#photoprism .nav-menu .v-list__tile--active {
display: none;
}
#photoprism .nav-menu .v-list__tile {
padding: 0 24px 0 24px;
height: 54px;
}
#photoprism .nav-menu .v-list__tile .v-list__tile__title {
height: 26px;
line-height: 26px;
}
#photoprism .nav-menu .v-list__tile__action {
min-width: 44px;
}
#photoprism .nav-menu .v-list__tile__content {
min-width: 146px;
}
/*
#photoprism .nav-menu .v-list__tile {
font-size: 15px;
}
#photoprism .nav-menu .v-list__tile .v-icon {
font-size: 20px;
line-height: 1;
}
*/
/*
#photoprism .sidenav-visible .nav-small .v-toolbar__content {
opacity: 0.48;
}
*/