mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-05-07 14:56:06 +02:00
pa
148 lines
6.1 KiB
Vue
148 lines
6.1 KiB
Vue
<template>
|
|
<div @click="$emit('click')">
|
|
<div class="x-friend-item">
|
|
<template v-if="favorite.ref">
|
|
<div class="avatar" :class="userStatusClass(favorite.ref)">
|
|
<img v-lazy="userImage(favorite.ref)" />
|
|
</div>
|
|
<div class="detail">
|
|
<span
|
|
class="name"
|
|
:style="{ color: favorite.ref.$userColour }"
|
|
v-text="favorite.ref.displayName"></span>
|
|
<location
|
|
class="extra"
|
|
v-if="favorite.ref.location !== 'offline'"
|
|
:location="favorite.ref.location"
|
|
:traveling="favorite.ref.travelingToLocation"
|
|
:link="false"></location>
|
|
<span v-else v-text="favorite.ref.statusDescription"></span>
|
|
</div>
|
|
<template v-if="editFavoritesMode">
|
|
<el-dropdown trigger="click" size="mini" style="margin-left: 5px" @click.native.stop>
|
|
<el-tooltip
|
|
placement="left"
|
|
:content="$t('view.favorite.move_tooltip')"
|
|
:disabled="hideTooltips">
|
|
<el-button type="default" icon="el-icon-back" size="mini" circle></el-button>
|
|
</el-tooltip>
|
|
<el-dropdown-menu slot="dropdown">
|
|
<template v-for="groupAPI in API.favoriteFriendGroups">
|
|
<el-dropdown-item
|
|
v-if="groupAPI.name !== group.name"
|
|
:key="groupAPI.name"
|
|
style="display: block; margin: 10px 0"
|
|
:disabled="groupAPI.count >= groupAPI.capacity"
|
|
@click.native="moveFavorite(favorite.ref, groupAPI, 'friend')">
|
|
{{ groupAPI.displayName }} ({{ groupAPI.count }} / {{ groupAPI.capacity }})
|
|
</el-dropdown-item>
|
|
</template>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
<el-button type="text" size="mini" style="margin-left: 5px" @click.stop>
|
|
<el-checkbox v-model="favorite.$selected"></el-checkbox>
|
|
</el-button>
|
|
</template>
|
|
<template v-else>
|
|
<el-tooltip
|
|
placement="right"
|
|
:content="$t('view.favorite.unfavorite_tooltip')"
|
|
:disabled="hideTooltips">
|
|
<el-button
|
|
v-if="shiftHeld"
|
|
size="mini"
|
|
icon="el-icon-close"
|
|
circle
|
|
style="color: #f56c6c; margin-left: 5px"
|
|
@click.stop="deleteFavorite(favorite.id)"></el-button>
|
|
<el-button
|
|
v-else
|
|
type="default"
|
|
icon="el-icon-star-on"
|
|
size="mini"
|
|
circle
|
|
style="margin-left: 5px"
|
|
@click.stop="showFavoriteDialog('friend', favorite.id)"></el-button>
|
|
</el-tooltip>
|
|
</template>
|
|
</template>
|
|
<template v-else>
|
|
<div class="avatar"></div>
|
|
<div class="detail">
|
|
<span v-text="favorite.name || favorite.id"></span>
|
|
</div>
|
|
<el-button
|
|
type="text"
|
|
icon="el-icon-close"
|
|
size="mini"
|
|
style="margin-left: 5px"
|
|
@click.stop="deleteFavorite(favorite.id)"></el-button>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Location from '../common/Location.vue';
|
|
import { favoriteRequest } from '../../classes/request';
|
|
export default {
|
|
components: { Location },
|
|
inject: ['showUserDialog', 'userImage', 'userStatusClass', 'API'],
|
|
props: {
|
|
favorite: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
hideTooltips: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
shiftHeld: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
group: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
editFavoritesMode: Boolean
|
|
},
|
|
methods: {
|
|
moveFavorite(ref, group, type) {
|
|
favoriteRequest
|
|
.deleteFavorite({
|
|
objectId: ref.id
|
|
})
|
|
.then(() => {
|
|
favoriteRequest.addFavorite({
|
|
type,
|
|
favoriteId: ref.id,
|
|
tags: group.name
|
|
});
|
|
});
|
|
},
|
|
deleteFavorite(objectId) {
|
|
favoriteRequest.deleteFavorite({
|
|
objectId
|
|
});
|
|
// FIXME: 메시지 수정
|
|
// this.$confirm('Continue? Delete Favorite', 'Confirm', {
|
|
// confirmButtonText: 'Confirm',
|
|
// cancelButtonText: 'Cancel',
|
|
// type: 'info',
|
|
// callback: (action) => {
|
|
// if (action === 'confirm') {
|
|
// API.deleteFavorite({
|
|
// objectId
|
|
// });
|
|
// }
|
|
// }
|
|
// });
|
|
},
|
|
showFavoriteDialog(param1, param2) {
|
|
this.$emit('show-favorite-dialog', param1, param2);
|
|
}
|
|
}
|
|
};
|
|
</script>
|