add close sortingAndPreview after click anywhere in application

This commit is contained in:
Milos Holba
2020-12-16 12:21:55 +01:00
parent 7b27fa70d8
commit 5bc66d51be
4 changed files with 101 additions and 113 deletions

View File

@@ -1,5 +1,5 @@
<template>
<div id="vue-file-manager" v-cloak>
<div id="vue-file-manager" v-cloak @click="close">
<!--System alerts-->
<Alert/>
@@ -135,6 +135,11 @@
isScaledDown: false,
}
},
methods: {
close () {
events.$emit('sortingAndPreview', false)
}
},
beforeMount() {
// Store config to vuex

View File

@@ -39,7 +39,7 @@
<!--View options-->
<div class="toolbar-button-wrapper">
<ToolbarButton source="preview-sorting" class="preview-sorting" :action="$t('actions.sorting_view')" :class="{ active: sortingAndPreview }" @click.native="sortingAndPreview = !sortingAndPreview"/>
<ToolbarButton source="preview-sorting" class="preview-sorting" :action="$t('actions.sorting_view')" :class="{ active: sortingAndPreview }" @click.stop.native="sortingAndPreview = !sortingAndPreview"/>
<ToolbarButton :action="$t('actions.info_panel')" :class="{ active: fileInfoVisible }" @click.native="$store.dispatch('fileInfoToggle')" source="info"/>
</div>

View File

@@ -21,7 +21,7 @@
</li>
</ul>
<ul class="menu-option-group">
<li class="menu-option" @click="sort('created_at')">
<li class="menu-option" @click.stop="sort('created_at')">
<div class="icon">
<calendar-icon size="17"/>
</div>
@@ -32,7 +32,7 @@
<arrow-up-icon size="17" v-if="filter.field === 'created_at'" :class="{ 'arrow-down': filter.sort === 'ASC' }"/>
</div>
</li>
<li class="menu-option" @click="sort('name')">
<li class="menu-option" @click.stop="sort('name')">
<div class="icon">
<alphabet-icon size="17" class="alphabet-icon"/>
</div>