mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-29 03:10:51 +00:00
UI/UX improvements
This commit is contained in:
Čarodej
@@ -10,6 +10,13 @@
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<!--User Role-->
|
||||
<ValidationProvider tag="div" mode="passive" name="permission" rules="required" v-slot="{ errors }">
|
||||
<AppInputText :title="$t('admin_page_user.select_role')" :error="errors[0]">
|
||||
<SelectInput v-model="user.role" :options="$translateSelectOptions(roles)" :placeholder="$t('admin_page_user.select_role')" :isError="errors[0]" />
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<!--Email-->
|
||||
<ValidationProvider tag="div" mode="passive" name="email" rules="required" v-slot="{ errors }">
|
||||
<AppInputText :title="$t('page_registration.label_email')" :error="errors[0]">
|
||||
@@ -39,7 +46,7 @@
|
||||
<!--Password-->
|
||||
<div class="flex space-x-4">
|
||||
<ValidationProvider tag="div" mode="passive" name="password" rules="required" v-slot="{ errors }" class="w-full">
|
||||
<AppInputText :title="$t('page_registration.label_pass')" :error="errors[0]">
|
||||
<AppInputText :title="$t('page_registration.label_pass')" :error="errors[0]" :is-last="true">
|
||||
<input
|
||||
v-model="user.password"
|
||||
:placeholder="$t('page_registration.placeholder_pass')"
|
||||
@@ -50,7 +57,7 @@
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
<ValidationProvider tag="div" mode="passive" name="password confirm" rules="required" v-slot="{ errors }" class="w-full">
|
||||
<AppInputText :title="$t('page_registration.label_confirm_pass')" :error="errors[0]">
|
||||
<AppInputText :title="$t('page_registration.label_confirm_pass')" :error="errors[0]" :is-last="true">
|
||||
<input
|
||||
v-model="user.password_confirmation"
|
||||
:placeholder="$t('admin_page_user.create_user.label_conf_pass')"
|
||||
@@ -62,33 +69,8 @@
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card shadow-card">
|
||||
<FormLabel>{{ $t('admin_page_user.create_user.group_settings') }}</FormLabel>
|
||||
|
||||
<!--User Role-->
|
||||
<ValidationProvider tag="div" mode="passive" name="permission" rules="required" v-slot="{ errors }">
|
||||
<AppInputText :title="$t('admin_page_user.select_role')" :error="errors[0]">
|
||||
<SelectInput v-model="user.role" :options="$translateSelectOptions(roles)" :placeholder="$t('admin_page_user.select_role')" :isError="errors[0]" />
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<!--Storage Capacity-->
|
||||
<ValidationProvider tag="div" mode="passive" name="storage capacity" rules="required" v-slot="{ errors }">
|
||||
<AppInputText :title="$t('admin_page_user.label_change_capacity')" :error="errors[0]">
|
||||
<input
|
||||
v-model="user.max_storage_amount"
|
||||
min="1"
|
||||
max="999999999"
|
||||
:placeholder="$t('admin_page_user.label_change_capacity')"
|
||||
type="number"
|
||||
class="focus-border-theme input-dark"
|
||||
:class="{ 'border-red': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<ButtonBase :disabled="isLoading" :loading="isLoading" button-style="theme" type="submit">
|
||||
<ButtonBase :disabled="isLoading" :loading="isLoading" button-style="theme" type="submit" class="w-full sm:w-auto">
|
||||
{{ $t('admin_page_user.create_user.submit') }}
|
||||
</ButtonBase>
|
||||
</div>
|
||||
@@ -160,7 +142,6 @@ export default {
|
||||
formData.append('role', this.user.role)
|
||||
formData.append('email', this.user.email)
|
||||
formData.append('password', this.user.password)
|
||||
formData.append('max_storage_amount', this.user.max_storage_amount)
|
||||
formData.append('password_confirmation', this.user.password_confirmation)
|
||||
|
||||
// Append avatar if exist
|
||||
|
||||
@@ -37,53 +37,6 @@
|
||||
</AppInputText>
|
||||
</div>
|
||||
|
||||
<div class="card shadow-card">
|
||||
<FormLabel>
|
||||
{{ $t('Appearance') }}
|
||||
</FormLabel>
|
||||
|
||||
<AppInputText :title="$t('Theme Mode')" :description="$t('Set your theme mode on dark, light or based on your system settings.')" :is-last="!$isApple()">
|
||||
<div class="items-center space-y-4 md:flex md:space-x-6 md:space-x-4 md:space-y-0">
|
||||
<div
|
||||
v-for="(theme, i) in themeSetup"
|
||||
:key="i"
|
||||
:title="theme.title"
|
||||
@click="$store.dispatch('toggleThemeMode', theme.type)"
|
||||
class="w-full cursor-pointer overflow-hidden rounded-xl border-3 shadow-lg"
|
||||
:class="{
|
||||
'border-theme': config.defaultThemeMode === theme.type,
|
||||
'border-transparent': config.defaultThemeMode !== theme.type,
|
||||
}"
|
||||
>
|
||||
<img :src="theme.image" :alt="theme.type" />
|
||||
</div>
|
||||
</div>
|
||||
</AppInputText>
|
||||
|
||||
<AppInputText
|
||||
v-if="$isApple()"
|
||||
:title="$t('Default Emojis')"
|
||||
:description="$t('Set your default emojis for your folder custom icons. You can set Twemoji or default Apple emojis.')"
|
||||
:is-last="true"
|
||||
>
|
||||
<div class="items-center space-y-4 md:flex md:space-x-6 md:space-x-4 md:space-y-0">
|
||||
<div
|
||||
v-for="(emoji, i) in emojiSetup"
|
||||
:key="i"
|
||||
:title="emoji.title"
|
||||
@click="$store.dispatch('toggleEmojiType', emoji.type)"
|
||||
class="w-full cursor-pointer overflow-hidden rounded-xl border-3 shadow-lg"
|
||||
:class="{
|
||||
'border-theme': currentEmojis === emoji.type,
|
||||
'border-transparent': currentEmojis !== emoji.type,
|
||||
}"
|
||||
>
|
||||
<img :src="isDarkMode ? emoji.image.dark : emoji.image.light" :alt="emoji.type" />
|
||||
</div>
|
||||
</div>
|
||||
</AppInputText>
|
||||
</div>
|
||||
|
||||
<div class="card shadow-card">
|
||||
<FormLabel>
|
||||
{{ $t('user_settings.title_billing') }}
|
||||
@@ -144,6 +97,53 @@
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
</AppInputText>
|
||||
</div>
|
||||
|
||||
<div class="card shadow-card">
|
||||
<FormLabel>
|
||||
{{ $t('Appearance') }}
|
||||
</FormLabel>
|
||||
|
||||
<AppInputText :title="$t('Theme Mode')" :description="$t('Set your theme mode on dark, light or based on your system settings.')" :is-last="!$isApple()">
|
||||
<div class="items-center space-y-4 md:flex md:space-x-6 md:space-x-4 md:space-y-0">
|
||||
<div
|
||||
v-for="(theme, i) in themeSetup"
|
||||
:key="i"
|
||||
:title="theme.title"
|
||||
@click="$store.dispatch('toggleThemeMode', theme.type)"
|
||||
class="w-full cursor-pointer overflow-hidden rounded-xl border-3 shadow-lg"
|
||||
:class="{
|
||||
'border-theme': config.defaultThemeMode === theme.type,
|
||||
'border-transparent': config.defaultThemeMode !== theme.type,
|
||||
}"
|
||||
>
|
||||
<img :src="theme.image" :alt="theme.type" />
|
||||
</div>
|
||||
</div>
|
||||
</AppInputText>
|
||||
|
||||
<AppInputText
|
||||
v-if="$isApple()"
|
||||
:title="$t('Default Emojis')"
|
||||
:description="$t('Set your default emojis for your folder custom icons. You can set Twemoji or default Apple emojis.')"
|
||||
:is-last="true"
|
||||
>
|
||||
<div class="items-center space-y-4 md:flex md:space-x-6 md:space-x-4 md:space-y-0">
|
||||
<div
|
||||
v-for="(emoji, i) in emojiSetup"
|
||||
:key="i"
|
||||
:title="emoji.title"
|
||||
@click="$store.dispatch('toggleEmojiType', emoji.type)"
|
||||
class="w-full cursor-pointer overflow-hidden rounded-xl border-3 shadow-lg"
|
||||
:class="{
|
||||
'border-theme': currentEmojis === emoji.type,
|
||||
'border-transparent': currentEmojis !== emoji.type,
|
||||
}"
|
||||
>
|
||||
<img :src="isDarkMode ? emoji.image.dark : emoji.image.light" :alt="emoji.type" />
|
||||
</div>
|
||||
</div>
|
||||
</AppInputText>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user