user management v1.6-alpha.1

2026-04-28 11:00:39 +00:00 · 2020-05-27 10:22:33 +02:00
parent 143aca64dc
commit a76d1dec3b
54 changed files with 3489 additions and 535 deletions
@@ -0,0 +1,136 @@
+<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>
+				</span>
+                <div class="toastr-content">
+                    <p class="toastr-description">{{ item.message }}</p>
+                </div>
+            </div>
+            <div class="progressbar">
+                <span></span>
+            </div>
+        </li>
+    </transition>
+</template>
+
+<script>
+    import {XIcon, CheckIcon} from 'vue-feather-icons'
+
+    export default {
+        components: {
+            XIcon,
+            CheckIcon
+        },
+        props: ['item'],
+        data() {
+            return {
+                isActive: 0
+            }
+        },
+        created() {
+            this.isActive = 1
+
+            setTimeout(() => (this.isActive = 0), 5000)
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .fade-enter-active,
+    .fade-leave-active {
+        transition: 0.8s ease;
+    }
+
+    .fade-enter,
+    .fade-leave-to {
+        opacity: 0;
+        @include transform(translateX(100%));
+    }
+
+    .toastr-content-wrapper {
+        display: flex;
+        align-items: center;
+        padding: 15px;
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
+    }
+
+    .progressbar {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        opacity: 0.35;
+
+        span {
+            width: 0;
+            height: 3px;
+            display: block;
+            background: $theme;
+            animation: progressbar 5s linear;
+        }
+    }
+
+    @keyframes progressbar {
+        0% {
+            width: 0;
+        }
+        100% {
+            width: 100%;
+        }
+    }
+
+    .toastr-item {
+        max-width: 320px;
+        margin-bottom: 20px;
+        position: relative;
+        overflow: hidden;
+        display: block;
+        border-radius: 8px;
+
+        .toastr-description {
+            @include font-size(15);
+            font-weight: bold;
+        }
+
+        .toastr-icon {
+            height: 42px;
+            width: 42px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0;
+            font-size: 20px;
+        }
+
+        &.success {
+            background: $theme_light;
+
+            polyline {
+                stroke: $theme;
+            }
+
+            .toastr-description {
+                color: $theme;
+            }
+        }
+
+        &.danger {
+            background: rgba($danger, 0.1);
+
+            polyline {
+                stroke: $danger;
+            }
+
+            .toastr-description {
+                color: $danger;
+            }
+        }
+    }
+</style>
@@ -0,0 +1,51 @@
+<template>
+    <div id="toastr-wrapper">
+        <ToastrItem :item="item" v-for="(item, i) in notifications" :key="i"/>
+    </div>
+</template>
+
+<script>
+    import ToastrItem from '@/components/Others/Notifications/ToastrItem'
+    import {events} from "@/bus";
+
+    export default {
+        components: {
+            ToastrItem,
+        },
+        data() {
+            return {
+                notifications: []
+            }
+        },
+        created() {
+            events.$on('toaster', notification => this.notifications.push(notification))
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .toastr-list {
+        transition: all 5s ease;
+        display: inline-block;
+    }
+
+    .toastr-list-enter,
+    .toastr-list-leave-to {
+        opacity: 0;
+        transform: translateY(-100%);
+    }
+
+    .toastr-list-leave-active {
+        position: absolute;
+    }
+
+    #toastr-wrapper {
+        position: absolute;
+        right: 30px;
+        top: 30px;
+        z-index: 10;
+    }
+</style>