Skip to content

GitLab

Q
Quasar Components Shared
Commit 6e3a8c46 authored by Anton Koch's avatar Anton Koch
Browse files
Options

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
    Hide whitespace changes
    Inline Side-by-side
    Showing with 505 additions and 32 deletions
    navigation/ButtonList.vue 0 → 100644
    View file @ 6e3a8c46
    <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 @ 6e3a8c46
    <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