team list debugging

This commit is contained in:
Čarodej
2021-11-01 18:24:05 +01:00
parent bf4d860bb8
commit ffbf809b1e
9 changed files with 140 additions and 98 deletions

View File

@@ -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);

View File

@@ -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" />

View File

@@ -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">

View File

@@ -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>

View File

@@ -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>

View File

@@ -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]

View File

@@ -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">