frontend & backend update

2026-04-28 02:50:39 +00:00 · 2020-06-19 08:03:29 +02:00
parent 95bc310def
commit a2cab6198e
83 changed files with 4464 additions and 1907 deletions
@@ -136,6 +136,7 @@
    }

    .popup-content {
+
        .title {
            @include font-size(22);
            text-transform: uppercase;
@@ -110,7 +110,8 @@
                'homeDirectory',
            ]),
            hasCapacity() {
-                return this.$store.getters.user.relationships.storage.data.attributes.used <= 100
+                //return this.$store.getters.user.relationships.storage.data.attributes.used <= 100
+                return true
            },
            directoryName() {
                return this.currentFolder ? this.currentFolder.name : this.homeDirectory.name
@@ -37,6 +37,11 @@
            color: $theme;
            background: rgba($theme, 0.1);
        }
+
+        &.red {
+            color: $danger;
+            background: rgba($danger, 0.1);
+        }
    }

    @media only screen and (max-width: 1024px) {
@@ -1,12 +1,21 @@
 <template>
    <div class="page-tab">
-        <slot></slot>
+        <div id="loader" v-if="isLoading">
+            <Spinner></Spinner>
+        </div>
+        <slot v-if="! isLoading"></slot>
    </div>
 </template>

 <script>
+    import Spinner from '@/components/FilesView/Spinner'
+
    export default {
        name: 'PageTab',
+        props: ['isLoading'],
+        components: {
+            Spinner,
+        },
    }
 </script>

@@ -15,7 +15,7 @@
                </section>
                <footer class="plan-footer">
                    <b class="price">
-                        {{ plan.data.attributes.price }} USD/Mo.
+                        {{ plan.data.attributes.price }}/Mo.
                    </b>
                    <ButtonBase @click.native="selectPlan(plan)" type="submit" button-style="secondary" class="sign-in-button">
                        Sign Up
@@ -52,12 +52,7 @@

            axios.get('/api/public/pricing')
                .then(response => {
-                    this.plans = response.data.data.filter(plan => {
-                        if (this.$store.getters.user.relationships.subscription)
-                            return plan.data.attributes.capacity > this.$store.getters.user.relationships.subscription.data.attributes.capacity
-
-                        return true
-                    })
+                    this.plans = response.data
                    this.$emit('load', false)
                })
        }
@@ -72,6 +67,7 @@
        text-align: center;
        flex: 0 0 33%;
        padding: 0 25px;
+        margin-bottom: 45px;

        .plan-wrapper {
            box-shadow: 0 7px 20px 5px hsla(220, 36%, 16%, 0.03);
@@ -0,0 +1,133 @@
+<template>
+    <PopupWrapper>
+
+        <div class="popup-image">
+            <span class="emoji">{{ emoji }}</span>
+        </div>
+
+        <PopupContent class="content">
+            <h1 v-if="title" class="title">{{ title }}</h1>
+            <p v-if="message" class="message">{{ message }}</p>
+        </PopupContent>
+
+        <PopupActions>
+            <ButtonBase
+                    @click.native="closePopup"
+                    button-style="secondary"
+                    class="popup-button"
+            >Cancel
+            </ButtonBase>
+            <ButtonBase
+                    @click.native="confirm"
+                    :button-style="buttonColor"
+                    class="popup-button"
+            >Yes, I'm sure
+            </ButtonBase>
+        </PopupActions>
+    </PopupWrapper>
+</template>
+
+<script>
+    import PopupWrapper from '@/components/Others/Popup/PopupWrapper'
+    import PopupActions from '@/components/Others/Popup/PopupActions'
+    import PopupContent from '@/components/Others/Popup/PopupContent'
+    import ButtonBase from '@/components/FilesView/ButtonBase'
+    import {events} from '@/bus'
+
+    export default {
+        name: 'ConfirmPopup',
+        components: {
+            PopupWrapper,
+            PopupActions,
+            PopupContent,
+            ButtonBase,
+        },
+        data() {
+            return {
+                confirmationData: [],
+                message: undefined,
+                title: undefined,
+                emoji: undefined,
+                buttonColor: undefined,
+            }
+        },
+        methods: {
+            closePopup() {
+                events.$emit('popup:close')
+            },
+            confirm() {
+                // Close popup
+                events.$emit('popup:close')
+
+                // Confirmation popup
+                events.$emit('action:confirmed', this.confirmationData)
+
+                // Clear confirmation data
+                this.confirmationData = []
+            }
+        },
+        mounted() {
+            // Show confirm
+            events.$on('confirm:open', args => {
+                this.title = args.title
+                this.message = args.message
+                this.emoji = '🤔'
+                this.confirmationData = args.action
+                this.buttonColor = 'danger-solid'
+
+                if (args.buttonColor) {
+                    this.buttonColor = args.buttonColor
+                }
+            })
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .popup-image {
+        padding-top: 20px;
+        text-align: center;
+        margin-bottom: 20px;
+
+        .emoji {
+            @include font-size(56);
+            line-height: 1;
+        }
+    }
+
+    .content {
+        text-align: center;
+        padding-bottom: 10px;
+        padding-left: 20px;
+        padding-right: 20px;
+
+        .title {
+            @include font-size(22);
+            text-transform: uppercase;
+            font-weight: 800;
+            color: $text;
+        }
+
+        .message {
+            @include font-size(16);
+            color: #333;
+            margin-top: 5px;
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+        .content {
+            .title {
+                color: $dark_mode_text_primary;
+            }
+
+            .message {
+                color: $dark_mode_text_secondary;
+            }
+        }
+    }
+</style>
@@ -35,6 +35,13 @@
                    this.isVisibleWrapper = true
            })

+            // Open called popup
+            events.$on('confirm:open', ({name}) => {
+
+                if (this.name === name)
+                    this.isVisibleWrapper = true
+            })
+
            // Close popup
            events.$on('popup:close', () => {

@@ -29,6 +29,7 @@
            events.$on('popup:open', () => this.isVisibleVignette = true)
            events.$on('alert:open', () => this.isVisibleVignette = true)
            events.$on('success:open', () => this.isVisibleVignette = true)
+            events.$on('confirm:open', () => this.isVisibleVignette = true)
        }
    }
 </script>