nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-20 17:02:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Popover refactored

Browse Source
This commit is contained in:
Peter Papp
2021-04-19 17:41:41 +02:00
parent 7cd29fce98
commit 7e8511ab3f
15 changed files with 573 additions and 528 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
resources/js/components/FilesView/EmptyPage.vue
View File

@@ -7,31 +7,31 @@
<h1 class="title">{{ $t('shared.empty_shared') }}</h1>
</div>
<!--Trash empty message-->
<!--Trash empty message-->
<div class="text-content" v-if="$isThisLocation(['trash', 'trash-root']) && ! isLoading">
<h1 class="title">{{ $t('empty_page.title') }}</h1>
</div>
<!--Trash empty message-->
<!--Trash empty message-->
<div class="text-content" v-if="$isThisLocation(['participant_uploads']) && ! isLoading">
<h1 class="title">{{ $t('messages.nothing_from_participants') }}</h1>
</div>
<!--Base file browser empty message-->
<!--Base file browser empty message-->
<div class="text-content" v-if="$isThisLocation(['base', 'public', 'latest']) && !isLoading">
<h1 class="title">{{ $t('empty_page.title') }}</h1>
<p v-if="$checkPermission(['master', 'editor'])" class="description">{{ $t('empty_page.description') }}</p>
<ButtonUpload
v-if="$checkPermission(['master', 'editor'])"
button-style="theme"
>
v-if="$checkPermission(['master', 'editor'])"
button-style="theme"
>
{{ $t('empty_page.call_to_action') }}
</ButtonUpload>
</div>
<!--Spinner-->
<!--Spinner-->
<div class="text-content" v-if="isLoading">
<Spinner/>
<Spinner />
</div>
</div>
</div>
@@ -39,75 +39,79 @@
<script>
import ButtonUpload from '@/components/FilesView/ButtonUpload'
import Spinner from '@/components/FilesView/Spinner'
import {mapGetters} from 'vuex'
import Spinner from '@/components/FilesView/Spinner'
import {mapGetters} from 'vuex'
export default {
name: 'EmptyPage',
props: ['title', 'description'],
components: {
ButtonUpload,
Spinner
},
computed: {
...mapGetters(['entries', 'isLoading', 'currentFolder']),
isEmpty() {
return this.entries && this.entries.length == 0
}
}
}
export default {
name: 'EmptyPage',
props: ['title', 'description'],
components: {
ButtonUpload,
Spinner
},
computed: {
...mapGetters([
'entries',
'isLoading',
'currentFolder'
]),
isEmpty() {
return this.entries && this.entries.length == 0
}
}
}
</script>
<style scoped lang="scss">
@import '@assets/vuefilemanager/_variables';
@import '@assets/vuefilemanager/_mixins';
@import '@assets/vuefilemanager/_mixins';
.empty-page {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin-top: 85px;
display: flex;
align-items: center;
.empty-page {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin-top: 85px;
display: flex;
align-items: center;
.empty-state {
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
}
}
.empty-state {
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
}
}
.text-content {
text-align: center;
margin: 30px 0;
.text-content {
text-align: center;
margin: 30px 0;
.title {
@include font-size(20);
color: $text;
font-weight: 700;
margin: 0;
}
.title {
@include font-size(20);
color: $text;
font-weight: 700;
margin: 0;
}
.description {
@include font-size(13);
color: $text-muted;
margin-bottom: 20px;
display: block;
}
}
.description {
@include font-size(13);
color: $text-muted;
margin-bottom: 20px;
display: block;
}
}
@media (prefers-color-scheme: dark) {
.text-content {
@media (prefers-color-scheme: dark) {
.text-content {
.title {
color: $dark_mode_text_primary;
}
.title {
color: $dark_mode_text_primary;
}
.description {
color: $dark_mode_text_secondary;
}
}
}
.description {
color: $dark_mode_text_secondary;
}
}
}
</style>