TeamMembersButton.vue tailwind refactoring

This commit is contained in:
Čarodej
2021-10-26 07:06:45 +02:00
parent fda82d6dbf
commit 54af098148
2 changed files with 32 additions and 35 deletions

View File

@@ -1,20 +1,22 @@
<template>
<div class="team-folder-wrapper">
<div v-if="! teamFolder" class="empty-state">
<span>Not selected</span>
<div class="w-28">
<div v-if="! teamFolder" class="text-center">
<span class="dark:text-gray-500 text-gray-600 mr-0.5 text-tiny">
{{ $t('Not selected') }}
</span>
</div>
<TeamMembersPreview v-else :folder="teamFolder" :limit="true" :avatar-size="32" class="widget" />
<TeamMembersPreview v-else :folder="teamFolder" :limit="true" :avatar-size="32" class="justify-center" />
</div>
</template>
<script>
import {mapGetters} from "vuex";
import TeamMembersPreview from "./TeamMembersPreview";
import TeamMembersPreview from "./TeamMembersPreview"
import {mapGetters} from "vuex"
export default {
name: "TeamMembersButton",
components: {
TeamMembersPreview
TeamMembersPreview,
},
computed: {
...mapGetters([
@@ -22,32 +24,10 @@
'clipboard',
]),
teamFolder() {
return this.currentTeamFolder ? this.currentTeamFolder : this.clipboard[0]
return this.currentTeamFolder
? this.currentTeamFolder
: this.clipboard[0]
}
},
}
</script>
<style lang="scss" scoped>
@import "resources/sass/vuefilemanager/_variables";
@import "resources/sass/vuefilemanager/_mixins";
.team-folder-wrapper {
width: 107px;
.widget {
justify-content: center;
}
}
.empty-state {
text-align: center;
span {
@include font-size(12);
color: $text-muted;
opacity: 0.7;
margin-right: 7px;
}
}
</style>
</script>