OrgGo
/
filebrowser
mirror of https://github.com/filebrowser/filebrowser.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: improved settings navbar

This commit is contained in:
Ramires Viana 2021-02-19 16:01:43 +00:00
parent db5aad8eb6
commit 5b28aa0848
3 changed files with 59 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/public/themes/dark.css
View File

@ -114,6 +114,13 @@ nav > div {
background: var(--surfaceSecondary);
}
.dashboard #nav ul li {
color: var(--textSecondary);
}
.dashboard #nav ul li:hover {
background: var(--surfaceSecondary);
}
.card h3,
.dashboard #nav,
.dashboard p label {
@ -138,7 +145,7 @@ nav > div {
background: #147A41;
}
.dashboard #nav li,
.dashboard #nav .wrapper,
.collapsible {
border-color: var(--divider);
}

51
frontend/src/css/dashboard.css
View File

@ -49,25 +49,56 @@ p code {
}
.dashboard #nav {
display: flex;
padding-bottom: 1em;
overflow: auto;
}
.dashboard #nav .wrapper {
display: flex;
flex-grow: 1;
border-bottom: 2px solid rgba(0, 0, 0, 0.05);
}
.dashboard #nav ul {
list-style: none;
display: flex;
color: rgb(84, 110, 122);
font-weight: 500;
margin: 0 0 1em;
padding: 0;
margin: 0 0 -2px 0;
font-size: .8em;
text-align: center;
justify-content: space-between;
padding: 0;
justify-content: left;
}
.dashboard #nav li {
.dashboard #nav ul li {
position: relative;
padding: 1.5em 2em;
white-space: nowrap;
border-bottom: 2px solid transparent;
transition: .1s ease-in-out all;
}
.dashboard #nav ul li:hover {
background: var(--moon-grey);
}
.dashboard #nav ul li.active {
border-color: var(--blue);
color: var(--blue);
}
.dashboard #nav ul li.active::before {
width: 100%;
padding: 0 0 1em;
border-bottom: 2px solid rgba(0, 0, 0, 0.05);
}
.dashboard #nav li.active {
border-color: var(--blue)
height: 100%;
position: absolute;
top: 0;
left: 0;
content: "";
background: var(--blue);
opacity: 0.08;
}
.dashboard #nav i {

16
frontend/src/views/Settings.vue
View File

@ -1,11 +1,15 @@
<template>
<div class="dashboard">
<ul id="nav">
<li :class="{ active: $route.path === '/settings/profile' }"><router-link to="/settings/profile">{{ $t('settings.profileSettings') }}</router-link></li>
<li :class="{ active: $route.path === '/settings/shares' }"><router-link to="/settings/shares">{{ $t('settings.shareManagement') }}</router-link></li>
<li v-if="user.perm.admin" :class="{ active: $route.path === '/settings/global' }"><router-link to="/settings/global">{{ $t('settings.globalSettings') }}</router-link></li>
<li v-if="user.perm.admin" :class="{ active: $route.path === '/settings/users' }"><router-link to="/settings/users">{{ $t('settings.userManagement') }}</router-link></li>
</ul>
<div id="nav">
<div class="wrapper">
<ul>
<router-link to="/settings/profile"><li :class="{ active: $route.path === '/settings/profile' }">{{ $t('settings.profileSettings') }}</li></router-link>
<router-link to="/settings/shares"><li :class="{ active: $route.path === '/settings/shares' }">{{ $t('settings.shareManagement') }}</li></router-link>
<router-link to="/settings/global"><li :class="{ active: $route.path === '/settings/global' }" v-if="user.perm.admin">{{ $t('settings.globalSettings') }}</li></router-link>
<router-link to="/settings/users"><li :class="{ active: $route.path === '/settings/users' || $route.name === 'User' }" v-if="user.perm.admin">{{ $t('settings.userManagement') }}</li></router-link>
</ul>
</div>
</div>
<router-view></router-view>
</div>