dark mode update

resources/js/views/Admin/AppSettings/AppSettingsTabs/Appearance.vue

@@ -27,14 +27,21 @@
                 <div class="block-wrapper">
                     <label>App Logo (optional):</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Logo" v-slot="{ errors }">
-                        <ImageInput @input="$updateImage('/settings', 'app_logo', app.logo)" :image="'/' + app.logo" v-model="app.logo" :error="errors[0]"/>
+                        <ImageInput @input="$updateImage('/settings', 'app_logo', app.logo)" :image="$getImage(app.logo)" v-model="app.logo" :error="errors[0]"/>
+                    </ValidationProvider>
+                </div>
+
+                <div class="block-wrapper">
+                    <label>App Logo Horizontal (optional):</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Logo Horizontal" v-slot="{ errors }">
+                        <ImageInput @input="$updateImage('/settings', 'app_logo_horizontal', app.logo_horizontal)" :image="$getImage(app.logo_horizontal)" v-model="app.logo_horizontal" :error="errors[0]"/>
                     </ValidationProvider>
                 </div>
 
                 <div class="block-wrapper">
                     <label>App Favicon (optional):</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Favicon" v-slot="{ errors }">
-                        <ImageInput @input="$updateImage('/settings', 'app_favicon', app.favicon)" :image="'/' + app.favicon" v-model="app.favicon" :error="errors[0]"/>
+                        <ImageInput @input="$updateImage('/settings', 'app_favicon', app.favicon)" :image="$getImage(app.favicon)" v-model="app.favicon" :error="errors[0]"/>
                     </ValidationProvider>
                 </div>
             </div>
@@ -79,6 +86,7 @@
                     title: '',
                     description: '',
                     logo: undefined,
+                    logo_horizontal: undefined,
                     favicon: undefined,
                 },
             }
@@ -86,7 +94,7 @@
         mounted() {
             axios.get('/api/settings', {
                 params: {
-                    column: 'app_title|app_description|app_logo|app_favicon'
+                    column: 'app_title|app_description|app_logo|app_favicon|app_logo_horizontal'
                 }
             })
                 .then(response => {
@@ -95,6 +103,7 @@
                     this.app.title = response.data.app_title
                     this.app.description = response.data.app_description
                     this.app.logo = response.data.app_logo
+                    this.app.logo_horizontal = response.data.app_logo_horizontal
                     this.app.favicon = response.data.app_favicon
                 })
         }

resources/js/views/Admin/AppSettings/AppSettingsTabs/Others.vue

@@ -10,13 +10,14 @@
                         <div class="inline-wrapper">
                             <div class="switch-label">
                                 <label class="input-label">Storage Limitation:</label>
+                                <small class="input-help">If this value is off, all users will have infinity storage capacity and you won't be <br/>able to charge your users for storage plan.</small>
                             </div>
                             <SwitchInput @input="$updateText('/settings', 'storage_limitation', app.storageLimitation)" v-model="app.storageLimitation" class="switch" :state="app.storageLimitation"/>
                         </div>
                     </div>
                 </div>
                 <div class="block-wrapper" v-if="app.storageLimitation">
-                    <label>Default Storage Space for Accounts:</label>
+                    <label>Default Storage Space for User Accounts:</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Default Storage Space" rules="required" v-slot="{ errors }">
                         <input @input="$updateText('/settings', 'storage_default', app.defaultStorage)"
                                v-model="app.defaultStorage"
@@ -34,6 +35,7 @@
                         <div class="inline-wrapper">
                             <div class="switch-label">
                                 <label class="input-label">Allow User Registration:</label>
+                                <small class="input-help">You can disable public registration for new users. You will still able to <br/>create new users in administration panel.</small>
                             </div>
                             <SwitchInput @input="$updateText('/settings', 'registration', app.userRegistration)" v-model="app.userRegistration" class="switch" :state="app.userRegistration"/>
                         </div>

resources/js/views/Admin/Dashboard.vue

@@ -4,7 +4,8 @@
             <div class="dashboard-headline">
                 <div class="logo">
                     <a href="https://vuefilemanager.com" target="_blank">
-                        <img src="/assets/images/vuefilemanager-horizontal-logo.svg" alt="VueFileManager">
+                        <img src="/assets/images/vuefilemanager-horizontal-logo.svg" alt="VueFileManager" class="light-mode">
+                        <img src="/assets/images/vuefilemanager-horizontal-logo-dark.svg" alt="VueFileManager" class="dark-mode">
                     </a>
                 </div>
                 <div class="metadata">
@@ -192,12 +193,34 @@
         }
     }
 
+    .logo {
+        .dark-mode {
+            display: none;
+        }
+    }
+
     @media only screen and (max-width: 690px) {
 
     }
 
     @media (prefers-color-scheme: dark) {
 
+        .logo {
+            .dark-mode {
+                display: block;
+            }
+
+            .light-mode {
+                display: none;
+            }
+        }
+
+        .metadata {
+
+            .meta-title {
+                color: $dark_mode_text_primary;
+            }
+        }
     }
 
 </style>

resources/js/views/Admin/Pages.vue

@@ -0,0 +1,178 @@
+<template>
+    <div id="single-page">
+        <div id="page-content" v-if="! isLoading && pages.length > 0">
+            <MobileHeader :title="$router.currentRoute.meta.title"/>
+            <PageHeader :title="$router.currentRoute.meta.title"/>
+
+            <div class="content-page">
+                <DatatableWrapper :paginator="false" :columns="columns" :data="pages" class="table table-users">
+                    <template scope="{ row }">
+                        <tr>
+                            <td class="name" style="min-width: 200px">
+                                <router-link :to="{name: 'PageEdit', params: {slug: row.data.attributes.slug}}" class="cell-item" tag="div">
+                                    <span>{{ row.data.attributes.title }}</span>
+                                </router-link>
+                            </td>
+                            <td>
+                                <span class="cell-item">
+                                    {{ row.data.attributes.slug }}
+                                </span>
+                            </td>
+                            <td>
+                                <span class="cell-item">
+                                    <SwitchInput @input="changeStatus($event, row.data.attributes.slug)" class="switch" :state="row.data.attributes.visibility"/>
+                                </span>
+                            </td>
+                            <td>
+                                <div class="action-icons">
+                                    <router-link :to="{name: 'PageEdit', params: {slug: row.data.attributes.slug}}">
+                                        <edit-2-icon size="15" class="icon icon-edit"></edit-2-icon>
+                                    </router-link>
+                                </div>
+                            </td>
+                        </tr>
+                    </template>
+                </DatatableWrapper>
+            </div>
+        </div>
+
+        <div id="loader" v-if="isLoading">
+            <Spinner></Spinner>
+        </div>
+    </div>
+</template>
+
+<script>
+    import DatatableWrapper from '@/components/Others/Tables/DatatableWrapper'
+    import MobileActionButton from '@/components/FilesView/MobileActionButton'
+    import EmptyPageContent from '@/components/Others/EmptyPageContent'
+    import SwitchInput from '@/components/Others/Forms/SwitchInput'
+    import MobileHeader from '@/components/Mobile/MobileHeader'
+    import SectionTitle from '@/components/Others/SectionTitle'
+    import ButtonBase from '@/components/FilesView/ButtonBase'
+    import {Trash2Icon, Edit2Icon} from "vue-feather-icons";
+    import PageHeader from '@/components/Others/PageHeader'
+    import ColorLabel from '@/components/Others/ColorLabel'
+    import Spinner from '@/components/FilesView/Spinner'
+    import axios from 'axios'
+
+    export default {
+        name: 'Pages',
+        components: {
+            MobileActionButton,
+            EmptyPageContent,
+            DatatableWrapper,
+            SectionTitle,
+            MobileHeader,
+            SwitchInput,
+            Trash2Icon,
+            PageHeader,
+            ButtonBase,
+            ColorLabel,
+            Edit2Icon,
+            Spinner,
+        },
+        data() {
+            return {
+                isLoading: true,
+                pages: undefined,
+                columns: [
+                    {
+                        label: 'Page',
+                        field: 'data.attributes.title',
+                        sortable: true
+                    },
+                    {
+                        label: 'Slug',
+                        field: 'data.attributes.slug',
+                        sortable: true
+                    },
+                    {
+                        label: 'Status',
+                        field: 'data.attributes.visibility',
+                        sortable: true
+                    },
+                    {
+                        label: this.$t('admin_page_user.table.action'),
+                        sortable: false
+                    },
+                ],
+            }
+        },
+        methods: {
+            changeStatus(val, slug) {
+                this.$updateText('/pages/' + slug, 'visibility', val)
+            }
+        },
+        created() {
+            axios.get('/api/pages')
+                .then(response => {
+                    this.pages = response.data.data
+                    this.isLoading = false
+                })
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .table-tools {
+        background: white;
+        display: flex;
+        justify-content: space-between;
+        padding: 15px 0 10px;
+        position: sticky;
+        top: 40px;
+        z-index: 9;
+    }
+
+    .table {
+
+        .cell-item {
+            @include font-size(15);
+            white-space: nowrap;
+        }
+
+        .name {
+            font-weight: 700;
+            cursor: pointer;
+        }
+    }
+
+    @media only screen and (max-width: 690px) {
+        .table-tools {
+            padding: 0 0 5px;
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+        .table-tools {
+            background: $dark_mode_background;
+        }
+
+        .action-icons {
+
+            .icon {
+                cursor: pointer;
+
+                circle, path, line, polyline {
+                    stroke: $dark_mode_text_primary;
+                }
+            }
+        }
+
+        .user-thumbnail {
+
+            .info {
+
+                .email {
+                    color: $dark_mode_text_secondary;
+                }
+            }
+        }
+    }
+
+</style>

resources/js/views/Admin/Pages/PageEdit.vue

@@ -0,0 +1,114 @@
+<template>
+    <div id="single-page">
+        <div id="page-content" v-if="! isLoading && page">
+            <MobileHeader :title="$router.currentRoute.meta.title"/>
+            <PageHeader :title="$router.currentRoute.meta.title"/>
+
+            <div class="content-page">
+                <ValidationObserver ref="personalInformation" v-slot="{ invalid }" tag="form" class="form block-form form-fixed-width">
+                    <FormLabel>{{ page.data.attributes.title }}</FormLabel>
+
+                    <!--Visible-->
+                    <div class="block-wrapper">
+                        <div class="input-wrapper">
+                            <div class="inline-wrapper">
+                                <div class="switch-label">
+                                    <label class="input-label">Visibility:</label>
+                                    <small class="input-help">Status of your page visibility on website.</small>
+                                </div>
+                                <SwitchInput @input="changeStatus" class="switch" :state="page.data.attributes.visibility"/>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="block-wrapper">
+                        <label>Title:</label>
+                        <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Name" rules="required" v-slot="{ errors }">
+                            <input @input="$updateText('/pages/' + $route.params.slug, 'title', page.data.attributes.title)" v-model="page.data.attributes.title"
+                                   placeholder="Title name" type="text" :class="{'is-error': errors[0]}"/>
+                            <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                        </ValidationProvider>
+                    </div>
+
+                    <div class="block-wrapper">
+                        <label>Slug:</label>
+                        <div class="input-wrapper">
+                            <input v-model="page.data.attributes.slug" type="text" disabled/>
+                        </div>
+                    </div>
+
+                    <div class="block-wrapper">
+                        <label>Title:</label>
+                        <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Name" rules="required" v-slot="{ errors }">
+                            <textarea
+                                    @input="$updateText('/pages/' + $route.params.slug, 'content', page.data.attributes.content)"
+                                    v-model="page.data.attributes.content"
+                                    placeholder="Type your content here..."
+                                    :class="{'is-error': errors[0]}"
+                                    rows="18"
+                            ></textarea>
+                            <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                        </ValidationProvider>
+                    </div>
+                </ValidationObserver>
+            </div>
+        </div>
+
+        <div id="loader" v-if="isLoading">
+            <Spinner></Spinner>
+        </div>
+    </div>
+</template>
+
+<script>
+    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+    import FormLabel from '@/components/Others/Forms/FormLabel'
+    import {required} from 'vee-validate/dist/rules'
+    import SwitchInput from '@/components/Others/Forms/SwitchInput'
+    import MobileHeader from '@/components/Mobile/MobileHeader'
+    import SectionTitle from '@/components/Others/SectionTitle'
+    import ButtonBase from '@/components/FilesView/ButtonBase'
+    import PageHeader from '@/components/Others/PageHeader'
+    import Spinner from '@/components/FilesView/Spinner'
+    import axios from 'axios'
+
+    export default {
+        name: 'PageEdit',
+        components: {
+            ValidationProvider,
+            ValidationObserver,
+            FormLabel,
+            SectionTitle,
+            MobileHeader,
+            SwitchInput,
+            PageHeader,
+            ButtonBase,
+            required,
+            Spinner,
+        },
+        data() {
+            return {
+                isLoading: true,
+                page: undefined,
+            }
+        },
+        methods: {
+            changeStatus(val) {
+                this.$updateText('/pages/' + this.$route.params.slug , 'visibility', val)
+            }
+        },
+        created() {
+            axios.get('/api/pages/' + this.$route.params.slug)
+                .then(response => {
+                    this.page = response.data
+                    this.isLoading = false
+                })
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+    @import '@assets/vue-file-manager/_forms';
+</style>

resources/js/views/Admin/Users.vue

@@ -44,10 +44,10 @@
                             </td>
                             <td>
                                 <span class="cell-item">
-                                    {{ row.relationships.storage.data.attributes.used }}%
+                                    {{ row.relationships.storage.data.attributes.used_formatted }}
                                 </span>
                             </td>
-                            <td>
+                            <td v-if="config.storageLimit">
                                 <span class="cell-item">
                                     {{ row.relationships.storage.data.attributes.capacity_formatted }}
                                 </span>
@@ -155,7 +155,8 @@
                 {
                     label: this.$t('admin_page_user.table.storage_capacity'),
                     field: 'relationships.storage.data.attributes.capacity',
-                    sortable: true
+                    sortable: true,
+                    hidden: ! this.config.storageLimit,
                 },
                 {
                     label: this.$t('admin_page_user.table.created_at'),
@@ -211,17 +212,6 @@
         .table-tools {
             background: $dark_mode_background;
         }
-
-        .action-icons {
-
-            .icon {
-                cursor: pointer;
-
-                circle, path, line, polyline {
-                    stroke: $dark_mode_text_primary;
-                }
-            }
-        }
     }
 
 </style>

resources/js/views/Admin/Users/UserTabs/UserStorage.vue

@@ -1,6 +1,6 @@
 <template>
     <PageTab :is-loading="isLoading" class="form-fixed-width" v-if="storage">
-        <PageTabGroup v-if="! config.isSaaS || ! user.data.attributes.subscription">
+        <PageTabGroup v-if="config.storageLimit || ! user.data.attributes.subscription">
             <FormLabel>{{ $t('user_box_storage.title') }}</FormLabel>
             <InfoBox>
                 <p>{{ $t('user_box_storage.description') }}</p>