nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-21 09:12:14 +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

53
resources/js/components/FilesView/DesktopToolbar.vue
View File

@@ -17,9 +17,9 @@
<ToolbarWrapper>
<!--Search bar-->
<ToolbarGroup style="margin-left: 0">
<!-- <ToolbarGroup style="margin-left: 0">
<SearchBar />
</ToolbarGroup>
</ToolbarGroup>-->
<!--Creating controls-->
<ToolbarGroup v-if="$checkPermission(['master', 'editor'])">
@@ -36,8 +36,21 @@
<!--Share Controls-->
<ToolbarGroup v-if="$checkPermission(['master', 'editor']) && ! $isMobile() && !$isThisLocation(['public'])">
<ToolbarButton @click.native="shareItem" :class="{'is-inactive': ! canCreateTeamFolderInView }" source="user-plus" :action="$t('actions.convert_into_team_folder')" />
<ToolbarButton @click.native="shareItem" :class="{'is-inactive': canShareInView }" source="share" :action="$t('actions.share')" />
<!--Team Folder Icon-->
<PopoverWrapper>
<TeamMembersPreview @click.stop.native="showTeamFolderMenu" count="3+" :members="members" class="team-preview" />
<PopoverItem name="team-folder" side="left">
<TeamFolderPreview />
<OptionGroup>
<Option :title="$t('Edit Members')" icon="rename" />
<Option :title="$t('Dissolve Team')" icon="trash" />
</OptionGroup>
</PopoverItem>
</PopoverWrapper>
<ToolbarButton v-if="false" @click.native="shareItem" :class="{'is-inactive': ! canCreateTeamFolderInView }" source="user-plus" :action="$t('actions.convert_into_team_folder')" />
<ToolbarButton @click.native="shareItem" :class="{'is-inactive': canShareInView }" source="share" :action="$t('actions.share')" />
</ToolbarGroup>
<!--File Controls-->
@@ -65,7 +78,6 @@
<script>
import FileSortingOptions from '/resources/js/components/FilesView/FileSortingOptions'
import {ChevronLeftIcon, MoreHorizontalIcon} from 'vue-feather-icons'
import UploadProgress from '/resources/js/components/FilesView/UploadProgress'
import PopoverWrapper from '/resources/js/components/Desktop/PopoverWrapper'
import ToolbarWrapper from '/resources/js/components/Desktop/ToolbarWrapper'
@@ -73,7 +85,10 @@
import OptionUpload from '/resources/js/components/FilesView/OptionUpload'
import ToolbarGroup from '/resources/js/components/Desktop/ToolbarGroup'
import OptionGroup from '/resources/js/components/FilesView/OptionGroup'
import TeamMembersPreview from "../Teams/Components/TeamMembersPreview"
import PopoverItem from '/resources/js/components/Desktop/PopoverItem'
import TeamFolderPreview from "../Teams/Components/TeamFolderPreview"
import {ChevronLeftIcon, MoreHorizontalIcon} from 'vue-feather-icons'
import SearchBar from '/resources/js/components/FilesView/SearchBar'
import Option from '/resources/js/components/FilesView/Option'
import {mapGetters} from 'vuex'
@@ -83,8 +98,10 @@
export default {
name: 'ToolBar',
components: {
TeamMembersPreview,
FileSortingOptions,
MoreHorizontalIcon,
TeamFolderPreview,
ChevronLeftIcon,
ToolbarWrapper,
UploadProgress,
@@ -169,7 +186,19 @@
return this.$isThisLocation(locations) && this.clipboard.length === 1 && this.clipboard[0].type === 'folder'
}
},
data() {
return {
members: [
'/temp/avatar-01.png',
'/temp/avatar-02.png',
'/temp/avatar-03.png',
],
}
},
methods: {
showTeamFolderMenu() {
events.$emit('popover:open', 'team-folder')
},
showCreateMenu() {
events.$emit('popover:open', 'desktop-create')
},
@@ -232,6 +261,20 @@
@import "resources/sass/vuefilemanager/_variables";
@import "resources/sass/vuefilemanager/_mixins";
.team-preview {
padding: 3px 3px 3px 10px;
border-radius: 8px;
cursor: pointer;
&:hover {
background: $light_background;
/deep/ .members .member {
border-color: $light_background;
}
}
}
.is-inactive {
opacity: 0.25;
pointer-events: none;

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>