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

added team into DesktopToolbar.vue

Browse Source
This commit is contained in:
Peter Papp
2021-08-19 07:55:52 +02:00
parent a824e4d78e
commit 1d569f13c2
6 changed files with 225 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
resources/js/components/Teams/Components/TeamFolderPreview.vue Normal file
View File

@@ -0,0 +1,58 @@
<template>
<div class="team-folder-preview">
<div class="info">
<b class="title">The Team Project</b>
<span class="subtitle">Last update a week ago</span>
<TeamMembersPreview :members="fullMembers" class="members" />
</div>
</div>
</template>
<script>
import TeamMembersPreview from "./TeamMembersPreview";
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',
],
}
},
}
</script>
<style lang="scss" scoped>
@import "resources/sass/vuefilemanager/_variables";
@import "resources/sass/vuefilemanager/_mixins";
.team-folder-preview {
text-align: left;
padding: 15px 20px;
border-bottom: 1px solid $light_mode_border;
.info {
.title {
@include font-size(14);
}
.subtitle {
@include font-size(11);
color: $text-muted;
display: block;
margin-bottom: 10px;
line-height: 1;
}
}
}
</style>

54
resources/js/components/Teams/Components/TeamMembersPreview.vue Normal file
View File

@@ -0,0 +1,54 @@
<template>
<div class="team-folder">
<span v-if="count" class="member-count">
{{ count }}
</span>
<div class="members">
<img v-for="member in members" :src="member" class="member">
</div>
</div>
</template>
<script>
export default {
name: "TeamMembersPreview",
props: [
'members',
'count',
]
}
</script>
<style lang="scss" scoped>
@import "resources/sass/vuefilemanager/_variables";
@import "resources/sass/vuefilemanager/_mixins";
.team-folder {
display: flex;
align-items: center;
.member-count {
@include font-size(12);
color: $text-muted;
margin-right: 3px;
opacity: 0.7;
}
.members {
.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;
}
}
}
}
</style>