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

card navigation refactoring

Browse Source
This commit is contained in:
Čarodej
2021-11-23 10:31:45 +01:00
parent b6c77a6685
commit 884c36a5a3
13 changed files with 295 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/App.vue
View File

@@ -135,7 +135,7 @@ export default {
@import '/resources/sass/vuefilemanager/_mixins';
.card {
@apply bg-white px-9 pt-8 pb-9 rounded-xl lg:mb-6 mb-4
@apply bg-white lg:p-8 p-6 rounded-lg lg:mb-6 mb-4
}
.input-dark {

2
resources/js/components/Admin/AppInputSwitch.vue
View File

@@ -8,7 +8,7 @@
</label>
<!--Input Description-->
<span v-if="description" class="text-xs text-gray-500 leading-3 -mt-0.5 block" v-html="description"></span>
<span v-if="description" class="text-xs text-gray-500 leading-4 block" v-html="description"></span>
<!--Input Description-->
<span v-if="error" class="error-message">

2
resources/js/components/Admin/AppInputText.vue
View File

@@ -10,7 +10,7 @@
<slot></slot>
<!--Input Description-->
<small v-if="description" class="text-xs text-gray-500 leading-normal -mt-0.5 block" v-html="description"></small>
<small v-if="description" class="text-xs text-gray-500 leading-4 block" v-html="description"></small>
<!--Input Description-->
<span v-if="error" class="text-red-700 pt-2 text-xs">

28
resources/js/components/Admin/CardNavigation.vue Normal file
View File

@@ -0,0 +1,28 @@
<template>
<div class="whitespace-nowrap overflow-x-auto">
<router-link
class="inline-block text-sm font-bold px-4 py-5 border-b-2 border-transparent border-bottom-theme"
:class="{'text-theme': routeName === page.route, 'text-gray-600': routeName !== page.route}"
v-for="(page, i) in pages"
:to="{name: page.route}"
:key="i"
replace
>
{{ page.title }}
</router-link>
</div>
</template>
<script>
export default {
name: 'CardNavigation',
props: [
'pages'
],
computed: {
routeName() {
return this.$route.name
}
},
}
</script>

29
resources/js/components/Others/CreatePersonaTokenPopup.vue
View File

@@ -5,24 +5,23 @@
<PopupContent>
<ValidationObserver v-if="! token" @submit.prevent="createTokenForm" ref="createToken" v-slot="{ invalid }" tag="form" class="form-wrapper">
<ValidationProvider tag="div" mode="passive" class="input-wrapper password" name="Token Name" rules="required" v-slot="{ errors }">
<label class="input-label"> {{ $t('popup_personal_token.label') }}:</label>
<input v-model="name" :class="{'is-error': errors[0]}" type="text" ref="input" class="focus-border-theme" :placeholder="$t('popup_personal_token.plc')">
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
<ValidationProvider tag="div" mode="passive" name="Token Name" rules="required" v-slot="{ errors }">
<AppInputText :title="$t('popup_personal_token.label')" :error="errors[0]" :is-last="true">
<input v-model="name" :class="{'is-error': errors[0]}" type="text" ref="input" class="focus-border-theme input-dark" :placeholder="$t('popup_personal_token.plc')">
</AppInputText>
</ValidationProvider>
</ValidationObserver>
<div v-if="token" class="form-wrapper">
<div v-if="token">
<div class="input-wrapper">
<label class="input-label">{{ $t('popup_personal_token.your_token') }}:</label>
<CopyInput size="small" :str="token['plainTextToken']" />
</div>
</div>
<AppInputText v-if="token" :title="$t('popup_personal_token.your_token')" class="form-wrapper" :is-last="true">
<CopyInput size="small" :str="token['plainTextToken']" />
<InfoBox style="margin-bottom: 0; margin-top: 20px">
<p v-html="$t('popup_personal_token.copy_token')"></p>
</InfoBox>
</div>
<p v-html="$t('popup_personal_token.copy_token')"></p>
</InfoBox>
</AppInputText>
</PopupContent>
<PopupActions v-if="! token">
@@ -57,6 +56,7 @@
</template>
<script>
import AppInputText from "../Admin/AppInputText";
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
import PopupWrapper from '/resources/js/components/Others/Popup/PopupWrapper'
import PopupActions from '/resources/js/components/Others/Popup/PopupActions'
@@ -74,6 +74,7 @@ export default {
components: {
ValidationProvider,
ValidationObserver,
AppInputText,
PopupWrapper,
PopupActions,
PopupContent,

4
resources/js/components/Others/Forms/CopyInput.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="inline-wrapper icon-append copy-input" :class="size" @click="copyUrl">
<input ref="sel" :value="str" id="link-input" type="text" class="input-text" readonly>
<input ref="sel" :value="str" id="link-input" type="text" class="focus-border-theme input-dark" readonly>
<div class="multi-icon">
<div class="icon-item group hover-bg-theme-100">
<copy-icon v-if="! isCopiedLink" size="14" class="group-hover-text-theme hover-text-theme"/>
@@ -75,7 +75,7 @@ export default {
}
.icon-item {
padding: 9px 10px;
padding: 13px 10px;
display: flex;
align-items: center;
border-left: 1px solid $light_mode_border_darken;

11
resources/js/components/Others/TwoFactorSetupPopup.vue
View File

@@ -5,11 +5,10 @@
<PopupContent>
<ValidationObserver @submit.prevent="confirmPassword" v-if="! qrCode" ref="passwordForm" v-slot="{ invalid }" tag="form" class="form-wrapper">
<ValidationProvider tag="div" mode="passive" class="input-wrapper password" name="Password" rules="required" v-slot="{ errors }">
<label class="input-label"> {{ $t('popup_2fa.input_label') }}:</label>
<input v-model="password" :class="{'is-error': errors[0]}" type="password" ref="input" class="focus-border-theme" :placeholder="$t('page_sign_in.placeholder_password')">
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
<ValidationProvider tag="div" mode="passive" name="Password" rules="required" v-slot="{ errors }">
<AppInputText :title="$t('popup_2fa.input_label')" :error="errors[0]" :is-last="true">
<input v-model="password" :class="{'is-error': errors[0]}" type="password" ref="input" class="focus-border-theme input-dark" :placeholder="$t('page_sign_in.placeholder_password')">
</AppInputText>
</ValidationProvider>
</ValidationObserver>
@@ -56,6 +55,7 @@
</template>
<script>
import AppInputText from "../Admin/AppInputText";
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
import PopupWrapper from '/resources/js/components/Others/Popup/PopupWrapper'
import PopupActions from '/resources/js/components/Others/Popup/PopupActions'
@@ -73,6 +73,7 @@ export default {
components: {
ValidationProvider,
ValidationObserver,
AppInputText,
PopupWrapper,
PopupActions,
PopupContent,

14
resources/js/views/Admin/AppSettings/AppSettings.vue
View File

@@ -2,16 +2,7 @@
<div>
<!--Page Tab links-->
<div class="card shadow-card py-0 sticky top-0 z-10">
<router-link
class="inline-block text-sm font-bold px-4 py-5 border-b-2 border-transparent border-bottom-theme"
:class="{'text-theme': $router.currentRoute.name === page.route, 'text-gray-600': $router.currentRoute.name !== page.route}"
v-for="(page, i) in pages"
:to="{name: page.route}"
:key="i"
replace
>
{{ page.title }}
</router-link>
<CardNavigation :pages="pages" class="-mx-6" />
</div>
<!--Page Content-->
@@ -20,12 +11,13 @@
</template>
<script>
import CardNavigation from "../../../components/Admin/CardNavigation";
import {mapGetters} from 'vuex'
export default {
name: 'AppSettings',
components: {
CardNavigation,
},
computed: {
...mapGetters([

13
resources/js/views/Admin/Users/User.vue
View File

@@ -19,16 +19,7 @@
</div>
</div>
<router-link
class="inline-block text-sm font-bold px-4 py-5 border-b-2 border-transparent border-bottom-theme"
:class="{'text-theme': $router.currentRoute.name === page.route, 'text-gray-600': $router.currentRoute.name !== page.route}"
v-for="(page, i) in pages"
:to="{name: page.route}"
:key="i"
replace
>
{{ page.title }}
</router-link>
<CardNavigation :pages="pages" class="-mx-6" />
</div>
<!--Router Content-->
@@ -41,6 +32,7 @@
</template>
<script>
import CardNavigation from "../../../components/Admin/CardNavigation";
import {UserIcon, HardDriveIcon, LockIcon, Trash2Icon, FileTextIcon, CreditCardIcon} from 'vue-feather-icons'
import StorageItemDetail from '/resources/js/components/Others/StorageItemDetail'
import MobileHeader from '/resources/js/components/Mobile/MobileHeader'
@@ -55,6 +47,7 @@
name: 'Profile',
components: {
StorageItemDetail,
CardNavigation,
CreditCardIcon,
HardDriveIcon,
SectionTitle,

90
resources/js/views/Profile.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="sm:flex md:h-screen md:overflow-hidden">
<div class="sm:flex md:h-screen md:overflow-hidden" style="background: rgba(244, 245, 246, 0.6)">
<!--On Top of App Components-->
<FilePreview />
<Spotlight />
@@ -12,14 +12,13 @@
<CreatePersonaTokenPopup />
<SidebarNavigation />
<PanelNavigationUser />
<div v-if="user" class="pr-6 w-full overflow-x-hidden relative pt-6" style="background: rgba(244, 245, 246, 0.6)">
<div v-if="user" class="px-6 w-full overflow-x-hidden relative pt-6 xl:max-w-screen-lg md:max-w-screen-md mx-auto">
<div v-if="! isLoading" id="page-content">
<div class="card shadow-card">
<div class="card shadow-card pb-0 sticky top-0 z-10">
<!--User thumbnail-->
<div class="page-detail-headline">
<div class="mb-3">
<div class="user-thumbnail">
<div class="avatar">
<UserImageInput
@@ -37,24 +36,27 @@
<span class="email">{{ user.data.attributes.email }}</span>
</div>
</div>
<div v-if="config.storageLimit && config.isSaaS && config.app_payments_active && !canShowIncompletePayment" class="headline-actions">
<!--<div v-if="config.storageLimit && config.isSaaS && config.app_payments_active && !canShowIncompletePayment" class="headline-actions">
<ButtonBase @click.native="$openUpgradeOptions" class="upgrade-button" button-style="secondary" type="button">
{{ $t('global.upgrade_plan') }}
</ButtonBase>
</div>
</div>-->
</div>
<CardNavigation :pages="pages" class="-mx-6" />
<!--Incomplete Payment Warning-->
<InfoBox v-if="canShowIncompletePayment" type="error" class="message-box">
<!--<InfoBox v-if="canShowIncompletePayment" type="error" class="message-box">
<i18n path="incomplete_payment.description" tag="p">
<a :href="user.data.attributes.incomplete_payment">{{ $t('incomplete_payment.href') }}</a>
</i18n>
</InfoBox>
</InfoBox>-->
<!--Upgrade Storage Plan Warning-->
<InfoBox v-if="canShowUpgradeWarning && !canShowIncompletePayment" type="error" class="message-box">
<!--<InfoBox v-if="canShowUpgradeWarning && !canShowIncompletePayment" type="error" class="message-box">
<p>{{ $t('upgrade_banner.title') }}</p>
</InfoBox>
</InfoBox>-->
</div>
<!--Router Content-->
@@ -73,34 +75,27 @@
import TwoFactorRecoveryCodesPopup from '/resources/js/components/Others/TwoFactorRecoveryCodesPopup'
import CreatePersonaTokenPopup from '/resources/js/components/Others/CreatePersonaTokenPopup'
import TwoFactorSetupPopup from '/resources/js/components/Others/TwoFactorSetupPopup'
import UserImageInput from '/resources/js/components/Others/UserImageInput'
import UserImageInput from '/resources/js/components/Others/UserImageInput'
import SidebarNavigation from "../components/Sidebar/SidebarNavigation"
import MobileHeader from '/resources/js/components/Mobile/MobileHeader'
import PanelNavigationUser from "./User/Components/PanelNavigationUser"
import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
import PageHeader from '/resources/js/components/Others/PageHeader'
import ColorLabel from '/resources/js/components/Others/ColorLabel'
import Spinner from '/resources/js/components/FilesView/Spinner'
import { mapGetters } from 'vuex'
import ColorLabel from '/resources/js/components/Others/ColorLabel'
import Spinner from '/resources/js/components/FilesView/Spinner'
import {mapGetters} from 'vuex'
import CardNavigation from "../components/Admin/CardNavigation";
export default {
export default {
name: 'Settings',
components: {
CardNavigation,
FilePreview,
Spotlight,
TwoFactorRecoveryCodesPopup,
CreatePersonaTokenPopup,
PanelNavigationUser,
TwoFactorSetupPopup,
SidebarNavigation,
UserImageInput,
MobileHeader,
ButtonBase,
ColorLabel,
PageHeader,
Spinner,
InfoBox,
},
computed: {
...mapGetters([
@@ -124,6 +119,32 @@
return {
avatar: undefined,
isLoading: false,
pages: [
{
title: this.$t('menu.profile'),
route: 'Profile',
},
{
title: this.$t('menu.storage'),
route: 'Storage',
},
{
title: this.$t('menu.password'),
route: 'Password',
},
{
title: this.$t('menu.subscription'),
route: 'Subscription',
},
{
title: this.$t('menu.payment_cards'),
route: 'PaymentMethods',
},
{
title: this.$t('menu.invoices'),
route: 'Invoice',
},
]
}
},
}
@@ -185,21 +206,4 @@
}
}
}
@media only screen and (max-width: 690px) {
.page-detail-headline {
display: block;
margin-bottom: 30px;
margin-top: 10px;
.headline-actions {
margin-top: 20px;
.upgrade-button {
width: 100%;
}
}
}
}
</style>

111
resources/js/views/User/Components/PanelNavigationUser.vue
View File

@@ -1,111 +0,0 @@
<template>
<ContentSidebar>
<!--Settings-->
<ContentGroup title="Menu" class="navigator">
<div class="menu-list-wrapper vertical">
<router-link replace :to="{name: 'Profile'}" class="menu-list-item link">
<div class="icon text-theme">
<user-icon size="17" />
</div>
<div class="label text-theme">
{{ $t('menu.profile') }}
</div>
</router-link>
<router-link replace :to="{name: 'Storage'}" class="menu-list-item link">
<div class="icon text-theme">
<hard-drive-icon size="17" />
</div>
<div class="label text-theme">
{{ $t('menu.storage') }}
</div>
</router-link>
<router-link replace :to="{name: 'Password'}" class="menu-list-item link">
<div class="icon text-theme">
<lock-icon size="17" />
</div>
<div class="label text-theme">
{{ $t('menu.password') }}
</div>
</router-link>
</div>
</ContentGroup>
<!--Subscription-->
<ContentGroup v-if="canShowSubscriptionSettings" :title="$t('user_subscription.title')" class="navigator">
<div class="menu-list-wrapper vertical">
<router-link replace :to="{name: 'Subscription'}" class="menu-list-item link">
<div class="icon text-theme">
<cloud-icon size="17" />
</div>
<div class="label text-theme">
{{ $t('menu.subscription') }}
</div>
</router-link>
<router-link replace :to="{name: 'PaymentMethods'}" class="menu-list-item link">
<div class="icon text-theme">
<credit-card-icon size="17" />
</div>
<div class="label text-theme">
{{ $t('menu.payment_cards') }}
</div>
</router-link>
<router-link replace :to="{name: 'Invoice'}" class="menu-list-item link">
<div class="icon text-theme">
<file-text-icon size="17" />
</div>
<div class="label text-theme">
{{ $t('menu.invoices') }}
</div>
</router-link>
</div>
</ContentGroup>
</ContentSidebar>
</template>
<script>
import ContentSidebar from '/resources/js/components/Sidebar/ContentSidebar'
import ContentGroup from '/resources/js/components/Sidebar/ContentGroup'
import {mapGetters} from "vuex"
import {
CreditCardIcon,
HardDriveIcon,
FileTextIcon,
CloudIcon,
UserIcon,
LockIcon,
KeyIcon,
} from 'vue-feather-icons'
export default {
name: "PanelNavigationUser",
components: {
ContentSidebar,
CreditCardIcon,
ContentGroup,
HardDriveIcon,
FileTextIcon,
CloudIcon,
UserIcon,
LockIcon,
KeyIcon,
},
computed: {
...mapGetters([
'config',
'user',
]),
canShowSubscriptionSettings() {
return this.config.isSaaS && this.config.app_payments_active
},
}
}
</script>
<style scoped>
</style>