From 07437d0c1d18a690aa509fda5a500c5b06f9b2df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Mon, 13 Nov 2023 19:40:45 +0100
Subject: [PATCH] fix: Change scroll container for sharing details
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

In order to meet accessibility requirements we cannot use a sticky
footer that overlaps important interactable content. Therefore this
moves to a scroll container for the details which does not include the
action buttons at the bottom.

Larger indentation change in SharingDetailsTab was required to have a
wrapping container for the scroll area.

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 .../src/views/SharingDetailsTab.vue           | 323 +++++++++---------
 apps/files_sharing/src/views/SharingTab.vue   |  18 +-
 2 files changed, 178 insertions(+), 163 deletions(-)

diff --git a/apps/files_sharing/src/views/SharingDetailsTab.vue b/apps/files_sharing/src/views/SharingDetailsTab.vue
index a398829dbb0..dd5ab493193 100644
--- a/apps/files_sharing/src/views/SharingDetailsTab.vue
+++ b/apps/files_sharing/src/views/SharingDetailsTab.vue
@@ -15,169 +15,173 @@
 				<h1>{{ title }}</h1>
 			</span>
 		</div>
-		<div class="sharingTabDetailsView__quick-permissions">
-			<div>
-				<NcCheckboxRadioSwitch :button-variant="true"
-					:checked.sync="sharingPermission"
-					:value="bundledPermissions.READ_ONLY.toString()"
-					name="sharing_permission_radio"
-					type="radio"
-					button-variant-grouped="vertical"
-					@update:checked="toggleCustomPermissions">
-					<ViewIcon :size="20" />
-					<span>{{ t('files_sharing', 'View only') }}</span>
-				</NcCheckboxRadioSwitch>
-				<NcCheckboxRadioSwitch :button-variant="true"
-					:checked.sync="sharingPermission"
-					:value="bundledPermissions.ALL.toString()"
-					name="sharing_permission_radio"
-					type="radio"
-					button-variant-grouped="vertical"
-					@update:checked="toggleCustomPermissions">
-					<EditIcon :size="20" />
-					<template v-if="allowsFileDrop">
-						<span>{{ t('files_sharing', 'Allow upload and editing') }}</span>
-					</template>
-					<template v-else>
-						<span>{{ t('files_sharing', 'Allow editing') }}</span>
-					</template>
-				</NcCheckboxRadioSwitch>
-				<NcCheckboxRadioSwitch v-if="allowsFileDrop"
-					:button-variant="true"
-					:checked.sync="sharingPermission"
-					:value="bundledPermissions.FILE_DROP.toString()"
-					name="sharing_permission_radio"
-					type="radio"
-					button-variant-grouped="vertical"
-					@update:checked="toggleCustomPermissions">
-					<UploadIcon :size="20" />
-					<span>{{ t('files_sharing', 'File drop') }}</span>
-					<small>{{ t('files_sharing', 'Upload only') }}</small>
-				</NcCheckboxRadioSwitch>
-				<NcCheckboxRadioSwitch :button-variant="true"
-					:checked.sync="sharingPermission"
-					:value="'custom'"
-					name="sharing_permission_radio"
-					type="radio"
-					button-variant-grouped="vertical"
-					@update:checked="expandCustomPermissions">
-					<DotsHorizontalIcon :size="20" />
-					<span>{{ t('files_sharing', 'Custom permissions') }}</span>
-					<small>{{ customPermissionsList }}</small>
-				</NcCheckboxRadioSwitch>
+		<div class="sharingTabDetailsView__wrapper">
+			<div class="sharingTabDetailsView__quick-permissions">
+				<div>
+					<NcCheckboxRadioSwitch :button-variant="true"
+						:checked.sync="sharingPermission"
+						:value="bundledPermissions.READ_ONLY.toString()"
+						name="sharing_permission_radio"
+						type="radio"
+						button-variant-grouped="vertical"
+						@update:checked="toggleCustomPermissions">
+						<ViewIcon :size="20" />
+						<span>{{ t('files_sharing', 'View only') }}</span>
+					</NcCheckboxRadioSwitch>
+					<NcCheckboxRadioSwitch :button-variant="true"
+						:checked.sync="sharingPermission"
+						:value="bundledPermissions.ALL.toString()"
+						name="sharing_permission_radio"
+						type="radio"
+						button-variant-grouped="vertical"
+						@update:checked="toggleCustomPermissions">
+						<EditIcon :size="20" />
+						<template v-if="allowsFileDrop">
+							<span>{{ t('files_sharing', 'Allow upload and editing') }}</span>
+						</template>
+						<template v-else>
+							<span>{{ t('files_sharing', 'Allow editing') }}</span>
+						</template>
+					</NcCheckboxRadioSwitch>
+					<NcCheckboxRadioSwitch v-if="allowsFileDrop"
+						:button-variant="true"
+						:checked.sync="sharingPermission"
+						:value="bundledPermissions.FILE_DROP.toString()"
+						name="sharing_permission_radio"
+						type="radio"
+						button-variant-grouped="vertical"
+						@update:checked="toggleCustomPermissions">
+						<UploadIcon :size="20" />
+						<span>{{ t('files_sharing', 'File drop') }}</span>
+						<small>{{ t('files_sharing', 'Upload only') }}</small>
+					</NcCheckboxRadioSwitch>
+					<NcCheckboxRadioSwitch :button-variant="true"
+						:checked.sync="sharingPermission"
+						:value="'custom'"
+						name="sharing_permission_radio"
+						type="radio"
+						button-variant-grouped="vertical"
+						@update:checked="expandCustomPermissions">
+						<DotsHorizontalIcon :size="20" />
+						<span>{{ t('files_sharing', 'Custom permissions') }}</span>
+						<small>{{ customPermissionsList }}</small>
+					</NcCheckboxRadioSwitch>
+				</div>
 			</div>
-		</div>
-		<div class="sharingTabDetailsView__advanced-control">
-			<NcButton type="tertiary"
-				alignment="end-reverse"
-				@click="advancedSectionAccordionExpanded = !advancedSectionAccordionExpanded">
-				{{ t('files_sharing', 'Advanced settings') }}
-				<template #icon>
-					<MenuDownIcon />
-				</template>
-			</NcButton>
-		</div>
-		<div v-if="advancedSectionAccordionExpanded" class="sharingTabDetailsView__advanced">
-			<section>
-				<NcInputField v-if="isPublicShare"
-					:value.sync="share.label"
-					type="text"
-					:label="t('files_sharing', 'Share label')" />
-				<template v-if="isPublicShare">
-					<NcCheckboxRadioSwitch :checked.sync="isPasswordProtected" :disabled="isPasswordEnforced">
-						{{ t('files_sharing', 'Set password') }}
-					</NcCheckboxRadioSwitch>
-					<NcInputField v-if="isPasswordProtected"
-						:type="hasUnsavedPassword ? 'text' : 'password'"
-						:value="hasUnsavedPassword ? share.newPassword : '***************'"
-						:error="passwordError"
-						:required="isPasswordEnforced"
-						:label="t('files_sharing', 'Password')"
-						@update:value="onPasswordChange" />
+			<div class="sharingTabDetailsView__advanced-control">
+				<NcButton type="tertiary"
+					alignment="end-reverse"
+					@click="advancedSectionAccordionExpanded = !advancedSectionAccordionExpanded">
+					{{ t('files_sharing', 'Advanced settings') }}
+					<template #icon>
+						<MenuDownIcon />
+					</template>
+				</NcButton>
+			</div>
+			<div v-if="advancedSectionAccordionExpanded" class="sharingTabDetailsView__advanced">
+				<section>
+					<NcInputField v-if="isPublicShare"
+						:value.sync="share.label"
+						type="text"
+						:label="t('files_sharing', 'Share label')" />
+					<template v-if="isPublicShare">
+						<NcCheckboxRadioSwitch :checked.sync="isPasswordProtected" :disabled="isPasswordEnforced">
+							{{ t('files_sharing', 'Set password') }}
+						</NcCheckboxRadioSwitch>
+						<NcInputField v-if="isPasswordProtected"
+							:type="hasUnsavedPassword ? 'text' : 'password'"
+							:value="hasUnsavedPassword ? share.newPassword : '***************'"
+							:error="passwordError"
+							:required="isPasswordEnforced"
+							:label="t('files_sharing', 'Password')"
+							@update:value="onPasswordChange" />
 
-					<!-- Migrate icons and remote -> icon="icon-info"-->
-					<span v-if="isEmailShareType && passwordExpirationTime" icon="icon-info">
-						{{ t('files_sharing', 'Password expires {passwordExpirationTime}', { passwordExpirationTime }) }}
-					</span>
-					<span v-else-if="isEmailShareType && passwordExpirationTime !== null" icon="icon-error">
-						{{ t('files_sharing', 'Password expired') }}
-					</span>
-				</template>
-				<NcCheckboxRadioSwitch :checked.sync="hasExpirationDate" :disabled="isExpiryDateEnforced">
-					{{ isExpiryDateEnforced
-						? t('files_sharing', 'Expiration date (enforced)')
-						: t('files_sharing', 'Set expiration date') }}
-				</NcCheckboxRadioSwitch>
-				<NcDateTimePickerNative v-if="hasExpirationDate"
-					id="share-date-picker"
-					:value="new Date(share.expireDate ?? dateTomorrow)"
-					:min="dateTomorrow"
-					:max="maxExpirationDateEnforced"
-					:hide-label="true"
-					:placeholder="t('files_sharing', 'Expiration date')"
-					type="date"
-					@input="onExpirationChange" />
-				<NcCheckboxRadioSwitch v-if="isPublicShare"
-					:disabled="canChangeHideDownload"
-					:checked.sync="share.hideDownload"
-					@update:checked="queueUpdate('hideDownload')">
-					{{ t('files_sharing', 'Hide download') }}
-				</NcCheckboxRadioSwitch>
-				<NcCheckboxRadioSwitch v-if="canTogglePasswordProtectedByTalkAvailable"
-					:checked.sync="isPasswordProtectedByTalk"
-					@update:checked="onPasswordProtectedByTalkChange">
-					{{ t('files_sharing', 'Video verification') }}
-				</NcCheckboxRadioSwitch>
-				<NcCheckboxRadioSwitch v-if="!isPublicShare" :disabled="!canSetDownload" :checked.sync="canDownload">
-					{{ t('files_sharing', 'Allow download') }}
-				</NcCheckboxRadioSwitch>
-				<NcCheckboxRadioSwitch :checked.sync="writeNoteToRecipientIsChecked">
-					{{ t('files_sharing', 'Note to recipient') }}
-				</NcCheckboxRadioSwitch>
-				<template v-if="writeNoteToRecipientIsChecked">
-					<label for="share-note-textarea">
-						{{ t('files_sharing', 'Enter a note for the share recipient') }}
-					</label>
-					<textarea id="share-note-textarea" :value="share.note" @input="share.note = $event.target.value" />
-				</template>
-				<NcCheckboxRadioSwitch :checked.sync="setCustomPermissions">
-					{{ t('files_sharing', 'Custom permissions') }}
-				</NcCheckboxRadioSwitch>
-				<section v-if="setCustomPermissions" class="custom-permissions-group">
-					<NcCheckboxRadioSwitch :disabled="!allowsFileDrop && share.type === SHARE_TYPES.SHARE_TYPE_LINK"
-						:checked.sync="hasRead">
-						{{ t('files_sharing', 'Read') }}
+						<!-- Migrate icons and remote -> icon="icon-info"-->
+						<span v-if="isEmailShareType && passwordExpirationTime" icon="icon-info">
+							{{ t('files_sharing', 'Password expires {passwordExpirationTime}', { passwordExpirationTime }) }}
+						</span>
+						<span v-else-if="isEmailShareType && passwordExpirationTime !== null" icon="icon-error">
+							{{ t('files_sharing', 'Password expired') }}
+						</span>
+					</template>
+					<NcCheckboxRadioSwitch :checked.sync="hasExpirationDate" :disabled="isExpiryDateEnforced">
+						{{ isExpiryDateEnforced
+							? t('files_sharing', 'Expiration date (enforced)')
+							: t('files_sharing', 'Set expiration date') }}
 					</NcCheckboxRadioSwitch>
-					<NcCheckboxRadioSwitch v-if="isFolder" :disabled="!canSetCreate" :checked.sync="canCreate">
-						{{ t('files_sharing', 'Create') }}
+					<NcDateTimePickerNative v-if="hasExpirationDate"
+						id="share-date-picker"
+						:value="new Date(share.expireDate ?? dateTomorrow)"
+						:min="dateTomorrow"
+						:max="maxExpirationDateEnforced"
+						:hide-label="true"
+						:placeholder="t('files_sharing', 'Expiration date')"
+						type="date"
+						@input="onExpirationChange" />
+					<NcCheckboxRadioSwitch v-if="isPublicShare"
+						:disabled="canChangeHideDownload"
+						:checked.sync="share.hideDownload"
+						@update:checked="queueUpdate('hideDownload')">
+						{{ t('files_sharing', 'Hide download') }}
 					</NcCheckboxRadioSwitch>
-					<NcCheckboxRadioSwitch :disabled="!canSetEdit" :checked.sync="canEdit">
-						{{ t('files_sharing', 'Edit') }}
+					<NcCheckboxRadioSwitch v-if="canTogglePasswordProtectedByTalkAvailable"
+						:checked.sync="isPasswordProtectedByTalk"
+						@update:checked="onPasswordProtectedByTalkChange">
+						{{ t('files_sharing', 'Video verification') }}
 					</NcCheckboxRadioSwitch>
-					<NcCheckboxRadioSwitch v-if="config.isResharingAllowed && share.type !== SHARE_TYPES.SHARE_TYPE_LINK"
-						:disabled="!canSetReshare"
-						:checked.sync="canReshare">
-						{{ t('files_sharing', 'Share') }}
+					<NcCheckboxRadioSwitch v-if="!isPublicShare" :disabled="!canSetDownload" :checked.sync="canDownload">
+						{{ t('files_sharing', 'Allow download') }}
 					</NcCheckboxRadioSwitch>
-					<NcCheckboxRadioSwitch :disabled="!canSetDelete" :checked.sync="canDelete">
-						{{ t('files_sharing', 'Delete') }}
+					<NcCheckboxRadioSwitch :checked.sync="writeNoteToRecipientIsChecked">
+						{{ t('files_sharing', 'Note to recipient') }}
 					</NcCheckboxRadioSwitch>
+					<template v-if="writeNoteToRecipientIsChecked">
+						<label for="share-note-textarea">
+							{{ t('files_sharing', 'Enter a note for the share recipient') }}
+						</label>
+						<textarea id="share-note-textarea" :value="share.note" @input="share.note = $event.target.value" />
+					</template>
+					<NcCheckboxRadioSwitch :checked.sync="setCustomPermissions">
+						{{ t('files_sharing', 'Custom permissions') }}
+					</NcCheckboxRadioSwitch>
+					<section v-if="setCustomPermissions" class="custom-permissions-group">
+						<NcCheckboxRadioSwitch :disabled="!allowsFileDrop && share.type === SHARE_TYPES.SHARE_TYPE_LINK"
+							:checked.sync="hasRead">
+							{{ t('files_sharing', 'Read') }}
+						</NcCheckboxRadioSwitch>
+						<NcCheckboxRadioSwitch v-if="isFolder" :disabled="!canSetCreate" :checked.sync="canCreate">
+							{{ t('files_sharing', 'Create') }}
+						</NcCheckboxRadioSwitch>
+						<NcCheckboxRadioSwitch :disabled="!canSetEdit" :checked.sync="canEdit">
+							{{ t('files_sharing', 'Update') }}
+						</NcCheckboxRadioSwitch>
+						<NcCheckboxRadioSwitch v-if="config.isResharingAllowed && share.type !== SHARE_TYPES.SHARE_TYPE_LINK"
+							:disabled="!canSetReshare"
+							:checked.sync="canReshare">
+							{{ t('files_sharing', 'Share') }}
+						</NcCheckboxRadioSwitch>
+						<NcCheckboxRadioSwitch :disabled="!canSetDelete" :checked.sync="canDelete">
+							{{ t('files_sharing', 'Delete') }}
+						</NcCheckboxRadioSwitch>
+					</section>
 				</section>
-			</section>
+			</div>
 		</div>
 
 		<div class="sharingTabDetailsView__footer">
-			<NcButton v-if="!isNewShare"
-				:aria-label="t('files_sharing', 'Delete share')"
-				:disabled="false"
-				:readonly="false"
-				type="tertiary"
-				@click.prevent="removeShare">
-				<template #icon>
-					<CloseIcon :size="16" />
-				</template>
-				{{ t('files_sharing', 'Delete share') }}
-			</NcButton>
+			<div class="sharingTabDetailsView__delete">
+				<NcButton v-if="!isNewShare"
+					:aria-label="t('files_sharing', 'Delete share')"
+					:disabled="false"
+					:readonly="false"
+					type="tertiary"
+					@click.prevent="removeShare">
+					<template #icon>
+						<CloseIcon :size="16" />
+					</template>
+					{{ t('files_sharing', 'Delete share') }}
+				</NcButton>
+			</div>
 			<div class="button-group">
 				<NcButton @click="$emit('close-sharing-details')">
 					{{ t('files_sharing', 'Cancel') }}
@@ -901,9 +905,11 @@ export default {
 .sharingTabDetailsView {
 	display: flex;
 	flex-direction: column;
-	align-items: flex-start;
-	width: 96%;
+	width: 100%;
 	margin: 0 auto;
+	position: relative;
+	height: 100%;
+	overflow: hidden;
 
 	&__header {
 		display: flex;
@@ -923,10 +929,16 @@ export default {
 		}
 	}
 
+	&__wrapper {
+		overflow: scroll;
+		flex-shrink: 1;
+		padding: 4px;
+		padding-right: 12px;
+	}
+
 	&__quick-permissions {
 		display: flex;
 		justify-content: center;
-		margin-bottom: 0.2em;
 		width: 100%;
 		margin: 0 auto;
 		border-radius: 0;
@@ -995,6 +1007,7 @@ export default {
 
 			textarea {
 				height: 80px;
+				margin: 0;
 			}
 
 			/*
diff --git a/apps/files_sharing/src/views/SharingTab.vue b/apps/files_sharing/src/views/SharingTab.vue
index f37f2095a90..4019a99dbe0 100644
--- a/apps/files_sharing/src/views/SharingTab.vue
+++ b/apps/files_sharing/src/views/SharingTab.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<div :class="{ 'icon-loading': loading }">
+	<div class="sharingTab" :class="{ 'icon-loading': loading }">
 		<!-- error message -->
 		<div v-if="error" class="emptycontent" :class="{ emptyContentWithSections: sections.length > 0 }">
 			<div class="icon icon-error" />
@@ -87,13 +87,12 @@
 		</template>
 
 		<!-- share details -->
-		<div v-else>
-			<SharingDetailsTab :file-info="shareDetailsData.fileInfo"
-				:share="shareDetailsData.share"
-				@close-sharing-details="toggleShareDetailsView"
-				@add:share="addShare"
-				@remove:share="removeShare" />
-		</div>
+		<SharingDetailsTab v-else
+			:file-info="shareDetailsData.fileInfo"
+			:share="shareDetailsData.share"
+			@close-sharing-details="toggleShareDetailsView"
+			@add:share="addShare"
+			@remove:share="removeShare" />
 	</div>
 </template>
 
@@ -406,6 +405,9 @@ export default {
 }
 
 .sharingTab {
+	position: relative;
+	height: 100%;
+
 	&__content {
 		padding: 0 6px;
 	}