mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-18 08:12:15 +00:00
team list debugging
This commit is contained in:
@@ -2,13 +2,13 @@
|
||||
<div id="desktop-toolbar" class="lg:block hidden">
|
||||
<div class="toolbar-wrapper">
|
||||
<div @click="goBack" class="location">
|
||||
<chevron-left-icon :class="{'is-active': isNotHomepage }" class="icon-back" size="17" />
|
||||
<chevron-left-icon :class="{'opacity-0 -translate-x-3': ! currentFolder, 'opacity-100 translate-x-0': currentFolder }" class="icon-back transform transition-all duration-200" size="17" />
|
||||
|
||||
<span class="location-title">
|
||||
<span :class="{'-translate-x-4': ! currentFolder}" class="location-title transform transition-all duration-200">
|
||||
{{ $getCurrentLocationName() }}
|
||||
</span>
|
||||
|
||||
<span v-show="currentFolder" @click.stop="folderActions" class="location-more group" id="folder-actions">
|
||||
<span :class="{'-translate-x-4 opacity-0': ! currentFolder, 'translate-x-0 opacity-100': currentFolder}" @click.stop="folderActions" class="transform location-more group transition-all duration-200" id="folder-actions">
|
||||
<more-horizontal-icon size="14" class="icon-more group-hover-text-theme" />
|
||||
</span>
|
||||
</div>
|
||||
@@ -84,7 +84,7 @@
|
||||
</PopoverWrapper>
|
||||
|
||||
<!--Item actions-->
|
||||
<span v-if="! $isMobile()">
|
||||
<span v-if="! $isMobile()" class="whitespace-nowrap">
|
||||
<ToolbarButton v-if="canShowConvertToTeamFolder" @click.native="$convertAsTeamFolder(clipboard[0])" :class="{'is-inactive': ! canCreateTeamFolderInView }" source="user-plus" :action="$t('actions.convert_into_team_folder')" />
|
||||
<ToolbarButton v-if="! $isThisRoute($route, ['SharedWithMe', 'Public'])" @click.native="$shareFileOrFolder(clipboard[0])" :class="{'is-inactive': canShareInView }" source="share" :action="$t('actions.share')" />
|
||||
|
||||
@@ -291,12 +291,6 @@
|
||||
pointer-events: none;
|
||||
margin-right: 6px;
|
||||
flex-shrink: 0;
|
||||
opacity: 0.15;
|
||||
|
||||
&.is-active {
|
||||
opacity: 1;
|
||||
pointer-events: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.location-title {
|
||||
@@ -314,7 +308,6 @@
|
||||
padding: 1px 4px;
|
||||
line-height: 0;
|
||||
border-radius: 3px;
|
||||
@include transition(150ms);
|
||||
|
||||
svg circle {
|
||||
@include transition(150ms);
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<MenuMobile name="file-filter">
|
||||
<MenuMobileGroup>
|
||||
<OptionGroup>
|
||||
<Option @click.native="goToFiles" :title="$t('menu.files')" icon="hard-drive" :is-active="$isThisRoute($route, 'Files')" is-hover-disabled="true" />
|
||||
<Option @click.native="goToFiles" :title="$t('sidebar.home')" icon="hard-drive" :is-active="$isThisRoute($route, 'Files')" is-hover-disabled="true" />
|
||||
<Option @click.native="goToLatest" :title="$t('menu.latest')" icon="upload-cloud" :is-active="$isThisRoute($route, 'RecentUploads')" is-hover-disabled="true" />
|
||||
<Option @click.native="goToShared" :title="$t('sidebar.my_shared')" icon="share" :is-active="$isThisRoute($route, 'MySharedItems')" is-hover-disabled="true" />
|
||||
<Option @click.native="goToTrash" :title="$t('menu.trash')" icon="trash" :is-active="$isThisRoute($route, 'Trash')" is-hover-disabled="true" />
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
v-if="isVisible"
|
||||
@keyup.esc="exit"
|
||||
tabindex="-1"
|
||||
class="md:absolute fixed w-full h-full dark:bg-dark-foreground bg-white md:z-auto z-50"
|
||||
class="md:absolute fixed w-full h-full dark:bg-dark-foreground md:bg-transparent bg-white md:z-auto z-50"
|
||||
>
|
||||
<div class="relative w-full md:max-w-xl z-50 md:rounded-xl mx-auto 2xl:mt-20 md:mt-8 overflow-y-auto bg-white dark:bg-dark-foreground">
|
||||
|
||||
|
||||
@@ -1,10 +1,18 @@
|
||||
<template>
|
||||
<ul class="member-list">
|
||||
<li v-if="Object.values(members).length > 0 && entry.id !== user.data.id" v-for="(entry, i) in members" :key="i" class="member-item">
|
||||
<div @click="deleteMember(entry)" class="terminate">
|
||||
<x-icon size="14" class="close-icon" />
|
||||
<ul>
|
||||
<li
|
||||
v-if="Object.values(members).length > 0 && entry.id !== user.data.id"
|
||||
v-for="(entry, i) in members"
|
||||
:key="i"
|
||||
class="flex items-center py-2"
|
||||
>
|
||||
<!--Remove Member-->
|
||||
<div @click="deleteMember(entry)" class="cursor-pointer leading-none py-2 px-1 -ml-1.5">
|
||||
<x-icon size="14" class="vue-feather dark:text-gray-600" />
|
||||
</div>
|
||||
<div class="member-preview">
|
||||
|
||||
<!--Member Preview-->
|
||||
<div class="flex items-center">
|
||||
|
||||
<!--Avatar-->
|
||||
<MemberAvatar
|
||||
@@ -16,25 +24,28 @@
|
||||
|
||||
<!--Member-->
|
||||
<div v-if="entry.type === 'member'" class="info">
|
||||
<b class="title">
|
||||
<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
|
||||
{{ entry.name }}
|
||||
</b>
|
||||
<span class="subtitle dark:text-gray-500 text-gray-600">
|
||||
<span class="block text-xs dark:text-gray-500 text-gray-600">
|
||||
{{ entry.email }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!--Invitation-->
|
||||
<div v-if="entry.type === 'invitation'" class="info">
|
||||
<b class="title">
|
||||
<b class="text-sm font-bold block max-w-xs overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
|
||||
{{ entry.email }}
|
||||
</b>
|
||||
<span v-if="entry.id" class="subtitle">
|
||||
<span v-if="entry.id" class="block text-xs dark:text-gray-500 text-gray-600">
|
||||
{{ $t('Waiting for accept invitation...') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="action">
|
||||
|
||||
|
||||
<!--Set member permission-->
|
||||
<div class="ml-auto">
|
||||
<PermissionToggleButton @input="updateMemberPermission(entry, $event)" :item="entry" />
|
||||
</div>
|
||||
</li>
|
||||
@@ -86,62 +97,4 @@
|
||||
this.members = this.value
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "resources/sass/vuefilemanager/_inapp-forms.scss";
|
||||
@import '/resources/sass/vuefilemanager/_forms';
|
||||
|
||||
.member-list {
|
||||
max-height: 270px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.member-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 0;
|
||||
|
||||
.terminate {
|
||||
line-height: 0;
|
||||
cursor: pointer;
|
||||
|
||||
line {
|
||||
color: $light_text;
|
||||
}
|
||||
}
|
||||
|
||||
.member-preview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.info {
|
||||
|
||||
.title {
|
||||
@include font-size(15);
|
||||
font-weight: 700;
|
||||
display: block;
|
||||
max-width: 190px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
@include font-size(12);
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
|
||||
.member-item .info .email {
|
||||
color: $dark_mode_text_secondary;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
@@ -16,7 +16,19 @@
|
||||
<!--Add Member-->
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Email" v-slot="{ errors }">
|
||||
<label class="input-label">{{ $t('Add Member') }}:</label>
|
||||
<input @keypress.enter.stop.prevent="addMember" ref="email" v-model="email" :class="{'is-error': errors[0]}" type="email" class="focus-border-theme" :placeholder="$t('Type member email...')">
|
||||
|
||||
<div class="relative">
|
||||
<span
|
||||
v-if="email"
|
||||
@click="addMember"
|
||||
class="button-base theme absolute right-2 px-3 py-2 font-bold text-sm rounded-lg top-1/2 transform -translate-y-1/2 cursor-pointer"
|
||||
>
|
||||
Add
|
||||
</span>
|
||||
|
||||
<!--TODO: Fix !pr-20 after JIT official release-->
|
||||
<input @keypress.enter.stop.prevent="addMember" ref="email" v-model="email" :class="{'is-error': errors[0]}" type="email" class="focus-border-theme !pr-20" :placeholder="$t('Type member email...')">
|
||||
</div>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
|
||||
@@ -26,7 +38,10 @@
|
||||
<span v-if="errors[0]" class="error-message" style="margin-top: -5px">{{ $t('Please add at least one member.') }}</span>
|
||||
<TeamList v-model="members" />
|
||||
<TeamList v-model="invitations" />
|
||||
<p v-if="Object.values(members).length === 0 && Object.values(invitations).length === 0" class="input-help">{{ $t('Please add at least one member into your Team Folder.') }}</p>
|
||||
|
||||
<p v-if="Object.values(members).length === 0 && Object.values(invitations).length === 0" class="text-xs dark:text-gray-500">
|
||||
{{ $t('Please add at least one member into your Team Folder.') }}
|
||||
</p>
|
||||
</ValidationProvider>
|
||||
</ValidationObserver>
|
||||
|
||||
|
||||
12
resources/js/helpers/functionHelpers.js
vendored
12
resources/js/helpers/functionHelpers.js
vendored
@@ -206,11 +206,11 @@ const FunctionHelpers = {
|
||||
return store.getters.currentFolder.data.attributes.name
|
||||
} else {
|
||||
return {
|
||||
'RecentUploads': this.$t('Recent'),
|
||||
'MySharedItems': this.$t('Shared'),
|
||||
'RecentUploads': this.$t('Recent Uploads'),
|
||||
'MySharedItems': this.$t('sidebar.my_shared'),
|
||||
'Trash': this.$t('Trash'),
|
||||
'Public': this.$t('Files'),
|
||||
'Files': this.$t('Files'),
|
||||
'Files': this.$t('sidebar.home'),
|
||||
'TeamFolders': this.$t('Team Folders'),
|
||||
'SharedWithMe': this.$t('Shared With Me'),
|
||||
}[this.$route.name]
|
||||
@@ -219,11 +219,11 @@ const FunctionHelpers = {
|
||||
|
||||
Vue.prototype.$getCurrentSectionName = function () {
|
||||
return {
|
||||
'RecentUploads': this.$t('Recent'),
|
||||
'MySharedItems': this.$t('Shared'),
|
||||
'RecentUploads': this.$t('Recent Uploads'),
|
||||
'MySharedItems': this.$t('sidebar.my_shared'),
|
||||
'Trash': this.$t('Trash'),
|
||||
'Public': this.$t('Files'),
|
||||
'Files': this.$t('Files'),
|
||||
'Files': this.$t('sidebar.home'),
|
||||
'TeamFolders': this.$t('Team Folders'),
|
||||
'SharedWithMe': this.$t('Shared With Me'),
|
||||
}[this.$route.name]
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
</OptionGroup>
|
||||
<OptionGroup v-if="item">
|
||||
<Option @click.native="$shareFileOrFolder(item)" :title="item.data.relationships.shared ? $t('context_menu.share_edit') : $t('context_menu.share')" icon="share" />
|
||||
<Option @click.native="$updateTeamFolder(item)" v-if="isFolder" :title="$t('Convert as Team Folder')" icon="users" />
|
||||
<Option @click.native="$convertAsTeamFolder(item)" v-if="isFolder" :title="$t('Convert as Team Folder')" icon="users" />
|
||||
</OptionGroup>
|
||||
|
||||
<OptionGroup v-if="item">
|
||||
|
||||
Reference in New Issue
Block a user