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

UI/UX improvements

Browse Source
This commit is contained in:
Čarodej
2022-02-01 16:01:57 +01:00
parent b38b532cbe
commit b751429dc5
16 changed files with 174 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
resources/js/views/User/Settings.vue
View File

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