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

Introduce group basic federation, event new page and notifications

Browse Source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
2020-02-18 08:57:00 +01:00
parent 300ef8f245
commit 4144e9ffd0
416 changed files with 32220 additions and 16750 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
js/src/views/Account/IdentityPickerWrapper.vue
View File

@@ -1,60 +1,86 @@
<template>
<div class="identity-picker">
<span v-if="inline" class="inline">
<img class="image" v-if="currentIdentity.avatar" :src="currentIdentity.avatar.url" :alt="currentIdentity.avatar.alt"/>
<b-icon v-else size="is-small" icon="account-circle" />
{{ currentIdentity.name || `@${currentIdentity.preferredUsername}` }}
<b-button type="is-text" @click="isComponentModalActive = true">
{{ $t('Change') }}
</b-button>
</span>
<span v-else class="block" @click="isComponentModalActive = true">
<img class="image is-48x48" v-if="currentIdentity.avatar" :src="currentIdentity.avatar.url" :alt="currentIdentity.avatar.alt"/>
<b-icon v-else size="is-large" icon="account-circle" />
</span>
<b-modal :active.sync="isComponentModalActive" has-modal-card>
<identity-picker v-model="currentIdentity" @input="relay" />
</b-modal>
<div class="identity-picker">
<div
v-if="inline"
class="inline box"
:class="{ 'has-background-grey-lighter': masked }"
@click="isComponentModalActive = true"
>
<div class="media">
<div class="media-left">
<figure class="image is-48x48" v-if="currentIdentity.avatar">
<img class="image" :src="currentIdentity.avatar.url" alt="" />
</figure>
<b-icon v-else size="is-large" icon="account-circle" />
</div>
<div class="media-content" v-if="currentIdentity.name">
<p class="is-4">{{ currentIdentity.name }}</p>
<p class="is-6 has-text-grey">
{{ `@${currentIdentity.preferredUsername}` }}
<span v-if="masked">{{ $t("(Masked)") }}</span>
</p>
</div>
<div class="media-content" v-else>
{{ `@${currentIdentity.preferredUsername}` }}
</div>
<b-button type="is-text" @click="isComponentModalActive = true">
{{ $t("Change") }}
</b-button>
</div>
</div>
<span v-else class="block" @click="isComponentModalActive = true">
<img
class="image is-48x48"
v-if="currentIdentity.avatar"
:src="currentIdentity.avatar.url"
alt=""
/>
<b-icon v-else size="is-large" icon="account-circle" />
</span>
<b-modal :active.sync="isComponentModalActive" has-modal-card>
<identity-picker v-model="currentIdentity" @input="relay" />
</b-modal>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import { IActor } from '@/types/actor';
import IdentityPicker from './IdentityPicker.vue';
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { IActor } from "../../types/actor";
import IdentityPicker from "./IdentityPicker.vue";
@Component({
components: { IdentityPicker },
})
export default class IdentityPickerWrapper extends Vue {
@Prop() value!: IActor;
@Prop({ default: true, type: Boolean }) inline!: boolean;
isComponentModalActive: boolean = false;
@Prop({ type: Boolean, required: false, default: false }) masked = false;
isComponentModalActive = false;
currentIdentity: IActor = this.value;
@Watch('value')
updateCurrentActor(value) {
@Watch("value")
updateCurrentActor(value: IActor) {
this.currentIdentity = value;
}
relay(identity: IActor) {
this.currentIdentity = identity;
this.$emit('input', identity);
this.$emit("input", identity);
this.isComponentModalActive = false;
}
}
</script>
<style lang="scss">
.identity-picker {
.identity-picker {
.block {
cursor: pointer;
}
.block {
cursor: pointer;
}
.inline img.image {
display: inline;
height: 1.5em;
vertical-align: text-bottom;
}
}
.inline {
cursor: pointer;
}
}
</style>