Verified Commit 602382b8 authored by Eliot Berriot's avatar Eliot Berriot
Browse files

Better contrast on new sidebar, added labels with notifications

parent 93cf9be0
More structured menus in sidebar
More structured menus in sidebar, added labels with notifications
......@@ -30,7 +30,7 @@
</div>
<div class="tabs">
<div class="ui bottom attached active tab" data-tab="library">
<div class="ui inverted vertical fluid menu">
<div class="ui inverted vertical large fluid menu">
<div class="item">
<div class="header">{{ $t('My account') }}</div>
<div class="menu">
......@@ -55,12 +55,29 @@
class="item" :to="{path: '/activity'}"><i class="bell icon"></i> {{ $t('Activity') }}</router-link>
</div>
</div>
<div class="item" v-if="$store.state.auth.availablePermissions['federation.manage']">
<div class="item" v-if="showAdmin">
<div class="header">{{ $t('Administration') }}</div>
<div class="menu">
<router-link
class="item"
:to="{path: '/manage/federation/libraries'}"><i class="sitemap icon"></i> {{ $t('Federation') }}</router-link>
v-if="$store.state.auth.availablePermissions['import.launch']"
:to="{name: 'library.requests', query: {status: 'pending' }}">
<i class="download icon"></i> {{ $t('Import requests') }}
<div
:class="['ui', {'teal': notifications.importRequests > 0}, 'label']"
:title="$t('Pending import requests')">
{{ notifications.importRequests }}</div>
</router-link>
<router-link
class="item"
v-if="$store.state.auth.availablePermissions['federation.manage']"
:to="{path: '/manage/federation/libraries'}">
<i class="sitemap icon"></i> {{ $t('Federation') }}
<div
:class="['ui', {'teal': notifications.federation > 0}, 'label']"
:title="$t('Pending follow requests')">
{{ notifications.federation }}</div>
</router-link>
</div>
</div>
</div>
......@@ -119,6 +136,7 @@
<script>
import {mapState, mapActions} from 'vuex'
import axios from 'axios'
import Player from '@/components/audio/Player'
import Logo from '@/components/Logo'
......@@ -140,22 +158,69 @@ export default {
return {
selectedTab: 'library',
backend: backend,
isCollapsed: true
isCollapsed: true,
fetchInterval: null,
notifications: {
federation: 0,
importRequests: 0
}
}
},
mounted () {
$(this.$el).find('.menu .item').tab()
},
created () {
this.fetchNotificationsCount()
this.fetchInterval = setInterval(
this.fetchNotificationsCount, 1000 * 60 * 15)
},
destroy () {
if (this.fetchInterval) {
clearInterval(this.fetchInterval)
}
},
computed: {
...mapState({
queue: state => state.queue,
url: state => state.route.path
})
}),
showAdmin () {
let adminPermissions = [
this.$store.state.auth.availablePermissions['federation.manage'],
this.$store.state.auth.availablePermissions['import.launch']
]
return adminPermissions.filter(e => {
return e
}).length > 0
}
},
methods: {
...mapActions({
cleanTrack: 'queue/cleanTrack'
}),
fetchNotificationsCount () {
this.fetchFederationNotificationsCount()
this.fetchFederationImportRequestsCount()
},
fetchFederationNotificationsCount () {
if (!this.$store.state.auth.availablePermissions['federation.manage']) {
return
}
let self = this
axios.get('federation/libraries/followers/', {params: {pending: true}}).then(response => {
self.notifications.federation = response.data.count
})
},
fetchFederationImportRequestsCount () {
if (!this.$store.state.auth.availablePermissions['import.launch']) {
return
}
let self = this
axios.get('requests/import-requests/', {params: {status: 'pending'}}).then(response => {
console.log('YOLo')
self.notifications.importRequests = response.data.count
})
},
reorder: function (event) {
this.$store.commit('queue/reorder', {
oldIndex: event.oldIndex, newIndex: event.newIndex})
......@@ -188,6 +253,13 @@ export default {
if (this.selectedTab !== 'queue') {
this.scrollToCurrent()
}
},
'$store.state.availablePermissions': {
handler () {
console.log('YOLO')
this.fetchNotificationsCount()
},
deep: true
}
}
}
......@@ -197,7 +269,7 @@ export default {
<style scoped lang="scss">
@import '../style/vendor/media';
$sidebar-color: #3D3E3F;
$sidebar-color: #3d3e3f;
.sidebar {
background: $sidebar-color;
......@@ -249,6 +321,13 @@ $sidebar-color: #3D3E3F;
.vertical.menu {
.item .item {
font-size: 1em;
> i.icon {
float: none;
margin: 0 0.5em 0 0;
}
&:not(.active) {
color: rgba(255, 255, 255, 0.75);
}
}
}
.tabs {
......
......@@ -12,7 +12,6 @@
:to="{name: 'library.requests', query: {status: 'pending' }}"
exact>
<i18next path="Requests"/>
<div class="ui teal label">{{ requestsCount }}</div>
</router-link>
<router-link v-if="$store.state.auth.availablePermissions['import.launch']" class="ui item" to="/library/import/launch" exact>
<i18next path="Import"/>
......@@ -27,28 +26,8 @@
</template>
<script>
import axios from 'axios'
export default {
name: 'library',
data () {
return {
requestsCount: 0
}
},
created () {
this.fetchRequestsCount()
},
methods: {
fetchRequestsCount () {
if (!this.$store.state.authenticated) {
return
}
let self = this
axios.get('requests/import-requests/', {params: {status: 'pending'}}).then(response => {
self.requestsCount = response.data.count
})
}
}
name: 'library'
}
</script>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment