Ind.ie is now Small Technology Foundation.
Commit 71ccc539 authored by Aral Balkan's avatar Aral Balkan

Implements #14

  * Tabs properly display active state
  * Tabs properly display disabled state
  * Initial state is set based on configured & signed in states
parent 8aa9aec4
<template>
<header>
<div class='profile' :style='headerStyles'>
<!-- Profile image -->
<img class='profile-image' v-if='profileImage' :src='profileImage' alt='Profile image'>
......@@ -15,24 +16,79 @@
<!-- Main navigation -->
<nav class='tabs is-centered' style='background-color: white;'>
<ul>
<li class='is-active'><nuxt-link to='/'>Me</nuxt-link></li>
<li><nuxt-link to='/everyone' :disabled='!configured'>Everyone</nuxt-link></li>
<li><nuxt-link to='/search'>Search</nuxt-link></li>
<li><nuxt-link to='/settings'>Settings</nuxt-link></li>
<li><nuxt-link to='/more'></nuxt-link></li>
<li :class='classesForRoute("/")'>
<nuxt-link to='/'>Me</nuxt-link>
</li>
<li :class='classesForRoute("/everyone")'>
<nuxt-link to='/everyone'>Everyone</nuxt-link>
</li>
<li :class='classesForRoute("/search")'>
<nuxt-link to='/search'>Search</nuxt-link>
</li>
<li :class='classesForRoute("/settings")' v-show='signedIn || !configured'>
<nuxt-link to='/settings'>Settings</nuxt-link>
</li>
<li :class='classesForRoute("/more")' v-show='signedIn || !configured'>
<nuxt-link to='/more'></nuxt-link>
</li>
</ul>
</nav>
</header>
</template>
<script>
export default {
mounted () {
// Set the route to Settings if the site is not configured.
if (!this.configured) {
this.$router.push('settings')
return
}
//
// Check that a path that requires person to be signed in isn’t
// accessed. Note: this is a stopgap. We should be authenticating
// on the server not here.
//
// TODO: Issue #22
// https://source.ind.ie/indienet/site/issues/22
//
if (!this.signedIn) {
const route = this.$router.history.current.path
console.log(route)
if (route === '/settings' || route === '/more') {
this.$router.push('/')
}
return
}
},
data () {
return {
currentRoute: null
}
},
computed: {
disablingCriteriaForRoutes () {
return {
'/': !this.configured, // i.e., always enabled
'/everyone': !this.configured,
'/search': !this.configured,
'/settings': false,
'/more': !this.configured
}
},
// Vuex Store
name () { return this.$store.state.name },
bio () { return this.$store.state.bio },
profileImage () { return this.$store.state.profileImage },
signedIn () { return this.$store.state.signedIn },
configured () { return this.$store.state.configured },
// Live header theming.
headerStyles () {
let styles = {
backgroundColor: this.$store.state.backgroundColour
......@@ -43,7 +99,28 @@ export default {
return styles
}
},
watch: {
$route: function () {
console.log(`Header: Route changed to ${this.$route.path}.`)
}
},
methods: {
// Returns the correct tab class object for the passed route based on the
// current route of the page that the header is rendering in.
classesForRoute (route) {
const classObject = {}
// Is this the active tab?
if (route === this.$route.path) classObject['is-active'] = true
// Is this tab disabled?
const disableTab = this.disablingCriteriaForRoutes[route]
if (disableTab) classObject['disabled'] = true
return classObject
},
// Signals that the follow button has been pressed.
followButtonPress () {
this.$emit('followButtonPress')
}
......@@ -129,4 +206,18 @@ nav.tabs {
.tabs li {
margin-bottom: 0;
}
/*
We cannot set both cursor: not-allowed and pointer-events: none on the same
element (the cursor does not show). So, instead, we set the cursor on the
parent li and turn off pointer events to disable the link for disabled tabs.
*/
.tabs li.disabled {
cursor:not-allowed;
}
.tabs li.disabled > a {
color: lightgray;
pointer-events:none;
}
</style>
......@@ -4,7 +4,7 @@ const siteConfiguration = require('../assets/data.json')
// Mock: sign-in state
siteConfiguration.signedIn = true
siteConfiguration.configured = true
siteConfiguration.configured = false
export const state = () => (siteConfiguration)
......
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