chiu
/
filebrowser
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 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); background: var(--surfaceSecondary);
} }
.dashboard #nav ul li {
color: var(--textSecondary);
}
.dashboard #nav ul li:hover {
background: var(--surfaceSecondary);
}
.card h3, .card h3,
.dashboard #nav, .dashboard #nav,
.dashboard p label { .dashboard p label {
@ -138,7 +145,7 @@ nav > div {
background: #147A41; background: #147A41;
} }
.dashboard #nav li, .dashboard #nav .wrapper,
.collapsible { .collapsible {
border-color: var(--divider); border-color: var(--divider);
} }

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

@ -49,25 +49,56 @@ p code {
} }
.dashboard #nav { .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; list-style: none;
display: flex; display: flex;
color: rgb(84, 110, 122); color: rgb(84, 110, 122);
font-weight: 500; font-weight: 500;
margin: 0 0 1em; padding: 0;
margin: 0 0 -2px 0;
font-size: .8em; font-size: .8em;
text-align: center; text-align: center;
justify-content: space-between; justify-content: left;
padding: 0;
} }
.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%; width: 100%;
padding: 0 0 1em; height: 100%;
border-bottom: 2px solid rgba(0, 0, 0, 0.05); position: absolute;
} top: 0;
left: 0;
.dashboard #nav li.active { content: "";
border-color: var(--blue) background: var(--blue);
opacity: 0.08;
} }
.dashboard #nav i { .dashboard #nav i {

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

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