@conduction/nextcloud-vue 2.76.0 → 2.77.0

package/src/components/CnFilesBrowser/CnFilesBrowser.vue

@@ -7,10 +7,29 @@
 		class="cn-files-browser"
 		:class="{ 'cn-files-browser--dragging': dragging }"
 		data-testid="cn-files-browser"
-		@dragenter.prevent="dragging = true"
-		@dragover.prevent="dragging = true"
-		@dragleave.prevent="dragging = false"
+		@dragenter.prevent="onDragEnter"
+		@dragover.prevent="onDragOver"
+		@dragleave.prevent="onDragLeave"
 		@drop.prevent="onDrop">
+		<!-- The drop state, drawn on the browser itself when the host names it
+		     (`dropOverlay`): a dashed frame and one centred line over the list,
+		     so it is plain where the files go. The overlay is decoration for
+		     sighted users; the live region below says the same thing to a
+		     screen reader, and the upload button stays the way in for anyone
+		     who cannot drag. -->
+		<div v-if="dropOverlay && dragging"
+			class="cn-files-browser__drop-overlay"
+			aria-hidden="true"
+			data-testid="cn-files-browser-drop-overlay">
+			<span class="cn-files-browser__drop-icon"><Upload :size="28" /></span>
+			<strong class="cn-files-browser__drop-label">{{ dropLabel }}</strong>
+		</div>
+		<p v-if="dropOverlay"
+			class="hidden-visually"
+			aria-live="polite"
+			data-testid="cn-files-browser-drop-status">
+			{{ dropStatus }}
+		</p>
 		<!-- The bar: where you are, and what you can add. The crumbs are the
 		     Files app's own breadcrumb component; the New menu lists what the
 		     Files app and its plugins registered for this folder (a new folder,
@@ -56,7 +75,7 @@
 				:menuName="newLabel"
 				:forceMenu="true"
 				:forceName="true"
-				variant="primary"
+				:variant="uploadButton ? 'secondary' : 'primary'"
 				:disabled="folder === null"
 				data-testid="cn-files-browser-new">
 				<template #icon>
@@ -94,6 +113,19 @@
 					{{ action.label }}
 				</NcActionButton>
 			</NcActions>
+			<!-- A plain upload as its own button, when the host names it
+			     (`uploadButton`). It takes the primary place and the New
+			     menu steps back beside it. -->
+			<NcButton v-if="uploadButton"
+				variant="primary"
+				:disabled="folder === null"
+				data-testid="cn-files-browser-upload-button"
+				@click="pickFiles">
+				<template #icon>
+					<Upload :size="20" />
+				</template>
+				{{ uploadButtonLabel }}
+			</NcButton>
 		</div>
 
 		<!-- `:ref` (dynamic), not `ref`: a static ref on a vnode with only static
@@ -344,6 +376,13 @@
 			</tbody>
 		</table>
 
+		<p v-if="dropHint && !loading && error === ''"
+			class="cn-files-browser__drop-hint"
+			data-testid="cn-files-browser-drop-hint">
+			<Upload :size="16" />
+			{{ dropHintLabel }}
+		</p>
+
 		<NcDialog
 			v-if="renaming !== null"
 			:name="renameLabel"
@@ -443,7 +482,7 @@ import { getClient, getDefaultPropfind, getRemoteURL, getRootPath, resultToNode
  * copy read `window._nc_fileactions`, which the server's plugins never write,
  * and saw nothing while the page held thirty actions.
  */
-import { translate as t } from '@nextcloud/l10n'
+import { translatePlural as n, translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 import { NcActionButton, NcActionCheckbox, NcActionLink, NcActions, NcActionSeparator, NcBreadcrumb, NcBreadcrumbs, NcButton, NcDateTime, NcDialog, NcIconSvgWrapper, NcLoadingIcon, NcProgressBar, NcTextField } from '@nextcloud/vue'
 import AlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
@@ -624,6 +663,51 @@ export default {
 			default: () => t('nextcloud-vue', 'Show in Files'),
 		},
 
+		/**
+		 * Show a primary upload button beside the New menu, which then steps
+		 * back to a secondary button. Off (the default) keeps the upload
+		 * inside the New menu only.
+		 */
+		uploadButton: {
+			type: Boolean,
+			default: false,
+		},
+
+		/** Label of the upload button `uploadButton` shows. */
+		uploadButtonLabel: {
+			type: String,
+			default: () => t('nextcloud-vue', 'Add files'),
+		},
+
+		/**
+		 * Draw the drop state over the browser while files are dragged onto
+		 * it (a dashed frame and `dropLabel`, centred) and announce it to
+		 * screen readers. Off (the default) keeps the plain dashed outline and
+		 * announces nothing.
+		 */
+		dropOverlay: {
+			type: Boolean,
+			default: false,
+		},
+
+		/** The line `dropOverlay` draws and announces. */
+		dropLabel: {
+			type: String,
+			default: () => t('nextcloud-vue', 'Drop to add'),
+		},
+
+		/** Show a line under the list saying files can be dropped on it. */
+		dropHint: {
+			type: Boolean,
+			default: false,
+		},
+
+		/** The line `dropHint` shows. */
+		dropHintLabel: {
+			type: String,
+			default: () => t('nextcloud-vue', 'Or drag files onto this list.'),
+		},
+
 		/** Title of the empty state. */
 		emptyLabel: {
 			type: String,
@@ -726,6 +810,10 @@ export default {
 			 */
 			visibleColumnKeys: null,
 			dragging: false,
+			/** Nested dragenter/dragleave pairs, so a child does not end the drag. */
+			dragDepth: 0,
+			/** What the live region says: the drop label, then what was added. */
+			dropStatus: '',
 			uploads: [],
 			previewFailed: {},
 			newFolderOpen: false,
@@ -1265,12 +1353,76 @@ export default {
 		 */
 		async onDrop(event) {
 			this.dragging = false
+			this.dragDepth = 0
+			this.dropStatus = ''
 			const files = event.dataTransfer?.files
 			if (files?.length) {
 				await this.uploadFiles(files)
+				if (this.dropOverlay) {
+					this.dropStatus = n('nextcloud-vue', '%n file added', '%n files added', files.length)
+				}
 			}
 		},
 
+		/**
+		 * Something is dragged into the browser: show the drop state when it
+		 * carries files, and say so once.
+		 *
+		 * @param {DragEvent} event The drag.
+		 * @return {void}
+		 */
+		onDragEnter(event) {
+			if (!this.carriesFiles(event)) {
+				return
+			}
+			this.dragDepth++
+			if (!this.dragging) {
+				this.dragging = true
+				this.dropStatus = this.dropOverlay ? this.dropLabel : ''
+			}
+		},
+
+		/**
+		 * Keep the drop state while files move over the browser.
+		 *
+		 * @param {DragEvent} event The drag.
+		 * @return {void}
+		 */
+		onDragOver(event) {
+			if (this.carriesFiles(event)) {
+				this.dragging = true
+			}
+		},
+
+		/**
+		 * Something left the browser, or one of its children. The drop state
+		 * ends only when the drag has left the browser itself.
+		 *
+		 * @return {void}
+		 */
+		onDragLeave() {
+			this.dragDepth = Math.max(0, this.dragDepth - 1)
+			if (this.dragDepth === 0) {
+				this.dragging = false
+				this.dropStatus = ''
+			}
+		},
+
+		/**
+		 * Whether a drag carries files (not text or a link from the page).
+		 * A drag whose types cannot be read counts as files, as before.
+		 *
+		 * @param {DragEvent} event The drag.
+		 * @return {boolean}
+		 */
+		carriesFiles(event) {
+			const types = event?.dataTransfer?.types
+			if (!types) {
+				return true
+			}
+			return Array.from(types).includes('Files')
+		},
+
 		/**
 		 * PUT each file into the open folder over DAV, with a progress row
 		 * each, then re-read the folder once.
@@ -1660,6 +1812,7 @@ export default {
 	flex-direction: column;
 	gap: 8px;
 	min-width: 0;
+	position: relative;
 	border-radius: var(--border-radius-large, 8px);
 }
 
@@ -1668,6 +1821,52 @@ export default {
 	outline-offset: 4px;
 }
 
+.cn-files-browser__drop-overlay {
+	position: absolute;
+	inset: 0;
+	z-index: 2;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 10px;
+	padding: 24px;
+	box-sizing: border-box;
+	border: 2px dashed var(--color-primary-element);
+	border-radius: var(--border-radius-large, 8px);
+	background: var(--color-primary-element-light);
+	color: var(--color-primary-element-light-text, var(--color-main-text));
+	text-align: center;
+	pointer-events: none;
+}
+
+.cn-files-browser__drop-icon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 56px;
+	height: 56px;
+	border-radius: 50%;
+	background: var(--color-main-background);
+	color: var(--color-primary-element);
+}
+
+.cn-files-browser__drop-label {
+	font-size: 20px;
+	font-weight: 700;
+}
+
+.cn-files-browser__drop-hint {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	margin: 0;
+	padding-top: 12px;
+	border-top: 1px solid var(--color-border);
+	font-size: 13px;
+	color: var(--color-text-maxcontrast);
+}
+
 .cn-files-browser__bar {
 	display: flex;
 	align-items: center;

package/src/components/CnFollowToggle/CnFollowToggle.vue

@@ -3,22 +3,41 @@
   - SPDX-License-Identifier: EUPL-1.2
 -->
 <template>
-	<span class="cn-follow-toggle" data-testid="cn-follow-toggle">
+	<span class="cn-follow-toggle"
+		:class="{ 'cn-follow-toggle--compact': compact }"
+		data-testid="cn-follow-toggle">
 		<NcButton
-			:variant="state ? 'secondary' : 'tertiary'"
+			:variant="state && !compact ? 'secondary' : 'tertiary'"
 			:aria-pressed="state ? 'true' : 'false'"
+			:aria-label="compact ? (state ? followingLabel : followLabel) : undefined"
 			:title="tooltip"
 			:disabled="busy"
 			data-testid="cn-follow-toggle-button"
 			@click.stop="toggle">
 			<template #icon>
-				<Bell v-if="state" :size="20" />
-				<BellOutline v-else :size="20" />
+				<Eye v-if="state" :size="20" class="cn-follow-toggle__on" />
+				<EyeOutline v-else :size="20" />
+			</template>
+			<template v-if="!compact">
+				{{ state ? followingLabel : followLabel }}
+			</template>
+		</NcButton>
+		<NcButton
+			v-if="showNotifySwitch"
+			variant="tertiary"
+			:aria-pressed="notifyState ? 'true' : 'false'"
+			:aria-label="notifyLabel"
+			:title="notifyLabel"
+			:disabled="busy"
+			data-testid="cn-follow-toggle-notify"
+			@click.stop="toggleNotify">
+			<template #icon>
+				<Bell v-if="notifyState" :size="20" />
+				<BellOffOutline v-else :size="20" />
 			</template>
-			{{ state ? followingLabel : followLabel }}
 		</NcButton>
 		<NcPopover
-			v-if="count !== null"
+			v-if="count !== null && !compact"
 			v-model:shown="open"
 			placement="bottom-start">
 			<template #trigger>
@@ -82,15 +101,26 @@
 import { translate as t } from '@nextcloud/l10n'
 import { NcAvatar, NcButton, NcLoadingIcon, NcPopover, NcSelect } from '@nextcloud/vue'
 import Bell from 'vue-material-design-icons/Bell.vue'
-import BellOutline from 'vue-material-design-icons/BellOutline.vue'
+import BellOffOutline from 'vue-material-design-icons/BellOffOutline.vue'
 import Close from 'vue-material-design-icons/Close.vue'
+import Eye from 'vue-material-design-icons/Eye.vue'
+import EyeOutline from 'vue-material-design-icons/EyeOutline.vue'
 import { patchStoredSelf } from '../../utils/patchStoredSelf.js'
 import { listWatchers, setWatcher, setWatching } from '../../utils/recordInteractions.js'
 import { searchNextcloudUsers } from '../../utils/userAutocomplete.js'
 
 /**
- * CnFollowToggle — a Follow toggle bound to a record's `@self.watching` marker,
- * with the follower count and a followers popover for users who may see them.
+ * CnFollowToggle — the one Follow control of a record: a Follow toggle bound to
+ * `@self.watching`, a notifications switch bound to `@self.watchNotify`, the
+ * follower count and a followers popover for users who may see them.
+ *
+ * Following and favourites are one feature (OpenRegister's
+ * `merge-follow-and-favourites`): a favourite is a follow with notifications
+ * off, so there is no separate star. While the user follows, a bell beside the
+ * toggle turns the follow's notifications on or off (`PUT .../watch` with
+ * `{"notify": bool}`). With `notifies` false (the register sends no change
+ * notifications) the bell is not offered. `compact` renders the toggle as an
+ * icon only, without the bell, count or popover, for a column in a list.
  *
  * A click flips the toggle at once and sends `PUT` or `DELETE .../watch`; on
  * failure it flips back and shows the server's message, and a 404 says the
@@ -105,13 +135,14 @@ import { searchNextcloudUsers } from '../../utils/userAutocomplete.js'
  * Example:
  * ```vue
  * <CnFollowToggle register="pipelinq" schema="ticket" :object-id="id"
- *   :watching="self.watching" :watcher-count="self.watcherCount" :can-manage="self.can && self.can.manage" />
+ *   :watching="self.watching" :notify="self.watchNotify"
+ *   :watcher-count="self.watcherCount" :can-manage="self.can && self.can.manage" />
  * ```
  */
 export default {
 	name: 'CnFollowToggle',
 
-	components: { Bell, BellOutline, Close, NcAvatar, NcButton, NcLoadingIcon, NcPopover, NcSelect },
+	components: { Bell, BellOffOutline, Close, Eye, EyeOutline, NcAvatar, NcButton, NcLoadingIcon, NcPopover, NcSelect },
 
 	props: {
 		/** Register slug of the record. */
@@ -138,6 +169,21 @@ export default {
 			default: false,
 		},
 
+		/**
+		 * Whether the user's follow notifies them (`@self.watchNotify`). Null
+		 * (an older server, or not following) reads as on.
+		 */
+		notify: {
+			type: Boolean,
+			default: null,
+		},
+
+		/** Icon only, without the bell, count or popover: for a column in a list. */
+		compact: {
+			type: Boolean,
+			default: false,
+		},
+
 		/** Number of followers (`@self.watcherCount`). Null hides the count and the popover. */
 		watcherCount: {
 			type: Number,
@@ -168,6 +214,7 @@ export default {
 	data() {
 		return {
 			state: this.watching,
+			notifyState: this.notify !== false,
 			count: this.watcherCount,
 			busy: false,
 			open: false,
@@ -196,6 +243,21 @@ export default {
 			return t('nextcloud-vue', 'Add a colleague')
 		},
 
+		notifyLabel() {
+			return this.notifyState
+				? t('nextcloud-vue', 'Turn notifications off')
+				: t('nextcloud-vue', 'Turn notifications on')
+		},
+
+		/**
+		 * Whether the bell renders: following, not compact, and the register notifies.
+		 *
+		 * @return {boolean}
+		 */
+		showNotifySwitch() {
+			return this.state && !this.compact && this.notifies
+		},
+
 		followersLabel() {
 			return t('nextcloud-vue', '{count} followers', { count: this.count })
 		},
@@ -216,6 +278,10 @@ export default {
 			this.state = value
 		},
 
+		notify(value) {
+			this.notifyState = value !== false
+		},
+
 		watcherCount(value) {
 			this.count = value
 		},
@@ -272,12 +338,47 @@ export default {
 				}
 				return
 			}
+			// A new follow notifies (the server's default); an unfollow has no switch.
+			this.notifyState = this.state
 			patchStoredSelf(this.register, this.schema, this.objectId, {
 				watching: this.state,
+				favourite: this.state,
+				watchNotify: this.state ? true : undefined,
 				...(this.count !== null ? { watcherCount: this.count } : {}),
 			})
-			/** @event change Emitted after a successful call. Payload: `{ watching, count }`. */
-			this.$emit('change', { watching: this.state, count: this.count })
+			/** @event change Emitted after a successful call. Payload: `{ watching, notify, count }`. */
+			this.$emit('change', { watching: this.state, notify: this.state ? this.notifyState : null, count: this.count })
+		},
+
+		/**
+		 * Turn the follow's notifications on or off, optimistically.
+		 *
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/one-follow-control/specs/record-follow/spec.md#requirement-one-follow-control-with-a-notifications-switch
+		 */
+		async toggleNotify() {
+			if (this.busy || !this.state) {
+				return
+			}
+			const previous = this.notifyState
+			this.notifyState = !previous
+			this.busy = true
+			const result = await setWatching(this.register, this.schema, this.objectId, true, { notify: this.notifyState })
+			this.busy = false
+			if (!result.ok) {
+				this.notifyState = previous
+				const message = result.status === 404
+					? t('nextcloud-vue', 'You can no longer see this record.')
+					: (result.message || t('nextcloud-vue', 'Could not change notifications.'))
+				import('@nextcloud/dialogs').then(({ showError }) => showError(message)).catch(() => {})
+				this.$emit('error', message)
+				if (result.status === 404) {
+					this.$emit('not-found')
+				}
+				return
+			}
+			patchStoredSelf(this.register, this.schema, this.objectId, { watchNotify: this.notifyState })
+			this.$emit('change', { watching: true, notify: this.notifyState, count: this.count })
 		},
 
 		async loadWatchers() {
@@ -340,6 +441,10 @@ export default {
 	gap: 4px;
 }
 
+.cn-follow-toggle__on {
+	color: var(--color-primary-element);
+}
+
 .cn-follow-toggle__popover {
 	min-width: 260px;
 	padding: 12px;

package/src/components/CnIndexPage/CnIndexPage.md

@@ -358,6 +358,8 @@ export default {
 | `includeColumns` | Array | `null` | Column keys to show (whitelist); `null` means all |
 | `columnOverrides` | Object | `{}` | Per-column config overrides in schema mode |
 | `emptyText` | String | `'No items found'` | Text shown in the empty state |
+| `lenses` | Object \| null | `null` | The personal-lens report of the list on screen (`@self.lenses` of the response) for a host that fetches itself. In self-fetch mode the page reads it from the store. See [When a lens cannot answer](#when-a-lens-cannot-answer). |
+| `lensReasonTexts` | Object \| null | `null` | App wording for an unavailable lens, keyed `<lens>.<reason>` or `<reason>`. |
 | `loadingText` | String | `'Loading…'` | Accessible label for the loading spinner (NcLoadingIcon aria-label) |
 | `rowIcon` | String \| Function | `null` | Optional leading icon for every table row — a static MDI name or `(row) => iconName`. Forwarded to CnDataTable; fed from the manifest as `pages[].config.rowIcon`. Unset = no icon column. |
 | `rowClass` | Function | `null` | Callback returning CSS class(es) for a row |
@@ -994,6 +996,40 @@ A person who has claimed no teams gets an empty list, and the tab says so
 through `narrowsToNothing`. A lens labelled "my teams" that quietly showed
 every team would be a label stating one rule while the fetch ran another.
 
+### When a lens cannot answer
+
+OpenRegister reports, for every personal lens a list asked for, whether it
+could answer (openregister#4514, needed for any effect):
+
+```json
+{ "results": [], "@self": { "lenses": { "recent": { "available": false, "reason": "audit-trail-disabled" } } } }
+```
+
+When a lens reports `available: false`, the empty state says why instead of
+showing `emptyText`:
+
+| Reason | Text |
+|---|---|
+| `audit-trail-disabled` | This server does not keep track of what you open. |
+| `anonymous` | Log in to see what you opened recently. |
+| `read-history-unavailable` | Your recent items are not available right now. |
+
+The texts are object-neutral and translated (Dutch: "Deze server houdt niet
+bij welke items je opent.", "Log in om te zien wat je onlangs opende.", "Je
+recente items zijn nu niet beschikbaar."). Say it in the app's own words with
+`lensReasonTexts`:
+
+```html
+<CnIndexPage :lens-reason-texts="{ 'recent.audit-trail-disabled': t('dossiq', 'This server does not keep track of which cases you open.') }" />
+```
+
+A response without `@self.lenses`, a lens that is available, or a reason with
+no text keeps `emptyText`, and an `#empty` slot still wins. The lens name is a
+key, so another lens (`watching`) that starts reporting needs only text. The
+store keeps the report as `lenses[type]` and `useListView` exposes it as
+`lenses`; `readLensReports` and `lensUnavailableText` are in
+`src/utils/lensAvailability.js`.
+
 ### Row actions and indicators
 
 See the two sections below. Row actions are the intersection of what the page