nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-18 16:22:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

upgrade plan UI improvements

Browse Source
This commit is contained in:
Čarodej
2022-01-03 11:14:27 +01:00
parent 2363592dcd
commit 9d189b3d12
8 changed files with 232 additions and 729 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
resources/js/components/Subscription/PlanDetail.vue
View File

@@ -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'

18
resources/js/components/Subscription/SelectPlanSubscriptionPopup.vue
View File

@@ -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"