Moved serch bar into top bar

owncloud · May 27, 2020 · 073cc09 · 073cc09
1 parent 4c2c6cb
commit 073cc09
Show file tree

Hide file tree

Showing 5 changed files with 128 additions and 110 deletions.
diff --git a/apps/files/src/components/FilesAppBar.vue b/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">
@@ -115,31 +103,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
@@ -213,25 +176,18 @@ export default {
  mixins: [Mixins, FileActions],
  data: () => ({
  createFolder: false,
- isLoadingSearch: false,
  newFolderName: '',
  newFileName: '',
  createFile: 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',
@@ -241,9 +197,6 @@ export default {
  'publicLinkPassword'
  ]),
  ...mapState(['route']),
- $_searchLabel() {
- return this.$gettext('Search')
- },
  $_createFolderDialogPlaceholder() {
  return this.$gettext('Enter new folder name…')
  },
@@ -401,61 +354,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',
  'setTrashbinDeleteMessage',
- 'removeFilesFromTrashbin',
- 'resetSearch'
+ 'removeFilesFromTrashbin'
  ]),
  ...mapActions(['openFile', 'showMessage']),
- 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 = []
 
@@ -735,12 +644,6 @@ export default {
  }
  this.resetFileSelection()
  this.setHighlightedFile(null)
- },
-
- onSearchClear() {
- this.resetSearch()
- // Forces update of search bar
- this.searchBarKey++
  }
  }
 }

diff --git a/src/Phoenix.vue b/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"

diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue
@@ -0,0 +1,103 @@
+<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="search"
+ @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')
+ }
+ },
+
+ watch: {
+ $route() {
+ this.clearSearchBarValue()
+ }
+ },
+
+ methods: {
+ ...mapActions('Files', ['searchForFile', 'resetSearch']),
+
+ search(searchTerm) {
+ if (!searchTerm) {
+ 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>
diff --git a/src/components/Top-Bar.vue b/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: {

diff --git a/tests/acceptance/pageObjects/phoenixPage.js b/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'