vue frontend update

resources/js/components/VueFileManagerComponents/Others/Popup/PopupActions.vue

@@ -0,0 +1,40 @@
+<template>
+    <div class="actions">
+        <slot></slot>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'PopupActions',
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import "@assets/app.scss";
+
+    .actions {
+        padding: 20px;
+        margin: 0 -10px;
+        display: flex;
+
+        .popup-button {
+            width: 100%;
+            margin: 0 10px;
+        }
+    }
+
+    .small {
+        .actions {
+            padding: 15px;
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+    }
+</style>

resources/js/components/VueFileManagerComponents/Others/Popup/PopupContent.vue

@@ -0,0 +1,62 @@
+<template>
+    <div class="popup-content" :class="type">
+        <slot></slot>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'PopupContent',
+        props: [
+            'type'
+        ]
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import "@assets/app.scss";
+
+    .popup-content {
+
+        &.height-limited {
+            height: 400px;
+            overflow-y: auto;
+        }
+    }
+
+    .small {
+
+        .popup-content {
+            top: 57px;
+            bottom: 72px;
+            position: absolute;
+            left: 0;
+            right: 0;
+            height: initial;
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+    }
+
+    @keyframes popup-in {
+        0% {
+            opacity: 0;
+            transform: scale(0.7);
+        }
+        100% {
+            opacity: 1;
+            transform: scale(1);
+        }
+    }
+
+    @keyframes popup-slide-in {
+        0% {
+            transform: translateY(100%);
+        }
+        100% {
+            transform: translateY(0);
+        }
+    }
+</style>

resources/js/components/VueFileManagerComponents/Others/Popup/PopupHeader.vue

@@ -0,0 +1,52 @@
+<template>
+    <div class="popup-header">
+        <h1 class="title">{{ title }}</h1>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'PopupHeader',
+        props: [
+            'title'
+        ]
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import "@assets/app.scss";
+
+    .popup-header {
+        padding: 20px;
+
+        .title {
+            @include font-size(18);
+            font-weight: 700;
+            color: $text;
+        }
+
+        .message {
+            @include font-size(16);
+            color: #8b8f9a;
+            margin-top: 5px;
+        }
+    }
+
+    .small {
+        .popup-header {
+            padding: 15px;
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .popup-header {
+            .title {
+                color: $dark_mode_text_primary;
+            }
+
+            .message {
+                color: $dark_mode_text_secondary;
+            }
+        }
+    }
+</style>

resources/js/components/VueFileManagerComponents/Others/Popup/PopupWrapper.vue

@@ -0,0 +1,142 @@
+<template>
+    <transition name="popup">
+        <div class="popup" @click.self="closePopup" v-show="isVisibleWrapper">
+            <div class="popup-wrapper">
+                <slot></slot>
+            </div>
+        </div>
+    </transition>
+</template>
+
+<script>
+    import {events} from '@/bus'
+
+    export default {
+        name: 'PopupWrapper',
+        props: [
+            'name'
+        ],
+        data() {
+            return {
+                isVisibleWrapper: false,
+            }
+        },
+        methods: {
+            closePopup() {
+                events.$emit('popup:close')
+            }
+        },
+        created() {
+
+            // Open called popup
+            events.$on('popup:open', ({name}) => {
+
+                if (this.name === name) this.isVisibleWrapper = true
+            })
+
+            // Close popup
+            events.$on('popup:close', () => {
+
+                // Close popup
+                this.isVisibleWrapper = false
+            })
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import "@assets/app.scss";
+
+    .popup {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 20;
+        overflow-y: auto;
+        display: grid;
+        padding: 40px;
+    }
+
+    .popup-wrapper {
+        box-shadow: $light_mode_popup_shadow;
+        border-radius: 8px;
+        background: white;
+        margin: auto;
+        width: 480px;
+        z-index: 12;
+    }
+
+    // Desktop, tablet
+    .medium, .large {
+
+        // Animations
+        .popup-enter-active {
+            animation: popup-in 0.35s 0.15s ease both;
+        }
+
+        .popup-leave-active {
+            animation: popup-in 0.15s ease reverse;
+        }
+    }
+
+    .small {
+        .popup {
+            overflow: hidden;
+        }
+
+        .popup-wrapper {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            right: 0;
+            left: 0;
+            transform: translateY(0) scale(1);
+            box-shadow: none;
+            width: 100%;
+            border-radius: 0px;
+        }
+
+        // Animations
+        .popup-enter-active {
+            animation: popup-slide-in 0.35s 0.15s ease both;
+        }
+
+        .popup-leave-active {
+            animation: popup-slide-in 0.15s ease reverse;
+        }
+    }
+
+    @keyframes popup-in {
+        0% {
+            opacity: 0;
+            transform: scale(0.7);
+        }
+        100% {
+            opacity: 1;
+            transform: scale(1);
+        }
+    }
+    @keyframes popup-slide-in {
+        0% {
+            transform: translateY(100%);
+        }
+        100% {
+            transform: translateY(0);
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .popup-wrapper {
+            background: $dark_mode_background;
+            box-shadow: $dark_mode_popup_shadow;
+        }
+    }
+
+    @media (prefers-color-scheme: dark) and (max-width: 690px) {
+        .popup-wrapper {
+            background: $dark_mode_background;
+        }
+    }
+</style>