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

UI Fixes 2

Browse Source
This commit is contained in:
Čarodej
2022-02-15 17:39:59 +01:00
parent 421388b360
commit 5ee77da25f
10 changed files with 91 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
public/mix-manifest.json
View File

@@ -44,6 +44,7 @@
"/js/chunks/app-others.js": "/js/chunks/app-others.js",
"/js/chunks/app-sign-in-out.js": "/js/chunks/app-sign-in-out.js",
"/js/chunks/app-adsense.js": "/js/chunks/app-adsense.js",
"/js/chunks/app-server.js": "/js/chunks/app-server.js",
"/js/chunks/app-language.js": "/js/chunks/app-language.js",
"/js/chunks/homepage.js": "/js/chunks/homepage.js",
"/js/chunks/dynamic-page.js": "/js/chunks/dynamic-page.js",
@@ -67,6 +68,5 @@
"/js/chunks/shared-with-me.js": "/js/chunks/shared-with-me.js",
"/js/chunks/invitation.js": "/js/chunks/invitation.js",
"/css/tailwind.css": "/css/tailwind.css",
"/css/app.css": "/css/app.css",
"/js/chunks/app-server.js": "/js/chunks/app-server.js"
"/css/app.css": "/css/app.css"
}

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

@@ -1,5 +1,5 @@
<template>
<div class="sticky top-14 z-20 block overflow-x-auto whitespace-nowrap bg-white px-4 pb-3 dark:bg-dark-background lg:hidden">
<div class="sticky top-14 z-[19] block overflow-x-auto whitespace-nowrap bg-white px-4 pb-3 dark:bg-dark-background lg:hidden">
<!--Show Buttons-->
<slot v-if="!isMultiSelectMode" />

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

@@ -1,6 +1,6 @@
<template>
<div
class="sticky top-0 z-20 block flex w-full items-center justify-between bg-white py-5 px-4 text-center dark:bg-dark-background lg:hidden"
class="sticky top-0 z-[19] block flex w-full items-center justify-between bg-white py-5 px-4 text-center dark:bg-dark-background lg:hidden"
>
<NavigationBar />

40
resources/js/components/Mobile/MenuMobile.vue
View File

@@ -1,9 +1,22 @@
<template>
<transition name="context-menu">
<div v-if="isVisible" @click="closeMenu" class="fixed bottom-0 left-0 right-0 z-50 overflow-hidden rounded-tl-xl rounded-tr-xl bg-white pb-4 dark:bg-2x-dark-foreground">
<slot />
</div>
</transition>
<div>
<transition name="context-menu">
<div
v-if="isVisible"
@click="closeMenu"
class="fixed bottom-0 left-0 right-0 z-50 overflow-hidden rounded-tl-xl rounded-tr-xl bg-white pb-4 dark:bg-2x-dark-foreground"
>
<slot />
</div>
</transition>
<transition name="vignette">
<div
v-if="isVisible"
@click="closeMenu"
class="fixed left-0 right-0 top-0 bottom-0 z-20 bg-dark-background bg-opacity-[0.35] dark:bg-opacity-[0.45]"
></div>
</transition>
</div>
</template>
<script>
@@ -60,4 +73,21 @@ export default {
.context-menu-leave-active {
position: fixed;
}
.vignette-enter-active {
animation: vignette-in 0.15s cubic-bezier(0.4, 0, 1, 1);
}
.vignette-leave-active {
animation: vignette-in 0.15s linear reverse;
}
@keyframes vignette-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>

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

@@ -40,7 +40,7 @@
<Option @click.native="goToRoute('Profile')" :title="$t('menu.profile')" icon="user" :is-hover-disabled="true" />
<Option @click.native="goToRoute('Password')" :title="$t('menu.password')" icon="lock" :is-hover-disabled="true" />
<Option @click.native="goToRoute('Storage')" :title="$t('menu.storage')" icon="hard-drive" :is-hover-disabled="true" />
<Option @click.native="goToRoute('Billing')" v-if="config.isSaaS" :title="$t('Billing')" icon="cloud" :is-hover-disabled="true" />
<Option @click.native="goToRoute('Billing')" v-if="config.subscriptionType !== 'none'" :title="$t('Billing')" icon="cloud" :is-hover-disabled="true" />
</OptionGroup>
<!--Submenu: Admin settings-->
@@ -57,7 +57,7 @@
</OptionGroup>
<!--Submenu: Billing settings-->
<OptionGroup v-if="clickedSubmenu === 'admin' && config.isSaaS">
<OptionGroup v-if="clickedSubmenu === 'admin' && config.subscriptionType !== 'none'">
<Option @click.native="goToRoute('AppPayments')" :title="$t('Payments')" icon="credit-card" :is-hover-disabled="true" />
<Option
@click.native="goToRoute('Subscriptions')"

38
resources/js/components/Others/Popup/PopupWrapper.vue
View File

@@ -44,21 +44,41 @@ export default {
</script>
<style lang="scss" scoped>
@media only screen and (max-width: 690px) {
.popup-leave-active {
animation: popup-slide-in 0.15s ease reverse;
}
@media only screen and (min-width: 960px) {
.popup-enter-active {
animation: popup-slide-in 0.35s 0.15s ease both;
animation: popup-slide-in 0.25s 0.10s ease both;
}
.popup-leave-active {
animation: popup-slide-in 0.15s ease reverse;
@keyframes popup-slide-in {
0% {
opacity: 0;
transform: translateY(100px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
}
@keyframes popup-slide-in {
0% {
transform: translateY(100%);
@media only screen and (max-width: 960px) {
.popup-enter-active {
animation: popup-slide-in 0.35s 0.15s ease both;
}
100% {
transform: translateY(0);
@keyframes popup-slide-in {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0);
}
}
}
</style>

14
resources/js/components/Others/Vignette.vue
View File

@@ -1,6 +1,6 @@
<template>
<transition name="vignette">
<div v-if="isVisible" class="vignette" @click="closePopup"></div>
<div v-if="isVisible" class="vignette bg-dark-background bg-opacity-[0.35] dark:bg-opacity-[0.45]" @click="closePopup"></div>
</transition>
</template>
@@ -31,13 +31,11 @@ export default {
created() {
// Show vignette
events.$on('popup:open', () => (this.isVisibleVignette = true))
events.$on('mobile-menu:show', () => (this.isVisibleVignette = true))
events.$on('alert:open', () => (this.isVisibleVignette = true))
events.$on('success:open', () => (this.isVisibleVignette = true))
events.$on('confirm:open', () => (this.isVisibleVignette = true))
// Hide vignette
events.$on('mobile-menu:hide', () => (this.isVisibleVignette = false))
events.$on('popup:close', () => (this.isVisibleVignette = false))
},
}
@@ -54,20 +52,14 @@ export default {
left: 0;
bottom: 0;
z-index: 40;
background: $light_mode_vignette;
}
// Dark mode
.dark .vignette {
background: $dark_mode_vignette;
}
.vignette-enter-active {
animation: vignette-in 0.35s ease;
animation: vignette-in 0.15s linear;
}
.vignette-leave-active {
animation: vignette-in 0.15s ease reverse;
animation: vignette-in 0.15s cubic-bezier(0.4, 0, 1, 1) reverse;
}
@keyframes vignette-in {

28
resources/js/views/Admin/AppSettings/AppSettingsTabs/Server.vue
View File

@@ -17,10 +17,10 @@
</small>
</div>
<div class="flex items-center">
<check-icon v-if="cron.running" size="16" class="vue-feather text-theme"/>
<x-icon v-if="!cron.running" size="16" class="vue-feather text-red-600" />
<check-icon v-if="cron.running" size="16" class="vue-feather text-green-600 dark:text-green-600"/>
<x-icon v-if="!cron.running" size="16" class="vue-feather text-red-600 dark:text-red-600" />
<span class="ml-3 text-sm font-bold" :class="cron.running ? 'text-green-600' : 'text-red-600'">
<span class="ml-3 text-sm font-bold" :class="cron.running ? 'text-green-600 dark:text-green-600' : 'text-red-600 dark:text-red-600'">
{{ cron.running ? 'Working correctly' : "Doesn't work" }}
</span>
</div>
@@ -46,9 +46,9 @@
<b class="text-sm font-bold block">{{ filename }}</b>
</div>
<div class="flex items-center">
<check-icon size="16" class="vue-feather text-theme"/>
<check-icon size="16" class="vue-feather text-green-600 dark:text-green-600"/>
<span class="ml-3 text-sm font-bold text-green-600">
<span class="ml-3 text-sm font-bold text-green-600 dark:text-green-600">
Stored Successfully
</span>
</div>
@@ -69,10 +69,10 @@
</small>
</div>
<div class="flex items-center">
<check-icon v-if="phpVersion.acceptable" size="16" class="vue-feather text-theme"/>
<x-icon v-if="!phpVersion.acceptable" size="16" class="vue-feather text-red-600" />
<check-icon v-if="phpVersion.acceptable" size="16" class="vue-feather text-green-600 dark:text-green-600"/>
<x-icon v-if="!phpVersion.acceptable" size="16" class="vue-feather text-red-600 dark:text-red-600" />
<span class="ml-3 text-sm font-bold" :class="phpVersion.acceptable ? 'text-green-600' : 'text-red-600'">
<span class="ml-3 text-sm font-bold" :class="phpVersion.acceptable ? 'text-green-600 dark:text-green-600' : 'text-red-600 dark:text-red-600'">
{{ phpVersion.current }}
</span>
</div>
@@ -86,10 +86,10 @@
</small>
</div>
<div class="flex items-center">
<check-icon v-if="values.status" size="16" class="vue-feather text-theme"/>
<x-icon v-if="!values.status" size="16" class="vue-feather text-red-600" />
<check-icon v-if="values.status" size="16" class="vue-feather text-green-600 dark:text-green-600"/>
<x-icon v-if="!values.status" size="16" class="vue-feather text-red-600 dark:text-red-600" />
<span class="ml-3 text-sm font-bold" :class="values.status ? 'text-green-600' : 'text-red-600'">
<span class="ml-3 text-sm font-bold" :class="values.status ? 'text-green-600 dark:text-green-600' : 'text-red-600 dark:text-red-600'">
{{ values.current }}{{ setting !== 'max_execution_time' ? 'M' : '' }}
</span>
</div>
@@ -107,10 +107,10 @@
{{ module }}
</b>
<div class="flex items-center">
<check-icon v-if="value" size="16" class="vue-feather text-theme"/>
<x-icon v-if="!value" size="16" class="vue-feather text-red-600"/>
<check-icon v-if="value" size="16" class="vue-feather text-green-600 dark:text-green-600"/>
<x-icon v-if="!value" size="16" class="vue-feather text-red-600 dark:text-red-600"/>
<span class="ml-3 text-sm font-bold" :class="value ? 'text-green-600' : 'text-red-600'">
<span class="ml-3 text-sm font-bold" :class="value ? 'text-green-600 dark:text-green-600' : 'text-red-600 dark:text-red-600'">
{{ value ? 'Module Installed' : 'Missing Module' }}
</span>
</div>

2
resources/views/index.blade.php
View File

@@ -31,6 +31,8 @@
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta name="theme-color" content="{{ $settings->app_color ?? '#00BC7E' }}">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="description" content="{{ $settings->app_description ?? __t('app_description') }}">

4
webpack.mix.js vendored
View File

@@ -29,10 +29,10 @@ mix
clientLogLevel: 'none'
}
})*/
/*.options({
.options({
hmrOptions: {
host: '192.168.1.112',
port: '8080'
},
})*/
})
.disableNotifications();