- mobile search fix

- mobile arrows fix
- document zoom in file preview
- frontend build

resources/js/components/FilesView/FileBrowser.vue

@@ -17,7 +17,7 @@
             <MobileToolbar />
 
             <!--Searchbar-->
-            <SearchBar class="mobile-search" />
+            <SearchBar v-model="query" @reset-query="query = ''" class="mobile-search" :placeholder="$t('inputs.placeholder_search_files')" />
 
             <!--Mobile Actions-->
             <FileActionsMobile />
@@ -103,6 +103,7 @@
     import SearchBar from '@/components/FilesView/SearchBar'
     import {mapGetters} from 'vuex'
     import {events} from '@/bus'
+    import {debounce} from "lodash";
 
     export default {
         name: 'FilesContainer',
@@ -121,9 +122,9 @@
             ...mapGetters([
                 'filesInQueueTotal',
                 'fileInfoVisible',
+                'FilePreviewType',
                 'fileInfoDetail',
                 'currentFolder',
-                'FilePreviewType',
                 'isSearching',
                 'isLoading',
                 'data'
@@ -149,11 +150,35 @@
                 }
             }
         },
+        watch: {
+            query: debounce(function (value) {
+
+                if (this.query !== '' && typeof this.query !== 'undefined') {
+
+                    this.$store.dispatch('getSearchResult', value)
+
+                } else if (typeof value !== 'undefined') {
+
+                    if (this.currentFolder) {
+
+                        // Get back after delete query to previously folder
+                        if (this.$isThisLocation('public')) {
+                            this.$store.dispatch('browseShared', [{folder: this.currentFolder, back: true, init: false}])
+                        } else {
+                            this.$store.dispatch('getFolder', [{folder: this.currentFolder, back: true, init: false}])
+                        }
+                    }
+
+                    this.$store.commit('CHANGE_SEARCHING_STATE', false)
+                }
+            }, 300),
+        },
         data() {
             return {
                 draggingId: undefined,
                 isDragging: false,
                 mobileMultiSelect: false,
+                query: '',
             }
         },
         methods: {

resources/js/components/FilesView/FilePreviewMedia.vue

@@ -16,8 +16,8 @@
 		<div class="file-wrapper-preview">
 
             <!--Show PDF-->
-            <div v-if="isPDF" id="pdf-wrapper">
-                <pdf :src="pdfdata" v-for="i in numPages" :key="i" :page="i" scale="page-width" style="width:100%; margin:20px auto;" id="printable-file">
+            <div v-if="isPDF" id="pdf-wrapper" :style="{width: documentSize + '%'}">
+                <pdf :src="pdfdata" v-for="i in numPages" :key="i" :resize="true" :page="i" scale="page-width" style="width:100%; margin:20px auto;" id="printable-file">
                     <template slot="loading">
                         <h1>loading content...</h1>
                     </template>
@@ -104,6 +104,7 @@ export default {
             numPages: 0,
             currentIndex: 0,
             files: [],
+            documentSize: 50,
         }
     },
     watch: {
@@ -195,10 +196,25 @@ export default {
         },
     },
     created() {
+
+        // Set zoom size
+        this.documentSize = window.innerWidth < 960 ? 100 : 50
+
         events.$on('file-preview:next', () => this.next())
         events.$on('file-preview:prev', () => this.prev())
 
+        events.$on('document-zoom:in', () => {
+            if (this.documentSize < 100)
+                this.documentSize += 10
+        })
+
+        events.$on('document-zoom:out', () => {
+            if (this.documentSize > 40)
+                this.documentSize -= 10
+        })
+
         this.getFilesForView()
+
     }
 }
 </script>
@@ -222,6 +238,7 @@ export default {
         user-select: none;
         filter: drop-shadow(0px 1px 0 rgba(255, 255, 255, 1));
         padding: 10px;
+        z-index: 2;
     }
 
     .next {
@@ -235,13 +252,13 @@ export default {
 
 #pdf-wrapper {
     overflow-y: scroll;
-    width: 80%;
     margin: 0 auto;
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
+    z-index: 1;
 }
 
 .media-full-preview {
@@ -321,6 +338,14 @@ export default {
     }
 }
 
+@media only screen and (max-width: 960px) {
+
+    .media-full-preview {
+        top: 53px;
+    }
+}
+
+
 @media (prefers-color-scheme: dark) {
 
     .navigation-arrows {

resources/js/components/FilesView/FilePreviewToolbar.vue

@@ -16,6 +16,10 @@
 		</div>
 
 		<div class="navigation-icons">
+			<div v-if="isPdf" class="navigation-tool-wrapper">
+				<ToolbarButton @click.native="increaseSizeOfPDF" source="zoom-in" :action="$t('pdf_zoom_in')" />
+				<ToolbarButton @click.native="decreaseSizeOfPDF" source="zoom-out" :action="$t('pdf_zoom_out')" />
+			</div>
 			<div class="navigation-tool-wrapper">
 				<ToolbarButton @click.native="downloadItem" class="mobile-hide" source="download" :action="$t('actions.download')" />
 				<ToolbarButton v-if="canShareItem" @click.native="shareItem" class="mobile-hide" :class="{ 'is-inactive': !canShareItem }" source="share" :action="$t('actions.share')" />
@@ -46,6 +50,9 @@
             isImage() {
                 return this.fileInfoDetail[0].type === 'image'
             },
+            isPdf() {
+                return this.fileInfoDetail[0].mimetype === 'pdf'
+            },
             files() {
                 let files = []
 
@@ -83,6 +90,12 @@
             },
         },
         methods: {
+            increaseSizeOfPDF() {
+                events.$emit('document-zoom:in')
+            },
+            decreaseSizeOfPDF() {
+                events.$emit('document-zoom:out')
+            },
             printMethod() {
                 let tab = document.getElementById('printable-file')
                 let win = window.open('', '', 'height=700,width=700')

resources/js/components/FilesView/MobileActionButton.vue

@@ -54,9 +54,9 @@
 
     .mobile-action-button {
         background: $light_background;
-        margin-right: 15px;
+        margin-right: 8px;
         border-radius: 8px;
-        padding: 7px 10px;
+        padding: 7px 14px;
         cursor: pointer;
         border: none;
         @include transition(150ms);

resources/js/components/FilesView/MobileActionButtonUpload.vue

@@ -39,9 +39,9 @@
 
     .mobile-action-button {
         background: $light_background;
-        margin-right: 15px;
+        margin-right: 8px;
         border-radius: 8px;
-        padding: 7px 10px;
+        padding: 7px 14px;
         cursor: pointer;
         border: none;
 

resources/js/components/FilesView/MobileToolbar.vue

@@ -3,7 +3,7 @@
 
         <!-- Go back-->
         <div @click="goBack" class="go-back-button">
-            <chevron-left-icon size="17" :class="{'is-visible': browseHistory.length > 1}" class="icon-back"></chevron-left-icon>
+            <chevron-left-icon size="17" :class="{'is-visible': browseHistory.length > 1}" class="icon-back" />
         </div>
 
         <!--Folder Title-->
@@ -12,7 +12,7 @@
         <!--More Actions-->
         <div class="more-actions-button">
             <div class="tap-area" @click="showMobileNavigation" v-if="$checkPermission('master')">
-                <menu-icon size="17"></menu-icon>
+                <menu-icon size="17" />
             </div>
         </div>
     </div>

resources/js/components/FilesView/ToolbarButton.vue

@@ -1,20 +1,10 @@
 <template>
   <button class="button hover-text-theme hover-svg-stroke-theme" :title="action">
-    <corner-down-right-icon
-        v-if="source === 'move'"
-        size="19"
-        class="hover-text-theme"
-    />
-    <download-cloud-icon
-        v-if="source === 'download'"
-        size="19"
-        class="hover-text-theme"
-    />
-    <folder-plus-icon
-        v-if="source === 'folder-plus'"
-        size="19"
-        class="hover-text-theme"
-    />
+    <corner-down-right-icon v-if="source === 'move'" size="19" class="hover-text-theme" />
+    <download-cloud-icon v-if="source === 'download'" size="19" class="hover-text-theme" />
+    <folder-plus-icon v-if="source === 'folder-plus'" size="19" class="hover-text-theme" />
+    <zoom-in-icon v-if="source === 'zoom-in'" size="19" />
+    <zoom-out-icon v-if="source === 'zoom-out'" size="19" />
     <edit-2-icon v-if="source === 'rename'" size="19" />
     <printer-icon v-if="source === 'print'" size="19" />
     <trash-2-icon v-if="source === 'trash'" size="19" />
@@ -29,44 +19,48 @@
 </template>
 
 <script>
-import {
-    FolderPlusIcon,
-    Trash2Icon,
-    GridIcon,
-    ListIcon,
-    Edit2Icon,
-    InfoIcon,
-    CornerDownRightIcon,
-    LinkIcon,
-    DownloadCloudIcon,
-    XIcon,
-    PrinterIcon,
-    CloudOffIcon,
-} from "vue-feather-icons";
-import SortingAndPreviewIcon from '@/components/FilesView/Icons/SortingAndPreviewIcon'
-
-export default {
-    name: "ToolbarButton",
-    props: [
-        'source',
-        'action'
-    ],
-    components: {
-        SortingAndPreviewIcon,
+    import {
         CornerDownRightIcon,
         DownloadCloudIcon,
         FolderPlusIcon,
         CloudOffIcon,
         PrinterIcon,
+        ZoomOutIcon,
+        ZoomInIcon,
         Trash2Icon,
         Edit2Icon,
-        ListIcon,
-        XIcon,
         GridIcon,
+        ListIcon,
         InfoIcon,
         LinkIcon,
-    },
-};
+        XIcon,
+    } from "vue-feather-icons";
+    import SortingAndPreviewIcon from '@/components/FilesView/Icons/SortingAndPreviewIcon'
+
+    export default {
+        name: "ToolbarButton",
+        props: [
+            'source',
+            'action'
+        ],
+        components: {
+            SortingAndPreviewIcon,
+            CornerDownRightIcon,
+            DownloadCloudIcon,
+            FolderPlusIcon,
+            CloudOffIcon,
+            PrinterIcon,
+            ZoomOutIcon,
+            ZoomInIcon,
+            Trash2Icon,
+            Edit2Icon,
+            ListIcon,
+            GridIcon,
+            InfoIcon,
+            LinkIcon,
+            XIcon,
+        },
+    };
 </script>
 
 <style scoped lang="scss">