nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-28 02:50:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

dark mode update

Browse Source
This commit is contained in:
carodej
2020-07-09 10:56:17 +02:00
parent a43f0e6908
commit 5a9f5813c8
89 changed files with 1633 additions and 912 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/views/Admin.vue
+10 -1
View File
@@ -52,6 +52,14 @@
Invoices
</div>
</router-link>
<router-link :to="{name: 'Pages'}" class="menu-list-item link">
<div class="icon">
<monitor-icon size="17"></monitor-icon>
</div>
<div class="label">
Pages
</div>
</router-link>
</div>
</ContentGroup>
</ContentSidebar>
@@ -61,7 +69,7 @@
</template>
<script>
import { UsersIcon, SettingsIcon, FileTextIcon, CreditCardIcon, DatabaseIcon, BoxIcon } from 'vue-feather-icons'
import { UsersIcon, SettingsIcon, FileTextIcon, CreditCardIcon, DatabaseIcon, BoxIcon, MonitorIcon } from 'vue-feather-icons'
import ContentSidebar from '@/components/Sidebar/ContentSidebar'
import ContentGroup from '@/components/Sidebar/ContentGroup'
import { mapGetters } from 'vuex'
@@ -72,6 +80,7 @@
...mapGetters(['config']),
},
components: {
MonitorIcon,
BoxIcon,
DatabaseIcon,
CreditCardIcon,
resources/js/views/Admin/AppSettings/AppSettingsTabs/Appearance.vue
+12 -3
View File
@@ -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
+3 -1
View File
@@ -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
+24 -1
View File
@@ -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
+178
View File
@@ -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
+114
View File
@@ -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
+4 -14
View File
@@ -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 -1
View File
@@ -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>
resources/js/views/Auth/CreateNewPassword.vue
+3 -1
View File
@@ -3,7 +3,9 @@
<!--Create new password-->
<AuthContent name="create-new-password" :visible="true">
<img class="logo" :src="config.app_logo" :alt="config.app_name">
<img v-if="config.app_logo" class="logo" :src="config.app_logo" :alt="config.app_name">
<b v-if="! config.app_logo" class="auth-logo-text">{{ config.app_name }}</b>
<h1>{{ $t('page_create_password.title') }}</h1>
<h2>{{ $t('page_create_password.subtitle') }}</h2>
resources/js/views/Auth/ForgottenPassword.vue
+3 -1
View File
@@ -3,7 +3,9 @@
<!--Forgotten your password?-->
<AuthContent name="forgotten-password" :visible="true">
<img class="logo" :src="config.app_logo" :alt="config.app_name">
<img v-if="config.app_logo" class="logo" :src="config.app_logo" :alt="config.app_name">
<b v-if="! config.app_logo" class="auth-logo-text">{{ config.app_name }}</b>
<h1>{{ $t('page_forgotten_password.title') }}</h1>
<h2>{{ $t('page_forgotten_password.subtitle') }}</h2>
resources/js/views/Auth/SignIn.vue
+6 -1
View File
@@ -3,7 +3,9 @@
<!--Log In by Email-->
<AuthContent name="log-in" :visible="true">
<img class="logo" :src="config.app_logo" :alt="config.app_name">
<img v-if="config.app_logo" class="logo" :src="config.app_logo" :alt="config.app_name">
<b v-if="! config.app_logo" class="auth-logo-text">{{ config.app_name }}</b>
<h1>{{ $t('page_login.title') }}</h1>
<h2>{{ $t('page_login.subtitle') }}</h2>
@@ -206,6 +208,9 @@
})
},
},
created() {
this.$scrollTop()
}
}
</script>
resources/js/views/Auth/SignUp.vue
+25 -1
View File
@@ -3,7 +3,9 @@
<!--Registration-->
<AuthContent name="sign-up" :visible="true">
<img class="logo" :src="config.app_logo" :alt="config.app_name">
<img v-if="config.app_logo" class="logo" :src="config.app_logo" :alt="config.app_name">
<b v-if="! config.app_logo" class="auth-logo-text">{{ config.app_name }}</b>
<h1>{{ $t('page_registration.title') }}</h1>
<h2>{{ $t('page_registration.subtitle') }}</h2>
@@ -51,6 +53,12 @@
</div>
<div>
<p class="legal-agreement">
By clicking on 'Create Account' button I agree to the
<router-link :to="{name: 'DynamicPage', params: {slug: 'terms-of-service'}}" target="_blank">Terms of Service</router-link>
and
<router-link :to="{name: 'DynamicPage', params: {slug: 'privacy-policy'}}" target="_blank">Privacy Policy</router-link>.
</p>
<AuthButton icon="chevron-right" :text="$t('page_registration.button_create_account')" :loading="isLoading" :disabled="isLoading"/>
</div>
</ValidationObserver>
@@ -168,10 +176,26 @@
})
}
},
created() {
this.$scrollTop()
}
}
</script>
<style scoped lang="scss">
@import '@assets/vue-file-manager/_auth-form';
@import '@assets/vue-file-manager/_auth';
.legal-agreement {
@include font-size(16);
padding: 55px 0 0;
max-width: 400px;
font-weight: 700;
line-height: 1.6;
margin: 0 auto;
a {
color: $theme;
}
}
</style>
resources/js/views/FilePages/Files.vue
+1 -1
View File
@@ -3,7 +3,7 @@
<ContentSidebar>
<ContentGroup v-if="config.isSaaS && storage.used > 95">
<ContentGroup v-if="config.storageLimit && storage.used > 95">
<UpgradeSidebarBanner />
</ContentGroup>
resources/js/views/Index/ContactUs.vue
+50 -85
View File
@@ -11,38 +11,42 @@
<PageTitle
class="headline"
title="Contact Us"
description="Dominion, open bearing brought may dominion male beginning."
description="Do you have any questions? Get in touch with us."
></PageTitle>
<!--Content-->
<div class="page-content">
<ValidationObserver @submit.prevent="contactForm" ref="contactForm" v-slot="{ invalid }" tag="form"
class="form block-form">
<ValidationObserver v-if="! isSuccess" @submit.prevent="contactForm" ref="contactForm" v-slot="{ invalid }" tag="form"
class="form block-form">
<div class="block-wrapper">
<label>{{ $t('page_registration.label_email') }}</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="E-Mail" rules="required"
v-slot="{ errors }">
<input v-model="contact.email" :placeholder="$t('page_registration.placeholder_email')" type="email"
:class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div class="block-wrapper">
<label>{{ $t('page_registration.label_email') }}</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="E-Mail" rules="required"
v-slot="{ errors }">
<input v-model="contact.email" :placeholder="$t('page_registration.placeholder_email')" type="email"
:class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div class="block-wrapper">
<label>Message:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Message" rules="required"
v-slot="{ errors }">
<textarea v-model="contact.message" placeholder="Type your message here..." rows="4" :class="{'is-error': errors[0]}"></textarea>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div class="block-wrapper">
<label>Message:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Message" rules="required"
v-slot="{ errors }">
<textarea v-model="contact.message" placeholder="Type your message here..." rows="4" :class="{'is-error': errors[0]}"></textarea>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div>
<AuthButton class="submit-button" icon="chevron-right" text="Send Message" :loading="isLoading" :disabled="isLoading"/>
</div>
</ValidationObserver>
</div>
<InfoBox v-if="isError">
<p>Something went wrong, please try it again.</p>
</InfoBox>
<div>
<AuthButton class="submit-button" icon="chevron-right" text="Send Message" :loading="isLoading" :disabled="isLoading"/>
</div>
</ValidationObserver>
<InfoBox v-if="isSuccess">
<p>Your message was send successfully.</p>
</InfoBox>
</div>
<!--Footer-->
@@ -52,12 +56,12 @@
<script>
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
import AuthButton from '@/components/Auth/AuthButton'
import {required} from 'vee-validate/dist/rules'
import PageTitle from '@/components/Index/Components/PageTitle'
import PageFooter from '@/components/Index/IndexPageFooter'
import Navigation from '@/components/Index/IndexNavigation'
import InfoBox from '@/components/Others/Forms/InfoBox'
import AuthButton from '@/components/Auth/AuthButton'
import {required} from 'vee-validate/dist/rules'
import {mapGetters} from 'vuex'
import axios from 'axios'
@@ -71,6 +75,7 @@
Navigation,
PageTitle,
required,
InfoBox,
},
computed: {
...mapGetters(['config']),
@@ -78,6 +83,8 @@
data() {
return {
isLoading: false,
isSuccess: false,
isError: false,
contact: {
email: '',
message: '',
@@ -97,59 +104,20 @@
// Send request to get user token
axios
.post('/api/user/register', this.register)
.post('/api/contact', this.contact)
.then(() => {
// End loading
this.isLoading = false
// Set login state
this.$store.commit('SET_AUTHORIZED', true)
// Go to files page
this.$router.push({name: 'Files'})
this.isSuccess = true
})
.catch(error => {
if (error.response.status == 401) {
if (error.response.data.error === 'invalid_client') {
events.$emit('alert:open', {
emoji: '🤔',
title: this.$t('popup_passport_error.title'),
message: this.$t('popup_passport_error.message')
})
}
}
if (error.response.status == 500) {
events.$emit('alert:open', {
emoji: '🤔',
title: this.$t('popup_signup_error.title'),
message: this.$t('popup_signup_error.message')
})
}
if (error.response.status == 422) {
if (error.response.data.errors['email']) {
this.$refs.sign_up.setErrors({
'E-Mail': error.response.data.errors['email']
});
}
if (error.response.data.errors['password']) {
this.$refs.sign_up.setErrors({
'Your New Password': error.response.data.errors['password']
});
}
}
// End loading
this.isLoading = false
this.isError = true
})
}
},
@@ -165,21 +133,15 @@
@import '@assets/vue-file-manager/_mixins';
@import '@assets/vue-file-manager/_forms';
.form {
max-width: 100%;
}
.headline {
padding-top: 70px;
padding-bottom: 50px;
}
.page-content {
p {
@include font-size(20);
font-weight: 500;
line-height: 1.65;
padding-bottom: 30px;
}
}
.form.block-form {
.submit-button {
@@ -193,7 +155,10 @@
}
@media only screen and (max-width: 690px) {
@media only screen and (max-width: 960px) {
.headline {
padding-top: 50px;
padding-bottom: 30px;
}
}
</style>
resources/js/views/Index/DynamicPage.vue
+26 -17
View File
@@ -10,21 +10,11 @@
<!--Headline-->
<PageTitle
class="headline"
title="Terms & Conditions"
:title="page.data.attributes.title"
></PageTitle>
<!--Content-->
<div class="page-content">
<p>Dominion, open bearing brought may dominion male beginning god land greater forth there fruit whose creepeth two their great there morning multiply Third image
first. Waters waters. Which, moving place let said their saw, behold good appear of days very dominion called shall creeping creepeth subdue living, over set
subdue above under form make appear blessed, given shall midst likeness midst days him fruit seasons void hath light it him and days gathering give itself his
heaven fruitful fourth darkness bearing. Bring third a our gathered fruitful man sixth place.</p>
<p>Have give land may man together unto appear bring it is creature. Gathering abundantly. Beast night. Blessed be Lights, second brought. Yielding without set the
open give one seed of fowl said living years said female. Second hath subdue, give dry which very there night is. Whales very seed heaven set image.</p>
<p>Was moved, air seas Without. Winged years third. Dry under upon very Light tree. Given be meat seed fish. Over earth was beast fruitful. Abundantly great female
sixth. Which divide our days fly heaven seasons. Lights form created darkness third morning, and won't whales. Living fowl bearing saying dominion first female.
That to lesser our doesn't morning place.</p>
</div>
<div class="page-content" v-html="page.data.attributes.content_formatted"></div>
</div>
<!--Footer-->
@@ -40,7 +30,7 @@
import axios from 'axios'
export default {
name: 'SaaSLandingPage',
name: 'DynamicPage',
components: {
PageFooter,
Navigation,
@@ -52,10 +42,26 @@
data() {
return {
isLoading: false,
page: undefined,
}
},
watch: {
$route(to, from) {
this.getPage()
}
},
methods: {
getPage() {
axios.get('/api/page/' + this.$route.params.slug)
.then(response => {
this.page = response.data
this.$scrollTop()
})
}
},
created() {
this.$scrollTop()
this.getPage()
}
}
</script>
@@ -72,7 +78,7 @@
.page-content {
p {
/deep/ p {
@include font-size(20);
font-weight: 500;
line-height: 1.65;
@@ -84,7 +90,10 @@
}
@media only screen and (max-width: 690px) {
@media only screen and (max-width: 960px) {
.headline {
padding-top: 50px;
padding-bottom: 30px;
}
}
</style>
resources/js/views/Index/SaaSLandingPage.vue
+8 -9
View File
@@ -47,12 +47,19 @@
},
computed: {
...mapGetters(['config']),
},
data() {
return {
isLoading: false,
}
},
beforeMount() {
if (! this.config.isSaaS) {
this.$router.push({name: 'SignIn'})
}
},
created() {
this.$scrollTop()
}
}
</script>
@@ -61,12 +68,4 @@
@import '@assets/vue-file-manager/_landing-page';
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
@media (prefers-color-scheme: dark) {
}
@media only screen and (max-width: 690px) {
}
</style>
resources/js/views/Profile.vue
+5 -1
View File
@@ -91,7 +91,7 @@
<span class="email">{{ user.data.attributes.email }}</span>
</div>
</div>
<div v-if="config.isSaaS && config.app_payments_active" class="headline-actions">
<div v-if="config.storageLimit && config.isSaaS && config.app_payments_active" class="headline-actions">
<router-link :to="{name: 'UpgradePlan'}" v-if="! user.relationships.subscription || (user.relationships.subscription && ! user.relationships.subscription.data.attributes.is_highest)">
<ButtonBase class="upgrade-button" button-style="secondary" type="button">
Upgrade Plan
@@ -219,6 +219,10 @@
.info {
.name {
color: $dark_mode_text_primary;
}
.email {
color: $dark_mode_text_secondary;
}
resources/js/views/SetupWIzard/AppSetup.vue
+13
View File
@@ -36,6 +36,13 @@
</ValidationProvider>
</div>
<div class="block-wrapper">
<label>App Logo Horizontal (optional):</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Logo" v-slot="{ errors }">
<ImageInput 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 }">
@@ -71,6 +78,7 @@
<label class="input-label">Storage Limitation:</label>
</div>
<SwitchInput v-model="app.storageLimitation" class="switch" :state="app.storageLimitation"/>
<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>
</div>
</div>
@@ -94,6 +102,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 v-model="app.userRegistration" class="switch" :state="app.userRegistration"/>
</div>
@@ -147,6 +156,7 @@
title: '',
description: '',
logo: undefined,
logo_horizontal: undefined,
favicon: undefined,
contactMail: '',
googleAnalytics: '',
@@ -182,6 +192,9 @@
if (this.app.logo)
formData.append('logo', this.app.logo)
if (this.app.logo_horizontal)
formData.append('logo_horizontal', this.app.logo_horizontal)
if (this.app.favicon)
formData.append('favicon', this.app.favicon)
resources/js/views/SetupWIzard/PurchaseCode.vue
+9
View File
@@ -120,4 +120,13 @@
.auth-form input {
min-width: 380px;
}
@media (prefers-color-scheme: dark) {
.additional-link {
.black-link {
color: $dark_mode_text_primary;
}
}
}
</style>
resources/js/views/Upgrade/UpgradeBilling.vue
+58
View File
@@ -642,6 +642,64 @@
@media (prefers-color-scheme: dark) {
.plan-title {
h1 {
color: $dark_mode_text_primary;
}
h2 {
color: $dark_mode_text_secondary;
}
}
.credit-card {
background: $dark_mode_foreground;
span, .credit-card-numbers {
color: $dark_mode_text_primary;
}
}
.change-payment {
span {
color: $dark_mode_text_secondary;
}
a {
color: $theme;
}
}
.summary-list {
background: $dark_mode_foreground;
.disclaimer {
color: $dark_mode_text_secondary;
}
.row {
&:last-of-type {
border-top: 1px solid $dark_mode_border_color;
b {
color: $dark_mode_text_primary;
}
}
}
.cell {
b {
color: $dark_mode_text_primary;
}
small {
color: $dark_mode_text_secondary;
}
}
}
}
</style>
resources/js/views/Upgrade/UpgradePlan.vue
+9
View File
@@ -89,7 +89,16 @@
}
@media (prefers-color-scheme: dark) {
.plan-title {
h1 {
color: $dark_mode_text_primary;
}
h2 {
color: $dark_mode_text_secondary;
}
}
}
</style>