mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-27 18:40:39 +00:00
upgrade plan UI improvements
This commit is contained in:
Čarodej
@@ -1,16 +1,20 @@
|
||||
<template>
|
||||
<div class="input-wrapper">
|
||||
<div class="switch-content">
|
||||
<label class="input-label" v-if="label">{{ label }}:</label>
|
||||
<small class="input-info" v-if="info">{{ info }}</small>
|
||||
<label class="input-label" v-if="label">
|
||||
{{ label }}:
|
||||
</label>
|
||||
<small class="input-info" v-if="info">
|
||||
{{ info }}
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<div class="switch-content text-right">
|
||||
<div
|
||||
class="switch"
|
||||
:class="{ active: state }"
|
||||
@click="changeState"
|
||||
>
|
||||
class="switch"
|
||||
:class="{ active: state }"
|
||||
@click="changeState"
|
||||
>
|
||||
<div class="switch-button"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -19,92 +23,92 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:'SwitchInput',
|
||||
props: [
|
||||
name: 'SwitchInput',
|
||||
props: [
|
||||
'label',
|
||||
'name',
|
||||
'state',
|
||||
'info',
|
||||
'input',
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
isSwitched: undefined
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeState() {
|
||||
this.isSwitched = ! this.isSwitched
|
||||
this.$emit('input', this.isSwitched)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isSwitched = this.state
|
||||
}
|
||||
}
|
||||
data() {
|
||||
return {
|
||||
isSwitched: undefined
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeState() {
|
||||
this.isSwitched = !this.isSwitched
|
||||
this.$emit('input', this.isSwitched)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isSwitched = this.state
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '/resources/sass/vuefilemanager/_variables';
|
||||
@import '/resources/sass/vuefilemanager/_mixins';
|
||||
@import '/resources/sass/vuefilemanager/_mixins';
|
||||
|
||||
.input-wrapper {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
.input-wrapper {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
.input-label {
|
||||
color: $text;
|
||||
}
|
||||
.input-label {
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.switch-content {
|
||||
width: 100%;
|
||||
.switch-content {
|
||||
width: 100%;
|
||||
|
||||
&:last-child {
|
||||
width: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
width: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switch {
|
||||
width: 50px;
|
||||
height: 28px;
|
||||
border-radius: 50px;
|
||||
display: block;
|
||||
background: #f1f1f5;
|
||||
position: relative;
|
||||
@include transition;
|
||||
.switch {
|
||||
width: 50px;
|
||||
height: 28px;
|
||||
border-radius: 50px;
|
||||
display: block;
|
||||
background: #f1f1f5;
|
||||
position: relative;
|
||||
@include transition;
|
||||
|
||||
.switch-button {
|
||||
@include transition;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50px;
|
||||
display: block;
|
||||
background: white;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
box-shadow: 0 2px 4px rgba(37, 38, 94, 0.1);
|
||||
cursor: pointer;
|
||||
}
|
||||
.switch-button {
|
||||
@include transition;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50px;
|
||||
display: block;
|
||||
background: white;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
box-shadow: 0 2px 4px rgba(37, 38, 94, 0.1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.active {
|
||||
&.active {
|
||||
|
||||
.switch-button {
|
||||
left: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.switch-button {
|
||||
left: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
.switch {
|
||||
background: $dark_mode_foreground;
|
||||
}
|
||||
.dark {
|
||||
.switch {
|
||||
background: $dark_mode_foreground;
|
||||
}
|
||||
|
||||
.popup-wrapper {
|
||||
.switch {
|
||||
background: lighten($dark_mode_foreground, 3%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.popup-wrapper {
|
||||
.switch {
|
||||
background: lighten($dark_mode_foreground, 3%);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<PopupContent style="padding: 0 20px">
|
||||
|
||||
<!--PayPal implementation-->
|
||||
<div :class="{'dark:bg-2x-dark-foreground bg-light-background rounded-xl px-4 mb-2': paypalMethodsLoaded}">
|
||||
<div v-if="config.isPayPal" :class="{'dark:bg-2x-dark-foreground bg-light-background rounded-xl px-4 mb-2': paypalMethodsLoaded}">
|
||||
<PaymentMethod
|
||||
@click.native="pickedPaymentMethod('paypal')"
|
||||
driver="paypal"
|
||||
@@ -24,6 +24,7 @@
|
||||
|
||||
<!--Paystack implementation-->
|
||||
<PaymentMethod
|
||||
v-if="config.isPaystack"
|
||||
driver="paystack"
|
||||
:description="$t('Available Bank Account, USSD, Mobile Money, Apple Pay')"
|
||||
>
|
||||
|
||||
@@ -1,10 +1,16 @@
|
||||
<template>
|
||||
<label class="py-3 px-4 cursor-pointer border-b border-light rounded-lg block select-none" :class="{'bg-light-background': isSelected}">
|
||||
<div class="flex items-center mb-1.5">
|
||||
<div
|
||||
class="py-3 px-4 cursor-pointer rounded-lg block select-none"
|
||||
:class="{'bg-light-background': isSelected}"
|
||||
>
|
||||
<div class="flex items-center justify-between mb-1.5">
|
||||
<CheckBox :is-clicked="isSelected" />
|
||||
<b class="pl-4 text-lg">
|
||||
<b class="pl-4 text-lg text-left flex-1">
|
||||
{{ plan.data.attributes.name }}
|
||||
</b>
|
||||
<span class="ml-9 inline-block py-1 px-2 text-theme font-extrabold text-sm rounded-xl bg-theme-100 whitespace-nowrap">
|
||||
{{ plan.data.attributes.price }} / {{ $t(`interval.${plan.data.attributes.interval}`) }}
|
||||
</span>
|
||||
</div>
|
||||
<ul class="ml-9 mb-3">
|
||||
<li class="flex items-center mb-1.5" v-for="(value, key, i) in plan.data.attributes.features" :key="i">
|
||||
@@ -17,10 +23,7 @@
|
||||
</small>
|
||||
</li>
|
||||
</ul>
|
||||
<span class="ml-9 inline-block py-1 px-2 text-theme font-extrabold text-sm rounded-xl bg-theme-100">
|
||||
{{ plan.data.attributes.price }} / {{ $t(`interval.${plan.data.attributes.interval}`) }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {CheckIcon} from 'vue-feather-icons'
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
<template>
|
||||
<PopupWrapper name="select-plan-subscription">
|
||||
|
||||
<!--Title-->
|
||||
<b class="text-center block text-2xl font-extrabold mt-6">
|
||||
{{ $t('Upgrade Your Account') }}
|
||||
</b>
|
||||
<PopupHeader :title="$t('Upgrade Your Account')" icon="credit-card" />
|
||||
|
||||
<!--Payment Options-->
|
||||
<div v-if="isPaymentOptionPage">
|
||||
@@ -54,22 +51,19 @@
|
||||
<PopupContent>
|
||||
|
||||
<!--Toggle amid monthly and yearly billing-->
|
||||
<div class="text-center my-5">
|
||||
<label :class="{'text-gray-400': isYearlyPlans}" class="font-bold cursor-pointer text-xs">
|
||||
{{ $t('Billed Monthly') }}
|
||||
</label>
|
||||
<div class="relative inline-block w-14 mx-4 align-middle select-none">
|
||||
<SwitchInput class="transform scale-90" v-model="isYearlyPlans" />
|
||||
</div>
|
||||
<div class="px-5 mb-2 text-right">
|
||||
<label :class="{'text-gray-400': !isYearlyPlans}" class="font-bold cursor-pointer text-xs">
|
||||
{{ $t('Billed Annually') }}
|
||||
</label>
|
||||
<div class="relative inline-block w-14 align-middle select-none">
|
||||
<SwitchInput class="transform scale-90" v-model="isYearlyPlans" :state="isYearlyPlans" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Form to set team folder-->
|
||||
<div class="px-4" v-if="plans">
|
||||
<PlanDetail
|
||||
v-for="plan in plans"
|
||||
v-for="(plan, i) in plans"
|
||||
:plan="plan"
|
||||
:key="plan.data.id"
|
||||
v-if="plan.data.attributes.interval === intervalPlanType"
|
||||
|
||||
Reference in New Issue
Block a user