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

UI fixes & refactoring

Browse Source
This commit is contained in:
Čarodej
2021-10-29 15:58:54 +02:00
parent 2d7b6e4e05
commit 351d57b103
15 changed files with 216 additions and 768 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,12 +3,16 @@
<!-- Go back-->
<div @click="goBack" class="go-back-button flex text-left items-center">
<chevron-left-icon size="17" class="pointer-events-none opacity-20 align-middle cursor-pointer mr-2" :class="{'pointer-events-auto opacity-100': isLoadedFolder }" />
<chevron-left-icon size="17" class="pointer-events-none opacity-20 align-middle cursor-pointer mr-2 -ml-1" :class="{'pointer-events-auto opacity-100': isLoadedFolder }" />
<!--Folder Title-->
<div class="lg:text-base text-sm align-middle font-bold overflow-hidden overflow-ellipsis inline-block whitespace-nowrap" style="max-width: 200px;">
{{ $getCurrentLocationName() }}
</div>
<span v-if="currentFolder" @click.stop="showItemActions" class="py-0.5 px-1.5 ml-3 rounded-md bg-light-background">
<more-horizontal-icon size="14" />
</span>
</div>
<div class="flex items-center relative">
@@ -20,8 +24,8 @@
/>
<!--More Actions-->
<div class="more-actions-button">
<div v-if="$checkPermission('master')" @click="showMobileNavigation" class="tap-area px-1.5">
<div class="relative">
<div v-if="$checkPermission('master')" @click="showMobileNavigation" class="tap-area absolute right-0 p-4 -mr-2 transform -translate-y-2/4">
<menu-icon size="17" />
</div>
</div>
@@ -34,7 +38,7 @@
import TeamMembersButton from "../Teams/Components/TeamMembersButton";
import ToolbarButton from '/resources/js/components/FilesView/ToolbarButton'
import SearchBar from '/resources/js/components/FilesView/SearchBar'
import { MenuIcon, ChevronLeftIcon } from 'vue-feather-icons'
import {MenuIcon, ChevronLeftIcon, MoreHorizontalIcon } from 'vue-feather-icons'
import {mapGetters} from 'vuex'
import {events} from '/resources/js/bus'
@@ -42,6 +46,7 @@
name: 'MobileToolBar',
components: {
TeamMembersPreview,
MoreHorizontalIcon,
TeamMembersButton,
ChevronLeftIcon,
ToolbarButton,
@@ -61,6 +66,13 @@
},
},
methods: {
showItemActions() {
this.$store.commit('CLIPBOARD_CLEAR')
this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.currentFolder)
this.$showMobileMenu('file-menu')
events.$emit('mobile-context-menu:show', this.currentFolder)
},
showMobileNavigation() {
this.$showMobileMenu('user-navigation')
this.$store.commit('DISABLE_MULTISELECT_MODE')
@@ -87,7 +99,7 @@
color: $dark_mode_text_primary;
}
.more-actions-button .tap-area {
.tap-area {
path, line, polyline, rect, circle {
stroke: $dark_mode_text_primary;