TypedAvatar.vue colored background

resources/js/components/FilesView/DesktopToolbar.vue

@@ -16,9 +16,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'])">
@@ -125,11 +125,7 @@
 				'clipboard',
 			]),
 			isLoadedFolder() {
-				if (this.sharedDetail && this.sharedDetail.data.attributes.item_id === this.$route.params.id) {
-					return false
-				}
-
-				return this.$route.params.id
+				return this.sharedDetail && this.sharedDetail.data.attributes.item_id === this.$route.params.id
 			},
 			hasCapacity() {
 				// Check if storage limitation is set
@@ -190,6 +186,7 @@
 			},
 			canShareInView() {
 				let routes = [
+					'TeamFolders',
 					'RecentUploads',
 					'MySharedItems',
 					'Public',

resources/js/components/FilesView/FolderIcon.vue

@@ -99,7 +99,7 @@
 	&.is-team {
 		path {
 			fill: transparent;
-			stroke-width: 20px;
+			stroke-width: 26px;
 			stroke: inherit;
 		}
 	}

resources/js/components/FilesView/InfoSidebar.vue

@@ -38,13 +38,6 @@
 				:content="singleFile.data.attributes.filesize"
 			/>
 
-			<!--Participant-->
-<!--            <ListInfoItem
-				v-if="$checkPermission(['master']) && singleFile.author !== 'user'"
-				:title="$t('file_detail.author')"
-				:content="$t('file_detail.author_participant')"
-			/>-->
-
 			<!--Created At-->
             <ListInfoItem
 				:title="$t('file_detail.created_at')"
@@ -62,6 +55,17 @@
                 </div>
             </ListInfoItem>
 
+			<!--Location-->
+            <ListInfoItem
+				v-if="singleFile.data.attributes.isTeamFolder"
+				:title="$t('Shared with the Team')"
+			>
+                <div class="action-button" @click="$updateTeamFolder(singleFile)">
+                    <TeamMembersPreview :folder="singleFile" :avatar-size="32" />
+                    <edit-2-icon size="10" class="edit-icon" />
+                </div>
+            </ListInfoItem>
+
 			<!--Shared-->
             <ListInfoItem
 				v-if="$checkPermission('master') && singleFile.data.relationships.shared"
@@ -90,6 +94,7 @@
 </template>
 
 <script>
+	import TeamMembersPreview from "../Teams/Components/TeamMembersPreview"
 	import FilePreviewDetail from '/resources/js/components/Others/FilePreviewDetail'
     import {Edit2Icon, LockIcon, UnlockIcon} from 'vue-feather-icons'
 	import ImageMetaData from '/resources/js/components/FilesView/ImageMetaData'
@@ -104,6 +109,7 @@
 	export default {
 		name: 'InfoSidebar',
 		components: {
+			TeamMembersPreview,
 			FilePreviewDetail,
 			ImageMetaData,
 			EmptyMessage,

resources/js/components/FilesView/SearchBar.vue

@@ -46,7 +46,7 @@
         .message {
             border-radius: 8px;
             padding: 11px 20px;
-            min-width: 300px;
+			width: 300px;
 			text-align: left;
 			display: flex;
 			justify-content: space-between;
@@ -59,6 +59,13 @@
         }
     }
 
+    @media only screen and (max-width: 1290px) {
+
+        .search-bar .message {
+            width: 230px;
+        }
+    }
+
     @media only screen and (max-width: 1024px) {
 
         .search-bar .message {

resources/js/components/Others/ListInfoItem.vue

@@ -23,10 +23,12 @@
 
         .action-button {
             cursor: pointer;
+			display: flex;
+			align-items: center;
 
             .edit-icon {
                 display: inline-block;
-                margin-left: 3px;
+                margin-left: 7px;
             }
         }
 

resources/js/components/Others/Notifications/ToasterWrapper.vue

@@ -45,14 +45,13 @@
     #toastr-wrapper {
         position: absolute;
         right: 30px;
-        top: 30px;
+        bottom: 30px;
         z-index: 90;
     }
 
     @media only screen and (max-width: 690px) {
 
         #toastr-wrapper {
-            top: initial;
             right: 15px;
             left: 15px;
             bottom: 15px;

resources/js/components/Others/TypedAvatar.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="typed-avatar" :style="{width: size + 'px', height: size + 'px'}">
+	<div class="typed-avatar" :style="{width: size + 'px', height: size + 'px', background: color ? color : '#f4f5f6'}">
 		<span class="letter">{{ letter }}</span>
 	</div>
 </template>
@@ -9,6 +9,7 @@ export default {
 	name: "TypedAvatar",
 	props: [
 		'letter',
+		'color',
 		'size',
 	]
 }

resources/js/components/Spotlight/Spotlight.vue

@@ -153,12 +153,9 @@ export default {
 					params: {query: value}
 				})
 				.then(response => {
-
 					let files = response.data.files.data
 					let folders = response.data.folders.data
 
-					console.log(files);
-
 					this.results = folders.concat(files)
 				})
 				.catch(() => this.$isSomethingWrong())

resources/js/components/Teams/Components/TeamList.vue

@@ -7,7 +7,7 @@
 			<div class="member-preview">
 				<div class="avatar">
 					<img v-if="entry.avatar" :src="entry.avatar" alt="avatar">
-					<TypedAvatar v-else :size="38" :letter="entry.email.substr(0, 1)" />
+					<TypedAvatar v-else :size="38" :letter="entry.email.substr(0, 1)" :color="entry.color"/>
 				</div>
 				<div v-if="entry.type === 'member'" class="info">
 					<b class="title">{{ entry.name }}</b>

resources/js/components/Teams/Components/TeamMembersButton.vue

@@ -32,7 +32,7 @@
 		width: 107px;
 
 		.widget {
-			justify-content: flex-end;
+			justify-content: center;
 		}
 	}
 

resources/js/components/Teams/Components/TeamMembersPreview.vue

@@ -1,12 +1,12 @@
 <template>
 	<div class="team-folder">
-		<span v-if="limit" class="member-count">
-			{{ membersCount > 3 ? '3+' : membersCount }}
+		<span v-if="limit && membersCount > 3" class="member-count">
+			3+
 		</span>
 		<div class="members">
 			<div v-for="member in members" :key="member.data.id" :title="member.data.attributes.email" class="member-preview">
 				<img v-if="member.data.attributes.avatar" :src="member.data.attributes.avatar" class="member" alt="avatar">
-				<TypedAvatar v-else :size="avatarSize" :letter="member.data.attributes.email.substr(0, 1)" />
+				<TypedAvatar v-else :size="avatarSize" :letter="member.data.attributes.email.substr(0, 1)" :color="member.data.attributes.color" />
 			</div>
 		</div>
 	</div>

resources/js/components/Teams/CreateTeamFolderPopup.vue

@@ -16,14 +16,14 @@
                 <!--Set folder name-->
                 <ValidationProvider v-if="isNewFolderTeamCreation" tag="div" mode="passive" class="input-wrapper password" name="Name" rules="required" v-slot="{ errors }">
                     <label class="input-label">{{ $t('popup_create_folder.label') }}:</label>
-                    <input v-model="name" :class="{'is-error': errors[0]}" type="text" ref="input" :placeholder="$t('popup_create_folder.placeholder')">
+                    <input v-model="name" :class="{'is-error': errors[0]}" type="text" ref="name" class="focus-border-theme" :placeholder="$t('popup_create_folder.placeholder')">
                     <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                 </ValidationProvider>
 
                 <!--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" v-model="email" :class="{'is-error': errors[0]}" type="email" class="focus-border-theme" :placeholder="$t('Type member email...')">
+					<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...')">
 					<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
 				</ValidationProvider>
 
@@ -121,7 +121,7 @@
 
 				let route = this.name
 					? `/api/teams/folders`
-					: `/api/teams/convert/${this.item.id}`
+					: `/api/teams/convert/${this.item.data.id}`
 
 				let payload = this.name
 					? {
@@ -176,9 +176,16 @@
             events.$on('popup:open', args => {
                 if (args.name !== 'create-team-folder') return
 
-				if (args.item) {
-					this.item = args.item
-				}
+				this.item = args.item
+
+				this.$nextTick(() => {
+
+					if (this.item)
+						this.$refs.email.focus()
+
+					if (! this.item)
+						this.$refs.name.focus()
+				})
             })
 
 			events.$on('popup:close', () => {

resources/js/components/Teams/EditTeamFolderPopup.vue

@@ -16,7 +16,7 @@
                 <!--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" v-model="email" :class="{'is-error': errors[0]}" type="email" class="focus-border-theme" :placeholder="$t('Type member email...')">
+					<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...')">
 					<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
 				</ValidationProvider>
 
@@ -160,6 +160,7 @@
 						email: member.data.attributes.email,
 						name: member.data.attributes.name,
 						avatar: member.data.attributes.avatar,
+						color: member.data.attributes.color,
 						permission: member.data.attributes.permission,
 					}
 				})
@@ -169,9 +170,14 @@
 						id: member.data.id,
 						type: 'invitation',
 						email: member.data.attributes.email,
+						color: member.data.attributes.color,
 						permission: member.data.attributes.permission,
 					}
 				})
+
+				this.$nextTick(() => {
+					this.$refs.email.focus()
+				})
             })
 
 			events.$on('popup:close', () => {