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

added TypedAvatar.vue component

Browse Source
This commit is contained in:
Peter Papp
2021-08-30 15:06:26 +02:00
parent 2bfdf5c311
commit ac62a432fe
6 changed files with 74 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/mix-manifest.json
+24 -3
View File
@@ -58,8 +58,8 @@
"/chunks/plan-settings.js": "/chunks/plan-settings.js?id=17469545c5b6a16c3bbf",
"/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=0dd0a5efe0e3cb511c48",
"/chunks/plans.js": "/chunks/plans.js?id=e93cd9c42177eadc8825",
"/chunks/platform.js": "/chunks/platform.js?id=25745a7eec7af5492710",
"/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=b3b4e8501b1539c9b6f0",
"/chunks/platform.js": "/chunks/platform.js?id=15eb730a9b8f96858604",
"/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=cc0341290cdc4226c74b",
"/chunks/profile.js": "/chunks/profile.js?id=658aa03af778cc2cc100",
"/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=ddb7be518c092ed392ca",
"/chunks/purchase-code.js": "/chunks/purchase-code.js?id=e8597a21a38c153e3c88",
@@ -542,5 +542,26 @@
"/chunks/platform~chunks/shared.bf74ec4c9fbffb5b26f2.hot-update.js": "/chunks/platform~chunks/shared.bf74ec4c9fbffb5b26f2.hot-update.js",
"/chunks/platform~chunks/shared.7e8439e720d955c0b3a1.hot-update.js": "/chunks/platform~chunks/shared.7e8439e720d955c0b3a1.hot-update.js",
"/chunks/platform~chunks/shared.dcad6d4b43db4b25528e.hot-update.js": "/chunks/platform~chunks/shared.dcad6d4b43db4b25528e.hot-update.js",
"/chunks/platform~chunks/shared.541f03fb233348cf16a8.hot-update.js": "/chunks/platform~chunks/shared.541f03fb233348cf16a8.hot-update.js"
"/chunks/platform~chunks/shared.541f03fb233348cf16a8.hot-update.js": "/chunks/platform~chunks/shared.541f03fb233348cf16a8.hot-update.js",
"/chunks/platform~chunks/shared.596beae69bce316e9812.hot-update.js": "/chunks/platform~chunks/shared.596beae69bce316e9812.hot-update.js",
"/chunks/platform~chunks/shared.b517582446cc88a5d795.hot-update.js": "/chunks/platform~chunks/shared.b517582446cc88a5d795.hot-update.js",
"/chunks/platform~chunks/shared.b2589e16f143853fc6ab.hot-update.js": "/chunks/platform~chunks/shared.b2589e16f143853fc6ab.hot-update.js",
"/chunks/platform~chunks/shared.f742b84011a0e12f4835.hot-update.js": "/chunks/platform~chunks/shared.f742b84011a0e12f4835.hot-update.js",
"/chunks/platform~chunks/shared.1d540f5bd105725081cf.hot-update.js": "/chunks/platform~chunks/shared.1d540f5bd105725081cf.hot-update.js",
"/chunks/platform~chunks/shared.8a501fd48026fbf46d55.hot-update.js": "/chunks/platform~chunks/shared.8a501fd48026fbf46d55.hot-update.js",
"/chunks/platform~chunks/shared.b95e97773b9d0ea94fc0.hot-update.js": "/chunks/platform~chunks/shared.b95e97773b9d0ea94fc0.hot-update.js",
"/chunks/platform~chunks/shared.b8f501e0039aae1e5df8.hot-update.js": "/chunks/platform~chunks/shared.b8f501e0039aae1e5df8.hot-update.js",
"/chunks/platform~chunks/shared.65240d64d1d81b14205b.hot-update.js": "/chunks/platform~chunks/shared.65240d64d1d81b14205b.hot-update.js",
"/chunks/platform~chunks/shared.995ebb770614e4543b51.hot-update.js": "/chunks/platform~chunks/shared.995ebb770614e4543b51.hot-update.js",
"/chunks/platform~chunks/shared.7f6ab782d89413db28c6.hot-update.js": "/chunks/platform~chunks/shared.7f6ab782d89413db28c6.hot-update.js",
"/chunks/platform~chunks/shared.d6d476355fe903a6d29d.hot-update.js": "/chunks/platform~chunks/shared.d6d476355fe903a6d29d.hot-update.js",
"/chunks/platform.6002f275d3d9a08a34df.hot-update.js": "/chunks/platform.6002f275d3d9a08a34df.hot-update.js",
"/chunks/platform.17a41d3eceeaca954950.hot-update.js": "/chunks/platform.17a41d3eceeaca954950.hot-update.js",
"/chunks/platform.2200b0e2593bcd5ed8fd.hot-update.js": "/chunks/platform.2200b0e2593bcd5ed8fd.hot-update.js",
"/chunks/platform.02c5f0d493657eff27bd.hot-update.js": "/chunks/platform.02c5f0d493657eff27bd.hot-update.js",
"/chunks/platform.07dbd82c60bf4aab88f5.hot-update.js": "/chunks/platform.07dbd82c60bf4aab88f5.hot-update.js",
"/chunks/platform~chunks/shared.2be04ab2777489f93b55.hot-update.js": "/chunks/platform~chunks/shared.2be04ab2777489f93b55.hot-update.js",
"/chunks/platform~chunks/shared.e94c8175e7bc649f984c.hot-update.js": "/chunks/platform~chunks/shared.e94c8175e7bc649f984c.hot-update.js",
"/chunks/platform~chunks/shared.01e3eec778bcc00565b7.hot-update.js": "/chunks/platform~chunks/shared.01e3eec778bcc00565b7.hot-update.js",
"/chunks/platform~chunks/shared.d414e8d2ab8cbc2576ce.hot-update.js": "/chunks/platform~chunks/shared.d414e8d2ab8cbc2576ce.hot-update.js"
}
resources/js/components/Others/TypedAvatar.vue
+35
View File
@@ -0,0 +1,35 @@
<template>
<div class="typed-avatar" :style="{width: size + 'px', height: size + 'px'}">
<span class="letter">{{ letter }}</span>
</div>
</template>
<script>
export default {
name: "TypedAvatar",
props: [
'letter',
'size',
]
}
</script>
<style scoped lang="scss">
@import "resources/sass/vuefilemanager/_variables";
@import "resources/sass/vuefilemanager/_mixins";
.typed-avatar {
user-select: none;
display: flex;
background: #9ad2bf;
border-radius: 10px;
align-items: center;
justify-content: center;
border: 2px solid white;
.letter {
font-weight: 800;
text-transform: uppercase;
}
}
</style>
resources/js/components/Teams/Components/TeamFolderPreview.vue
+1 -1
View File
@@ -3,7 +3,7 @@
<div class="info">
<b class="title">The Team Project</b>
<span class="subtitle">Last update a week ago</span>
<TeamMembersPreview :folder="clipboard[0]" class="members" />
<TeamMembersPreview :folder="clipboard[0]" :avatar-size="32" class="members" />
</div>
</div>
</template>
resources/js/components/Teams/Components/TeamList.vue
+5 -2
View File
@@ -6,7 +6,8 @@
</div>
<div class="member-preview">
<div class="avatar">
<img :src="entry.type === 'member' ? entry.avatar : '/assets/images/default-avatar.png'" alt="avatar">
<img v-if="entry.avatar" :src="entry.avatar" alt="avatar">
<TypedAvatar v-else :size="38" :letter="entry.email.substr(0, 1)" />
</div>
<div v-if="entry.type === 'member'" class="info">
<b class="title">{{ entry.name }}</b>
@@ -25,7 +26,8 @@
</template>
<script>
import PermissionToggleButton from "./PermissionToggleButton";
import PermissionToggleButton from "./PermissionToggleButton"
import TypedAvatar from "../../Others/TypedAvatar"
import {XIcon} from 'vue-feather-icons'
export default {
@@ -35,6 +37,7 @@
],
components: {
PermissionToggleButton,
TypedAvatar,
XIcon,
},
data() {
resources/js/components/Teams/Components/TeamMembersButton.vue
+1 -1
View File
@@ -3,7 +3,7 @@
<div v-if="! clipboard[0]" class="empty-state">
<span>Not selected</span>
</div>
<TeamMembersPreview v-else :folder="clipboard[0]" :limit="true" class="widget" />
<TeamMembersPreview v-else :folder="clipboard[0]" :limit="true" :avatar-size="32" class="widget" />
</div>
</template>
resources/js/components/Teams/Components/TeamMembersPreview.vue
+8 -3
View File
@@ -4,21 +4,26 @@
{{ membersCount > 3 ? '3+' : membersCount }}
</span>
<div class="members">
<div v-for="member in members" class="member-preview">
<div v-for="member in members" :key="member.data.id" :title="member.data.attributes.email" 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">
<TypedAvatar v-else :size="avatarSize" :letter="member.data.attributes.email.substr(0, 1)" />
</div>
</div>
</div>
</template>
<script>
export default {
import TypedAvatar from "../../Others/TypedAvatar";
export default {
name: "TeamMembersPreview",
props: [
'folder',
'limit',
'avatarSize'
],
components: {
TypedAvatar,
},
computed: {
membersCount() {
return this.folder.data.relationships.members.data.length + this.folder.data.relationships.invitations.data.length