nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-19 16:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

TeamMembersPreview refactoring

Browse Source
This commit is contained in:
Peter Papp
2021-08-30 14:43:52 +02:00
parent e751a6bc90
commit 2bfdf5c311
21 changed files with 434 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
resources/js/components/Teams/Components/PermissionToggleButton.vue
View File

@@ -44,11 +44,7 @@
}
},
created() {
if (this.item.pivot) {
this.permission = this.item.pivot.permission
} else {
this.permission = this.item.permission
}
this.permission = this.item.permission
}
}
</script>

20
resources/js/components/Teams/Components/TeamFolderPreview.vue
View File

@@ -3,31 +3,25 @@
<div class="info">
<b class="title">The Team Project</b>
<span class="subtitle">Last update a week ago</span>
<TeamMembersPreview :members="fullMembers" class="members" />
<TeamMembersPreview :folder="clipboard[0]" class="members" />
</div>
</div>
</template>
<script>
import TeamMembersPreview from "./TeamMembersPreview";
import {mapGetters} from "vuex";
export default {
name: "TeamFolderPreview",
components: {
TeamMembersPreview,
},
data() {
return {
fullMembers: [
'/temp/avatar-01.png',
'/temp/avatar-02.png',
'/temp/avatar-03.png',
'/temp/avatar-01.png',
'/temp/avatar-02.png',
'/temp/avatar-03.png',
],
}
},
computed: {
...mapGetters([
'clipboard'
])
}
}
</script>

25
resources/js/components/Teams/Components/TeamList.vue
View File

@@ -1,25 +1,26 @@
<template>
<ul class="member-list">
<li v-if="Object.values(members).length > 0" v-for="(member, i) in members" :key="i" class="member-item">
<div @click="deleteMember(member)" class="terminate">
<li v-if="Object.values(members).length > 0" v-for="(entry, i) in members" :key="i" class="member-item">
<div @click="deleteMember(entry)" class="terminate">
<x-icon size="14" class="close-icon" />
</div>
<div class="member-preview">
<div class="avatar">
<img :src="member.settings ? member.settings.avatar : '/assets/images/default-avatar.png'">
<img :src="entry.type === 'member' ? entry.avatar : '/assets/images/default-avatar.png'" alt="avatar">
</div>
<div class="info">
<b class="name">{{ member.settings ? member.settings.name : member.email }}</b>
<span v-if="member.settings" class="email">{{ member.email }}</span>
<div v-if="entry.type === 'member'" class="info">
<b class="title">{{ entry.name }}</b>
<span class="subtitle">{{ entry.email }}</span>
</div>
<div v-if="entry.type === 'invitation'" class="info">
<b class="title">{{ entry.email }}</b>
<span v-if="entry.id" class="subtitle">{{ $t('Waiting for accept invitation...') }}</span>
</div>
</div>
<div class="action">
<PermissionToggleButton @input="updateMemberPermission(member, $event)" :item="member" />
<PermissionToggleButton @input="updateMemberPermission(entry, $event)" :item="entry" />
</div>
</li>
<li v-if="Object.values(members).length === 0">
<p class="input-help">{{ $t('Please add some member into your Team Folder.') }}</p>
</li>
</ul>
</template>
@@ -103,7 +104,7 @@
.info {
.name {
.title {
@include font-size(15);
font-weight: 700;
display: block;
@@ -112,7 +113,7 @@
text-overflow: ellipsis;
}
.email {
.subtitle {
@include font-size(12);
color: $text-muted;
display: block;

49
resources/js/components/Teams/Components/TeamMembersButton.vue Normal file
View File

@@ -0,0 +1,49 @@
<template>
<div class="team-folder-wrapper">
<div v-if="! clipboard[0]" class="empty-state">
<span>Not selected</span>
</div>
<TeamMembersPreview v-else :folder="clipboard[0]" :limit="true" class="widget" />
</div>
</template>
<script>
import {mapGetters} from "vuex";
import TeamMembersPreview from "./TeamMembersPreview";
export default {
name: "TeamMembersButton",
components: {
TeamMembersPreview
},
computed: {
...mapGetters([
'clipboard'
])
},
}
</script>
<style lang="scss" scoped>
@import "resources/sass/vuefilemanager/_variables";
@import "resources/sass/vuefilemanager/_mixins";
.team-folder-wrapper {
width: 107px;
.widget {
justify-content: flex-end;
}
}
.empty-state {
text-align: center;
span {
@include font-size(12);
color: $text-muted;
opacity: 0.7;
margin-right: 7px;
}
}
</style>

51
resources/js/components/Teams/Components/TeamMembersPreview.vue
View File

@@ -1,22 +1,39 @@
<template>
<div class="team-folder">
<span v-if="count" class="member-count">
{{ count }}
<span v-if="limit" class="member-count">
{{ membersCount > 3 ? '3+' : membersCount }}
</span>
<div class="members">
<img v-for="member in members" :src="member" class="member" alt="">
<div v-for="member in members" class="member-preview">
<img v-if="member.data.attributes.avatar" :src="member.data.attributes.avatar" class="member" alt="avatar">
<img v-else src="/assets/images/default-avatar.png" class="member" alt="avatar">
</div>
</div>
</div>
</template>
<script>
export default {
name: "TeamMembersPreview",
props: [
'members',
'count',
]
}
name: "TeamMembersPreview",
props: [
'folder',
'limit',
],
computed: {
membersCount() {
return this.folder.data.relationships.members.data.length + this.folder.data.relationships.invitations.data.length
},
members() {
let allMembers = this.folder.data.relationships.members.data.concat(this.folder.data.relationships.invitations.data)
if (this.limit) {
return allMembers.slice(0, 3)
}
return allMembers
}
}
}
</script>
<style lang="scss" scoped>
@@ -32,22 +49,28 @@ export default {
color: $text-muted;
margin-right: 3px;
opacity: 0.7;
min-width: 14px;
text-align: left;
}
.members {
display: flex;
.member-preview {
margin-left: -10px;
&:first-child {
margin-left: 0;
}
}
.member {
width: 32px;
height: 32px;
object-fit: cover;
border-radius: 10px;
margin-left: -10px;
border: 2px solid white;
vertical-align: middle;
&:first-child {
margin-left: 0;
}
}
}
}