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

added prettier

Browse Source
This commit is contained in:
Čarodej
2022-02-01 12:21:38 +01:00
parent 5ae875233b
commit b38b532cbe
284 changed files with 25410 additions and 25338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,96 +1,88 @@
<template>
<div class="team-folder">
<span v-if="limit && membersCount > 3" class="member-count">
+{{ membersCount - 3 }}
</span>
<div class="members">
<div v-for="member in members" :key="member.data.id" :title="member.data.attributes.email" class="member-preview z-10">
<MemberAvatar :is-border="true" :size="34" :member="member" />
</div>
</div>
</div>
<div class="team-folder">
<span v-if="limit && membersCount > 3" class="member-count"> +{{ membersCount - 3 }} </span>
<div class="members">
<div v-for="member in members" :key="member.data.id" :title="member.data.attributes.email" class="member-preview z-10">
<MemberAvatar :is-border="true" :size="34" :member="member" />
</div>
</div>
</div>
</template>
<script>
import MemberAvatar from "../../FilesView/MemberAvatar"
import MemberAvatar from '../../FilesView/MemberAvatar'
export default {
name: "TeamMembersPreview",
props: [
'folder',
'limit',
'avatarSize'
],
components: {
MemberAvatar,
},
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)
export default {
name: 'TeamMembersPreview',
props: ['folder', 'limit', 'avatarSize'],
components: {
MemberAvatar,
},
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)
}
if (this.limit) {
return allMembers.slice(0, 3)
}
return allMembers
}
}
}
return allMembers
},
},
}
</script>
<style lang="scss" scoped>
@import "resources/sass/vuefilemanager/_variables";
@import "resources/sass/vuefilemanager/_mixins";
@import 'resources/sass/vuefilemanager/_variables';
@import 'resources/sass/vuefilemanager/_mixins';
.team-folder {
display: flex;
align-items: center;
.team-folder {
display: flex;
align-items: center;
.member-count {
@include font-size(12);
color: $text-muted;
margin-right: 3px;
opacity: 0.7;
min-width: 14px;
text-align: left;
}
.member-count {
@include font-size(12);
color: $text-muted;
margin-right: 3px;
opacity: 0.7;
min-width: 14px;
text-align: left;
}
.members {
display: flex;
.members {
display: flex;
.member-preview {
margin-left: -10px;
.member-preview {
margin-left: -10px;
&:first-child {
margin-left: 0;
}
}
&:first-child {
margin-left: 0;
}
}
.member {
width: 32px;
height: 32px;
object-fit: cover;
border-radius: 10px;
border: 2px solid white;
vertical-align: middle;
}
}
}
.member {
width: 32px;
height: 32px;
object-fit: cover;
border-radius: 10px;
border: 2px solid white;
vertical-align: middle;
}
}
}
.dark {
.dark {
.team-folder {
.member-count {
color: $dark_mode_text_secondary;
}
.team-folder {
.member-count {
color: $dark_mode_text_secondary;
}
.members .member {
border-color: $dark_mode_foreground;
}
}
}
</style>
.members .member {
border-color: $dark_mode_foreground;
}
}
}
</style>