Commit 6e3a8c46 authored by Anton Koch's avatar Anton Koch

Merge branch '227-14h45-broken-nav-bar' into 'master'

new navigation for mobile view - shared (#227)

See merge request !10
parents 2c2de769 6525feea
Pipeline #11446 passed with stage
in 7 minutes and 43 seconds
<template lang="pug">
q-list.q-py-none(no-border)
q-item.q-pa-none(v-for="(a, i) in actions", multiline, :class="{'q-py-sm': a.rel !== 'parent'}",
:separator="a.rel === 'root'")
// icon
q-item-side(v-if="a.icon")
q-icon.q-ml-lg.q-mt-sm(:name="a.icon", size="1.2rem",
:class="[currentApp === getType(a.name) ? 'text-primary' : 'text-white', getType(a.name) === 'piecemaker' ? 'rotate-180' : '']")
q-item-main.q-ml-none(:class="{'border-right-highlight': (currentApp === getType(a.name) && a.rel === 'root')}")
// button
q-item-tile.q-pr-md
// action
template(v-if="a.rel !== 'root' && currentApp === getType(a.name)")
q-btn.text-left.full-width(@click="a.click",
:class="{ 'text-primary': $route.name === a.name }",
flat, align="left", no-caps)
| {{ a.label }}
// root
template(v-if="a.rel === 'root' && currentApp !== getType(a.name)")
q-btn.text-left.full-width(@click="a.click",
:class="{ 'text-primary': $route.name === a.name }",
flat, align="left")
| {{ a.label }}
// subactions
q-item-tile(v-if="a.subactions && currentApp === getType(a.name)",
:class="[a.rel !== 'root' ? 'q-pl-md' : '']")
template(v-if="a.rel === 'root'")
button-list(v-bind:buttons="a.subactions", :currentApp="currentApp", :currentId="currentId")
template(v-if="(a.rel === 'parent' && currId.timeline) || (a.rel === 'parent' && currId.grid)")
button-list(v-bind:buttons="a.subactions", :currentApp="currentApp", :currentId="currentId")
template(v-if="a.rel === 'child' && currId.video")
button-list(v-bind:buttons="a.subactions", :currentApp="currentApp", :currentId="currentId")
</template>
<script>
import ButtonList from './ButtonList'
export default {
name: 'button-list',
props: ['buttons', 'currentApp', 'currentId'],
components: {
ButtonList
},
data () {
return {
actions: this.buttons,
currId: this.currentId[0] ? this.currentId[0] : undefined
}
},
watch: {
currentId (obj) {
this.currId = obj[0]
}
},
methods: {
getType (val) {
let valSplit = val.split('.')
return valSplit[0]
}
}
}
</script>
<style scoped lang="stylus">
@import '~variables'
.border-right-highlight
// border-right 1px solid $primary
</style>
This diff is collapsed.
Markdown is supported
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