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

UI improvements part 1

Browse Source
This commit is contained in:
Čarodej
2022-01-27 10:40:06 +01:00
parent 0b3fc946bd
commit a2726ae2c5
11 changed files with 205 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/Others/CookieDisclaimer.vue
+9 -76
View File
@@ -1,10 +1,12 @@
<template>
<div class="cookie-wrapper" v-if="isVisibleDisclaimer && config.isSaaS">
<span @click="closeDisclaimer" class="close-icon">
<x-icon size="12"></x-icon>
<div v-if="isVisibleDisclaimer" class="fixed bottom-0 sm:left-16 left-0 sm:right-auto right-0 sm:p-3 sm:w-56 w-full p-4 shadow-xl rounded-tl-xl rounded-tr-lg dark:bg-dark-foreground bg-white z-20">
<span @click="closeDisclaimer" class="absolute -right-1 -top-1 p-3 cursor-pointer">
<x-icon size="10" />
</span>
<i18n path="cookie_disclaimer.description" tag="p">
<router-link :to="{name: 'DynamicPage', params: {slug: 'cookie-policy'}}">{{ $t('cookie_disclaimer.button') }}</router-link>
<i18n path="cookie_disclaimer.description" tag="p" class="text-xs">
<router-link :to="{name: 'DynamicPage', params: {slug: 'cookie-policy'}}" class="text-theme text-xs">
{{ $t('cookie_disclaimer.button') }}
</router-link>
</i18n>
</div>
</template>
@@ -16,7 +18,7 @@
export default {
name: 'CookieDisclaimer',
components: {
XIcon
XIcon,
},
computed: {
...mapGetters([
@@ -36,76 +38,7 @@
}
},
created() {
this.isVisibleDisclaimer = localStorage.getItem('isHiddenDisclaimer') ? false : true;
this.isVisibleDisclaimer = !localStorage.getItem('isHiddenDisclaimer');
}
}
</script>
<style lang="scss" scoped>
@import '/resources/sass/vuefilemanager/_variables';
@import '/resources/sass/vuefilemanager/_mixins';
.cookie-wrapper {
//@include widget-card;
background: white;
position: fixed;
bottom: 0;
left: 115px;
max-width: 225px;
z-index: 3;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
.close-icon {
position: absolute;
right: -4px;
top: -4px;
cursor: pointer;
padding: 12px;
line {
stroke: $text-muted;
}
}
p {
font-size: 12px;
line-height: 1.6;
a {
font-size: 12px;
text-decoration: underline;
}
}
}
@media only screen and (max-width: 690px) {
.cookie-wrapper {
padding: 10px 15px;
left: 0;
right: 0;
max-width: 100%;
p {
max-width: 300px;
}
}
}
.dark {
.cookie-wrapper {
background: $dark_mode_foreground;
p {
color: $dark_mode_text_primary;
}
.close-icon {
line {
stroke: $dark_mode_text_primary;
}
}
}
}
</style>
resources/js/components/Others/RenameItemPopup.vue
+5 -3
View File
@@ -25,12 +25,12 @@
</ValidationProvider>
<!--Emoji-->
<AppInputSwitch :title="$t('Emoji as an Icon')" :description="$t('Replace folder icon with an Emoji')" :is-last="! isEmoji">
<AppInputSwitch v-if="pickedItem.data.type === 'folder'" :title="$t('Emoji as an Icon')" :description="$t('Replace folder icon with an Emoji')" :is-last="! isEmoji">
<SwitchInput v-model="isEmoji" :state="isEmoji" />
</AppInputSwitch>
<!--Set emoji-->
<EmojiPicker v-if="isEmoji" v-model="emoji" :default-emoji="emoji"/>
<EmojiPicker v-if="pickedItem.data.type === 'folder' && isEmoji" v-model="emoji" :default-emoji="emoji"/>
</ValidationObserver>
</PopupContent>
@@ -141,7 +141,9 @@ export default {
if (args.name !== 'rename-item') return
if (!this.$isMobile()) {
this.isEmoji = false
if (!this.$isMobile()) {
this.$nextTick(() => this.$refs.input.focus())
}
resources/js/components/Sidebar/ContentSidebar.vue
+1 -7
View File
@@ -1,5 +1,5 @@
<template>
<section class="content-sidebar flex-none xl:w-56 w-52 lg:block hidden overflow-y-auto pt-6 select-none dark:bg-dark-background bg-light-background" id="content-sidebar">
<section class="content-sidebar flex-none xl:w-56 w-52 lg:block hidden overflow-y-auto pt-6 select-none dark:bg-dark-background bg-light-background z-10" id="content-sidebar">
<slot></slot>
</section>
</template>
@@ -9,9 +9,3 @@
name: 'ContentSidebar',
}
</script>
<style scoped lang="scss">
.content-sidebar {
//background: linear-gradient(0deg, rgba(246, 245, 241, 0.4) 0%, rgba(243, 244, 246, 0.4) 100%);
}
</style>
resources/js/components/Sidebar/SidebarNavigation.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<nav v-if="isVisibleNavigationBars" class="menu-bar pt-7 select-none dark:bg-dark-foreground bg-light-background flex-none xl:w-20 w-16 lg:grid hidden">
<nav v-if="isVisibleNavigationBars" class="menu-bar pt-7 select-none dark:bg-dark-foreground bg-light-background flex-none xl:w-20 w-16 lg:grid hidden z-10">
<!--Navigation-->
<div v-if="user" class="mb-auto text-center">
resources/js/components/Spotlight/Spotlight.vue
+1 -1
View File
@@ -18,7 +18,7 @@
<!--Filter-->
<div v-if="activeFilter" @click="removeFilter" class="dark:bg-4x-dark-foreground bg-light-background rounded-lg px-2 py-1 mr-3 flex items-center cursor-pointer">
<b class="font-bold pr-1.5 text-sm dark-text-theme">
<b class="font-bold pr-1.5 text-sm dark-text-theme -mt-0.5">
{{ activeFilter }}
</b>
<x-icon size="12" />
resources/js/routes/routesAdmin.js
Vendored
+1
View File
@@ -355,6 +355,7 @@ const routesAdmin = [
import(/* webpackChunkName: "chunks/app-language" */ '../views/Admin/Languages/Language'),
meta: {
requiresAuth: true,
title: 'Language Editor'
},
}
]
resources/js/views/Admin/Languages/Language.vue
+37 -15
View File
@@ -1,23 +1,35 @@
<template>
<div>
<!--Mobile language navigation-->
<div v-if="languages" class="card shadow-card py-0 sticky top-0 z-10 flex items-center md:hidden block">
<!--List of languages-->
<div v-if="languages" id="card-navigation" style="height: 62px" class="md:hidden block mb-24">
<div
@click="getLanguage(language)"
v-for="language in languages"
:key="language.data.id"
class="inline-block text-sm font-bold px-4 py-5 border-b-2 border-transparent border-bottom-theme"
:class="{'text-theme router-link-active': selectedLanguage && selectedLanguage.data.attributes.locale === language.data.attributes.locale, 'text-gray-600': !selectedLanguage && selectedLanguage.data.attributes.locale !== language.data.attributes.locale}"
class="bg-white z-20 sm:pt-5 pt-3"
:class="{
'fixed top-0 left-0 right-0 px-6 rounded-none backdrop-filter backdrop-blur-lg dark:bg-dark-foreground bg-white bg-opacity-70 z-10': fixedNav,
'card shadow-card py-0 sticky top-0 z-10 md:hidden block': ! fixedNav
}"
>
{{ language.data.attributes.name }}
<SearchInput v-model="query" @reset-query="query = ''"/>
<div class="flex items-center">
<!--List of languages-->
<div
@click="getLanguage(language)"
v-for="language in languages"
:key="language.data.id"
class="inline-block text-sm font-bold px-4 py-5 border-b-2 border-transparent border-bottom-theme"
:class="{'text-theme router-link-active': selectedLanguage && selectedLanguage.data.attributes.locale === language.data.attributes.locale, 'text-gray-600': !selectedLanguage && selectedLanguage.data.attributes.locale !== language.data.attributes.locale}"
>
{{ language.data.attributes.name }}
</div>
<!--Add new language-->
<div @click="createLanguage" class="ml-2 cursor-pointer">
<plus-icon size="14" class="vue-feather text-gray-400"/>
</div>
</div>
</div>
<!--Add new language-->
<div @click="createLanguage" class="icon text-theme">
<plus-icon size="17" />
</div>
</div>
<div v-if="languages" class="flex md:space-x-6">
@@ -89,7 +101,7 @@
</InfoBox>
<!--Inline Search for mobile-->
<div class="sticky top-0 z-10 mb-8">
<div class="sticky top-0 z-10 mb-8 md:block hidden">
<SearchInput v-model="query" @reset-query="query = ''" />
</div>
@@ -108,6 +120,7 @@
</div>
</div>
</div>
<Spinner v-if="! languages" />
</div>
</template>
@@ -157,7 +170,9 @@
selectedLanguage: undefined,
languages: undefined,
query: '',
}
fixedNav: false,
}
},
watch: {
query: debounce(function (val) {
@@ -239,6 +254,13 @@
.then(() => this.getLanguages())
.catch(() => this.$isSomethingWrong())
})
// Handle fixed mobile navigation
window.addEventListener("scroll", () => {
let card = document.getElementById('card-navigation')
this.fixedNav = card.getBoundingClientRect().top < 0;
});
},
destroyed() {
events.$off('action:confirmed')
resources/js/views/MobileNavigationToolbar.vue
+5 -10
View File
@@ -1,14 +1,9 @@
<template>
<div class="flex text-center py-5 px-4 w-full justify-between items-center z-20 lg:hidden block">
<div class="flex text-center py-5 px-5 w-full justify-between items-center z-20 lg:hidden block">
<!-- Go back-->
<div @click="$router.back()" class="go-back-button flex text-left items-center cursor-pointer">
<chevron-left-icon size="17" class="transform align-middle mr-2 -ml-1 dark:text-gray-100 vue-feather" />
<!--Location Title-->
<div class="text-sm dark:text-gray-100 align-middle font-bold overflow-hidden overflow-ellipsis inline-block whitespace-nowrap transition-all duration-200" style="max-width: 200px;">
{{ locationName }}
</div>
<!--Location Title-->
<div class="text-sm dark:text-gray-100 align-middle font-bold overflow-hidden overflow-ellipsis inline-block whitespace-nowrap transition-all duration-200" style="max-width: 200px;">
{{ locationName }}
</div>
<!--More Actions-->
@@ -16,7 +11,7 @@
<div @click="$openSpotlight()" class="px-2 mr-4 cursor-pointer">
<search-icon size="17" class="vue-feather dark:text-gray-100" />
</div>
<div @click="$showMobileMenu('user-navigation')" class="pr-2 cursor-pointer">
<div @click="$showMobileMenu('user-navigation')" class="pr-1.5 cursor-pointer">
<menu-icon size="17" class="vue-feather dark:text-gray-100" />
</div>
</div>