Skip to content

GitLab

Q
Quasar Components Shared
Commit 6525feea authored by Christian Hansen's avatar Christian Hansen Committed by Anton Koch
Browse files
Options

piecemaker: buttons are color highlighted when clicked (in drawer only,... 

piecemaker: buttons are color highlighted when clicked (in drawer only, doesn't work when router change through table buttons)
parent 2c2de769
Hide whitespace changes
Inline Side-by-side
Showing with 505 additions and 32 deletions
navigation/ButtonList.vue 0 → 100644
View file @ 6525feea
<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>
navigation/UserNav.vue
View file @ 6525feea
<template lang="pug">
q-toolbar(color="dark")
// q-btn.hide-on-drawer-visible(flat, icon="menu", @click='$refs.drawer.open()')
q-toolbar-title(:padding='2')
//q-btn(:class="{ 'text-primary': currentApp === null }", big, flat,
@click="currentApp = null; $router.push({ name: 'site.welcome' })") Motionbank
q-btn(
:class="{ 'text-primary': currentApp === 'piecemaker' }",
@click="executeApp('piecemaker', 'piecemaker.timelines.list')",
big, flat
) Piecemaker
q-btn(
:color="currentApp === 'mosys' ? 'primary' : ''",
@click="executeApp('mosys', 'mosys.grids.list')",
big, flat
) Mosys
q-btn(v-if="userHasDocuments",
:color="currentApp === 'documents' ? 'primary' : ''",
@click="executeApp('documents', 'documents.list')",
big, flat
) Documents
q-btn(color="primary", flat, icon="settings",
v-if="user && !isElectron", @click="$router.push({ name: 'users.manage' })") {{ user.profile ? user.profile.name : '' }}
q-btn(color="primary", flat, icon="eject",
v-if="user && !isElectron", @click="logout") {{ $t('navigation.logout') }}
q-btn(color="primary", flat, icon="arrow_forward",
v-if="!user && !isElectron", @click="login") {{ $t('navigation.login') }}
q-toolbar(color="dark", :class="{'q-pa-none': isMobile}", style="border-bottom: 1px solid #333;")
// -------------------------------------------------------------------------------------------- drawer left (mobile)
template(v-if="isMobile")
// back button
q-btn(@click="goBack()", icon="keyboard_backspace", flat, no-ripple,
:class="{'back-button': !targetBackButton}")
<!--q-chip(floating, color="transparent", text-color="primary") 2-->
// menu button
q-btn(@click="handlerMenuDrawer", icon="menu", :label="currentApp", flat)
// drawer
q-layout-drawer.bg-dark(v-model="menuDrawer", content-class="bg-dark", no-hide-on-route-change)
// buttons component: apps
button-list(v-bind:buttons="actions", :currentApp="currentApp", :currentId="[currentId]")
q-item-separator.q-my-none
// buttons component: user
button-list(v-bind:buttons="activeUserButtons", :currentApp="currentApp", :currentId="[currentId]")
// ---------------------------------------------------------------------------------------------- standard (desktop)
template(v-if="!isMobile")
q-toolbar-title(:padding='2')
//q-btn(:class="{ 'text-primary': currentApp === null }", big, flat,
@click="currentApp = null; $router.push({ name: 'site.welcome' })") Motionbank
// app buttons
q-btn(v-for="a in actions", @click="a.click", :label="a.label",
:class="{ 'text-primary': currentApp === a.type }", big, flat)
// user related buttons
q-btn(v-for="a in activeUserButtons", @click="a.click", :icon="a.icon", :label="a.label", flat)
</template>
<script>
import { mapGetters } from 'vuex'
import { userHasFeature } from 'mbjs-quasar/src/lib'
import { parseURI } from 'mbjs-data-models/src/lib'
import ButtonList from './ButtonList'
export default {
components: {
ButtonList
},
data () {
const _this = this
return {
currentApp: null,
env: process.env
env: process.env,
actions: [
{
rel: 'root',
type: 'piecemaker',
name: 'piecemaker.timelines.list',
label: _this.$t('navigation.piecemaker.label'),
// icon: 'reorder',
icon: 'vertical_split',
click: () => {
this.currentId.timeline = undefined
this.currentId.video = undefined
this.currentId.grid = undefined
_this.executeApp('piecemaker', 'piecemaker.timelines.list')
},
subactions: [
{
rel: 'parent',
type: 'piecemaker',
name: 'piecemaker.timelines.list',
label: _this.$t('navigation.piecemaker.piecemaker_timelines_list'),
click: () => {
this.currentId.video = undefined
this.currentId.grid = undefined
_this.executeApp('piecemaker', 'piecemaker.timelines.list')
},
subactions: [
{
rel: 'child',
name: 'piecemaker.timelines.annotate',
label: _this.$t('navigation.piecemaker.piecemaker_timelines_annotate'),
click: () => {
this.currentId.video = undefined
this.currentId.grid = undefined
this.$router.push({ name: 'piecemaker.timelines.annotate', params: { uuid: this.currentId.timeline } })
}
},
{
rel: 'child',
name: 'piecemaker.videos.list',
label: _this.$t('navigation.piecemaker.piecemaker_videos_list'),
click: () => {
this.currentId.video = undefined
this.currentId.grid = undefined
this.$router.push({ name: 'piecemaker.videos.list', params: { timelineUuid: this.currentId.timeline } })
},
subactions: [
{
rel: 'grandchild',
name: 'piecemaker.videos.annotate',
label: _this.$t('navigation.piecemaker.piecemaker_videos_annotate'),
click: () => {
this.$router.push({ name: 'piecemaker.videos.annotate', params: { uuid: this.currentId.video } })
}
},
{
rel: 'grandchild',
name: 'piecemaker.videos.edit',
label: _this.$t('navigation.piecemaker.piecemaker_videos_edit'),
click: () => {
this.$router.push({ name: 'piecemaker.videos.edit', params: { uuid: this.currentId.video } })
}
},
{
rel: 'grandchild',
name: 'piecemaker.videos.sync',
label: _this.$t('navigation.piecemaker.piecemaker_videos_sync'),
click: () => {
this.$router.push({ name: 'piecemaker.videos.sync', params: { uuid: this.currentId.video } })
}
}
]
},
{
rel: 'child',
name: 'piecemaker.timelines.search',
label: _this.$t('navigation.piecemaker.piecemaker_timelines_search'),
click: () => {
this.currentId.video = undefined
this.currentId.grid = undefined
this.$router.push({ name: 'piecemaker.timelines.search', params: { uuid: this.currentId.timeline } })
}
},
{
rel: 'child',
name: 'piecemaker.timelines.edit',
label: _this.$t('navigation.piecemaker.piecemaker_timelines_edit'),
click: () => {
this.currentId.video = undefined
this.$router.push({ name: 'piecemaker.timelines.edit', params: { uuid: this.currentId.timeline } })
}
}
]
},
{
rel: 'parent',
type: 'piecemaker',
name: 'piecemaker.timelines.create',
label: _this.$t('navigation.piecemaker.piecemaker_timelines_create'),
click: () => {
this.currentId.timeline = undefined
this.currentId.video = undefined
this.currentId.grid = undefined
_this.executeApp('piecemaker', 'piecemaker.timelines.create')
}
}
]
},
{
rel: 'root',
type: 'mosys',
name: 'mosys.grids.list',
label: _this.$t('navigation.mosys.label'),
icon: 'grid_on',
click: () => {
this.currentId.video = undefined
this.currentId.grid = undefined
_this.executeApp('mosys', 'mosys.grids.list')
},
subactions: [
{
rel: 'parent',
type: 'mosys',
name: 'mosys.grids.list',
label: _this.$t('navigation.mosys.mosys_grids_list'),
click: () => {
this.currentId.video = undefined
this.currentId.grid = undefined
_this.executeApp('mosys', 'mosys.grids.list')
},
subactions: [
{
rel: 'child',
name: 'mosys.grids.annotate',
label: _this.$t('navigation.mosys.mosys_grids_annotate'),
click: () => {
this.currentId.video = undefined
this.currentId.grid = this.$route.params.uuid
this.$router.push({ name: 'mosys.grids.annotate', params: { uuid: this.currentId.grid } })
}
},
{
rel: 'child',
name: 'mosys.grids.show',
label: _this.$t('navigation.mosys.mosys_grids_show'),
click: () => {
this.currentId.video = undefined
this.currentId.grid = this.$route.params.uuid
this.$router.push({ name: 'mosys.grids.show', params: { uuid: this.currentId.grid } })
}
},
{
rel: 'child',
name: 'mosys.grids.edit',
label: _this.$t('navigation.mosys.mosys_grids_edit'),
click: () => {
this.currentId.video = undefined
this.currentId.grid = this.$route.params.uuid
this.$router.push({ name: 'mosys.grids.edit', params: { uuid: this.currentId.grid } })
}
}
]
},
{
rel: 'parent',
type: 'mosys',
name: 'mosys.grids.create',
label: _this.$t('navigation.mosys.mosys_grids_create'),
click: () => {
this.currentId.video = undefined
this.currentId.grid = undefined
_this.executeApp('mosys', 'mosys.grids.create')
}
}
]
},
{
rel: 'root',
type: 'mosys',
name: 'documents.list',
label: _this.$t('navigation.documents.label'),
icon: 'attach_file',
click: () => {
this.currentId.video = undefined
this.currentId.grid = undefined
_this.executeApp('mosys', 'documents.list')
},
subactions: [
{
rel: 'parent',
type: 'documents',
name: 'documents.list',
label: _this.$t('navigation.documents.documents_list'),
click: () => {
this.currentId.video = undefined
this.currentId.grid = undefined
_this.executeApp('documents', 'documents.list')
},
subactions: [
{
name: 'documents.edit',
label: _this.$t('navigation.documents.documents_edit'),
click: () => {
this.currentId.video = undefined
this.$router.push({ name: 'documents.edit' })
}
}
]
},
{
rel: 'parent',
type: 'documents',
name: 'documents.create',
label: 'Add Document',
click: () => {
this.currentId.video = undefined
this.currentId.grid = undefined
_this.executeApp('documents', 'documents.create')
}
}
]
}
],
activeUserButtons: [],
targetBackButton: undefined,
menuDrawer: false,
currentId: {
timeline: undefined,
video: undefined,
grid: undefined,
documents: undefined
},
grid: undefined
}
},
computed: {
...mapGetters({
user: 'auth/getUserState'
user: 'auth/getUserState',
isMobile: 'globalSettings/getIsMobile'
}),
userHasDocuments () {
return userHasFeature(this.user, 'documents')
......@@ -52,8 +302,147 @@
return this.$q.platform.is.electron
}
},
created () {
this.$root.$on('setBackButton', this.setBackButton)
},
async mounted () {
const _this = this
// generate user related buttons depending on auth status
const userButtons = [
{
rel: 'root',
type: 'users',
name: 'users.manage',
icon: 'settings',
// label: this.user.profile ? this.user.profile.name : ''},
label: _this.$t('navigation.users.label'),
click: () => _this.$router.push({ name: 'users.manage' }),
query: [_this.user, !_this.isElectron],
subactions: [
{
rel: 'parent',
type: 'users',
name: 'users.manage',
// label: this.user.profile ? this.user.profile.name : ''},
label: _this.$t('navigation.users.users_manage'),
click: () => _this.$router.push({ name: 'users.manage' })
// query: [_this.user, !_this.isElectron]
}
]
},
{
rel: 'root',
type: 'log',
name: 'log.logout',
icon: 'eject',
label: _this.$t('navigation.logout'),
click: () => _this.logout(),
query: [_this.user, !_this.isElectron]
},
{
rel: 'root',
type: 'log',
name: 'log.login',
icon: 'arrow_forward',
label: _this.$t('navigation.login'),
click: () => _this.login(),
query: [!_this.user, !_this.isElectron]
}
]
let filteredUserButtons = userButtons.map(b => b.query.every(function (f) { if (f) return true }))
filteredUserButtons.map((b, i) => {
if (b) this.activeUserButtons.push(userButtons[i])
})
this.checkRoute(this.$route)
},
watch: {
'$route' (route) {
this.checkRoute(route)
}
},
methods: {
checkRoute (route) {
// detect current app
let routeSplit = route.name.split('.')
if (routeSplit[0] !== 'site') this.currentApp = routeSplit[0]
else this.currentApp = 'Motionbank'
// FIXME: find a better way to handle the navigation drawer highlighting
// timeline
if (route.name === 'piecemaker.timelines.annotate' ||
route.name === 'piecemaker.timelines.edit' ||
route.name === 'piecemaker.timelines.search' ||
route.name === 'piecemaker.videos.list'
) {
if (route.params.timelineUuid) this.currentId.timeline = route.params.timelineUuid
if (route.params.uuid) this.currentId.timeline = route.params.uuid
this.currentId.video = undefined
this.getTimeline()
}
// video
if (route.name === 'piecemaker.videos.annotate' ||
route.name === 'piecemaker.videos.edit' ||
route.name === 'piecemaker.videos.sync'
) {
this.currentId.video = route.params.uuid
this.getVideo()
}
else {
this.currentId.video = undefined
}
// grid
if (route.name === 'mosys.grids.annotate' ||
route.name === 'mosys.grids.show' ||
route.name === 'mosys.grids.edit'
) {
this.currentId.grid = route.params.uuid
this.getGrid()
}
else {
this.currentId.grid = undefined
}
},
async getGrid () {
this.grid = await this.$store.dispatch('maps/get', this.$route.params.uuid)
},
async getTimeline () {
if (this.$route.params.timelineUuid) {
this.timeline = await this.$store.dispatch('maps/get', this.$route.params.timelineUuid)
}
if (this.$route.params.uuid) {
this.timeline = await this.$store.dispatch('maps/get', this.$route.params.uuid)
if (!this.timeline) this.timeline = await this.$store.dispatch('maps/get', parseURI(this.video.target.id).uuid)
}
},
async getVideo () {
if (this.$route.params.uuid) {
this.video = await this.$store.dispatch('annotations/get', this.$route.params.uuid)
this.videoMetadata = await this.$store.dispatch('metadata/get', this.video)
if (this.video && !this.currentId.timeline) this.currentId.timeline = parseURI(this.video.target.id).uuid
}
// set parent timeline from video when reloading in video submenu
if (!this.timeline) {
this.timeline = await this.$store.dispatch('maps/get', parseURI(this.video.target.id).uuid)
}
},
handlerMenuDrawer () {
this.menuDrawer = !this.menuDrawer
},
goBack () {
return this.$router.push(this.targetBackButton)
},
setBackButton (val) {
this.targetBackButton = val
},
executeApp (appName, routeName) {
this.currentId.video = undefined
this.currentId.timeline = undefined
this.currentId.grid = undefined
this.currentApp = appName
this.$router.push({ name: routeName })
},
......@@ -68,4 +457,12 @@
}
</script>
<style></style>
<style lang="stylus" scoped>
@import '~variables'
.q-item-division + .q-item-separator
border-top 1px solid $grey-9
.back-button
margin-left -52px
</style>
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