Commit 3015bd68 authored by Eliot Berriot's avatar Eliot Berriot
Browse files

Merge branch 'sidebar-contrast' into 'develop'

Better contrast on new sidebar, added labels with notifications

See merge request funkwhale/funkwhale!179
parents 93cf9be0 602382b8
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