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

Popups refactoring

Browse Source
This commit is contained in:
Čarodej
2022-01-19 08:21:32 +01:00
parent c711150793
commit 09449539fa
19 changed files with 99 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/components/FilesView/MobileContextMenu.vue
View File

@@ -1,6 +1,6 @@
<template>
<MenuMobile name="file-menu">
<ThumbnailItem class="item-thumbnail" :item="clipboard[0]" info="metadata" />
<ThumbnailItem class="mb-5" :item="clipboard[0]" info="metadata" />
<MenuMobileGroup v-if="$slots.default">
<slot></slot>

4
resources/js/components/Others/CreateFolderPopup.vue
View File

@@ -26,13 +26,13 @@
<!--Actions-->
<PopupActions>
<ButtonBase
class="popup-button"
class="w-full"
@click.native="$closePopup()"
button-style="secondary"
>{{ $t('popup_move_item.cancel') }}
</ButtonBase>
<ButtonBase
class="popup-button"
class="w-full"
@click.native="createFolder"
button-style="theme"
>{{ $t('popup_create_folder.title') }}

6
resources/js/components/Others/CreateLanguage.vue
View File

@@ -8,7 +8,7 @@
<PopupContent>
<!--Form to set sharing-->
<ValidationObserver @submit.prevent="createLanguage" ref="createForm" v-slot="{ invalid }" tag="form" class="form-wrapper">
<ValidationObserver @submit.prevent="createLanguage" ref="createForm" v-slot="{ invalid }" tag="form">
<ValidationProvider tag="div" mode="passive" name="Language Locale" rules="required" v-slot="{ errors }">
<AppInputText :title="$t('select_locale')" :error="errors[0]">
<SelectInput v-model="form.locale" :options="locales" :placeholder="$t('select_language_locale')" :isError="errors[0]" />
@@ -25,14 +25,14 @@
<!--Actions-->
<PopupActions>
<ButtonBase
class="popup-button"
class="w-full"
@click.native="$closePopup()"
button-style="secondary"
>
{{ $t('global.cancel') }}
</ButtonBase>
<ButtonBase
class="popup-button"
class="w-full"
@click.native="createLanguage"
button-style="theme"
:loading="isLoading"

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

@@ -4,7 +4,7 @@
<PopupHeader :title="$t('popup_personal_token.title')" icon="key" />
<PopupContent>
<ValidationObserver v-if="! token" @submit.prevent="createTokenForm" ref="createToken" v-slot="{ invalid }" tag="form" class="form-wrapper">
<ValidationObserver v-if="! token" @submit.prevent="createTokenForm" ref="createToken" v-slot="{ invalid }" tag="form">
<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">
@@ -14,7 +14,7 @@
</ValidationObserver>
<AppInputText v-if="token" :title="$t('popup_personal_token.your_token')" class="form-wrapper" :is-last="true">
<AppInputText v-if="token" :title="$t('popup_personal_token.your_token')" :is-last="true">
<CopyInput size="small" :str="token['plainTextToken']" />
<InfoBox style="margin-bottom: 0; margin-top: 20px">
@@ -26,14 +26,14 @@
<PopupActions v-if="! token">
<ButtonBase
class="popup-button"
class="w-full"
@click.native="$closePopup()"
button-style="secondary"
>
{{ $t('global.cancel') }}
</ButtonBase>
<ButtonBase
class="popup-button"
class="w-full"
@click.native="createTokenForm"
button-style="theme"
:loading="isLoading"
@@ -45,7 +45,7 @@
<PopupActions v-if="token">
<ButtonBase
class="popup-button"
class="w-full"
@click.native="closePopup"
button-style="theme"
>

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

@@ -1,6 +1,6 @@
<template>
<div @click="copyUrl" class="flex items-center relative">
<input ref="sel" :value="str" :id="id" type="text" class="pr-8 focus-border-theme input-dark" readonly>
<input ref="sel" :value="str" :id="id" type="text" class="pr-10 focus-border-theme input-dark" readonly>
<!--Copy icon-->
<div class="absolute right-0 px-4">

34
resources/js/components/Others/MoveItemPopup.vue
View File

@@ -11,28 +11,30 @@
<!--Folder tree-->
<div v-if="! isLoadingTree && navigation">
<ThumbnailItem v-if="clipboard.length < 2 || isSelectedItem" class="item-thumbnail" :item="pickedItem" info="location" />
<ThumbnailItem v-if="clipboard.length < 2 || isSelectedItem" class="mb-5" :item="pickedItem" info="location" />
<TitlePreview class="multiple-selected"
icon="check-square"
:title="$t('file_detail.selected_multiple')"
:subtitle="this.clipboard.length + ' ' + $tc('file_detail.items', this.clipboard.length)"
v-if="clipboard.length > 1 && !isSelectedItem" />
<TitlePreview
class="mb-4"
icon="check-square"
:title="$t('file_detail.selected_multiple')"
:subtitle="this.clipboard.length + ' ' + $tc('file_detail.items', this.clipboard.length)"
v-if="clipboard.length > 1 && !isSelectedItem"
/>
<TreeMenu :disabled-by-id="pickedItem" :depth="1" :nodes="items" v-for="items in navigation" :key="items.id" />
<TreeMenu class="-mx-4" :disabled-by-id="pickedItem" :depth="1" :nodes="items" v-for="items in navigation" :key="items.id" />
</div>
</PopupContent>
<!--Actions-->
<PopupActions>
<ButtonBase
class="popup-button"
class="w-full"
@click.native="$closePopup()"
button-style="secondary"
>{{ $t('popup_move_item.cancel') }}
</ButtonBase>
<ButtonBase
class="popup-button"
class="w-full"
@click.native="moveItem"
:button-style="selectedFolder ? 'theme' : 'secondary'"
>{{ $t('popup_move_item.submit') }}
@@ -165,17 +167,3 @@
}
}
</script>
<style scoped lang="scss">
@import '/resources/sass/vuefilemanager/_variables';
@import '/resources/sass/vuefilemanager/_mixins';
.item-thumbnail {
margin-bottom: 20px;
}
.multiple-selected {
padding: 0 20px;;
margin-bottom: 20px;
}
</style>

4
resources/js/components/Others/Popup/ConfirmPopup.vue
View File

@@ -13,13 +13,13 @@
<ButtonBase
@click.native="closePopup"
button-style="secondary"
class="popup-button"
class="w-full"
>{{ $t('global.cancel') }}
</ButtonBase>
<ButtonBase
@click.native="confirm"
:button-style="buttonColor"
class="popup-button"
class="w-full"
>{{ $t('global.confirm_action') }}
</ButtonBase>
</PopupActions>

2
resources/js/components/Others/Popup/PopupActions.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="actions flex items-center space-x-4 md:p-6 p-4">
<div class="actions flex items-center space-x-4 px-6 py-4 pb-6">
<slot></slot>
</div>
</template>

12
resources/js/components/Others/RenameItemPopup.vue
View File

@@ -7,10 +7,10 @@
<PopupContent>
<!--Item Thumbnail-->
<ThumbnailItem class="item-thumbnail" :item="pickedItem" info="metadata" :setFolderIcon="folderIcon" />
<ThumbnailItem class="mb-5" :item="pickedItem" info="metadata" :setFolderIcon="folderIcon" />
<!--Form to set sharing-->
<ValidationObserver @submit.prevent="changeName" ref="renameForm" v-slot="{ invalid }" tag="form" class="form-wrapper">
<ValidationObserver @submit.prevent="changeName" ref="renameForm" v-slot="{ invalid }" tag="form">
<!--Set password-->
<ValidationProvider tag="div" mode="passive" name="Name" rules="required" v-slot="{ errors }">
@@ -34,10 +34,10 @@
<!--Actions-->
<PopupActions>
<ButtonBase class="popup-button" @click.native="$closePopup()" button-style="secondary">
<ButtonBase class="w-full" @click.native="$closePopup()" button-style="secondary">
{{ $t('popup_move_item.cancel') }}
</ButtonBase>
<ButtonBase class="popup-button" @click.native="changeName" button-style="theme">
<ButtonBase class="w-full" @click.native="changeName" button-style="theme">
{{ $t('popup_share_edit.save') }}
</ButtonBase>
</PopupActions>
@@ -183,10 +183,6 @@ export default {
}
}
.item-thumbnail {
margin-bottom: 20px;
}
.dark {
.close-icon-wrapper {
&:hover {

2
resources/js/components/Others/SelectSingleChargeMethodPopup.vue
View File

@@ -54,7 +54,7 @@
<PopupActions>
<ButtonBase
class="popup-button"
class="w-full"
@click.native="$closePopup()"
button-style="secondary"
>

25
resources/js/components/Others/ShareCreatePopup.vue
View File

@@ -7,10 +7,10 @@
<PopupContent>
<!--Item Thumbnail-->
<ThumbnailItem class="item-thumbnail" :item="pickedItem" info="metadata" />
<ThumbnailItem class="mb-5" :item="pickedItem" info="metadata" />
<!--Form to set sharing-->
<ValidationObserver v-if="! isGeneratedShared" @submit.prevent ref="shareForm" v-slot="{ invalid }" tag="form" class="form-wrapper">
<ValidationObserver v-if="! isGeneratedShared" @submit.prevent ref="shareForm" v-slot="{ invalid }" tag="form">
<!--Permission Select-->
<ValidationProvider v-if="isFolder" tag="div" mode="passive" name="Permission" rules="required" v-slot="{ errors }">
@@ -66,10 +66,10 @@
<!--Actions-->
<PopupActions>
<ButtonBase v-if="! isGeneratedShared" class="popup-button" @click.native="$closePopup()" button-style="secondary">
<ButtonBase v-if="! isGeneratedShared" class="w-full" @click.native="$closePopup()" button-style="secondary">
{{ $t('popup_move_item.cancel') }}
</ButtonBase>
<ButtonBase class="popup-button" @click.native="submitShareOptions" button-style="theme" :loading="isLoading" :disabled="isLoading">
<ButtonBase class="w-full" @click.native="submitShareOptions" button-style="theme" :loading="isLoading" :disabled="isLoading">
{{ submitButtonText }}
</ButtonBase>
</PopupActions>
@@ -247,20 +247,3 @@ export default {
}
}
</script>
<style scoped lang="scss">
@import "resources/sass/vuefilemanager/_inapp-forms.scss";
@import '/resources/sass/vuefilemanager/_forms';
.input-wrapper {
&.password {
margin-top: -10px;
}
}
.item-thumbnail {
margin-bottom: 20px;
}
</style>

4
resources/js/components/Others/ShareEditPopup.vue
View File

@@ -33,7 +33,7 @@
<!--Item Thumbnail-->
<ThumbnailItem class="mb-4" :item="pickedItem" info="metadata" />
<ValidationObserver @submit.prevent v-slot="{ invalid }" ref="shareEmail" tag="form" class="px-5">
<ValidationObserver @submit.prevent v-slot="{ invalid }" ref="shareEmail" tag="form">
<ValidationProvider tag="div" mode="passive" name="Email" rules="required" v-slot="{ errors }">
<AppInputText title="Share with" :error="errors[0]" :is-last="true">
<MultiEmailInput rules="required" v-model="emails" :label="$t('shared_form.label_send_to_recipients')" />
@@ -73,7 +73,7 @@
<CopyShareLink :item="pickedItem" />
</AppInputText>
<ValidationObserver @submit.prevent ref="shareForm" v-slot="{ invalid }" tag="form" class="form-wrapper">
<ValidationObserver @submit.prevent ref="shareForm" v-slot="{ invalid }" tag="form">
<!--Permission Select-->
<ValidationProvider v-if="isFolder" tag="div" mode="passive" name="Permission" rules="required" v-slot="{ errors }">

2
resources/js/components/Others/TwoFactorRecoveryCodesPopup.vue
View File

@@ -35,7 +35,7 @@
<PopupActions>
<ButtonBase
class="popup-button"
class="w-full"
@click.native="$closePopup()"
button-style="theme"
>

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

@@ -4,7 +4,7 @@
<PopupHeader :title="$t('popup_2fa.title')" icon="edit" />
<PopupContent>
<ValidationObserver @submit.prevent="confirmPassword" v-if="! qrCode" ref="passwordForm" v-slot="{ invalid }" tag="form" class="form-wrapper">
<ValidationObserver @submit.prevent="confirmPassword" v-if="! qrCode" ref="passwordForm" v-slot="{ invalid }" tag="form">
<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="{'border-red': errors[0]}" type="password" ref="input" class="focus-border-theme input-dark" :placeholder="$t('page_sign_in.placeholder_password')">
@@ -25,14 +25,14 @@
<PopupActions v-if="! qrCode">
<ButtonBase
class="popup-button"
class="w-full"
@click.native="$closePopup()"
button-style="secondary"
>
{{ $t('global.cancel') }}
</ButtonBase>
<ButtonBase
class="popup-button"
class="w-full"
@click.native="confirmPassword"
button-style="theme"
:loading="isLoading"
@@ -44,7 +44,7 @@
<PopupActions v-if="qrCode">
<ButtonBase
class="popup-button"
class="w-full"
@click.native="closeQrCodePopup"
:button-style="closeQrButtonStyle"
>
@@ -201,7 +201,6 @@ export default {
@import '/resources/sass/vuefilemanager/_forms';
.qr-code-wrapper {
padding: 0 20px;
.qr-code {
display: flex;

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

@@ -71,7 +71,7 @@
<PopupActions>
<ButtonBase
class="popup-button"
class="w-full"
@click.native="$closePopup()"
button-style="secondary"
>
@@ -110,13 +110,13 @@
<!--Actions-->
<PopupActions>
<ButtonBase
class="popup-button"
class="w-full"
@click.native="$closePopup()"
button-style="secondary"
>{{ $t('popup_move_item.cancel') }}
</ButtonBase>
<ButtonBase
class="popup-button"
class="w-full"
:button-style="buttonStyle"
@click.native="isPaymentOptionPage = true"
>{{ $t('Upgrade Account') }}

8
resources/js/components/Teams/CreateTeamFolderPopup.vue
View File

@@ -8,10 +8,10 @@
<PopupContent>
<!--Item Thumbnail-->
<ThumbnailItem v-if="! isNewFolderTeamCreation" class="item-thumbnail" :item="item" info="metadata" />
<ThumbnailItem v-if="! isNewFolderTeamCreation" class="mb-5" :item="item" info="metadata" />
<!--Form to set team folder-->
<ValidationObserver @submit.prevent="createTeamFolder" ref="teamFolderForm" v-slot="{ invalid }" tag="form" class="form-wrapper">
<ValidationObserver @submit.prevent="createTeamFolder" ref="teamFolderForm" v-slot="{ invalid }" tag="form">
<!--Set folder name-->
<ValidationProvider v-if="isNewFolderTeamCreation" tag="div" mode="passive" name="Name" rules="required" v-slot="{ errors }">
@@ -60,13 +60,13 @@
<!--Actions-->
<PopupActions>
<ButtonBase
class="popup-button"
class="w-full"
@click.native="$closePopup()"
button-style="secondary"
>{{ $t('popup_move_item.cancel') }}
</ButtonBase>
<ButtonBase
class="popup-button"
class="w-full"
@click.native="createTeamFolder"
button-style="theme"
:loading="isLoading"

8
resources/js/components/Teams/EditTeamFolderPopup.vue
View File

@@ -8,10 +8,10 @@
<PopupContent>
<!--Item Thumbnail-->
<ThumbnailItem class="item-thumbnail" :item="item" info="metadata" />
<ThumbnailItem class="mb-5" :item="item" info="metadata" />
<!--Form to set team folder-->
<ValidationObserver @submit.prevent="updateTeamFolder" ref="teamFolderForm" v-slot="{ invalid }" tag="form" class="form-wrapper">
<ValidationObserver @submit.prevent="updateTeamFolder" ref="teamFolderForm" v-slot="{ invalid }" tag="form">
<!--Add Member-->
<ValidationProvider tag="div" mode="passive" name="Email" v-slot="{ errors }">
@@ -49,13 +49,13 @@
<!--Actions-->
<PopupActions>
<ButtonBase
class="popup-button"
class="w-full"
@click.native="$closePopup()"
button-style="secondary"
>{{ $t('popup_move_item.cancel') }}
</ButtonBase>
<ButtonBase
class="popup-button"
class="w-full"
@click.native="updateTeamFolder"
:button-style="isDisabledSubmit ? 'secondary' : 'theme'"
:loading="isLoading"

2
resources/js/views/User/Password.vue
View File

@@ -10,7 +10,7 @@
<SwitchInput @click.native.prevent.stop="open2faPopup" class="switch" :state="user.data.attributes.two_factor_authentication" />
</AppInputSwitch>
<AppInputSwitch v-if="user && user.data.attributes.two_factor_authentication" :title="$t('popup_2fa.codes_title')" :description="$t('popup_2fa.codes_info')" :is-last="true">
<ButtonBase class="popup-button" button-style="secondary" @click.native="showRecoveryCodes">
<ButtonBase class="w-full" button-style="secondary" @click.native="showRecoveryCodes">
{{ $t('popup_2fa.codes_button') }}
</ButtonBase>
</AppInputSwitch>