Move serch bar into top bar

apps/files/src/components/FilesAppBar.vue

@@ -27,18 +27,6 @@
           <h1 class="oc-visually-hidden" v-text="pageTitle" />
         </span>
       </div>
-      <div v-if="!publicPage()" class="uk-width-auto uk-visible@m">
-        <oc-search-bar
-          :key="searchBarKey"
-          ref="globalSearchBar"
-          :label="$_searchLabel"
-          :loading="isLoadingSearch"
-          :button-hidden="true"
-          :button="false"
-          @search="onFileSearch"
-          @clear="onSearchClear"
-        />
-      </div>
       <div>
         <template v-if="$_ocFilesAppBar_showActions">
           <template v-if="canUpload && hasFreeSpace">
@@ -117,31 +105,6 @@
             {{ $_ocAppBar_clearTrashbinButtonText }}
           </oc-button>
         </template>
-        <oc-button
-          v-if="!publicPage()"
-          id="files-open-search-btn"
-          key="mobile-search-button"
-          class="uk-hidden@m"
-          icon="search"
-          aria-label="search"
-          @click="focusMobileSearchInput()"
-        />
-        <oc-drop
-          toggle="#files-open-search-btn"
-          boundary="#files-app-bar"
-          pos="bottom-right"
-          mode="click"
-          class="uk-margin-remove"
-        >
-          <oc-search-bar
-            ref="mobileSearch"
-            :key="searchBarKey"
-            :label="$_searchLabel"
-            :loading="isLoadingSearch"
-            @search="onFileSearch"
-            @clear="onSearchClear"
-          />
-        </oc-drop>
       </div>
       <div v-if="displayBulkActions">
         <oc-button
@@ -175,32 +138,23 @@ export default {
   },
   mixins: [Mixins, FileActions, MixinDeleteResources],
   data: () => ({
-    isLoadingSearch: false,
     newFileAction: null,
     path: '',
-    searchedFiles: [],
-    fileFolderCreationLoading: false,
-    // In case of change of search value to empty string
-    // searchBarKey can be changed to force re-render of the component
-    searchBarKey: 0
+    fileFolderCreationLoading: false
   }),
   computed: {
     ...mapGetters(['getToken', 'configuration', 'newFileHandlers']),
     ...mapGetters('Files', [
       'activeFiles',
       'inProgress',
-      'searchTerm',
-      'atSearchPage',
       'currentFolder',
       'davProperties',
       'quota',
       'selectedFiles',
       'publicLinkPassword'
     ]),
     ...mapState(['route']),
-    $_searchLabel() {
-      return this.$gettext('Search')
-    },
+
     _cannotCreateDialogText() {
       if (!this.canUpload) {
         return this.$gettext('You have no permission to upload!')
@@ -334,61 +288,17 @@ export default {
       return this.$route.meta.hasBulkActions && this.selectedFiles.length > 0
     }
   },
-  watch: {
-    $route(to, from) {
-      // note: the search bars are not available on all views
-      if (this.$refs.mobileSearch) {
-        this.$refs.mobileSearch.value = null
-      }
-      if (this.$refs.globalSearchBar) {
-        this.$refs.globalSearchBar.query = ''
-      }
-    }
-  },
   methods: {
     ...mapActions('Files', [
       'resetFileSelection',
       'loadFiles',
       'addFiles',
       'updateFileProgress',
-      'searchForFile',
       'loadFolder',
-      'removeFilesFromTrashbin',
-      'resetSearch'
+      'removeFilesFromTrashbin'
     ]),
     ...mapActions(['openFile', 'showMessage', 'createModal', 'setModalInputErrorMessage']),
 
-    onFileSearch(searchTerm = '') {
-      if (searchTerm === '') {
-        this.isLoadingSearch = false
-      } else {
-        this.isLoadingSearch = true
-      }
-      // write search term into files app state
-      this.searchForFile({
-        searchTerm,
-        client: this.$client
-      })
-        .catch(e => {
-          this.showMessage({
-            title: this.$gettext('Search failed'),
-            desc: e.message,
-            status: 'danger'
-          })
-        })
-        .finally(() => {
-          this.isLoadingSearch = false
-        })
-    },
-    focusMobileSearchInput() {
-      this.$refs.mobileSearch.$el.querySelector('input').focus()
-      // nested vuetify VList animation will block native autofocus, so we use this workaround...
-
-      setTimeout(() => {
-        // ...to set focus after the element is rendered visible
-        this.$refs.mobileSearch.$el.querySelector('input').focus()
-      }, 50)
-    },
     $_ocFilesFolder_getFolder() {
       this.path = []
 
@@ -672,12 +582,6 @@ export default {
       }
       this.resetFileSelection()
       this.setHighlightedFile(null)
-    },
-
-    onSearchClear() {
-      this.resetSearch()
-      // Forces update of search bar
-      this.searchBarKey++
     }
   }
 }

src/Phoenix.vue

@@ -8,7 +8,7 @@
       <div v-else key="core-content" class="uk-height-1-1 uk-flex uk-flex-row uk-flex-row">
         <transition :name="appNavigationAnimation">
           <oc-sidebar
-            v-if="isSidebarVisible"
+            v-if="isSidebarVisible && !publicPage()"
             v-touch:swipe.left="handleNavSwipe"
             class="oc-app-navigation"
             :logo-img="logoImage"
@@ -21,6 +21,7 @@
         </transition>
         <div class="uk-width-expand">
           <top-bar
+            v-if="!publicPage()"
             class="uk-width-expand"
             :applications-list="$_applicationsList"
             :active-notifications="activeNotifications"

src/components/SearchBar.vue

@@ -0,0 +1,109 @@
+<template>
+  <div>
+    <oc-search-bar
+      ref="globalSearchBar"
+      class="uk-width-large uk-visible@m"
+      :label="searchLabel"
+      :loading="isLoadingSearchResults"
+      :button-hidden="true"
+      @search="search"
+      @clear="resetSearch"
+    />
+    <oc-button
+      id="files-open-search-btn"
+      key="mobile-search-button"
+      class="uk-hidden@m"
+      icon="search"
+      :aria-label="displaySearchButtonLabel"
+      @click="focusMobileSearchInput"
+    />
+    <oc-drop
+      drop-id="oc-topbar-search-mobile"
+      toggle="#files-open-search-btn"
+      mode="click"
+      class="uk-margin-remove"
+      :options="{ delayHide: '0' }"
+    >
+      <oc-search-bar
+        ref="mobileSearch"
+        :label="searchLabel"
+        :loading="isLoadingSearchResults"
+        @search="search"
+        @clear="resetSearch"
+      />
+    </oc-drop>
+  </div>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+
+export default {
+  name: 'SearchBar',
+
+  data: () => ({
+    isLoadingSearchResults: false
+  }),
+
+  computed: {
+    searchLabel() {
+      return this.$gettext('Search')
+    },
+
+    displaySearchButtonLabel() {
+      return this.$gettext('Open search bar')
+    }
+  },
+
+  watch: {
+    $route() {
+      this.clearSearchBarValue()
+    }
+  },
+
+  methods: {
+    ...mapActions('Files', ['searchForFile', 'resetSearch']),
+
+    search(searchTerm) {
+      if (!searchTerm) {
+        this.resetSearch()
+
+        return
+      }
+
+      this.isLoadingSearchResults = true
+
+      this.searchForFile({
+        searchTerm,
+        client: this.$client
+      })
+        .catch(e => {
+          this.showMessage({
+            title: this.$gettext('Search failed'),
+            desc: e.message,
+            status: 'danger'
+          })
+        })
+        .finally(() => {
+          this.isLoadingSearchResults = false
+        })
+    },
+
+    clearSearchBarValue() {
+      const searchBarRef = this.$refs.globalSearchBar
+        ? this.$refs.globalSearchBar
+        : this.$refs.mobileSearch
+
+      searchBarRef.query = ''
+    },
+
+    focusMobileSearchInput() {
+      // Set focus after the element is rendered visible
+      // nextTick is not enough here
+      setTimeout(() => {
+        this.$refs.mobileSearch.$el.querySelector('input').focus()
+      }, 50)
+    }
+  }
+}
+</script>

src/components/Top-Bar.vue

@@ -3,16 +3,25 @@
     id="oc-topbar"
     class="uk-flex uk-flex-middle uk-flex-wrap oc-border-bottom uk-padding-small"
   >
-    <oc-button
+    <oc-grid v-if="!publicPage()" gutter="large" flex>
+      <div class="uk-hidden@l">
+        <oc-button
+          variation="raw"
+          class="oc-app-navigation-toggle"
+          :aria-label="$gettext('Open navigation menu')"
+          @click="toggleAppNavigationVisibility"
+        >
+          <oc-icon name="menu" class="uk-flex" aria-hidden="true" />
+        </oc-button>
+      </div>
+      <search-bar />
+    </oc-grid>
+    <oc-grid
       v-if="!isPublicPage"
-      variation="raw"
-      class="oc-app-navigation-toggle uk-hidden@l"
-      :aria-label="$gettext('Open navigation menu')"
-      @click="toggleAppNavigationVisibility"
+      flex
+      gutter="small"
+      class="uk-width-expand uk-flex-right uk-margin-remove-top"
     >
-      <oc-icon name="menu" class="uk-flex" aria-hidden="true" />
-    </oc-button>
-    <oc-grid v-if="!isPublicPage" flex gutter="small" class="uk-width-expand uk-flex-right">
       <notifications v-if="activeNotifications.length" />
       <applications-menu v-if="applicationsList.length > 0" :applications-list="applicationsList" />
       <user-menu :user-id="userId" :user-display-name="userDisplayName" />
@@ -26,12 +35,14 @@ import pluginHelper from '../mixins/pluginHelper.js'
 import ApplicationsMenu from './ApplicationsMenu.vue'
 import UserMenu from './UserMenu.vue'
 import Notifications from './Notifications.vue'
+import SearchBar from './SearchBar.vue'
 
 export default {
   components: {
     Notifications,
     ApplicationsMenu,
-    UserMenu
+    UserMenu,
+    SearchBar
   },
   mixins: [pluginHelper],
   props: {

tests/acceptance/pageObjects/phoenixPage.js

@@ -216,7 +216,7 @@ module.exports = {
       locateStrategy: 'xpath'
     },
     searchLoadingIndicator: {
-      selector: '.oc-app-bar .uk-spinner'
+      selector: '#oc-topbar .uk-spinner'
     },
     userMenuButton: {
       selector: '#_userMenuButton'