Initial commit

resources/js/components/VueFileManagerComponents/Others/PageHeader.vue

@@ -0,0 +1,80 @@
+<template>
+    <div class="page-header" @click="goHome">
+        <div class="icon" v-if="isSmallAppSize">
+            <FontAwesomeIcon icon="chevron-left" />
+        </div>
+        <div class="content">
+            <h1 class="title">{{ title }}</h1>
+        </div>
+    </div>
+</template>
+
+<script>
+    import {mapGetters} from 'vuex'
+    import {events} from '@/bus'
+
+    export default {
+        name: 'PageHeader',
+        props: [
+            'title', 'description'
+        ],
+        computed: {
+            ...mapGetters(['appSize']),
+            isSmallAppSize() {
+                return this.appSize === 'small'
+            }
+        },
+        methods: {
+            goHome() {
+                if (this.isSmallAppSize) events.$emit('show:sidebar')
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import "@assets/app.scss";
+
+    .page-header {
+        display: flex;
+        align-items: center;
+        padding: 20px 30px;
+        background: white;
+        position: sticky;
+        top: 0;
+        z-index: 9;
+
+        .title {
+            @include font-size(22);
+            font-weight: 700;
+        }
+
+        .icon {
+            @include font-size(16);
+            margin-right: 15px;
+            cursor: pointer;
+        }
+    }
+
+    @media only screen and (max-width: 960px) {
+
+        .page-header {
+            padding: 20px 15px;
+
+            .title {
+                @include font-size(18);
+            }
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+        .page-header {
+            background: $dark_mode_background;
+
+            .icon path {
+                fill: $theme;
+            }
+        }
+    }
+</style>

resources/js/components/VueFileManagerComponents/Others/TextLabel.vue

@@ -0,0 +1,24 @@
+<template>
+    <b class="text-label">
+        <slot></slot>
+    </b>
+</template>
+
+<script>
+    export default {
+        name: 'TextLabel',
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import "@assets/app.scss";
+
+    .text-label {
+        @include font-size(11);
+        color: $light_text;
+        text-transform: uppercase;
+        font-weight: 900;
+        display: block;
+        margin-bottom: 5px;
+    }
+</style>

resources/js/components/VueFileManagerComponents/Others/ThemeLabel.vue

@@ -0,0 +1,24 @@
+<template>
+    <b class="theme-label">
+        <slot></slot>
+    </b>
+</template>
+
+<script>
+    export default {
+        name: 'TextLabel',
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import "@assets/app.scss";
+
+    .theme-label {
+        @include font-size(14);
+        color: $theme;
+        text-transform: uppercase;
+        font-weight: 900;
+        display: block;
+        margin-bottom: 5px;
+    }
+</style>

resources/js/components/VueFileManagerComponents/Others/UserImageInput.vue

@@ -0,0 +1,90 @@
+<template>
+    <div class="dropzone" :class="{ 'is-error': error }">
+        <input
+                ref="file"
+                type="file"
+                @change="showImagePreview($event)"
+                :name="name"
+                class="dummy"
+        />
+        <img
+                ref="image"
+                :src="imagePreview"
+                class="image-preview"
+                v-if="data || imagePreview"
+        />
+    </div>
+</template>
+
+<script>
+
+    export default {
+        props: ['label', 'name', 'avatar', 'info', 'error'],
+        data() {
+            return {
+                imagePreview: undefined
+            }
+        },
+        watch: {
+            imagePreview(val) {
+                this.$store.commit('UPDATE_AVATAR', val)
+            }
+        },
+        methods: {
+            showImagePreview(event) {
+                const imgPath = event.target.files[0].name,
+                    extn = imgPath
+                        .substring(imgPath.lastIndexOf('.') + 1)
+                        .toLowerCase()
+
+                if (['png', 'jpg', 'jpeg'].includes(extn)) {
+                    const file = event.target.files[0],
+                        reader = new FileReader()
+
+                    reader.onload = () => (this.imagePreview = reader.result)
+
+                    reader.readAsDataURL(file)
+
+                    // Update user avatar
+                    this.$updateImage('/user/profile', 'avatar', event.target.files[0])
+                } else {
+                    alert('You may have uploaded the wrong file, try again!')
+                }
+            }
+        },
+        created() {
+            // If has default image then load
+            if (this.avatar) this.imagePreview = this.avatar
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import "@assets/app.scss";
+
+    .dropzone {
+        position: relative;
+        line-height: 0;
+
+        input[type='file'] {
+            opacity: 0;
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            z-index: 1;
+            width: 100%;
+            cursor: pointer;
+        }
+
+        .image-preview {
+            width: 75px;
+            height: 75px;
+            object-fit: cover;
+            border-radius: 8px;
+            border: 1px dashed $theme;
+            padding: 2px;
+        }
+    }
+</style>