Merge pull request #22111 from nextcloud/enh/unified-search-filters

apps/accessibility/css/dark.scss

@@ -5,6 +5,9 @@ $color-main-background: #181818;
 $color-background-dark: lighten($color-main-background, 4%);
 $color-background-darker: lighten($color-main-background, 8%);
 
+$color-placeholder-light: lighten($color-main-background, 10%);
+$color-placeholder-dark: lighten($color-main-background, 20%);
+
 $color-text-maxcontrast: darken($color-main-text, 30%);
 $color-text-light: darken($color-main-text, 10%);
 $color-text-lighter: darken($color-main-text, 20%);

apps/accessibility/css/highcontrast.scss

@@ -5,6 +5,9 @@ $color-main-background: #fff;
 $color-background-dark: darken($color-main-background, 30%);
 $color-background-darker: darken($color-main-background, 30%);
 
+$color-placeholder-light: darken($color-main-background, 30%);
+$color-placeholder-dark: darken($color-main-background, 45%);
+
 $color-text-maxcontrast: $color-main-text;
 $color-text-light: $color-main-text;
 $color-text-lighter: $color-main-text;

apps/files_sharing/js/dist/collaboration.js

@@ -1,2 +1,2 @@
-!function(e){var n={};function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:r})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(t.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var o in e)t.d(r,o,function(n){return e[n]}.bind(null,o));return r},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="/js/",t(t.s=161)}({161:function(e,n,r){r.p=OC.linkTo("files_sharing","js/dist/"),r.nc=btoa(OC.requestToken),window.OCP.Collaboration.registerType("file",{action:function(){return new Promise((function(e,n){OC.dialogs.filepicker(t("files_sharing","Link to a file"),(function(t){OC.Files.getClient().getFileInfo(t).then((function(n,t){e(t.id)})).fail((function(){n(new Error("Cannot get fileinfo"))}))}),!1,null,!1,OC.dialogs.FILEPICKER_TYPE_CHOOSE,"",{allowDirectoryChooser:!0})}))},typeString:t("files_sharing","Link to a file"),typeIconClass:"icon-files-dark"})}});
+!function(e){var n={};function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:r})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(t.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var o in e)t.d(r,o,function(n){return e[n]}.bind(null,o));return r},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="/js/",t(t.s=164)}({164:function(e,n,r){r.p=OC.linkTo("files_sharing","js/dist/"),r.nc=btoa(OC.requestToken),window.OCP.Collaboration.registerType("file",{action:function(){return new Promise((function(e,n){OC.dialogs.filepicker(t("files_sharing","Link to a file"),(function(t){OC.Files.getClient().getFileInfo(t).then((function(n,t){e(t.id)})).fail((function(){n(new Error("Cannot get fileinfo"))}))}),!1,null,!1,OC.dialogs.FILEPICKER_TYPE_CHOOSE,"",{allowDirectoryChooser:!0})}))},typeString:t("files_sharing","Link to a file"),typeIconClass:"icon-files-dark"})}});
 //# sourceMappingURL=collaboration.js.map

core/css/css-variables.scss

@@ -11,6 +11,9 @@
 	--color-background-dark: $color-background-dark;
 	--color-background-darker: $color-background-darker;
 
+	--color-placeholder-light: $color-placeholder-light;
+	--color-placeholder-dark: $color-placeholder-dark;
+
 	--color-primary: $color-primary;
 	--color-primary-light: $color-primary-light;
 	--color-primary-text: $color-primary-text;

core/css/icons.scss

@@ -307,6 +307,7 @@ audio, canvas, embed, iframe, img, input, object, video {
 @include icon-black-white('upload', 'actions', 1, true);
 @include icon-black-white('user', 'actions', 1, true);
 @include icon-black-white('group', 'actions', 1, true);
+@include icon-black-white('filter', 'actions', 1, true);
 
 @include icon-black-white('video', 'actions', 2, true);
 .icon-video-white {

core/css/variables.scss

@@ -40,6 +40,9 @@ $color-background-hover: nc-darken($color-main-background, 4%) !default;
 $color-background-dark: nc-darken($color-main-background, 7%) !default;
 $color-background-darker: nc-darken($color-main-background, 14%) !default;
 
+$color-placeholder-light: nc-darken($color-main-background, 10%) !default;
+$color-placeholder-dark: nc-darken($color-main-background, 20%) !default;
+
 $color-primary: #0082c9 !default;
 $color-primary-light: mix($color-primary, $color-main-background, 10%) !default;
 $color-primary-text: #ffffff !default;

core/img/actions/filter.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M1.19 2.4l5.05 6.48v5.24c0 .49.4.88.88.88h1.76c.49 0 .88-.4.88-.88V8.88l5.05-6.47a.87.87 0 00-.7-1.41H1.89a.87.87 0 00-.7 1.4z"/></svg>

core/src/components/HeaderMenu.vue

@@ -20,7 +20,7 @@
   -
   -->
 <template>
-	<div v-click-outside="closeMenu" :class="{ 'header-menu--opened': opened }" class="header-menu">
+	<div v-click-outside="clickOutsideConfig" :class="{ 'header-menu--opened': opened }" class="header-menu">
 		<a class="header-menu__trigger"
 			href="#"
 			:aria-controls="`header-menu-${id}`"
@@ -44,6 +44,7 @@
 <script>
 import { directive as ClickOutside } from 'v-click-outside'
 import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
+import excludeClickOutsideClasses from '@nextcloud/vue/dist/Mixins/excludeClickOutsideClasses'
 
 export default {
 	name: 'HeaderMenu',
@@ -52,6 +53,10 @@ export default {
 		ClickOutside,
 	},
 
+	mixins: [
+		excludeClickOutsideClasses,
+	],
+
 	props: {
 		id: {
 			type: String,
@@ -66,6 +71,10 @@ export default {
 	data() {
 		return {
 			opened: this.open,
+			clickOutsideConfig: {
+				handler: this.closeMenu,
+				middleware: this.clickOutsideMiddleware,
+			},
 		}
 	},
 

core/src/components/UnifiedSearch/SearchResult.vue

@@ -1,3 +1,24 @@
+ <!--
+  - @copyright Copyright (c) 2020 John Molakvoæ <skjnldsv@protonmail.com>
+  -
+  - @author John Molakvoæ <skjnldsv@protonmail.com>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program.  If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
 <template>
 	<a :href="resourceUrl || '#'"
 		class="unified-search__result"

core/src/components/UnifiedSearch/SearchResultPlaceholder.vue

@@ -1,68 +0,0 @@
-<template>
-	<svg
-		class="unified-search__result-placeholder"
-		xmlns="http://www.w3.org/2000/svg"
-		fill="url(#unified-search__result-placeholder-gradient)">
-		<defs>
-			<linearGradient id="unified-search__result-placeholder-gradient">
-				<stop offset="0%" stop-color="#ededed"><animate attributeName="stop-color"
-					values="#ededed; #ededed; #cccccc; #cccccc; #ededed"
-					dur="2s"
-					repeatCount="indefinite" /></stop>
-				<stop offset="100%" stop-color="#cccccc"><animate attributeName="stop-color"
-					values="#cccccc; #ededed; #ededed; #cccccc; #cccccc"
-					dur="2s"
-					repeatCount="indefinite" /></stop>
-			</linearGradient>
-		</defs>
-		<rect class="unified-search__result-placeholder-icon" />
-		<rect class="unified-search__result-placeholder-line-one" />
-		<rect class="unified-search__result-placeholder-line-two" :style="{width: `calc(${randWidth}%)`}" />
-	</svg>
-</template>
-
-<script>
-export default {
-	name: 'SearchResultPlaceholder',
-
-	data() {
-		return {
-			randWidth: Math.floor(Math.random() * 20) + 30,
-		}
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-$clickable-area: 44px;
-$margin: 10px;
-
-.unified-search__result-placeholder {
-	width: calc(100% - 2 * #{$margin});
-	height: $clickable-area;
-	margin: $margin;
-
-	&-icon {
-		width: $clickable-area;
-		height: $clickable-area;
-		rx: var(--border-radius);
-		ry: var(--border-radius);
-	}
-
-	&-line-one,
-	&-line-two {
-		width: calc(100% - #{$margin + $clickable-area});
-		height: 1em;
-		x: $margin + $clickable-area;
-	}
-
-	&-line-one {
-		y: 5px;
-	}
-
-	&-line-two {
-		y: 25px;
-	}
-}
-
-</style>

core/src/components/UnifiedSearch/SearchResultPlaceholders.vue

@@ -0,0 +1,100 @@
+<template>
+	<ul>
+		<!-- Placeholder animation -->
+		<svg class="unified-search__result-placeholder-gradient">
+			<defs>
+				<linearGradient id="unified-search__result-placeholder-gradient">
+					<stop offset="0%" :stop-color="light">
+						<animate attributeName="stop-color"
+							:values="`${light}; ${light}; ${dark}; ${dark}; ${light}`"
+							dur="2s"
+							repeatCount="indefinite" />
+					</stop>
+					<stop offset="100%" :stop-color="dark">
+						<animate attributeName="stop-color"
+							:values="`${dark}; ${light}; ${light}; ${dark}; ${dark}`"
+							dur="2s"
+							repeatCount="indefinite" />
+					</stop>
+				</linearGradient>
+			</defs>
+		</svg>
+
+		<!-- Placeholders -->
+		<li v-for="placeholder in [1, 2, 3]" :key="placeholder">
+			<svg
+				class="unified-search__result-placeholder"
+				xmlns="http://www.w3.org/2000/svg"
+				fill="url(#unified-search__result-placeholder-gradient)">
+				<rect class="unified-search__result-placeholder-icon" />
+				<rect class="unified-search__result-placeholder-line-one" />
+				<rect class="unified-search__result-placeholder-line-two" :style="{width: `calc(${randWidth()}%)`}" />
+			</svg>
+		</li>
+	</ul>
+</template>
+
+<script>
+export default {
+	name: 'SearchResultPlaceholders',
+
+	data() {
+		return {
+			light: null,
+			dark: null,
+		}
+	},
+	mounted() {
+		const styles = getComputedStyle(document.documentElement)
+		this.dark = styles.getPropertyValue('--color-placeholder-dark')
+		this.light = styles.getPropertyValue('--color-placeholder-light')
+	},
+
+	methods: {
+		randWidth() {
+			return Math.floor(Math.random() * 20) + 30
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+$clickable-area: 44px;
+$margin: 10px;
+
+.unified-search__result-placeholder-gradient {
+	position: fixed;
+	height: 0;
+	width: 0;
+	z-index: -1;
+}
+
+.unified-search__result-placeholder {
+	width: calc(100% - 2 * #{$margin});
+	height: $clickable-area;
+	margin: $margin;
+
+	&-icon {
+		width: $clickable-area;
+		height: $clickable-area;
+		rx: var(--border-radius);
+		ry: var(--border-radius);
+	}
+
+	&-line-one,
+	&-line-two {
+		width: calc(100% - #{$margin + $clickable-area});
+		height: 1em;
+		x: $margin + $clickable-area;
+	}
+
+	&-line-one {
+		y: 5px;
+	}
+
+	&-line-two {
+		y: 25px;
+	}
+}
+
+</style>

core/src/services/UnifiedSearchService.js

@@ -25,6 +25,9 @@ import axios from '@nextcloud/axios'
 
 export const defaultLimit = loadState('unified-search', 'limit-default')
 export const minSearchLength = 2
+export const regexFilterIn = /[^-]in:([a-z_-]+)/ig
+export const regexFilterNot = /-in:([a-z_-]+)/ig
+
 /**
  * Get the list of available search providers
  *
@@ -62,6 +65,6 @@ export function search(type, query, cursor) {
 			cursor,
 			// Sending which location we're currently at
 			from: window.location.pathname.replace('/index.php', '') + window.location.search,
-		}
+		},
 	})
 }

core/src/views/UnifiedSearch.vue

@@ -22,6 +22,7 @@
 <template>
 	<HeaderMenu id="unified-search"
 		class="unified-search"
+		exclude-click-outside-classes="popover"
 		:open.sync="open"
 		@open="onOpen"
 		@close="onClose">
@@ -39,15 +40,21 @@
 				:placeholder="t('core', 'Search {types} …', { types: typesNames.join(', ').toLowerCase() })"
 				@input="onInputDebounced"
 				@keypress.enter.prevent.stop="onInputEnter">
+			<!-- Search filters -->
+			<Actions v-if="availableFilters.length > 1" class="unified-search__filters" placement="bottom">
+				<ActionButton v-for="type in availableFilters"
+					:key="type"
+					icon="icon-filter"
+					:title="t('core', 'Search for {name} only', { name: typesMap[type] })"
+					@click="onClickFilter(`in:${type}`)">
+					{{ `in:${type}` }}
+				</ActionButton>
+			</Actions>
 		</div>
 
 		<template v-if="!hasResults">
 			<!-- Loading placeholders -->
-			<ul v-if="isLoading">
+			<SearchResultPlaceholders v-if="isLoading" />
-				<li v-for="placeholder in [1, 2, 3]" :key="placeholder">
-					<SearchResultPlaceholder />
-				</li>
-			</ul>
 
 			<EmptyContent v-else-if="isValidQuery && isDoneSearching" icon="icon-search">
 				{{ t('core', 'No results for {query}', {query}) }}
@@ -97,25 +104,29 @@
 </template>
 
 <script>
-import { minSearchLength, getTypes, search, defaultLimit } from '../services/UnifiedSearchService'
+import { emit } from '@nextcloud/event-bus'
+import { minSearchLength, getTypes, search, defaultLimit, regexFilterIn, regexFilterNot } from '../services/UnifiedSearchService'
+import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import Actions from '@nextcloud/vue/dist/Components/Actions'
+import debounce from 'debounce'
 import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
 import Magnify from 'vue-material-design-icons/Magnify'
-import debounce from 'debounce'
-import { emit } from '@nextcloud/event-bus'
 
 import HeaderMenu from '../components/HeaderMenu'
 import SearchResult from '../components/UnifiedSearch/SearchResult'
-import SearchResultPlaceholder from '../components/UnifiedSearch/SearchResultPlaceholder'
+import SearchResultPlaceholders from '../components/UnifiedSearch/SearchResultPlaceholders'
 
 export default {
 	name: 'UnifiedSearch',
 
 	components: {
+		ActionButton,
+		Actions,
 		EmptyContent,
 		HeaderMenu,
 		Magnify,
 		SearchResult,
-		SearchResultPlaceholder,
+		SearchResultPlaceholders,
 	},
 
 	data() {
@@ -162,10 +173,10 @@ export default {
 
 		/**
 		 * Return ordered results
-		 * @returns {Object}
+		 * @returns {Array}
 		 */
 		orderedResults() {
-			return Object.values(this.typesIDs)
+			return this.typesIDs
 				.filter(type => type in this.results)
 				.map(type => ({
 					type,
@@ -173,6 +184,41 @@ export default {
 				}))
 		},
 
+		/**
+		 * Available filters
+		 * We only show filters that are available on the results
+		 * @returns {string[]}
+		 */
+		availableFilters() {
+			return Object.keys(this.results)
+		},
+
+		/**
+		 * Applied filters
+		 * @returns {string[]}
+		 */
+		usedFiltersIn() {
+			let match
+			const filters = []
+			while ((match = regexFilterIn.exec(this.query)) !== null) {
+				filters.push(match[1])
+			}
+			return filters
+		},
+
+		/**
+		 * Applied anti filters
+		 * @returns {string[]}
+		 */
+		usedFiltersNot() {
+			let match
+			const filters = []
+			while ((match = regexFilterNot.exec(this.query)) !== null) {
+				filters.push(match[1])
+			}
+			return filters
+		},
+
 		/**
 		 * Is the current search too short
 		 * @returns {boolean}
@@ -291,12 +337,30 @@ export default {
 				return
 			}
 
-			// reset search if the query changed
+			let types = this.typesIDs
+			let query = this.query
+
+			// Filter out types
+			if (this.usedFiltersNot.length > 0) {
+				types = this.typesIDs.filter(type => this.usedFiltersNot.indexOf(type) === -1)
+			}
+
+			// Only use those filters if any and check if they are valid
+			if (this.usedFiltersIn.length > 0) {
+				types = this.typesIDs.filter(type => this.usedFiltersIn.indexOf(type) > -1)
+			}
+
+			// Remove any filters from the query
+			query = query.replace(regexFilterIn, '').replace(regexFilterNot, '')
+
+			console.debug('Searching', query, 'in', types)
+
+			// Reset search if the query changed
 			this.resetState()
 
-			this.typesIDs.forEach(async type => {
+			types.forEach(async type => {
 				this.$set(this.loading, type, true)
-				const request = await search(type, this.query)
+				const request = await search(type, query)
 
 				// Process results
 				if (request.data.entries.length > 0) {
@@ -421,7 +485,7 @@ export default {
 		 */
 		focusNext(event) {
 			if (this.focused === null) {
-				this.focusFirst()
+				this.focusFirst(event)
 				return
 			}
 
@@ -478,6 +542,13 @@ export default {
 				this.focused = index
 			}
 		},
+
+		onClickFilter(filter) {
+			this.query = `${this.query} ${filter}`
+				.replace(/ {2}/g, ' ')
+				.trim()
+			this.onInput()
+		},
 	},
 }
 </script>
@@ -493,16 +564,26 @@ $input-padding: 6px;
 	}
 
 	&__input-wrapper {
+		width: 100%;
 		position: sticky;
 		// above search results
 		z-index: 2;
 		top: 0;
+		display: inline-flex;
+		align-items: center;
 		background-color: var(--color-main-background);
 	}
 
+	&__filters {
+		margin: $margin / 2 $margin;
+		ul {
+			display: inline-flex;
+			justify-content: space-between;
+		}
+	}
+
 	&__input {
-		// Minus margins
+		width: 100%;
-		width: calc(100% - 2 * #{$margin});
 		height: 34px;
 		margin: $margin;
 		padding: $input-padding;
@@ -510,10 +591,13 @@ $input-padding: 6px;
 		&[placeholder],
 		&::placeholder {
 			overflow: hidden;
-			text-overflow:ellipsis;
 			white-space: nowrap;
+			text-overflow: ellipsis;
 		}
+	}
 
+	&__filters {
+		margin-right: $margin / 2;
 	}
 
 	&__results {

package-lock.json

@@ -1658,20 +1658,22 @@
       }
     },
     "@nextcloud/vue": {
-      "version": "2.3.0",
+      "version": "2.6.3",
-      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-2.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-2.6.3.tgz",
-      "integrity": "sha512-6uf7Hu4Obaet7BOs9H/Ng63xAYqks9CL7hsOOHGUzWFYrPPBxgt79iD9OOPpPfJuLQ3Nnuibh942X1QreCBRkw==",
+      "integrity": "sha512-TIun4GxMtWU2rnN8Zzum63z66IIFXae5FKDvwrM6arQMZEOzCJ14oxoU2W22N0CBiLcDCmkKmN91a/2QSb3Inw==",
       "requires": {
         "@nextcloud/auth": "^1.2.3",
         "@nextcloud/axios": "^1.3.2",
-        "@nextcloud/dialogs": "^1.3.0",
+        "@nextcloud/capabilities": "^1.0.2",
+        "@nextcloud/dialogs": "^2.0.1",
         "@nextcloud/event-bus": "^1.1.4",
         "@nextcloud/l10n": "^1.2.3",
         "@nextcloud/router": "^1.0.2",
         "core-js": "^3.6.5",
         "debounce": "1.2.0",
-        "emoji-mart-vue-fast": "^7.0.2",
+        "emoji-mart-vue-fast": "^7.0.4",
         "hammerjs": "^2.0.8",
+        "linkifyjs": "~2.1.9",
         "md5": "^2.2.1",
         "regenerator-runtime": "^0.13.5",
         "v-click-outside": "^3.0.1",
@@ -1680,29 +1682,7 @@
         "vue-color": "^2.7.1",
         "vue-multiselect": "^2.1.6",
         "vue-visible": "^1.0.2",
-        "vue2-datepicker": "^3.4.1"
+        "vue2-datepicker": "^3.6.2"
-      },
-      "dependencies": {
-        "@nextcloud/dialogs": {
-          "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/@nextcloud/dialogs/-/dialogs-1.4.0.tgz",
-          "integrity": "sha512-Rx4x+al/sy+vXu2p3qvEuVeeUDm5JVwa84S21Hxa+pDV3Pd93E2dJGWlZ6h++5fSXbee1sDX9t957B20kYiP3Q==",
-          "requires": {
-            "core-js": "^3.6.4",
-            "toastify-js": "^1.7.0"
-          }
-        },
-        "vue-color": {
-          "version": "2.7.1",
-          "resolved": "https://registry.npmjs.org/vue-color/-/vue-color-2.7.1.tgz",
-          "integrity": "sha512-u3yl46B2eEej9zfAOIRRSphX1QfeNQzMwO82EIA+aoi0AKX3o1KcfsmMzm4BFkkj2ukCxLVfQ41k7g1gSI7SlA==",
-          "requires": {
-            "clamp": "^1.0.1",
-            "lodash.throttle": "^4.0.0",
-            "material-colors": "^1.0.0",
-            "tinycolor2": "^1.1.2"
-          }
-        }
       }
     },
     "@nextcloud/vue-dashboard": {
@@ -3903,9 +3883,9 @@
       }
     },
     "emoji-mart-vue-fast": {
-      "version": "7.0.3",
+      "version": "7.0.4",
-      "resolved": "https://registry.npmjs.org/emoji-mart-vue-fast/-/emoji-mart-vue-fast-7.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/emoji-mart-vue-fast/-/emoji-mart-vue-fast-7.0.4.tgz",
-      "integrity": "sha512-9BdX1QvWCOKEnmd20wcej7GaB/2/cesgodGJCCQirz1NtW3xctg1pWEYJHbAcjRHSHDzLDC+Y2xj9a2tO8T5hQ==",
+      "integrity": "sha512-VZuyclCe7ZNPhSvt7WT258MscqRBZTB2Is/7vBilCXgpiZqByaA4AhM1xdIIZZik/aA+5BQiZVmbsDK0jk78Eg==",
       "requires": {
         "@babel/polyfill": "7.2.5",
         "@babel/runtime": "7.3.4",
@@ -10025,9 +10005,9 @@
       "integrity": "sha512-yaX2its9XAJKGuQqf7LsiZHHSkxsIK8rmCOQOvEGEoF41blKRK8qr9my4qYoD6ikdLss4n8tKqYBecmaY0+WJg=="
     },
     "vue2-datepicker": {
-      "version": "3.6.1",
+      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/vue2-datepicker/-/vue2-datepicker-3.6.1.tgz",
+      "resolved": "https://registry.npmjs.org/vue2-datepicker/-/vue2-datepicker-3.6.2.tgz",
-      "integrity": "sha512-U6iQWSDsNoq/u6QJCtAMcyWlcZSx0rmPmqaJ8LQtGvwu9x12jXDoe3YNeG4y7E45OYAMLXs9WzGkDqDmNj3jkw==",
+      "integrity": "sha512-J2fCwUmCxIOPUvwQ12e8evFY9cCv6vJmgxRD9fGeUv6JeMMeLwkdpeQZOcqbMf/4mk1cSrY2/9Fr8DaB30LBpA==",
       "requires": {
         "date-fns": "^2.0.1",
         "date-format-parse": "^0.2.5"

package.json

@@ -39,7 +39,7 @@
     "@nextcloud/password-confirmation": "^1.0.1",
     "@nextcloud/paths": "^1.1.2",
     "@nextcloud/router": "^1.1.0",
-    "@nextcloud/vue": "^2.3.0",
+    "@nextcloud/vue": "^2.6.3",
     "@nextcloud/vue-dashboard": "^0.1.8",
     "autosize": "^4.0.2",
     "backbone": "^1.4.0",

tests/acceptance/features/bootstrap/FilesAppSharingContext.php

@@ -85,82 +85,90 @@ class FilesAppSharingContext implements Context, ActorAwareInterface {
 	/**
 	 * @return Locator
 	 */
-	public static function shareWithMenuButton($sharedWithName) {
+	public static function shareWithMenuTrigger($sharedWithName) {
-		return Locator::forThe()->css(".sharing-entry__actions > .action-item__menutoggle")->
+		return Locator::forThe()->css(".sharing-entry__actions .trigger")->
 				descendantOf(self::sharedWithRow($sharedWithName))->
+				describedAs("Share with $sharedWithName menu trigger in the details view in Files app");
+	}
+
+	/**
+	 * @return Locator
+	 */
+	public static function shareWithMenuButton($sharedWithName) {
+		return Locator::forThe()->css(".action-item__menutoggle")->
+				descendantOf(self::shareWithMenuTrigger($sharedWithName))->
 				describedAs("Share with $sharedWithName menu button in the details view in Files app");
 	}
 
 	/**
 	 * @return Locator
 	 */
-	public static function shareWithMenu($sharedWithName) {
+	public static function shareWithMenu($sharedWithName, $shareWithMenuTriggerElement) {
-		return Locator::forThe()->css(".sharing-entry__actions > .action-item__menu")->
+		return Locator::forThe()->xpath("//*[@id = " . $shareWithMenuTriggerElement->getWrappedElement()->getXpath() . "/@aria-describedby]")->
-				descendantOf(self::sharedWithRow($sharedWithName))->
 				describedAs("Share with $sharedWithName menu in the details view in Files app");
 	}
 
 	/**
 	 * @return Locator
 	 */
-	public static function permissionCheckboxFor($sharedWithName, $itemText) {
+	public static function permissionCheckboxFor($sharedWithName, $shareWithMenuTriggerElement, $itemText) {
 		// forThe()->checkbox($itemText) can not be used here; that would return
 		// the checkbox itself, but the element that the user interacts with is
 		// the label.
 		return Locator::forThe()->xpath("//label[normalize-space() = '$itemText']")->
-				descendantOf(self::shareWithMenu($sharedWithName))->
+				descendantOf(self::shareWithMenu($sharedWithName, $shareWithMenuTriggerElement))->
 				describedAs("$itemText checkbox in the share with $sharedWithName menu in the details view in Files app");
 	}
 
 	/**
 	 * @return Locator
 	 */
-	public static function permissionCheckboxInputFor($sharedWithName, $itemText) {
+	public static function permissionCheckboxInputFor($sharedWithName, $shareWithMenuTriggerElement, $itemText) {
 		return Locator::forThe()->checkbox($itemText)->
-				descendantOf(self::shareWithMenu($sharedWithName))->
+				descendantOf(self::shareWithMenu($sharedWithName, $shareWithMenuTriggerElement))->
 				describedAs("$itemText checkbox input in the share with $sharedWithName menu in the details view in Files app");
 	}
 
 	/**
 	 * @return Locator
 	 */
-	public static function canEditCheckbox($sharedWithName) {
+	public static function canEditCheckbox($sharedWithName, $shareWithMenuTriggerElement) {
-		return self::permissionCheckboxFor($sharedWithName, 'Allow editing');
+		return self::permissionCheckboxFor($sharedWithName, $shareWithMenuTriggerElement, 'Allow editing');
 	}
 
 	/**
 	 * @return Locator
 	 */
-	public static function canEditCheckboxInput($sharedWithName) {
+	public static function canEditCheckboxInput($sharedWithName, $shareWithMenuTriggerElement) {
-		return self::permissionCheckboxInputFor($sharedWithName, 'Allow editing');
+		return self::permissionCheckboxInputFor($sharedWithName, $shareWithMenuTriggerElement, 'Allow editing');
 	}
 
 	/**
 	 * @return Locator
 	 */
-	public static function canCreateCheckbox($sharedWithName) {
+	public static function canCreateCheckbox($sharedWithName, $shareWithMenuTriggerElement) {
-		return self::permissionCheckboxFor($sharedWithName, 'Allow creating');
+		return self::permissionCheckboxFor($sharedWithName, $shareWithMenuTriggerElement, 'Allow creating');
 	}
 
 	/**
 	 * @return Locator
 	 */
-	public static function canCreateCheckboxInput($sharedWithName) {
+	public static function canCreateCheckboxInput($sharedWithName, $shareWithMenuTriggerElement) {
-		return self::permissionCheckboxInputFor($sharedWithName, 'Allow creating');
+		return self::permissionCheckboxInputFor($sharedWithName, $shareWithMenuTriggerElement, 'Allow creating');
 	}
 
 	/**
 	 * @return Locator
 	 */
-	public static function canReshareCheckbox($sharedWithName) {
+	public static function canReshareCheckbox($sharedWithName, $shareWithMenuTriggerElement) {
-		return self::permissionCheckboxFor($sharedWithName, 'Allow resharing');
+		return self::permissionCheckboxFor($sharedWithName, $shareWithMenuTriggerElement, 'Allow resharing');
 	}
 
 	/**
 	 * @return Locator
 	 */
-	public static function canReshareCheckboxInput($sharedWithName) {
+	public static function canReshareCheckboxInput($sharedWithName, $shareWithMenuTriggerElement) {
-		return self::permissionCheckboxInputFor($sharedWithName, 'Allow resharing');
+		return self::permissionCheckboxInputFor($sharedWithName, $shareWithMenuTriggerElement, 'Allow resharing');
 	}
 
 	/**
@@ -195,109 +203,117 @@ class FilesAppSharingContext implements Context, ActorAwareInterface {
 	/**
 	 * @return Locator
 	 */
-	public static function shareLinkMenuButton() {
+	public static function shareLinkMenuTrigger() {
-		return Locator::forThe()->css(".sharing-entry__actions .action-item__menutoggle")->
+		return Locator::forThe()->css(".sharing-entry__actions .trigger")->
 				descendantOf(self::shareLinkRow())->
+				describedAs("Share link menu trigger in the details view in Files app");
+	}
+
+	/**
+	 * @return Locator
+	 */
+	public static function shareLinkMenuButton() {
+		return Locator::forThe()->css(".action-item__menutoggle")->
+				descendantOf(self::shareLinkMenuTrigger())->
 				describedAs("Share link menu button in the details view in Files app");
 	}
 
 	/**
 	 * @return Locator
 	 */
-	public static function shareLinkMenu() {
+	public static function shareLinkMenu($shareLinkMenuTriggerElement) {
-		return Locator::forThe()->css(".sharing-entry__actions .action-item__menu")->
+		return Locator::forThe()->xpath("//*[@id = " . $shareLinkMenuTriggerElement->getWrappedElement()->getXpath() . "/@aria-describedby]")->
-				descendantOf(self::shareLinkRow())->
 				describedAs("Share link menu in the details view in Files app");
 	}
 
 	/**
 	 * @return Locator
 	 */
-	public static function hideDownloadCheckbox() {
+	public static function hideDownloadCheckbox($shareLinkMenuTriggerElement) {
 		// forThe()->checkbox("Hide download") can not be used here; that would
 		// return the checkbox itself, but the element that the user interacts
 		// with is the label.
 		return Locator::forThe()->xpath("//label[normalize-space() = 'Hide download']")->
-				descendantOf(self::shareLinkMenu())->
+				descendantOf(self::shareLinkMenu($shareLinkMenuTriggerElement))->
 				describedAs("Hide download checkbox in the details view in Files app");
 	}
 
 	/**
 	 * @return Locator
 	 */
-	public static function hideDownloadCheckboxInput() {
+	public static function hideDownloadCheckboxInput($shareLinkMenuTriggerElement) {
 		return Locator::forThe()->checkbox("Hide download")->
-				descendantOf(self::shareLinkMenu())->
+				descendantOf(self::shareLinkMenu($shareLinkMenuTriggerElement))->
 				describedAs("Hide download checkbox input in the details view in Files app");
 	}
 
 	/**
 	 * @return Locator
 	 */
-	public static function allowUploadAndEditingRadioButton() {
+	public static function allowUploadAndEditingRadioButton($shareLinkMenuTriggerElement) {
 		// forThe()->radio("Allow upload and editing") can not be used here;
 		// that would return the radio button itself, but the element that the
 		// user interacts with is the label.
 		return Locator::forThe()->xpath("//label[normalize-space() = 'Allow upload and editing']")->
-				descendantOf(self::shareLinkMenu())->
+				descendantOf(self::shareLinkMenu($shareLinkMenuTriggerElement))->
 				describedAs("Allow upload and editing radio button in the details view in Files app");
 	}
 
 	/**
 	 * @return Locator
 	 */
-	public static function passwordProtectCheckbox() {
+	public static function passwordProtectCheckbox($shareLinkMenuTriggerElement) {
 		// forThe()->checkbox("Password protect") can not be used here; that
 		// would return the checkbox itself, but the element that the user
 		// interacts with is the label.
 		return Locator::forThe()->xpath("//label[normalize-space() = 'Password protect']")->
-				descendantOf(self::shareLinkMenu())->
+				descendantOf(self::shareLinkMenu($shareLinkMenuTriggerElement))->
 				describedAs("Password protect checkbox in the details view in Files app");
 	}
 
 	/**
 	 * @return Locator
 	 */
-	public static function passwordProtectCheckboxInput() {
+	public static function passwordProtectCheckboxInput($shareLinkMenuTriggerElement) {
 		return Locator::forThe()->checkbox("Password protect")->
-				descendantOf(self::shareLinkMenu())->
+				descendantOf(self::shareLinkMenu($shareLinkMenuTriggerElement))->
 				describedAs("Password protect checkbox input in the details view in Files app");
 	}
 
 	/**
 	 * @return Locator
 	 */
-	public static function passwordProtectField() {
+	public static function passwordProtectField($shareLinkMenuTriggerElement) {
-		return Locator::forThe()->css(".share-link-password input.action-input__input")->descendantOf(self::shareLinkMenu())->
+		return Locator::forThe()->css(".share-link-password input.action-input__input")->descendantOf(self::shareLinkMenu($shareLinkMenuTriggerElement))->
 				describedAs("Password protect field in the details view in Files app");
 	}
 
 	/**
 	 * @return Locator
 	 */
-	public static function disabledPasswordProtectField() {
+	public static function disabledPasswordProtectField($shareLinkMenuTriggerElement) {
-		return Locator::forThe()->css(".share-link-password input.action-input__input[disabled]")->descendantOf(self::shareLinkMenu())->
+		return Locator::forThe()->css(".share-link-password input.action-input__input[disabled]")->descendantOf(self::shareLinkMenu($shareLinkMenuTriggerElement))->
 				describedAs("Disabled password protect field in the details view in Files app");
 	}
 
 	/**
 	 * @return Locator
 	 */
-	public static function passwordProtectByTalkCheckbox() {
+	public static function passwordProtectByTalkCheckbox($shareLinkMenuTriggerElement) {
 		// forThe()->checkbox("Password protect by Talk") can not be used here;
 		// that would return the checkbox itself, but the element that the user
 		// interacts with is the label.
 		return Locator::forThe()->xpath("//label[normalize-space() = 'Password protect by Talk']")->
-				descendantOf(self::shareLinkMenu())->
+				descendantOf(self::shareLinkMenu($shareLinkMenuTriggerElement))->
 				describedAs("Password protect by Talk checkbox in the details view in Files app");
 	}
 
 	/**
 	 * @return Locator
 	 */
-	public static function passwordProtectByTalkCheckboxInput() {
+	public static function passwordProtectByTalkCheckboxInput($shareLinkMenuTriggerElement) {
 		return Locator::forThe()->checkbox("Password protect by Talk")->
-				descendantOf(self::shareLinkMenu())->
+				descendantOf(self::shareLinkMenu($shareLinkMenuTriggerElement))->
 				describedAs("Password protect by Talk checkbox input in the details view in Files app");
 	}
 
@@ -328,15 +344,17 @@ class FilesAppSharingContext implements Context, ActorAwareInterface {
 	 * @Given I write down the shared link
 	 */
 	public function iWriteDownTheSharedLink() {
+		$shareLinkMenuTriggerElement = $this->actor->find(self::shareLinkMenuTrigger(), 2);
+
 		// Close the share link menu if it is open to ensure that it does not
 		// cover the copy link button.
 		if (!WaitFor::elementToBeEventuallyNotShown(
 				$this->actor,
-				self::shareLinkMenu(),
+				self::shareLinkMenu($shareLinkMenuTriggerElement),
 				$timeout = 2 * $this->actor->getFindTimeoutMultiplier())) {
 			// It may not be possible to click on the menu button (due to the
 			// menu itself covering it), so "Esc" key is pressed instead.
-			$this->actor->find(self::shareLinkMenu(), 2)->getWrappedElement()->keyPress(27);
+			$this->actor->find(self::shareLinkMenu($shareLinkMenuTriggerElement), 2)->getWrappedElement()->keyPress(27);
 		}
 
 		$this->actor->find(self::copyLinkButton(), 10)->click();
@@ -355,7 +373,8 @@ class FilesAppSharingContext implements Context, ActorAwareInterface {
 
 		$this->iSeeThatTheDownloadOfTheLinkShareIsShown();
 
-		$this->actor->find(self::hideDownloadCheckbox(), 2)->click();
+		$shareLinkMenuTriggerElement = $this->actor->find(self::shareLinkMenuTrigger(), 2);
+		$this->actor->find(self::hideDownloadCheckbox($shareLinkMenuTriggerElement), 2)->click();
 	}
 
 	/**
@@ -366,7 +385,8 @@ class FilesAppSharingContext implements Context, ActorAwareInterface {
 
 		$this->iSeeThatTheDownloadOfTheLinkShareIsHidden();
 
-		$this->actor->find(self::hideDownloadCheckbox(), 2)->click();
+		$shareLinkMenuTriggerElement = $this->actor->find(self::shareLinkMenuTrigger(), 2);
+		$this->actor->find(self::hideDownloadCheckbox($shareLinkMenuTriggerElement), 2)->click();
 	}
 
 	/**
@@ -375,7 +395,8 @@ class FilesAppSharingContext implements Context, ActorAwareInterface {
 	public function iSetTheSharedLinkAsEditable() {
 		$this->showShareLinkMenuIfNeeded();
 
-		$this->actor->find(self::allowUploadAndEditingRadioButton(), 2)->click();
+		$shareLinkMenuTriggerElement = $this->actor->find(self::shareLinkMenuTrigger(), 2);
+		$this->actor->find(self::allowUploadAndEditingRadioButton($shareLinkMenuTriggerElement), 2)->click();
 	}
 
 	/**
@@ -384,9 +405,10 @@ class FilesAppSharingContext implements Context, ActorAwareInterface {
 	public function iProtectTheSharedLinkWithThePassword($password) {
 		$this->showShareLinkMenuIfNeeded();
 
-		$this->actor->find(self::passwordProtectCheckbox(), 2)->click();
+		$shareLinkMenuTriggerElement = $this->actor->find(self::shareLinkMenuTrigger(), 2);
+		$this->actor->find(self::passwordProtectCheckbox($shareLinkMenuTriggerElement), 2)->click();
 
-		$this->actor->find(self::passwordProtectField(), 2)->setValue($password . "\r");
+		$this->actor->find(self::passwordProtectField($shareLinkMenuTriggerElement), 2)->setValue($password . "\r");
 	}
 
 	/**
@@ -397,7 +419,8 @@ class FilesAppSharingContext implements Context, ActorAwareInterface {
 
 		$this->iSeeThatThePasswordOfTheLinkShareIsNotProtectedByTalk();
 
-		$this->actor->find(self::passwordProtectByTalkCheckbox(), 2)->click();
+		$shareLinkMenuTriggerElement = $this->actor->find(self::shareLinkMenuTrigger(), 2);
+		$this->actor->find(self::passwordProtectByTalkCheckbox($shareLinkMenuTriggerElement), 2)->click();
 	}
 
 	/**
@@ -408,7 +431,8 @@ class FilesAppSharingContext implements Context, ActorAwareInterface {
 
 		$this->iSeeThatThePasswordOfTheLinkShareIsProtectedByTalk();
 
-		$this->actor->find(self::passwordProtectByTalkCheckbox(), 2)->click();
+		$shareLinkMenuTriggerElement = $this->actor->find(self::shareLinkMenuTrigger(), 2);
+		$this->actor->find(self::passwordProtectByTalkCheckbox($shareLinkMenuTriggerElement), 2)->click();
 	}
 
 	/**
@@ -419,7 +443,8 @@ class FilesAppSharingContext implements Context, ActorAwareInterface {
 
 		$this->iSeeThatCanEditTheShare($shareWithName);
 
-		$this->actor->find(self::canEditCheckbox($shareWithName), 2)->click();
+		$shareWithMenuTriggerElement = $this->actor->find(self::shareWithMenuTrigger($shareWithName), 2);
+		$this->actor->find(self::canEditCheckbox($shareWithName, $shareWithMenuTriggerElement), 2)->click();
 	}
 
 	/**
@@ -430,7 +455,8 @@ class FilesAppSharingContext implements Context, ActorAwareInterface {
 
 		$this->iSeeThatCanCreateInTheShare($shareWithName);
 
-		$this->actor->find(self::canCreateCheckbox($shareWithName), 2)->click();
+		$shareWithMenuTriggerElement = $this->actor->find(self::shareWithMenuTrigger($shareWithName), 2);
+		$this->actor->find(self::canCreateCheckbox($shareWithName, $shareWithMenuTriggerElement), 2)->click();
 	}
 
 	/**
@@ -441,7 +467,8 @@ class FilesAppSharingContext implements Context, ActorAwareInterface {
 
 		$this->iSeeThatCanReshareTheShare($shareWithName);
 
-		$this->actor->find(self::canReshareCheckbox($shareWithName), 2)->click();
+		$shareWithMenuTriggerElement = $this->actor->find(self::shareWithMenuTrigger($shareWithName), 2);
+		$this->actor->find(self::canReshareCheckbox($shareWithName, $shareWithMenuTriggerElement), 2)->click();
 	}
 
 	/**
@@ -476,8 +503,9 @@ class FilesAppSharingContext implements Context, ActorAwareInterface {
 	public function iSeeThatCanNotBeAllowedToEditTheShare($sharedWithName) {
 		$this->showShareWithMenuIfNeeded($sharedWithName);
 
+		$shareWithMenuTriggerElement = $this->actor->find(self::shareWithMenuTrigger($sharedWithName), 10);
 		PHPUnit_Framework_Assert::assertEquals(
-				$this->actor->find(self::canEditCheckboxInput($sharedWithName), 10)->getWrappedElement()->getAttribute("disabled"), "disabled");
+				$this->actor->find(self::canEditCheckboxInput($sharedWithName, $shareWithMenuTriggerElement), 10)->getWrappedElement()->getAttribute("disabled"), "disabled");
 	}
 
 	/**
@@ -486,8 +514,9 @@ class FilesAppSharingContext implements Context, ActorAwareInterface {
 	public function iSeeThatCanEditTheShare($sharedWithName) {
 		$this->showShareWithMenuIfNeeded($sharedWithName);
 
+		$shareWithMenuTriggerElement = $this->actor->find(self::shareWithMenuTrigger($sharedWithName), 10);
 		PHPUnit_Framework_Assert::assertTrue(
-				$this->actor->find(self::canEditCheckboxInput($sharedWithName), 10)->isChecked());
+				$this->actor->find(self::canEditCheckboxInput($sharedWithName, $shareWithMenuTriggerElement), 10)->isChecked());
 	}
 
 	/**
@@ -496,8 +525,9 @@ class FilesAppSharingContext implements Context, ActorAwareInterface {
 	public function iSeeThatCanNotEditTheShare($sharedWithName) {
 		$this->showShareWithMenuIfNeeded($sharedWithName);
 
+		$shareWithMenuTriggerElement = $this->actor->find(self::shareWithMenuTrigger($sharedWithName), 10);
 		PHPUnit_Framework_Assert::assertFalse(
-				$this->actor->find(self::canEditCheckboxInput($sharedWithName), 10)->isChecked());
+				$this->actor->find(self::canEditCheckboxInput($sharedWithName, $shareWithMenuTriggerElement), 10)->isChecked());
 	}
 
 	/**
@@ -506,8 +536,9 @@ class FilesAppSharingContext implements Context, ActorAwareInterface {
 	public function iSeeThatCanNotBeAllowedToCreateInTheShare($sharedWithName) {
 		$this->showShareWithMenuIfNeeded($sharedWithName);
 
+		$shareWithMenuTriggerElement = $this->actor->find(self::shareWithMenuTrigger($sharedWithName), 10);
 		PHPUnit_Framework_Assert::assertEquals(
-				$this->actor->find(self::canCreateCheckboxInput($sharedWithName), 10)->getWrappedElement()->getAttribute("disabled"), "disabled");
+				$this->actor->find(self::canCreateCheckboxInput($sharedWithName, $shareWithMenuTriggerElement), 10)->getWrappedElement()->getAttribute("disabled"), "disabled");
 	}
 
 	/**
@@ -516,8 +547,9 @@ class FilesAppSharingContext implements Context, ActorAwareInterface {
 	public function iSeeThatCanCreateInTheShare($sharedWithName) {
 		$this->showShareWithMenuIfNeeded($sharedWithName);
 
+		$shareWithMenuTriggerElement = $this->actor->find(self::shareWithMenuTrigger($sharedWithName), 10);
 		PHPUnit_Framework_Assert::assertTrue(
-				$this->actor->find(self::canCreateCheckboxInput($sharedWithName), 10)->isChecked());
+				$this->actor->find(self::canCreateCheckboxInput($sharedWithName, $shareWithMenuTriggerElement), 10)->isChecked());
 	}
 
 	/**
@@ -526,8 +558,9 @@ class FilesAppSharingContext implements Context, ActorAwareInterface {
 	public function iSeeThatCanNotCreateInTheShare($sharedWithName) {
 		$this->showShareWithMenuIfNeeded($sharedWithName);
 
+		$shareWithMenuTriggerElement = $this->actor->find(self::shareWithMenuTrigger($sharedWithName), 10);
 		PHPUnit_Framework_Assert::assertFalse(
-				$this->actor->find(self::canCreateCheckboxInput($sharedWithName), 10)->isChecked());
+				$this->actor->find(self::canCreateCheckboxInput($sharedWithName, $shareWithMenuTriggerElement), 10)->isChecked());
 	}
 
 	/**
@@ -536,8 +569,9 @@ class FilesAppSharingContext implements Context, ActorAwareInterface {
 	public function iSeeThatCanReshareTheShare($sharedWithName) {
 		$this->showShareWithMenuIfNeeded($sharedWithName);
 
+		$shareWithMenuTriggerElement = $this->actor->find(self::shareWithMenuTrigger($sharedWithName), 10);
 		PHPUnit_Framework_Assert::assertTrue(
-				$this->actor->find(self::canReshareCheckboxInput($sharedWithName), 10)->isChecked());
+				$this->actor->find(self::canReshareCheckboxInput($sharedWithName, $shareWithMenuTriggerElement), 10)->isChecked());
 	}
 
 	/**
@@ -546,8 +580,9 @@ class FilesAppSharingContext implements Context, ActorAwareInterface {
 	public function iSeeThatCanNotReshareTheShare($sharedWithName) {
 		$this->showShareWithMenuIfNeeded($sharedWithName);
 
+		$shareWithMenuTriggerElement = $this->actor->find(self::shareWithMenuTrigger($sharedWithName), 10);
 		PHPUnit_Framework_Assert::assertFalse(
-				$this->actor->find(self::canReshareCheckboxInput($sharedWithName), 10)->isChecked());
+				$this->actor->find(self::canReshareCheckboxInput($sharedWithName, $shareWithMenuTriggerElement), 10)->isChecked());
 	}
 
 	/**
@@ -556,7 +591,8 @@ class FilesAppSharingContext implements Context, ActorAwareInterface {
 	public function iSeeThatTheDownloadOfTheLinkShareIsHidden() {
 		$this->showShareLinkMenuIfNeeded();
 
-		PHPUnit_Framework_Assert::assertTrue($this->actor->find(self::hideDownloadCheckboxInput(), 10)->isChecked());
+		$shareLinkMenuTriggerElement = $this->actor->find(self::shareLinkMenuTrigger(), 10);
+		PHPUnit_Framework_Assert::assertTrue($this->actor->find(self::hideDownloadCheckboxInput($shareLinkMenuTriggerElement), 10)->isChecked());
 	}
 
 	/**
@@ -565,18 +601,35 @@ class FilesAppSharingContext implements Context, ActorAwareInterface {
 	public function iSeeThatTheDownloadOfTheLinkShareIsShown() {
 		$this->showShareLinkMenuIfNeeded();
 
-		PHPUnit_Framework_Assert::assertFalse($this->actor->find(self::hideDownloadCheckboxInput(), 10)->isChecked());
+		$shareLinkMenuTriggerElement = $this->actor->find(self::shareLinkMenuTrigger(), 10);
+		PHPUnit_Framework_Assert::assertFalse($this->actor->find(self::hideDownloadCheckboxInput($shareLinkMenuTriggerElement), 10)->isChecked());
 	}
 
 	/**
 	 * @Then I see that the password protect is disabled while loading
 	 */
 	public function iSeeThatThePasswordProtectIsDisabledWhileLoading() {
-		PHPUnit_Framework_Assert::assertNotNull($this->actor->find(self::disabledPasswordProtectField(), 10));
+		// Due to the additional time needed to find the menu trigger element it
+		// could happen that the request to modify the password protect was
+		// completed and the field enabled again even before finding the
+		// disabled field started. Therefore, if the disabled field could not be
+		// found it is just assumed that it was already enabled again.
+		// Nevertheless, this check should be done anyway to ensure that the
+		// following scenario steps are not executed before the request to the
+		// server was done.
+		$shareLinkMenuTriggerElement = $this->actor->find(self::shareLinkMenuTrigger(), 10);
+
+		try {
+			$this->actor->find(self::disabledPasswordProtectField($shareLinkMenuTriggerElement), 5);
+		} catch (NoSuchElementException $exception) {
+			echo "The password protect field was not found disabled after " . (5 * $this->actor->getFindTimeoutMultiplier()) . " seconds, assumming that it was disabled and enabled again before the check started and continuing";
+
+			return;
+		}
 
 		if (!WaitFor::elementToBeEventuallyNotShown(
 				$this->actor,
-				self::disabledPasswordProtectField(),
+				self::disabledPasswordProtectField($shareLinkMenuTriggerElement),
 				$timeout = 10 * $this->actor->getFindTimeoutMultiplier())) {
 			PHPUnit_Framework_Assert::fail("The password protect field is still disabled after $timeout seconds");
 		}
@@ -588,8 +641,9 @@ class FilesAppSharingContext implements Context, ActorAwareInterface {
 	public function iSeeThatTheLinkShareIsPasswordProtected() {
 		$this->showShareLinkMenuIfNeeded();
 
-		PHPUnit_Framework_Assert::assertTrue($this->actor->find(self::passwordProtectCheckboxInput(), 10)->isChecked(), "Password protect checkbox is checked");
+		$shareLinkMenuTriggerElement = $this->actor->find(self::shareLinkMenuTrigger(), 10);
-		PHPUnit_Framework_Assert::assertTrue($this->actor->find(self::passwordProtectField(), 10)->isVisible(), "Password protect field is visible");
+		PHPUnit_Framework_Assert::assertTrue($this->actor->find(self::passwordProtectCheckboxInput($shareLinkMenuTriggerElement), 10)->isChecked(), "Password protect checkbox is checked");
+		PHPUnit_Framework_Assert::assertTrue($this->actor->find(self::passwordProtectField($shareLinkMenuTriggerElement), 10)->isVisible(), "Password protect field is visible");
 	}
 
 	/**
@@ -598,7 +652,8 @@ class FilesAppSharingContext implements Context, ActorAwareInterface {
 	public function iSeeThatThePasswordOfTheLinkShareIsProtectedByTalk() {
 		$this->showShareLinkMenuIfNeeded();
 
-		PHPUnit_Framework_Assert::assertTrue($this->actor->find(self::passwordProtectByTalkCheckboxInput(), 10)->isChecked());
+		$shareLinkMenuTriggerElement = $this->actor->find(self::shareLinkMenuTrigger(), 10);
+		PHPUnit_Framework_Assert::assertTrue($this->actor->find(self::passwordProtectByTalkCheckboxInput($shareLinkMenuTriggerElement), 10)->isChecked());
 	}
 
 	/**
@@ -607,7 +662,8 @@ class FilesAppSharingContext implements Context, ActorAwareInterface {
 	public function iSeeThatThePasswordOfTheLinkShareIsNotProtectedByTalk() {
 		$this->showShareLinkMenuIfNeeded();
 
-		PHPUnit_Framework_Assert::assertFalse($this->actor->find(self::passwordProtectByTalkCheckboxInput(), 10)->isChecked());
+		$shareLinkMenuTriggerElement = $this->actor->find(self::shareLinkMenuTrigger(), 10);
+		PHPUnit_Framework_Assert::assertFalse($this->actor->find(self::passwordProtectByTalkCheckboxInput($shareLinkMenuTriggerElement), 10)->isChecked());
 	}
 
 	/**
@@ -616,9 +672,10 @@ class FilesAppSharingContext implements Context, ActorAwareInterface {
 	public function iSeeThatTheCheckboxToProtectThePasswordOfTheLinkShareByTalkIsNotShown() {
 		$this->showShareLinkMenuIfNeeded();
 
+		$shareLinkMenuTriggerElement = $this->actor->find(self::shareLinkMenuTrigger(), 10);
 		try {
 			PHPUnit_Framework_Assert::assertFalse(
-					$this->actor->find(self::passwordProtectByTalkCheckbox())->isVisible());
+					$this->actor->find(self::passwordProtectByTalkCheckbox($shareLinkMenuTriggerElement))->isVisible());
 		} catch (NoSuchElementException $exception) {
 		}
 	}
@@ -633,26 +690,30 @@ class FilesAppSharingContext implements Context, ActorAwareInterface {
 	}
 
 	private function showShareLinkMenuIfNeeded() {
+		$shareLinkMenuTriggerElement = $this->actor->find(self::shareLinkMenuTrigger(), 2);
+
 		// In some cases the share menu is hidden after clicking on an action of
 		// the menu. Therefore, if the menu is visible, wait a little just in
 		// case it is in the process of being hidden due to a previous action,
 		// in which case it is shown again.
 		if (WaitFor::elementToBeEventuallyNotShown(
 				$this->actor,
-				self::shareLinkMenu(),
+				self::shareLinkMenu($shareLinkMenuTriggerElement),
 				$timeout = 2 * $this->actor->getFindTimeoutMultiplier())) {
 			$this->actor->find(self::shareLinkMenuButton(), 10)->click();
 		}
 	}
 
 	private function showShareWithMenuIfNeeded($shareWithName) {
+		$shareWithMenuTriggerElement = $this->actor->find(self::shareWithMenuTrigger($shareWithName), 2);
+
 		// In some cases the share menu is hidden after clicking on an action of
 		// the menu. Therefore, if the menu is visible, wait a little just in
 		// case it is in the process of being hidden due to a previous action,
 		// in which case it is shown again.
 		if (WaitFor::elementToBeEventuallyNotShown(
 				$this->actor,
-				self::shareWithMenu($shareWithName),
+				self::shareWithMenu($shareWithName, $shareWithMenuTriggerElement),
 				$timeout = 2 * $this->actor->getFindTimeoutMultiplier())) {
 			$this->actor->find(self::shareWithMenuButton($shareWithName), 10)->click();
 		}