Skip to content

Commit

Permalink
UX: Improve navigation menu
Browse files Browse the repository at this point in the history
  • Loading branch information
lastzero committed May 21, 2022
1 parent 441b51b commit 8b5fbec
Show file tree
Hide file tree
Showing 3 changed files with 84 additions and 41 deletions.
49 changes: 34 additions & 15 deletions frontend/src/component/navigation.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
<v-list-tile v-if="auth && !isPublic" class="clickable nav-menu-logout" @click.prevent="logout">
<v-list-tile-action class="clickable" @click.prevent="logout">
<v-icon>power_settings_new</v-icon>
<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>
<v-list-tile-title><translate key="Logout">Logout</translate></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>
</v-list>
</v-menu>
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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));
Expand Down Expand Up @@ -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"});
Expand Down
24 changes: 0 additions & 24 deletions frontend/src/css/app.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
52 changes: 50 additions & 2 deletions frontend/src/css/navigation.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
*/

0 comments on commit 8b5fbec

Please sign in to comment.