Shared pages refactoring part 2

resources/js/components/FilesView/DesktopSharepageToolbar.vue

@@ -0,0 +1,133 @@
+<template>
+    <div class="hidden lg:block">
+        <div class="flex items-center justify-between py-3">
+            <NavigationBar />
+
+            <div class="flex items-center">
+                <!--Create button-->
+                <PopoverWrapper v-if="canEdit">
+                    <ToolbarButton
+                        @click.stop.native="showCreateMenu"
+                        source="cloud-plus"
+                        :action="$t('actions.create')"
+                    />
+                    <PopoverItem name="desktop-create" side="left">
+                        <OptionGroup :title="$t('Upload')">
+                            <OptionUpload :title="$t('actions.upload')" type="file" />
+                            <OptionUpload :title="$t('actions.upload_folder')" type="folder" />
+                        </OptionGroup>
+                        <OptionGroup :title="$t('Create')">
+                            <Option
+                                @click.stop.native="$createFolder"
+                                :title="$t('actions.create_folder')"
+                                icon="folder-plus"
+                            />
+                        </OptionGroup>
+                    </PopoverItem>
+                </PopoverWrapper>
+
+                <!--Search bar-->
+                <SearchBar class="ml-5 hidden lg:block xl:ml-8" />
+
+                <!--File Controls-->
+                <div class="ml-5 flex items-center xl:ml-8">
+
+                    <!--Action buttons-->
+                    <div v-if="canEdit && !$isMobile()" class="flex items-center">
+                        <ToolbarButton
+                            @click.native="$moveFileOrFolder(clipboard[0])"
+                            :class="{
+                                'is-inactive': ! canManipulate,
+                            }"
+                            source="move"
+                            :action="$t('actions.move')"
+                        />
+                        <ToolbarButton
+                            @click.native="$deleteFileOrFolder(clipboard[0])"
+                            :class="{
+                                'is-inactive': ! canManipulate,
+                            }"
+                            source="trash"
+                            :action="$t('actions.delete')"
+                        />
+                    </div>
+                </div>
+
+                <!--View Controls-->
+                <div class="ml-5 flex items-center xl:ml-8">
+                    <PopoverWrapper>
+                        <ToolbarButton
+                            @click.stop.native="showSortingMenu"
+                            source="preview-sorting"
+                            :action="$t('actions.sorting_view')"
+                        />
+                        <PopoverItem name="desktop-sorting" side="left">
+                            <FileSortingOptions />
+                        </PopoverItem>
+                    </PopoverWrapper>
+                    <ToolbarButton
+                        @click.native="$store.dispatch('fileInfoToggle')"
+                        :action="$t('actions.info_panel')"
+                        source="info"
+                    />
+                </div>
+            </div>
+        </div>
+
+        <UploadProgress />
+    </div>
+</template>
+
+<script>
+import PopoverWrapper from '../Desktop/PopoverWrapper'
+import FileSortingOptions from './FileSortingOptions'
+import PopoverItem from '../Desktop/PopoverItem'
+import UploadProgress from './UploadProgress'
+import NavigationBar from './NavigationBar'
+import ToolbarButton from './ToolbarButton'
+import OptionUpload from './OptionUpload'
+import OptionGroup from './OptionGroup'
+import SearchBar from './SearchBar'
+import { events } from '../../bus'
+import { mapGetters } from 'vuex'
+import Option from './Option'
+
+export default {
+    name: 'DesktopSharepageToolbar',
+    components: {
+        FileSortingOptions,
+        UploadProgress,
+        PopoverWrapper,
+        NavigationBar,
+        ToolbarButton,
+        OptionUpload,
+        OptionGroup,
+        PopoverItem,
+        SearchBar,
+        Option,
+    },
+    computed: {
+        ...mapGetters([
+            'isVisibleNavigationBars',
+            'currentTeamFolder',
+            'currentFolder',
+            'sharedDetail',
+            'clipboard',
+        ]),
+        canEdit() {
+            return this.sharedDetail && this.sharedDetail.data.attributes.permission === 'editor'
+        },
+		canManipulate() {
+			return this.clipboard[0]
+		}
+    },
+    methods: {
+        showCreateMenu() {
+            events.$emit('popover:open', 'desktop-create')
+        },
+        showSortingMenu() {
+            events.$emit('popover:open', 'desktop-sorting')
+        },
+    },
+}
+</script>

resources/js/components/FilesView/DesktopToolbar.vue

@@ -236,9 +236,6 @@ export default {
         showSortingMenu() {
             events.$emit('popover:open', 'desktop-sorting')
         },
-        folderActions() {
-            events.$emit('context-menu:current-folder', this.currentFolder)
-        },
     },
 }
 </script>

resources/js/components/FilesView/FileActionsMobile.vue

@@ -1,12 +1,10 @@
 <template>
     <div class="sticky top-14 z-20 block overflow-x-auto whitespace-nowrap bg-white px-4 pb-3 dark:bg-dark-background lg:hidden">
         <!--Show Buttons-->
-        <div v-if="!isMultiSelectMode" class="mobile-actions">
-            <slot></slot>
-        </div>
+		<slot v-if="!isMultiSelectMode" />
 
         <!-- Multi select mode -->
-        <div v-if="isMultiSelectMode" class="mobile-actions">
+        <div v-if="isMultiSelectMode">
             <MobileActionButton @click.native="selectAll" icon="check-square">
                 {{ $t('mobile_selecting.select_all') }}
             </MobileActionButton>

resources/js/components/FilesView/InfoSidebar.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="hidden h-screen 2xl:w-[360px] w-[320px] shrink-0 overflow-y-auto overflow-x-hidden px-2.5 pt-2 lg:block">
+    <div class="hidden 2xl:w-[360px] w-[320px] shrink-0 overflow-y-auto overflow-x-hidden px-2.5 pt-2 lg:block">
         <!--Is empty clipboard-->
         <div v-if="isEmpty" class="flex h-full items-center justify-center">
             <div class="text-center">

resources/js/components/FilesView/NavigationBar.vue

@@ -9,15 +9,15 @@
         <chevron-left-icon
             size="17"
             :class="{
-                '-translate-x-3 opacity-0': !isLoadedFolder,
-                'translate-x-0 opacity-100': isLoadedFolder,
+                '-translate-x-3 opacity-0': !isLoadedFolder || !isNotHomepage,
+                'translate-x-0 opacity-100': isLoadedFolder && isNotHomepage,
             }"
             class="lg:-mt-0.5 mr-2 -ml-1 cursor-pointer align-middle transition-all duration-200"
         />
 
         <!--Folder Title-->
         <b
-            :class="{ '-translate-x-4': !isLoadedFolder }"
+            :class="{ '-translate-x-4': !isLoadedFolder || !isNotHomepage }"
             class="inline-block transform overflow-hidden text-ellipsis whitespace-nowrap align-middle text-sm font-bold transition-all duration-200 max-w-[200px]"
         >
             {{ $getCurrentLocationName() }}
@@ -26,8 +26,8 @@
         <div
             @click.stop="showItemActions"
             :class="{
-                '-translate-x-4 opacity-0': !currentFolder,
-                'translate-x-0 opacity-100': currentFolder,
+                '-translate-x-4 opacity-0': !currentFolder || !isNotHomepage,
+                'translate-x-0 opacity-100': currentFolder && isNotHomepage,
             }"
             class="ml-3 transform rounded-md bg-light-background py-0.5 px-1.5 transition-all duration-200 dark:bg-dark-foreground cursor-pointer"
 			id="folder-actions"
@@ -56,7 +56,7 @@ export default {
 		]),
 		isNotHomepage() {
 			if (this.$isThisRoute(this.$route, ['Public'])) {
-				return this.sharedDetail && this.sharedDetail.data.attributes.item_id === this.$route.params.id
+				return this.sharedDetail && this.sharedDetail.data.attributes.item_id !== this.$route.params.id
 			}
 
 			return this.$route.params.id