- MobileActions.vue refactoring

- added select all / deselect all buttons to mobile multi select mode

resources/js/components/FilesView/ContextMenu.vue

@@ -3,22 +3,18 @@
 
         <!-- File Preview -->
         <div class="menu-options" id="menu-list" v-if="showFromPreview">
-
             <OptionGroup class="menu-option-group">
                 <Option @click.native="renameItem" :title="$t('context_menu.rename')" icon="rename"/>
                 <Option @click.native="moveItem" :title="$t('context_menu.move')" icon="move-item"/>
-                <Option @click.native="shareItem" v-if="$checkPermission('master')"
-                        :title="item.shared
+                <Option @click.native="shareItem" v-if="$checkPermission('master')" :title="item.shared
                             ? $t('context_menu.share_edit')
-                            : $t('context_menu.share')" 
-                        icon="share"/>
+                            : $t('context_menu.share')" icon="share"/>
                 <Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash" class="menu-option"/>
             </OptionGroup>
 
-            <OptionGroup >
+            <OptionGroup>
                 <Option @click.native="downloadItem" v-if="!isFolder" :title="$t('context_menu.download')" icon="download"/>
             </OptionGroup>
-
         </div>
 
         <!-- Trash location-->
@@ -27,7 +23,7 @@
             <!-- Single options -->
             <OptionGroup v-if="multiSelectContextMenu">
                 <Option @click.native="restoreItem" v-if="item" :title="$t('context_menu.restore')" icon="restore"/>
-                <Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash" />
+                <Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash"/>
                 <Option @click.native="emptyTrash" :title="$t('context_menu.empty_trash')" icon="empty-trash"/>
             </OptionGroup>
 
@@ -38,15 +34,13 @@
 
             <!-- Multi options -->
             <OptionGroup v-if="!multiSelectContextMenu">
-                <Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash" />
+                <Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash"/>
                 <Option @click.native="emptyTrash" :title="$t('context_menu.empty_trash')" icon="empty-trash"/>
             </OptionGroup>
 
             <OptionGroup v-if="item && !multiSelectContextMenu && !hasFolder">
                 <Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download"/>
             </OptionGroup>
-
-
         </div>
 
         <!-- Shared location with MASTER permission-->
@@ -54,71 +48,61 @@
 
             <!-- Single options -->
             <OptionGroup class="menu-option-group" v-if="item && isFolder && multiSelectContextMenu">
-                <Option @click.native="addToFavourites"
-                        :title=" isInFavourites
+                <Option @click.native="addToFavourites" :title=" isInFavourites
                         ? $t('context_menu.remove_from_favourites')
-                        : $t('context_menu.add_to_favourites')" 
-                        icon="favourites"/>
+                        : $t('context_menu.add_to_favourites')" icon="favourites"/>
             </OptionGroup>
 
             <OptionGroup v-if="item && multiSelectContextMenu">
                 <Option @click.native="renameItem" :title="$t('context_menu.rename')" icon="rename"/>
-                <Option @click.native="shareItem" :title=" item.shared ? $t('context_menu.share_edit'): $t('context_menu.share')"
-                                                                         icon="share"/>
-                <Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash" />
+                <Option @click.native="shareItem" :title=" item.shared ? $t('context_menu.share_edit'): $t('context_menu.share')" icon="share"/>
+                <Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash"/>
             </OptionGroup>
 
             <OptionGroup v-if="item && multiSelectContextMenu">
-                <Option @click.native="ItemDetail" :title="$t('context_menu.detail')" icon="detail" />
+                <Option @click.native="ItemDetail" :title="$t('context_menu.detail')" icon="detail"/>
                 <Option @click.native="downloadItem" v-if="!isFolder" :title="$t('context_menu.download')" icon="download"/>
             </OptionGroup>
 
             <!-- Multi options -->
             <OptionGroup class="menu-option-group" v-if="item && !hasFile && !multiSelectContextMenu">
-                <Option @click.native="addToFavourites"
-                        :title=" isInFavourites
+                <Option @click.native="addToFavourites" :title=" isInFavourites
                                 ? $t('context_menu.remove_from_favourites')
-                                : $t('context_menu.add_to_favourites')" 
-                        icon="favourites"/>
+                                : $t('context_menu.add_to_favourites')" icon="favourites"/>
             </OptionGroup>
 
             <OptionGroup v-if="item && !multiSelectContextMenu">
-                <Option @click.native="shareCancel" :title="$t('context_menu.share_cancel')" icon="share" />
-                <Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash" />
+                <Option @click.native="shareCancel" :title="$t('context_menu.share_cancel')" icon="share"/>
+                <Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash"/>
             </OptionGroup>
 
             <OptionGroup v-if="item && !multiSelectContextMenu && !hasFolder">
                 <Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download"/>
             </OptionGroup>
-            
         </div>
-                   
-                    
 
         <!-- Base location with MASTER permission-->
         <div v-if="$isThisLocation(['base', 'participant_uploads', 'latest']) && $checkPermission('master') && !showFromPreview" id="menu-list" class="menu-options">
-            
+
             <!-- Single options -->
             <OptionGroup v-if="!$isThisLocation(['participant_uploads', 'latest']) && multiSelectContextMenu">
-                <Option @click.native="addToFavourites" v-if="item && isFolder " :title=" isInFavourites
+                <Option @click.native="addToFavourites" v-if="item && isFolder " :title="isInFavourites
                                                                                 ? $t('context_menu.remove_from_favourites')
-                                                                                : $t('context_menu.add_to_favourites')" 
-                                                                                icon="favourites"/>
-                <Option @click.native="createFolder" :title="$t('context_menu.create_folder')" icon="create-folder" />
+                                                                                : $t('context_menu.add_to_favourites')" icon="favourites"/>
+                <Option @click.native="createFolder" :title="$t('context_menu.create_folder')" icon="create-folder"/>
             </OptionGroup>
-                
-                  
+
+
             <OptionGroup v-if="item && multiSelectContextMenu">
-                <Option @click.native="renameItem" :title="$t('context_menu.rename')" icon="rename" />
+                <Option @click.native="renameItem" :title="$t('context_menu.rename')" icon="rename"/>
                 <Option @click.native="moveItem" v-if="!$isThisLocation(['latest'])" :title="$t('context_menu.move')" icon="move-item"/>
-                <Option @click.native="shareItem" :title=" item.shared
+                <Option @click.native="shareItem" :title="item.shared
                                                             ? $t('context_menu.share_edit')
-                                                            : $t('context_menu.share')"
-                                                            icon="share"/>
+                                                            : $t('context_menu.share')" icon="share"/>
                 <Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash"/>
             </OptionGroup>
-                   
-                    
+
+
             <OptionGroup v-if="item && multiSelectContextMenu ">
                 <Option @click.native="ItemDetail" :title="$t('context_menu.detail')" icon="detail"/>
                 <Option @click.native="downloadItem" v-if="!isFolder" :title="$t('context_menu.download')" icon="download"/>
@@ -128,22 +112,18 @@
             <OptionGroup v-if="!$isThisLocation(['participant_uploads', 'latest']) && !multiSelectContextMenu">
                 <Option @click.native="addToFavourites" v-if="item && !hasFile" :title=" isInFavourites
                                                                                     ? $t('context_menu.remove_from_favourites')
-                                                                                    : $t('context_menu.add_to_favourites')" 
-                                                                                icon="favourites"/>
-                <Option @click.native="createFolder" :title="$t('context_menu.create_folder')" icon="create-folder" />
+                                                                                    : $t('context_menu.add_to_favourites')" icon="favourites"/>
+                <Option @click.native="createFolder" :title="$t('context_menu.create_folder')" icon="create-folder"/>
             </OptionGroup>
-                
-                  
+
             <OptionGroup v-if="item && !multiSelectContextMenu">
                 <Option @click.native="moveItem" v-if="!$isThisLocation(['latest'])" :title="$t('context_menu.move')" icon="move-item"/>
                 <Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash"/>
             </OptionGroup>
-                   
-                    
+
             <OptionGroup v-if="item && !multiSelectContextMenu && !hasFolder">
                 <Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download"/>
             </OptionGroup>
-
         </div>
 
         <!-- Base & Public location with EDITOR permission-->
@@ -162,7 +142,7 @@
 
             <OptionGroup v-if="item && multiSelectContextMenu">
                 <Option @click.native="ItemDetail" :title="$t('context_menu.detail')" icon="detail"/>
-                <Option @click.native="downloadItem" v-if="!isFolder" :title="$t('context_menu.download')" icon="download" />
+                <Option @click.native="downloadItem" v-if="!isFolder" :title="$t('context_menu.download')" icon="download"/>
             </OptionGroup>
 
             <!-- Multi options -->
@@ -176,9 +156,8 @@
             </OptionGroup>
 
             <OptionGroup v-if="item && !multiSelectContextMenu && !hasFolder">
-                <Option @click.native="downloadItem"  :title="$t('context_menu.download')" icon="download" />
+                <Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download"/>
             </OptionGroup>
-
         </div>
 
         <!-- Base & Public location with VISITOR permission-->
@@ -191,7 +170,7 @@
             </OptionGroup>
 
             <!-- Multi options -->
-             <OptionGroup v-if="!multiSelectContextMenu && item ">
+            <OptionGroup v-if="!multiSelectContextMenu && item ">
                 <Option @click.native="downloadItem" v-if="!hasFolder" :title="$t('context_menu.download')" icon="download"/>
                 <Option v-if="hasFolder" :title="$t('context_menu.no_options')" icon="no-options" class="no-options"/>
             </OptionGroup>
@@ -210,34 +189,34 @@ export default {
     name: 'ContextMenu',
     components: {
         OptionGroup,
-        Option,
+        Option
     },
     computed: {
         ...mapGetters(['user', 'fileInfoDetail']),
-        hasFolder(){
+        hasFolder() {
 
             // Check if selected items includes some folder
-            if(this.fileInfoDetail.find(item => item.type === 'folder'))
+            if (this.fileInfoDetail.find(item => item.type === 'folder'))
                 return true
 
         },
-        hasFile(){
+        hasFile() {
 
             // Check if selected items includes some files
-             if(this.fileInfoDetail.find(item => item.type !== 'folder'))
+            if (this.fileInfoDetail.find(item => item.type !== 'folder'))
                 return true
 
         },
         multiSelectContextMenu() {
 
             // If is context Menu open on multi selected items open just options for the multi selected items
-            if (this.fileInfoDetail.length > 1 && this.fileInfoDetail.includes(this.item)) 
+            if (this.fileInfoDetail.length > 1 && this.fileInfoDetail.includes(this.item))
                 return false
-            
+
             // If is context Menu open for the non selected item open options for the single item
-            if (this.fileInfoDetail.length < 2 || !this.fileInfoDetail.includes(this.item)) 
+            if (this.fileInfoDetail.length < 2 || !this.fileInfoDetail.includes(this.item))
                 return true
-            
+
         },
         favourites() {
             return this.user.relationships.favourites.data.attributes.folders
@@ -271,10 +250,10 @@ export default {
     },
 
     methods: {
-        emptyTrash(){
+        emptyTrash() {
             this.$store.dispatch('emptyTrash')
         },
-        restoreItem(){
+        restoreItem() {
             this.$store.dispatch('restoreItem', this.item)
         },
         shareCancel() {
@@ -458,14 +437,16 @@ export default {
     /deep/ .text-label {
         color: $text-muted !important;
     }
+
     /deep/ &:hover {
         background: transparent;
     }
-        /deep/ path,
-        /deep/line,
-        /deep/circle {
-            stroke: $text-muted !important;
-        }
+
+    /deep/ path,
+    /deep/ line,
+    /deep/ circle {
+        stroke: $text-muted !important;
+    }
 }
 
 .filePreviewFixed {
@@ -499,17 +480,19 @@ export default {
         background: $dark_mode_foreground;
     }
     .no-options {
-    /deep/ .text-label {
-        color: $dark_mode_text_secondary !important;
-    }
-    /deep/ &:hover {
-        background: transparent;
-    }
+        /deep/ .text-label {
+            color: $dark_mode_text_secondary !important;
+        }
+
+        /deep/ &:hover {
+            background: transparent;
+        }
+
         /deep/ path,
-        /deep/line,
-        /deep/circle {
+        /deep/ line,
+        /deep/ circle {
             stroke: $dark_mode_text_secondary !important;
         }
-}
+    }
 }
 </style>

resources/js/components/FilesView/MobileActionButton.vue

@@ -8,6 +8,9 @@
             <grid-icon v-if="icon === 'th'" size="15" class="icon"></grid-icon>
             <user-plus-icon v-if="icon === 'user-plus'" size="15" class="icon"></user-plus-icon>
             <plus-icon v-if="icon === 'plus'" size="15" class="icon"></plus-icon>
+            <check-square-icon v-if="icon === 'check-square'" size="15" class="icon"></check-square-icon>
+            <x-square-icon v-if="icon === 'x-square'" size="15" class="icon"></x-square-icon>
+            <check-icon v-if="icon === 'check'" size="15" class="icon"></check-icon>
             <svg v-if="icon === 'preview-sorting'" size="15" class="icon preview-sorting"
                 width="15px" height="15px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                 <g id="VueFileManager" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
@@ -34,7 +37,7 @@
 </template>
 
 <script>
-    import { FolderPlusIcon, ListIcon, GridIcon, TrashIcon, UserPlusIcon, PlusIcon, CreditCardIcon } from 'vue-feather-icons'
+    import { CheckIcon, XSquareIcon, CheckSquareIcon, FolderPlusIcon, ListIcon, GridIcon, TrashIcon, UserPlusIcon, PlusIcon, CreditCardIcon } from 'vue-feather-icons'
 
     export default {
         name: 'MobileActionButton',
@@ -42,9 +45,12 @@
             'icon'
         ],
         components: {
+            CheckSquareIcon,
             CreditCardIcon,
             FolderPlusIcon,
             UserPlusIcon,
+            XSquareIcon,
+            CheckIcon,
             TrashIcon,
             PlusIcon,
             ListIcon,

resources/js/components/FilesView/MobileActions.vue

@@ -2,40 +2,53 @@
     <div id="mobile-actions-wrapper">
 
         <!--Actions for trash location with MASTER permission--->
-        <div v-if="$isThisLocation(['trash', 'trash-root']) && $checkPermission('master')" class="mobile-actions">
+        <div v-if="trashLocationMenu" class="mobile-actions">
             <MobileActionButton @click.native="$store.dispatch('emptyTrash')" icon="trash">
                 {{ $t('context_menu.empty_trash') }}
             </MobileActionButton>
-             <MobileMultiSelectButton @click.native="mobileMultiSelect = !mobileMultiSelect">
+             <MobileMultiSelectButton @click.native="enableMultiSelectMode">
                 {{ $t('context_menu.select') }}
             </MobileMultiSelectButton>
-             <MobileActionButton class="preview-sorting" @click.native="mobileSortingAndPreview = ! mobileSortingAndPreview" icon="preview-sorting">
+             <MobileActionButton class="preview-sorting" @click.native="showViewOptions" icon="preview-sorting">
                 {{$t('preview_sorting.preview_sorting_button')}}
             </MobileActionButton>
         </div>
 
         <!--ContextMenu for Base location with MASTER permission-->
-        <div v-if="$isThisLocation(['base', 'public']) && $checkPermission(['master', 'editor'])" class="mobile-actions">
-            <MobileActionButton @click.native="createFolder" icon="folder-plus" :class="{'is-inactive' : mobileMultiSelect}">
-                {{ $t('context_menu.add_folder') }}
-            </MobileActionButton>
-            <MobileActionButtonUpload :class="{'is-inactive' : mobileMultiSelect}">
-                {{ $t('context_menu.upload') }}
-            </MobileActionButtonUpload>
-            <MobileMultiSelectButton @click.native="mobileMultiSelect = !mobileMultiSelect">
-               {{ $t('context_menu.select') }}
-            </MobileMultiSelectButton>
-            <MobileActionButton class="preview-sorting" @click.native="mobileSortingAndPreview = ! mobileSortingAndPreview" icon="preview-sorting">
-                {{$t('preview_sorting.preview_sorting_button')}}
-            </MobileActionButton>
+        <div v-if="baseLocationMasterMenu" class="mobile-actions">
+            <div v-if="! multiSelectMode">
+                <MobileActionButton @click.native="createFolder" icon="folder-plus" :class="{'is-inactive' : multiSelectMode}">
+                    {{ $t('context_menu.add_folder') }}
+                </MobileActionButton>
+                <MobileActionButtonUpload :class="{'is-inactive' : multiSelectMode}">
+                    {{ $t('context_menu.upload') }}
+                </MobileActionButtonUpload>
+                <MobileMultiSelectButton @click.native="enableMultiSelectMode">
+                   {{ $t('context_menu.select') }}
+                </MobileMultiSelectButton>
+                <MobileActionButton class="preview-sorting" @click.native="showViewOptions" icon="preview-sorting">
+                    {{$t('preview_sorting.preview_sorting_button')}}
+                </MobileActionButton>
+            </div>
+            <div v-if="multiSelectMode">
+                <MobileActionButton @click.native="selectAll" icon="check-square">
+                    Select All
+                </MobileActionButton>
+                <MobileActionButton @click.native="deselectAll" icon="x-square">
+                    Deselect All
+                </MobileActionButton>
+                <MobileActionButton @click.native="disableMultiSelectMode" icon="check">
+                    Done
+                </MobileActionButton>
+            </div>
         </div>
 
         <!--ContextMenu for Base location with VISITOR permission-->
-        <div v-if="($isThisLocation(['base', 'shared', 'public']) && $checkPermission('visitor')) || ($isThisLocation(['latest', 'shared']) && $checkPermission('master'))" class="mobile-actions">
-             <MobileMultiSelectButton @click.native="mobileMultiSelect = !mobileMultiSelect">
+        <div v-if="baseLocationVisitorMenu" class="mobile-actions">
+             <MobileMultiSelectButton @click.native="enableMultiSelectMode">
                {{ $t('context_menu.select') }}
             </MobileMultiSelectButton>
-             <MobileActionButton class="preview-sorting" @click.native="mobileSortingAndPreview = ! mobileSortingAndPreview" icon="preview-sorting">
+             <MobileActionButton class="preview-sorting" @click.native="showViewOptions" icon="preview-sorting">
                 {{$t('preview_sorting.preview_sorting_button')}}
             </MobileActionButton>
         </div>
@@ -51,7 +64,6 @@
     import MobileActionButton from '@/components/FilesView/MobileActionButton'
     import UploadProgress from '@/components/FilesView/UploadProgress'
     import {mapGetters} from 'vuex'
-    import {debounce} from 'lodash'
     import {events} from '@/bus'
 
     export default {
@@ -67,51 +79,54 @@
             previewIcon() {
                 return this.FilePreviewType === 'list' ? 'th' : 'th-list'
             },
+            trashLocationMenu() {
+                return this.$isThisLocation(['trash', 'trash-root']) && this.$checkPermission('master')
+            },
+            baseLocationMasterMenu() {
+                return this.$isThisLocation(['base', 'public']) && this.$checkPermission(['master', 'editor'])
+            },
+            baseLocationVisitorMenu() {
+                return (this.$isThisLocation(['base', 'shared', 'public']) && this.$checkPermission('visitor')) || (this.$isThisLocation(['latest', 'shared']) && this.$checkPermission('master'))
+            },
         },
         data () {
             return {
-                mobileMultiSelect: false,
+                multiSelectMode: false,
+                mobileSortingAndPreview: false,
                 turnOff:false,
-                mobileSortingAndPreview: false
-            }
-        },
-        watch: {
-            mobileMultiSelect () {
-                
-                if(this.mobileMultiSelect ) {
-                    events.$emit('mobileSelecting:start')
-                }
-                if(!this.mobileMultiSelect) {
-                    events.$emit('mobileSelecting:stop')
-                }
-            },
-            mobileSortingAndPreview () {
-                // TODO: co to
-                if(this.mobileSortingAndPreview) {
-                    events.$emit('mobileSortingAndPreview' , true)
-                    events.$emit('mobileSortingAndPreviewVignette' , true)
-                    this.mobileMultiSelect = false
-                }
-
-                if(!this.mobileSortingAndPreview) {
-                    events.$emit('mobileSortingAndPreview', false)
-                    events.$emit('mobileSortingAndPreviewVignette' , false)
-                }
             }
         },
         methods: {
+            selectAll() {
+
+            },
+            deselectAll() {
+
+            },
+            enableMultiSelectMode() {
+                this.multiSelectMode = true
+
+                events.$emit('mobileSelecting:start')
+            },
+            disableMultiSelectMode() {
+                this.multiSelectMode = false
+
+                events.$emit('mobileSelecting:stop')
+            },
+            showViewOptions() {
+                this.mobileSortingAndPreview = ! this.mobileSortingAndPreview
+
+                // Toggle mobile sorting
+                events.$emit('mobileSortingAndPreview', this.mobileSortingAndPreview)
+                events.$emit('mobileSortingAndPreviewVignette', this.mobileSortingAndPreview)
+            },
             createFolder() {
                 events.$emit('popup:open', {name: 'create-folder'})
             },
         },
         mounted () {
-                events.$on('mobileSelecting:stop', () => {
-                    this.mobileMultiSelect = false
-                }) 
-
-                events.$on('mobileSortingAndPreview', (state) => {
-                    this.mobileSortingAndPreview = state
-                })
+                events.$on('mobileSelecting:stop', () => this.multiSelectMode = false)
+                events.$on('mobileSortingAndPreview', state => this.mobileSortingAndPreview = state)
         }
     }
 </script>
@@ -148,10 +163,10 @@
     }
 
     .mobile-actions {
-        padding-top: 10px;
-        padding-bottom: 10px;
         white-space: nowrap;
         overflow-x: auto;
+        margin: 0 -15px;
+        padding: 10px 0 10px 15px;
     }
 
     @media only screen and (max-width: 960px) {

resources/js/components/FilesView/MobileMultiSelectMenu.vue

@@ -90,7 +90,7 @@ export default {
     background: white;
 
     .action-btn {
-        margin-right: 15px;
+        margin-right: 25px;
 
         &:last-child {
             margin-right: 0;

resources/js/components/FilesView/SortingAndPreviewMenu.vue

@@ -107,6 +107,7 @@ export default {
 
             if (this.$isMobile())
                 events.$emit('mobileSortingAndPreview', false)
+                events.$emit('mobileSortingAndPreviewVignette', this.mobileSortingAndPreview)
         }
     },
     mounted() {