mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-26 10:30:38 +00:00
UI improvements part 1
This commit is contained in:
Čarodej
@@ -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>
|
||||
|
||||
@@ -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())
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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" />
|
||||
|
||||
Reference in New Issue
Block a user