Initial commit

resources/js/components/VueFileManagerComponents/FilesView/Alert.vue

@@ -0,0 +1,230 @@
+<template>
+    <transition name="vignette">
+        <div class="popup" v-show="isVisibleWrapper">
+            <transition name="popup">
+                <div v-show="isVisiblePopup" class="popup-wrapper">
+                    <div class="popup-image">
+                        <span class="emoji">{{ emoji }}</span>
+                    </div>
+                    <div class="popup-content">
+                        <h1 v-if="title" class="title">{{ title }}</h1>
+                        <p v-if="message" class="message">{{ message }}</p>
+                    </div>
+                    <div class="popup-actions">
+                        <ButtonBase
+                                @click.native="closePopup"
+                                :button-style="buttonStyle"
+                                class="action-confirm"
+                        >{{ button }}
+                        </ButtonBase>
+                    </div>
+                </div>
+            </transition>
+            <div class="popup-vignette" @click="closePopup"></div>
+        </div>
+    </transition>
+</template>
+
+<script>
+    import ButtonBase from '@/components/VueFileManagerComponents/FilesView/ButtonBase'
+    import {events} from '@/bus'
+
+    export default {
+        name: 'AlertPopup',
+        components: {
+            ButtonBase
+        },
+        data() {
+            return {
+                isVisibleWrapper: false,
+                buttonStyle: undefined,
+                isVisiblePopup: false,
+                message: undefined,
+                title: undefined,
+                button: undefined,
+                emoji: undefined,
+            }
+        },
+        methods: {
+            closePopup() {
+                // Emit event
+                events.$emit('alert:close')
+
+                // Hide popup wrapper
+                this.isVisibleWrapper = false
+                this.isVisiblePopup = false
+            }
+        },
+        mounted() {
+            // Show alert
+            events.$on('alert:open', args => {
+                this.isVisibleWrapper = true
+                this.isVisiblePopup = true
+
+                this.title = args.title
+                this.message = args.message
+
+                this.button = 'That’s horrible!'
+                this.emoji = '😢😢😢'
+                this.buttonStyle = 'danger'
+            })
+
+            // Show alert
+            events.$on('success:open', args => {
+                this.isVisibleWrapper = true
+                this.isVisiblePopup = true
+
+                this.title = args.title
+                this.message = args.message
+
+                this.button = 'Awesome!'
+                this.emoji = '🥳🥳🥳'
+                this.buttonStyle = 'theme'
+            })
+
+            // Close popup
+            events.$on('popup:close', () => {
+                this.isVisiblePopup = false
+                this.isVisibleWrapper = false
+            })
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    @import "@assets/app.scss";
+
+    .popup {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 20;
+        overflow: auto;
+
+        .popup-vignette {
+            position: absolute;
+            top: 0;
+            right: 0;
+            left: 0;
+            bottom: 0;
+            background: rgba(255, 255, 255, 0.5);
+        }
+    }
+
+    .popup-wrapper {
+        z-index: 12;
+        position: absolute;
+        left: 0;
+        right: 0;
+        max-width: 480px;
+        top: 50%;
+        transform: translateY(-50%) scale(1);
+        margin: 0 auto;
+        padding: 40px;
+        box-shadow: 0 7px 250px rgba(25, 54, 60, 0.2);
+        border-radius: 8px;
+        text-align: center;
+        background: white;
+    }
+
+    .popup-image {
+        margin-bottom: 30px;
+
+        .emoji {
+            @include font-size(56);
+            line-height: 1;
+        }
+    }
+
+    .popup-content {
+        .title {
+            @include font-size(22);
+            text-transform: uppercase;
+            font-weight: 800;
+            color: $text;
+        }
+
+        .message {
+            @include font-size(16);
+            color: #8b8f9a;
+            margin-top: 5px;
+        }
+    }
+
+    .popup-actions {
+        margin-top: 30px;
+
+        .action-confirm {
+            width: 100%;
+        }
+    }
+
+    // Small screen size
+    .small {
+        .popup-wrapper {
+            padding: 40px 20px 20px;
+            left: 15px;
+            right: 15px;
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+        .popup .popup-vignette {
+            background: $dark_mode_vignette;
+        }
+
+        .popup-wrapper {
+            background: $dark_mode_foreground;
+        }
+
+        .popup-content {
+            .title {
+                color: $dark_mode_text_primary;
+            }
+
+            .message {
+                color: $dark_mode_text_secondary;
+            }
+        }
+    }
+
+    // Animations
+    .popup-enter-active {
+        animation: popup-in 0.35s 0.15s ease both;
+    }
+
+    .popup-leave-active {
+        animation: popup-in 0.15s ease reverse;
+    }
+
+    @keyframes popup-in {
+        0% {
+            opacity: 0;
+            transform: translateY(-50%) scale(0.7);
+        }
+        100% {
+            opacity: 1;
+            transform: translateY(-50%) scale(1);
+        }
+    }
+
+    .vignette-enter-active {
+        animation: vignette-in 0.15s ease;
+    }
+
+    .vignette-leave-active {
+        animation: vignette-in 0.15s 0.15s ease reverse;
+    }
+
+    @keyframes vignette-in {
+        0% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
+</style>