mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-27 18:40:39 +00:00
v1.7 alpha.2
This commit is contained in:
carodej
@@ -36,16 +36,13 @@
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.icon {
|
||||
line-height: 1;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
</div>
|
||||
<div class="feature">
|
||||
<hard-drive-icon size="19" class="feature-icon"></hard-drive-icon>
|
||||
<b class="feature-title">{{ $t('page_index.sign_feature_2', {defaultSpace: config.storageDefaultSpace}) }}</b>
|
||||
<b class="feature-title">{{ $t('page_index.sign_feature_2', {defaultSpace: config.storageDefaultSpaceFormatted}) }}</b>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -82,16 +82,16 @@
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.info-box {
|
||||
background: rgba($yellow, 0.1);
|
||||
background: $dark_mode_foreground;
|
||||
|
||||
p {
|
||||
color: $yellow;
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
ul {
|
||||
|
||||
li {
|
||||
color: $yellow;
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -144,8 +144,12 @@
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
@media only screen and (max-width: 960px) {
|
||||
|
||||
.plans-wrapper {
|
||||
display: block;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
@@ -118,6 +118,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 690px){
|
||||
.content {
|
||||
top: 110px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.content {
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<table v-if="hasData" class="table">
|
||||
<thead class="table-header">
|
||||
<tr>
|
||||
<td
|
||||
<th
|
||||
v-for="(column, index) in columns"
|
||||
@click="sort(column.field, column.sortable, index)"
|
||||
:key="index"
|
||||
@@ -13,7 +13,7 @@
|
||||
<span>{{ column.label }}</span>
|
||||
|
||||
<chevron-up-icon v-if="false" :class="{ 'arrow-down': filter.sort === 'ASC' }" size="14" class="filter-arrow"></chevron-up-icon>
|
||||
</td>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
@@ -174,12 +174,12 @@
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
overflow-x: auto;
|
||||
|
||||
tr {
|
||||
width: 100%;
|
||||
|
||||
td {
|
||||
td, th {
|
||||
&:first-child {
|
||||
padding-left: 15px;
|
||||
}
|
||||
@@ -195,8 +195,9 @@
|
||||
margin-bottom: 10px;
|
||||
|
||||
tr {
|
||||
td {
|
||||
td, th {
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
|
||||
span {
|
||||
color: $theme;
|
||||
@@ -245,7 +246,7 @@
|
||||
background: $light_background;
|
||||
}
|
||||
|
||||
td {
|
||||
td, th {
|
||||
padding: 12px;
|
||||
|
||||
&:last-child {
|
||||
@@ -354,7 +355,7 @@
|
||||
.table-header {
|
||||
|
||||
tr {
|
||||
td {
|
||||
td, th {
|
||||
|
||||
span {
|
||||
color: $theme;
|
||||
@@ -364,7 +365,7 @@
|
||||
}
|
||||
|
||||
.table-body {
|
||||
tr {
|
||||
tr, th {
|
||||
&:hover {
|
||||
background: $dark_mode_foreground;
|
||||
}
|
||||
|
||||
Vendored
+2
-2
@@ -9,7 +9,7 @@ const Helpers = {
|
||||
|
||||
Vue.prototype.$updateText = debounce(function (route, name, value) {
|
||||
|
||||
if (value === '') return
|
||||
if (! value || value === '') return
|
||||
|
||||
axios.patch(this.$store.getters.api + route, {name, value})
|
||||
.catch(error => {
|
||||
@@ -18,7 +18,7 @@ const Helpers = {
|
||||
message: this.$t('popup_error.message'),
|
||||
})
|
||||
})
|
||||
}, 300)
|
||||
}, 150)
|
||||
|
||||
Vue.prototype.$updateImage = function (route, name, image) {
|
||||
|
||||
|
||||
@@ -143,6 +143,12 @@
|
||||
message: this.$t('toaster.email_set'),
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
events.$emit('alert:open', {
|
||||
title: this.$t('popup_error.title'),
|
||||
message: this.$t('popup_error.message'),
|
||||
})
|
||||
})
|
||||
.finally(() => {
|
||||
|
||||
// End loading
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
<template>
|
||||
<div id="single-page">
|
||||
<div id="page-content" v-if="! isLoading && data">
|
||||
<MobileHeader :title="$router.currentRoute.meta.title"/>
|
||||
|
||||
<div class="dashboard-headline">
|
||||
<div class="logo">
|
||||
<a href="https://vuefilemanager.com" target="_blank">
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
</FormLabel>
|
||||
|
||||
<!--Info about active subscription-->
|
||||
<div v-if="! subscription.canceled" class="state active">
|
||||
<div v-if="! subscription.attributes.canceled" class="state active">
|
||||
<ListInfo class="list-info">
|
||||
<ListInfoItem class="list-item" :title="$t('user_subscription.plan')"
|
||||
:content="subscription.attributes.name + ' - ' + subscription.attributes.capacity_formatted"/>
|
||||
@@ -20,7 +20,7 @@
|
||||
<!--Info about canceled subscription-->
|
||||
<div v-if="subscription.attributes.canceled" class="state canceled">
|
||||
<ListInfo class="list-info">
|
||||
<ListInfoItem class="list-item" :title="$t('user_subscription.plan')" :content="subscription.attributes.name"/>
|
||||
<ListInfoItem class="list-item" :title="$t('user_subscription.plan')" :content="subscription.attributes.name + ' - ' + subscription.attributes.capacity_formatted"/>
|
||||
<ListInfoItem class="list-item" :title="$t('user_subscription.status')" :content="status"/>
|
||||
<ListInfoItem class="list-item capitalize" :title="$t('user_subscription.canceled_at')" :content="subscription.attributes.canceled_at"/>
|
||||
<ListInfoItem class="list-item capitalize" :title="$t('user_subscription.ends_at')" :content="subscription.attributes.ends_at"/>
|
||||
|
||||
@@ -51,7 +51,7 @@
|
||||
{
|
||||
icon: 'settings',
|
||||
title: this.$t('admin_menu.settings'),
|
||||
routeName: 'User',
|
||||
routeName: 'AppOthers',
|
||||
isVisible: true,
|
||||
},
|
||||
],
|
||||
@@ -69,7 +69,7 @@
|
||||
isVisible: true,
|
||||
},
|
||||
{
|
||||
icon: 'monitor-icon',
|
||||
icon: 'monitor',
|
||||
title: this.$t('admin_menu.pages'),
|
||||
routeName: 'Pages',
|
||||
isVisible: true,
|
||||
|
||||
@@ -3,15 +3,12 @@
|
||||
<div id="page-content" class="large-width center-page" v-show="! isLoading">
|
||||
<MobileHeader :title="$router.currentRoute.meta.title"/>
|
||||
<div class="content-page">
|
||||
|
||||
<div class="plan-title">
|
||||
<credit-card-icon size="42" class="title-icon"></credit-card-icon>
|
||||
<h1>{{ $t('page_upgrade_account.title') }}</h1>
|
||||
<h2>{{ $t('page_upgrade_account.desription') }}</h2>
|
||||
</div>
|
||||
|
||||
<div class="order">
|
||||
|
||||
<div class="steps">
|
||||
|
||||
<div class="payment-card">
|
||||
@@ -19,10 +16,10 @@
|
||||
|
||||
<!-- Pay by new credit card -->
|
||||
<div class="register-card" v-show="! defaultPaymentMethod || payByNewCard">
|
||||
<p class="payment-demo-disclaimer">
|
||||
For test your payment please use <b>4242 4242 4242 4242</b> or <b>5555555555554444</b> as a card number, <b>11/22</b>
|
||||
as the expiration date and <b>123</b> as CVC number and ZIP <b>12345</b>.
|
||||
</p>
|
||||
<InfoBox>
|
||||
<p>For test your payment please use <b>4242 4242 4242 4242</b> or <b>5555 5555 5555 4444</b> as a card number, <b>11/22</b>
|
||||
as the expiration date and <b>123</b> as CVC number and ZIP <b>12345</b>.</p>
|
||||
</InfoBox>
|
||||
|
||||
<div ref="stripeCard" class="stripe-card" :class="{'is-error': isError }"></div>
|
||||
|
||||
@@ -237,6 +234,7 @@
|
||||
import FormLabel from '@/components/Others/Forms/FormLabel'
|
||||
import MobileHeader from '@/components/Mobile/MobileHeader'
|
||||
import ButtonBase from '@/components/FilesView/ButtonBase'
|
||||
import InfoBox from '@/components/Others/Forms/InfoBox'
|
||||
import ColorLabel from '@/components/Others/ColorLabel'
|
||||
import PageHeader from '@/components/Others/PageHeader'
|
||||
import Spinner from '@/components/FilesView/Spinner'
|
||||
@@ -262,6 +260,7 @@
|
||||
FormLabel,
|
||||
required,
|
||||
Spinner,
|
||||
InfoBox,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['requestedPlan', 'config']),
|
||||
@@ -509,18 +508,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.payment-demo-disclaimer {
|
||||
padding: 15px;
|
||||
background: $light_background;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.6;
|
||||
|
||||
b {
|
||||
color: $danger;
|
||||
}
|
||||
}
|
||||
|
||||
.stripe-card {
|
||||
box-sizing: border-box;
|
||||
padding: 13px 20px;
|
||||
@@ -550,6 +537,10 @@
|
||||
&.StripeElement--webkit-autofill {
|
||||
background-color: #fefde5 !important;
|
||||
}
|
||||
|
||||
iframe .InputContainer .InputElement {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.summary-list {
|
||||
@@ -614,6 +605,7 @@
|
||||
|
||||
.order {
|
||||
display: flex;
|
||||
margin-bottom: 30px;
|
||||
|
||||
.steps {
|
||||
flex: 0 0 65%;
|
||||
@@ -650,10 +642,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.plan-title {
|
||||
@@ -714,6 +702,32 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stripe-card {
|
||||
border: 1px solid transparent;
|
||||
//background-color: $dark_mode_foreground;
|
||||
box-shadow: none;
|
||||
|
||||
&.StripeElement--webkit-autofill {
|
||||
background-color: $dark_mode_foreground !important;
|
||||
}
|
||||
|
||||
&.StripeElement--focus {
|
||||
box-shadow: none;
|
||||
border-color: $theme;
|
||||
box-shadow: 0 1px 5px rgba($theme, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
.order {
|
||||
display: block;
|
||||
|
||||
.steps {
|
||||
margin-bottom: 70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -136,8 +136,8 @@
|
||||
},
|
||||
deleteCard(card) {
|
||||
events.$emit('confirm:open', {
|
||||
title: this.$t('popup_set_card.title'),
|
||||
message: this.$t('popup_set_card.message'),
|
||||
title: this.$t('popup_delete_card.title'),
|
||||
message: this.$t('popup_delete_card.message'),
|
||||
action: {
|
||||
id: card.card_id,
|
||||
operation: 'delete-credit-card'
|
||||
@@ -188,8 +188,11 @@
|
||||
message: this.$t('toaster.card_deleted'),
|
||||
})
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
.catch(() => {
|
||||
events.$emit('alert:open', {
|
||||
title: this.$t('popup_error.title'),
|
||||
message: this.$t('popup_error.message'),
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
@@ -209,8 +212,11 @@
|
||||
message: this.$t('toaster.card_set'),
|
||||
})
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
.catch(() => {
|
||||
events.$emit('alert:open', {
|
||||
title: this.$t('popup_error.title'),
|
||||
message: this.$t('popup_error.message'),
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
<!--Info about canceled subscription-->
|
||||
<div v-if="subscription.data.attributes.canceled" class="state canceled">
|
||||
<ListInfo class="list-info">
|
||||
<ListInfoItem class="list-item" :title="$t('user_subscription.plan')" :content="subscription.data.attributes.name"/>
|
||||
<ListInfoItem class="list-item" :title="$t('user_subscription.plan')" :content="subscription.data.attributes.name + ' - ' + subscription.data.attributes.capacity_formatted"/>
|
||||
<ListInfoItem class="list-item" :title="$t('user_subscription.status')" :content="status"/>
|
||||
<ListInfoItem class="list-item capitalize" :title="$t('user_subscription.canceled_at')" :content="subscription.data.attributes.canceled_at"/>
|
||||
<ListInfoItem class="list-item capitalize" :title="$t('user_subscription.ends_at')" :content="subscription.data.attributes.ends_at"/>
|
||||
@@ -115,80 +115,89 @@
|
||||
|
||||
// Set confirm button
|
||||
if (!this.isConfirmedCancel) {
|
||||
|
||||
this.isConfirmedCancel = true
|
||||
} else {
|
||||
|
||||
// Start deleting spinner button
|
||||
this.isDeleting = true
|
||||
this.isLoading = true
|
||||
|
||||
// Send delete request
|
||||
axios
|
||||
.post('/api/subscription/cancel')
|
||||
.then(() => {
|
||||
|
||||
// Update user data
|
||||
this.$store.dispatch('getAppData').then(() => {
|
||||
this.fetchSubscriptionDetail()
|
||||
})
|
||||
|
||||
events.$emit('alert:open', {
|
||||
emoji: '👍',
|
||||
title: this.$t('popup_subscription_cancel.title'),
|
||||
message: this.$t('popup_subscription_cancel.message'),
|
||||
buttonStyle: 'theme',
|
||||
button: this.$t('popup_subscription_cancel.button')
|
||||
})
|
||||
})
|
||||
.finally(() => {
|
||||
|
||||
// End deleting spinner button
|
||||
this.isDeleting = false
|
||||
this.isLoading = false
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// Start deleting spinner button
|
||||
this.isDeleting = true
|
||||
this.isLoading = true
|
||||
|
||||
// Send delete request
|
||||
axios
|
||||
.post('/api/subscription/cancel')
|
||||
.then(() => {
|
||||
|
||||
// Update user data
|
||||
this.$store.dispatch('getAppData').then(() => {
|
||||
this.fetchSubscriptionDetail()
|
||||
})
|
||||
|
||||
events.$emit('alert:open', {
|
||||
emoji: '👍',
|
||||
title: this.$t('popup_subscription_cancel.title'),
|
||||
message: this.$t('popup_subscription_cancel.message'),
|
||||
buttonStyle: 'theme',
|
||||
button: this.$t('popup_subscription_cancel.button')
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
events.$emit('alert:open', {
|
||||
title: this.$t('popup_error.title'),
|
||||
message: this.$t('popup_error.message'),
|
||||
})
|
||||
})
|
||||
.finally(() => {
|
||||
|
||||
// End deleting spinner button
|
||||
this.isDeleting = false
|
||||
this.isLoading = false
|
||||
this.isConfirmedCancel = false
|
||||
})
|
||||
},
|
||||
resumeSubscription() {
|
||||
|
||||
// Set confirm button
|
||||
if (!this.isConfirmedResume) {
|
||||
|
||||
if (! this.isConfirmedResume) {
|
||||
this.isConfirmedResume = true
|
||||
} else {
|
||||
|
||||
// Start deleting spinner button
|
||||
this.isResuming = true
|
||||
this.isLoading = true
|
||||
|
||||
// Send delete request
|
||||
axios
|
||||
.post('/api/subscription/resume')
|
||||
.then(() => {
|
||||
|
||||
// Update user data
|
||||
this.$store.dispatch('getAppData').then(() => {
|
||||
this.fetchSubscriptionDetail()
|
||||
})
|
||||
|
||||
// End deleting spinner button
|
||||
this.isResuming = false
|
||||
|
||||
events.$emit('alert:open', {
|
||||
emoji: '👍',
|
||||
title: this.$t('popup_subscription_resumed.title'),
|
||||
message: this.$t('popup_subscription_resumed.message'),
|
||||
buttonStyle: 'theme',
|
||||
button: this.$t('popup_subscription_resumed.button')
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
|
||||
// End deleting spinner button
|
||||
this.isResuming = false
|
||||
this.isLoading = false
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// Start deleting spinner button
|
||||
this.isResuming = true
|
||||
this.isLoading = true
|
||||
|
||||
// Send delete request
|
||||
axios
|
||||
.post('/api/subscription/resume')
|
||||
.then(() => {
|
||||
|
||||
// Update user data
|
||||
this.$store.dispatch('getAppData').then(() => {
|
||||
this.fetchSubscriptionDetail()
|
||||
})
|
||||
|
||||
events.$emit('alert:open', {
|
||||
emoji: '👍',
|
||||
title: this.$t('popup_subscription_resumed.title'),
|
||||
message: this.$t('popup_subscription_resumed.message'),
|
||||
buttonStyle: 'theme',
|
||||
button: this.$t('popup_subscription_resumed.button')
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
events.$emit('alert:open', {
|
||||
title: this.$t('popup_error.title'),
|
||||
message: this.$t('popup_error.message'),
|
||||
})
|
||||
})
|
||||
.finally(() => {
|
||||
|
||||
// End deleting spinner button
|
||||
this.isResuming = false
|
||||
this.isLoading = false
|
||||
this.isConfirmedResume = false
|
||||
})
|
||||
},
|
||||
fetchSubscriptionDetail() {
|
||||
axios.get('/api/user/subscription')
|
||||
@@ -229,13 +238,4 @@
|
||||
flex: 0 0 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user