clear SharedWithMe.vue view

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

@@ -1,16 +1,16 @@
 <template>
     <transition appear name="fade">
-        <li class="toastr-item" :class="item.type" v-show="isActive">
-            <div class="toastr-content-wrapper">
-				<span class="toastr-icon">
-					<check-icon v-if="item.type == 'success'" size="22"></check-icon>
-					<x-icon v-if="item.type == 'danger'" size="22"></x-icon>
+        <li v-show="isActive" class="toaster-item" :class="item.type">
+            <div class="toaster-content-wrapper">
+				<span class="toaster-icon">
+					<check-icon v-if="item.type === 'success'" size="22" />
+					<x-icon v-if="item.type === 'danger'" size="22" />
 				</span>
-                <div class="toastr-content">
-                    <p class="toastr-description">{{ item.message }}</p>
+                <div class="toaster-content">
+                    <p class="toaster-description">{{ item.message }}</p>
                 </div>
             </div>
-            <div class="progressbar">
+            <div :class="{'success': item.type === 'success', 'danger': item.type === 'danger'}" class="progressbar">
                 <span></span>
             </div>
         </li>
@@ -22,10 +22,12 @@
 
     export default {
         components: {
+            CheckIcon,
             XIcon,
-            CheckIcon
         },
-        props: ['item'],
+        props: [
+			'item'
+		],
         data() {
             return {
                 isActive: 0
@@ -34,7 +36,7 @@
         created() {
             this.isActive = 1
 
-            setTimeout(() => (this.isActive = 0), 5000)
+            setTimeout(() => (this.isActive = 0), 55000)
         }
     }
 </script>
@@ -54,7 +56,7 @@
         @include transform(translateX(100%));
     }
 
-    .toastr-content-wrapper {
+    .toaster-content-wrapper {
         display: flex;
         align-items: center;
         padding: 15px;
@@ -72,9 +74,16 @@
             width: 0;
             height: 3px;
             display: block;
-            background: $theme;
             animation: progressbar 5s linear;
         }
+
+		&.success span {
+            background: $theme;
+		}
+
+		&.danger span {
+            background: $danger;
+		}
     }
 
     @keyframes progressbar {
@@ -86,7 +95,7 @@
         }
     }
 
-    .toastr-item {
+    .toaster-item {
         max-width: 320px;
         margin-bottom: 20px;
         position: relative;
@@ -94,12 +103,12 @@
         display: block;
         border-radius: 8px;
 
-        .toastr-description {
+        .toaster-description {
             @include font-size(15);
             font-weight: bold;
         }
 
-        .toastr-icon {
+        .toaster-icon {
             height: 42px;
             width: 42px;
             display: inline-flex;
@@ -113,11 +122,11 @@
         &.success {
             background: $theme_light;
 
-            polyline {
+            line {
                 stroke: $theme;
             }
 
-            .toastr-description {
+            .toaster-description {
                 color: $theme;
             }
         }
@@ -125,11 +134,11 @@
         &.danger {
             background: rgba($danger, 0.1);
 
-            polyline {
+            line {
                 stroke: $danger;
             }
 
-            .toastr-description {
+            .toaster-description {
                 color: $danger;
             }
         }
@@ -137,7 +146,7 @@
 
     @media only screen and (max-width: 690px) {
 
-        .toastr-item {
+        .toaster-item {
             margin-bottom: 0;
             margin-top: 20px;
             max-width: 100%;
@@ -151,7 +160,7 @@
     }
 
     .dark-mode {
-        .toastr-item {
+        .toaster-item {
 
             &.success, &.danger {
                 background: $dark_mode_foreground;

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

@@ -1,5 +1,5 @@
 <template>
-    <div id="toastr-wrapper">
+    <div id="toaster-wrapper">
         <ToasterItem :item="item" v-for="(item, i) in notifications" :key="i"/>
     </div>
 </template>
@@ -27,22 +27,22 @@
     @import '/resources/sass/vuefilemanager/_variables';
     @import '/resources/sass/vuefilemanager/_mixins';
 
-    .toastr-list {
+    .toaster-list {
         transition: all 5s ease;
         display: inline-block;
     }
 
-    .toastr-list-enter,
-    .toastr-list-leave-to {
+    .toaster-list-enter,
+    .toaster-list-leave-to {
         opacity: 0;
         transform: translateY(-100%);
     }
 
-    .toastr-list-leave-active {
+    .toaster-list-leave-active {
         position: absolute;
     }
 
-    #toastr-wrapper {
+    #toaster-wrapper {
         position: absolute;
         right: 30px;
         bottom: 30px;
@@ -51,7 +51,7 @@
 
     @media only screen and (max-width: 690px) {
 
-        #toastr-wrapper {
+        #toaster-wrapper {
             right: 15px;
             left: 15px;
             bottom: 15px;

resources/js/components/Teams/EditTeamFolderPopup.vue

@@ -4,13 +4,13 @@
         <!--Title-->
         <PopupHeader :title="$t('Edit Team Folder')" icon="user-plus" />
 
-        <!--Content-->
+		<!--Content-->
         <PopupContent>
 
 			<!--Item Thumbnail-->
             <ThumbnailItem class="item-thumbnail" :item="item" info="metadata" />
 
-            <!--Form to set team folder-->
+			<!--Form to set team folder-->
             <ValidationObserver @submit.prevent="updateTeamFolder" ref="teamFolderForm" v-slot="{ invalid }" tag="form" class="form-wrapper">
 
                 <!--Add Member-->
@@ -32,21 +32,21 @@
 
         </PopupContent>
 
-        <!--Actions-->
+		<!--Actions-->
         <PopupActions>
             <ButtonBase
-                    class="popup-button"
-                    @click.native="$closePopup()"
-                    button-style="secondary"
-            >{{ $t('popup_move_item.cancel') }}
+				class="popup-button"
+				@click.native="$closePopup()"
+				button-style="secondary"
+			>{{ $t('popup_move_item.cancel') }}
             </ButtonBase>
             <ButtonBase
-                    class="popup-button"
-                    @click.native="updateTeamFolder"
-                    :button-style="isDisabledSubmit ? 'secondary' : 'theme'"
-					:loading="isLoading"
-					:disabled="isLoading || isDisabledSubmit"
-            >{{ $t('Update Team Folder') }}
+				class="popup-button"
+				@click.native="updateTeamFolder"
+				:button-style="isDisabledSubmit ? 'secondary' : 'theme'"
+				:loading="isLoading"
+				:disabled="isLoading || isDisabledSubmit"
+			>{{ $t('Update Team Folder') }}
             </ButtonBase>
         </PopupActions>
     </PopupWrapper>
@@ -54,50 +54,50 @@
 
 <script>
     import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
-    import PopupWrapper from '/resources/js/components/Others/Popup/PopupWrapper'
-    import PopupActions from '/resources/js/components/Others/Popup/PopupActions'
-    import PopupContent from '/resources/js/components/Others/Popup/PopupContent'
-    import PopupHeader from '/resources/js/components/Others/Popup/PopupHeader'
-    import ThumbnailItem from '/resources/js/components/Others/ThumbnailItem'
-    import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
+	import PopupWrapper from '/resources/js/components/Others/Popup/PopupWrapper'
+	import PopupActions from '/resources/js/components/Others/Popup/PopupActions'
+	import PopupContent from '/resources/js/components/Others/Popup/PopupContent'
+	import PopupHeader from '/resources/js/components/Others/Popup/PopupHeader'
+	import ThumbnailItem from '/resources/js/components/Others/ThumbnailItem'
+	import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
 	import TeamList from "./Components/TeamList";
-    import {required} from 'vee-validate/dist/rules'
+	import {required} from 'vee-validate/dist/rules'
 	import InfoBox from "../Others/Forms/InfoBox";
-    import {events} from '/resources/js/bus'
+	import {events} from '/resources/js/bus'
 	import axios from "axios";
 
-    export default {
-        name: 'UpdateTeamFolderPopup',
-        components: {
-            ValidationProvider,
-            ValidationObserver,
+	export default {
+		name: 'UpdateTeamFolderPopup',
+		components: {
+			ValidationProvider,
+			ValidationObserver,
 			TeamList,
-            ThumbnailItem,
-            PopupWrapper,
-            PopupActions,
-            PopupContent,
-            PopupHeader,
-            ButtonBase,
-            required,
+			ThumbnailItem,
+			PopupWrapper,
+			PopupActions,
+			PopupContent,
+			PopupHeader,
+			ButtonBase,
+			required,
 			InfoBox,
-        },
-        computed: {
+		},
+		computed: {
 			isDisabledSubmit() {
 				return Object.values(this.members).length === 0 && Object.values(this.invitations).length === 0
 			}
-        },
-        data() {
-            return {
-            	invitations: [],
-            	members: [],
-                item: undefined,
-                name: undefined,
+		},
+		data() {
+			return {
+				invitations: [],
+				members: [],
+				item: undefined,
+				name: undefined,
 				email: undefined,
 				isLoading: false,
-            }
-        },
-        methods: {
-            async updateTeamFolder() {
+			}
+		},
+		methods: {
+			async updateTeamFolder() {
 				const isValid = await this.$refs.teamFolderForm.validate()
 
 				if (!isValid) return
@@ -117,7 +117,12 @@
 							message: this.$t('Your team folder was updated'),
 						})
 					})
-					.catch(() => this.$isSomethingWrong())
+					.catch(() => {
+						events.$emit('toaster', {
+							type: 'danger',
+							message: this.$t('popup_error.title'),
+						})
+					})
 					.finally(() => {
 						this.isLoading = false
 						this.name = undefined
@@ -126,11 +131,11 @@
 
 						this.$closePopup()
 					})
-            },
+			},
 			addMember() {
-            	let email = this.email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)[0]
+				let email = this.email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)[0]
 
-            	if (! email) {
+				if (!email) {
 					this.$refs.teamFolderForm.setErrors({
 						'Email': this.$t("You have to type valid email")
 					});
@@ -138,7 +143,7 @@
 
 				this.$refs.teamFolderForm.reset()
 
-            	this.invitations.push({
+				this.invitations.push({
 					type: 'invitation',
 					email: this.email,
 					permission: 'can-edit',
@@ -146,10 +151,10 @@
 
 				this.email = undefined
 			}
-        },
-        mounted() {
-            events.$on('popup:open', args => {
-                if (args.name !== 'update-team-folder') return
+		},
+		mounted() {
+			events.$on('popup:open', args => {
+				if (args.name !== 'update-team-folder') return
 
 				this.item = args.item
 
@@ -178,7 +183,7 @@
 				this.$nextTick(() => {
 					this.$refs.email.focus()
 				})
-            })
+			})
 
 			events.$on('popup:close', () => {
 				setTimeout(() => {
@@ -189,15 +194,15 @@
 					this.members = []
 				}, 150)
 			})
-        }
-    }
+		}
+	}
 </script>
 
 <style scoped lang="scss">
     @import "resources/sass/vuefilemanager/_inapp-forms.scss";
-    @import '/resources/sass/vuefilemanager/_forms';
+	@import '/resources/sass/vuefilemanager/_forms';
 
-    .item-thumbnail {
-        margin-bottom: 20px;
-    }
+	.item-thumbnail {
+		margin-bottom: 20px;
+	}
 </style>