nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-28 11:00:39 +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
resources/js/components/FilesView/DesktopToolbar.vue
+48 -5
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;
resources/js/components/Teams/Components/TeamFolderPreview.vue
+58
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>
resources/js/components/Teams/Components/TeamMembersPreview.vue
+54
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>
resources/js/views/FilePages/Files.vue
+35 -11
View File
@@ -46,6 +46,28 @@
</div>
</ContentGroup>
<!--Locations-->
<ContentGroup :title="$t('Collaboration')" :can-collapse="true">
<div class="menu-list-wrapper vertical">
<a class="menu-list-item link" :class="{'is-active': $isThisLocation(['base'])}" @click="goHome">
<div class="icon text-theme">
<users-icon size="17" />
</div>
<div class="label text-theme">
{{ $t('Team Folders') }}
</div>
</a>
<a class="menu-list-item link" :class="{'is-active': $isThisLocation(['latest'])}" @click="getLatest">
<div class="icon text-theme">
<user-check-icon size="17" />
</div>
<div class="label text-theme">
{{ $t('Shared with Me') }}
</div>
</a>
</div>
</ContentGroup>
<!--Navigator-->
<ContentGroup :title="$t('sidebar.navigator_title')" slug="navigator" :can-collapse="true" class="navigator">
<span class="empty-note navigator" v-if="tree.length === 0">
@@ -82,20 +104,21 @@
<script>
import UpgradeSidebarBanner from '/resources/js/components/Others/UpgradeSidebarBanner'
import TreeMenuNavigator from '/resources/js/components/Others/TreeMenuNavigator'
import TitlePreview from '/resources/js/components/FilesView/TitlePreview'
import ContentFileView from '/resources/js/components/Others/ContentFileView'
import ContentSidebar from '/resources/js/components/Sidebar/ContentSidebar'
import TitlePreview from '/resources/js/components/FilesView/TitlePreview'
import ContentGroup from '/resources/js/components/Sidebar/ContentGroup'
import { mapGetters } from 'vuex'
import { events } from '/resources/js/bus'
import {
UploadCloudIcon,
UserCheckIcon,
FolderIcon,
Trash2Icon,
HomeIcon,
XIcon,
LinkIcon,
UsersIcon,
HomeIcon,
LinkIcon,
XIcon,
} from 'vue-feather-icons'
export default {
@@ -104,24 +127,25 @@ export default {
UpgradeSidebarBanner,
TreeMenuNavigator,
ContentFileView,
TitlePreview,
ContentSidebar,
UploadCloudIcon,
ContentSidebar,
UserCheckIcon,
TitlePreview,
ContentGroup,
FolderIcon,
Trash2Icon,
HomeIcon,
XIcon,
LinkIcon,
UsersIcon,
HomeIcon,
LinkIcon,
XIcon,
},
computed: {
...mapGetters([
'user',
'homeDirectory',
'currentFolder',
'clipboard',
'config',
'clipboard'
'user',
]),
favourites() {
return this.user.data.relationships.favourites.data.attributes.folders