hamlab/mobilizon-frontend
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add a proper setting menu

Browse Source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
2020-03-12 14:29:21 +01:00
parent fb6add8563
commit 299b686612
26 changed files with 613 additions and 405 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
js/src/views/Account/MyAccount.vue
View File

@@ -1,92 +0,0 @@
<template>
<section class="section container">
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li class="is-active">
<router-link :to="{ name: RouteName.UPDATE_IDENTITY }" aria-current="page">{{ $t('My account') }}</router-link>
</li>
</ul>
</nav>
<div v-if="currentActor">
<div class="header">
<figure v-if="currentActor.banner" class="image is-3by1">
<img :src="currentActor.banner.url" alt="banner">
</figure>
</div>
<div class="columns">
<div class="identities column is-4">
<identities :currentIdentityName="currentIdentityName" />
<div class="buttons">
<b-button tag="router-link" type="is-secondary" :to="{ name: RouteName.ACCOUNT_SETTINGS }">{{ $t('Account settings') }}</b-button>
</div>
</div>
<div class="column is-8">
<router-view />
</div>
</div>
</div>
</section>
</template>
<style lang="scss">
.header {
padding-bottom: 30px;
}
.identities {
padding-right: 45px;
margin-right: 45px;
.buttons {
margin-top: 1.2rem;
}
}
</style>
<script lang="ts">
import { CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
import { Component, Vue, Watch } from 'vue-property-decorator';
import EventCard from '@/components/Event/EventCard.vue';
import { IPerson } from '@/types/actor';
import Identities from '@/components/Account/Identities.vue';
import { RouteName } from '@/router';
@Component({
components: {
EventCard,
Identities,
},
apollo: {
currentActor: {
query: CURRENT_ACTOR_CLIENT,
},
},
})
export default class MyAccount extends Vue {
currentActor!: IPerson;
currentIdentityName: string | null = null;
RouteName = RouteName;
@Watch('$route.params.identityName', { immediate: true })
async onIdentityParamChanged(val: string) {
await this.redirectIfNoIdentitySelected(val);
this.currentIdentityName = val;
}
private async redirectIfNoIdentitySelected(identityParam?: string) {
if (!!identityParam) return;
if (!!this.currentActor) {
await this.$router.push({ params: { identityName: this.currentActor.preferredUsername } });
}
}
}
</script>
<style lang="scss">
@import "../../variables";
@import "~bulma/sass/utilities/_all";
@import "~bulma/sass/components/dropdown.sass";
</style>

2
js/src/views/Account/Profile.vue
View File

@@ -116,7 +116,7 @@ import { CREATE_FEED_TOKEN_ACTOR } from '@/graphql/feed_tokens';
EventCard,
},
})
export default class MyAccount extends Vue {
export default class Profile extends Vue {
@Prop({ type: String, required: true }) name!: string;
person!: IPerson;