Skip to content

Commit 81fdd73

Browse files
juliusknorrjuliusknorr
committed
fix: Change scroll container for sharing details
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 <[email protected]>
1 parent 7556021 commit 81fdd73

File tree

2 files changed

+183
-173
lines changed

2 files changed

+183
-173
lines changed

‎apps/files_sharing/src/views/SharingDetailsTab.vue‎

Lines changed: 174 additions & 165 deletions
Original file line numberDiff line numberDiff line change
@@ -15,181 +15,181 @@
1515
<h1>{{ title }}</h1>
1616
</span>
1717
</div>
18-
<div class="sharingTabDetailsView__quick-permissions">
19-
<div>
20-
<NcCheckboxRadioSwitch :button-variant="true"
21-
:checked.sync="sharingPermission"
22-
:value="bundledPermissions.READ_ONLY.toString()"
23-
name="sharing_permission_radio"
24-
type="radio"
25-
button-variant-grouped="vertical"
26-
@update:checked="toggleCustomPermissions">
27-
{{ t('files_sharing', 'View only') }}
28-
<template #icon>
29-
<ViewIcon :size="20" />
30-
</template>
31-
</NcCheckboxRadioSwitch>
32-
<NcCheckboxRadioSwitch :button-variant="true"
33-
:checked.sync="sharingPermission"
34-
:value="bundledPermissions.ALL.toString()"
35-
name="sharing_permission_radio"
36-
type="radio"
37-
button-variant-grouped="vertical"
38-
@update:checked="toggleCustomPermissions">
39-
<template v-if="allowsFileDrop">
40-
{{ t('files_sharing', 'Allow upload and editing') }}
41-
</template>
42-
<template v-else>
43-
{{ t('files_sharing', 'Allow editing') }}
44-
</template>
45-
46-
<template #icon>
47-
<EditIcon :size="20" />
48-
</template>
49-
</NcCheckboxRadioSwitch>
50-
<NcCheckboxRadioSwitch v-if="allowsFileDrop"
51-
:button-variant="true"
52-
:checked.sync="sharingPermission"
53-
:value="bundledPermissions.FILE_DROP.toString()"
54-
name="sharing_permission_radio"
55-
type="radio"
56-
button-variant-grouped="vertical"
57-
@update:checked="toggleCustomPermissions">
58-
{{ t('files_sharing', 'File drop') }}
59-
<small>{{ t('files_sharing', 'Upload only') }}</small>
60-
<template #icon>
61-
<UploadIcon :size="20" />
62-
</template>
63-
</NcCheckboxRadioSwitch>
64-
<NcCheckboxRadioSwitch :button-variant="true"
65-
:checked.sync="sharingPermission"
66-
:value="'custom'"
67-
name="sharing_permission_radio"
68-
type="radio"
69-
button-variant-grouped="vertical"
70-
@update:checked="expandCustomPermissions">
71-
{{ t('files_sharing', 'Custom permissions') }}
72-
<small>{{ customPermissionsList }}</small>
18+
<div class="sharingTabDetailsView__wrapper">
19+
<div class="sharingTabDetailsView__quick-permissions">
20+
<div>
21+
<NcCheckboxRadioSwitch :button-variant="true"
22+
:checked.sync="sharingPermission"
23+
:value="bundledPermissions.READ_ONLY.toString()"
24+
name="sharing_permission_radio"
25+
type="radio"
26+
button-variant-grouped="vertical"
27+
@update:checked="toggleCustomPermissions">
28+
{{ t('files_sharing', 'View only') }}
29+
<template #icon>
30+
<ViewIcon :size="20" />
31+
</template>
32+
</NcCheckboxRadioSwitch>
33+
<NcCheckboxRadioSwitch :button-variant="true"
34+
:checked.sync="sharingPermission"
35+
:value="bundledPermissions.ALL.toString()"
36+
name="sharing_permission_radio"
37+
type="radio"
38+
button-variant-grouped="vertical"
39+
@update:checked="toggleCustomPermissions">
40+
<template v-if="allowsFileDrop">
41+
{{ t('files_sharing', 'Allow upload and editing') }}
42+
</template>
43+
<template v-else>
44+
{{ t('files_sharing', 'Allow editing') }}
45+
</template>
46+
<template #icon>
47+
<EditIcon :size="20" />
48+
</template>
49+
</NcCheckboxRadioSwitch>
50+
<NcCheckboxRadioSwitch v-if="allowsFileDrop"
51+
:button-variant="true"
52+
:checked.sync="sharingPermission"
53+
:value="bundledPermissions.FILE_DROP.toString()"
54+
name="sharing_permission_radio"
55+
type="radio"
56+
button-variant-grouped="vertical"
57+
@update:checked="toggleCustomPermissions">
58+
{{ t('files_sharing', 'File drop') }}
59+
<small>{{ t('files_sharing', 'Upload only') }}</small>
60+
<template #icon>
61+
<UploadIcon :size="20" />
62+
</template>
63+
</NcCheckboxRadioSwitch>
64+
<NcCheckboxRadioSwitch :button-variant="true"
65+
:checked.sync="sharingPermission"
66+
:value="'custom'"
67+
name="sharing_permission_radio"
68+
type="radio"
69+
button-variant-grouped="vertical"
70+
@update:checked="expandCustomPermissions">
71+
{{ t('files_sharing', 'Custom permissions') }}
72+
<small>{{ customPermissionsList }}</small>
73+
<template #icon>
74+
<DotsHorizontalIcon :size="20" />
75+
</template>
76+
</NcCheckboxRadioSwitch>
77+
</div>
78+
</div>
79+
<div class="sharingTabDetailsView__advanced-control">
80+
<NcButton type="tertiary"
81+
alignment="end-reverse"
82+
@click="advancedSectionAccordionExpanded = !advancedSectionAccordionExpanded">
83+
{{ t('files_sharing', 'Advanced settings') }}
7384
<template #icon>
74-
<DotsHorizontalIcon :size="20" />
85+
<MenuDownIcon />
7586
</template>
76-
</NcCheckboxRadioSwitch>
87+
</NcButton>
7788
</div>
78-
</div>
79-
<div class="sharingTabDetailsView__advanced-control">
80-
<NcButton type="tertiary"
81-
alignment="end-reverse"
82-
@click="advancedSectionAccordionExpanded = !advancedSectionAccordionExpanded">
83-
{{ t('files_sharing', 'Advanced settings') }}
84-
<template #icon>
85-
<MenuDownIcon />
86-
</template>
87-
</NcButton>
88-
</div>
89-
<div v-if="advancedSectionAccordionExpanded" class="sharingTabDetailsView__advanced">
90-
<section>
91-
<NcInputField v-if="isPublicShare"
92-
:value.sync="share.label"
93-
type="text"
94-
:label="t('files_sharing', 'Share label')" />
95-
<template v-if="isPublicShare">
96-
<NcCheckboxRadioSwitch :checked.sync="isPasswordProtected" :disabled="isPasswordEnforced">
97-
{{ t('files_sharing', 'Set password') }}
89+
<div v-if="advancedSectionAccordionExpanded" class="sharingTabDetailsView__advanced">
90+
<section>
91+
<NcInputField v-if="isPublicShare"
92+
:value.sync="share.label"
93+
type="text"
94+
:label="t('files_sharing', 'Share label')" />
95+
<template v-if="isPublicShare">
96+
<NcCheckboxRadioSwitch :checked.sync="isPasswordProtected" :disabled="isPasswordEnforced">
97+
{{ t('files_sharing', 'Set password') }}
98+
</NcCheckboxRadioSwitch>
99+
<NcInputField v-if="isPasswordProtected"
100+
:type="hasUnsavedPassword ? 'text' : 'password'"
101+
:value="hasUnsavedPassword ? share.newPassword : '***************'"
102+
:error="passwordError"
103+
:required="isPasswordEnforced"
104+
:label="t('files_sharing', 'Password')"
105+
@update:value="onPasswordChange" />
106+
107+
<!-- Migrate icons and remote -> icon="icon-info"-->
108+
<span v-if="isEmailShareType && passwordExpirationTime" icon="icon-info">
109+
{{ t('files_sharing', 'Password expires {passwordExpirationTime}', { passwordExpirationTime }) }}
110+
</span>
111+
<span v-else-if="isEmailShareType && passwordExpirationTime !== null" icon="icon-error">
112+
{{ t('files_sharing', 'Password expired') }}
113+
</span>
114+
</template>
115+
<NcCheckboxRadioSwitch :checked.sync="hasExpirationDate" :disabled="isExpiryDateEnforced">
116+
{{ isExpiryDateEnforced
117+
? t('files_sharing', 'Expiration date (enforced)')
118+
: t('files_sharing', 'Set expiration date') }}
98119
</NcCheckboxRadioSwitch>
99-
<NcInputField v-if="isPasswordProtected"
100-
:type="hasUnsavedPassword ? 'text' : 'password'"
101-
:value="hasUnsavedPassword ? share.newPassword : '***************'"
102-
:error="passwordError"
103-
:required="isPasswordEnforced"
104-
:label="t('files_sharing', 'Password')"
105-
@update:value="onPasswordChange" />
106-
107-
<!-- Migrate icons and remote -> icon="icon-info"-->
108-
<span v-if="isEmailShareType && passwordExpirationTime" icon="icon-info">
109-
{{ t('files_sharing', 'Password expires {passwordExpirationTime}', { passwordExpirationTime }) }}
110-
</span>
111-
<span v-else-if="isEmailShareType && passwordExpirationTime !== null" icon="icon-error">
112-
{{ t('files_sharing', 'Password expired') }}
113-
</span>
114-
</template>
115-
<NcCheckboxRadioSwitch :checked.sync="hasExpirationDate" :disabled="isExpiryDateEnforced">
116-
{{ isExpiryDateEnforced
117-
? t('files_sharing', 'Expiration date (enforced)')
118-
: t('files_sharing', 'Set expiration date') }}
119-
</NcCheckboxRadioSwitch>
120-
<NcDateTimePickerNative v-if="hasExpirationDate"
121-
id="share-date-picker"
122-
:value="new Date(share.expireDate ?? dateTomorrow)"
123-
:min="dateTomorrow"
124-
:max="maxExpirationDateEnforced"
125-
:hide-label="true"
126-
:placeholder="t('files_sharing', 'Expiration date')"
127-
type="date"
128-
@input="onExpirationChange" />
129-
<NcCheckboxRadioSwitch v-if="isPublicShare"
130-
:disabled="canChangeHideDownload"
131-
:checked.sync="share.hideDownload"
132-
@update:checked="queueUpdate('hideDownload')">
133-
{{ t('files_sharing', 'Hide download') }}
134-
</NcCheckboxRadioSwitch>
135-
<NcCheckboxRadioSwitch v-if="canTogglePasswordProtectedByTalkAvailable"
136-
:checked.sync="isPasswordProtectedByTalk"
137-
@update:checked="onPasswordProtectedByTalkChange">
138-
{{ t('files_sharing', 'Video verification') }}
139-
</NcCheckboxRadioSwitch>
140-
<NcCheckboxRadioSwitch v-if="!isPublicShare" :disabled="!canSetDownload" :checked.sync="canDownload">
141-
{{ t('files_sharing', 'Allow download') }}
142-
</NcCheckboxRadioSwitch>
143-
<NcCheckboxRadioSwitch :checked.sync="writeNoteToRecipientIsChecked">
144-
{{ t('files_sharing', 'Note to recipient') }}
145-
</NcCheckboxRadioSwitch>
146-
<template v-if="writeNoteToRecipientIsChecked">
147-
<label for="share-note-textarea">
148-
{{ t('files_sharing', 'Enter a note for the share recipient') }}
149-
</label>
150-
<textarea id="share-note-textarea" :value="share.note" @input="share.note = $event.target.value" />
151-
</template>
152-
<NcCheckboxRadioSwitch :checked.sync="setCustomPermissions">
153-
{{ t('files_sharing', 'Custom permissions') }}
154-
</NcCheckboxRadioSwitch>
155-
<section v-if="setCustomPermissions" class="custom-permissions-group">
156-
<NcCheckboxRadioSwitch :disabled="!allowsFileDrop && share.type === SHARE_TYPES.SHARE_TYPE_LINK"
157-
:checked.sync="hasRead">
158-
{{ t('files_sharing', 'Read') }}
120+
<NcDateTimePickerNative v-if="hasExpirationDate"
121+
id="share-date-picker"
122+
:value="new Date(share.expireDate ?? dateTomorrow)"
123+
:min="dateTomorrow"
124+
:max="maxExpirationDateEnforced"
125+
:hide-label="true"
126+
:placeholder="t('files_sharing', 'Expiration date')"
127+
type="date"
128+
@input="onExpirationChange" />
129+
<NcCheckboxRadioSwitch v-if="isPublicShare"
130+
:disabled="canChangeHideDownload"
131+
:checked.sync="share.hideDownload"
132+
@update:checked="queueUpdate('hideDownload')">
133+
{{ t('files_sharing', 'Hide download') }}
159134
</NcCheckboxRadioSwitch>
160-
<NcCheckboxRadioSwitch v-if="isFolder" :disabled="!canSetCreate" :checked.sync="canCreate">
161-
{{ t('files_sharing', 'Create') }}
135+
<NcCheckboxRadioSwitch v-if="canTogglePasswordProtectedByTalkAvailable"
136+
:checked.sync="isPasswordProtectedByTalk"
137+
@update:checked="onPasswordProtectedByTalkChange">
138+
{{ t('files_sharing', 'Video verification') }}
162139
</NcCheckboxRadioSwitch>
163-
<NcCheckboxRadioSwitch :disabled="!canSetEdit" :checked.sync="canEdit">
164-
{{ t('files_sharing', 'Update') }}
140+
<NcCheckboxRadioSwitch v-if="!isPublicShare" :disabled="!canSetDownload" :checked.sync="canDownload">
141+
{{ t('files_sharing', 'Allow download') }}
165142
</NcCheckboxRadioSwitch>
166-
<NcCheckboxRadioSwitch v-if="config.isResharingAllowed && share.type !== SHARE_TYPES.SHARE_TYPE_LINK"
167-
:disabled="!canSetReshare"
168-
:checked.sync="canReshare">
169-
{{ t('files_sharing', 'Share') }}
143+
<NcCheckboxRadioSwitch :checked.sync="writeNoteToRecipientIsChecked">
144+
{{ t('files_sharing', 'Note to recipient') }}
170145
</NcCheckboxRadioSwitch>
171-
<NcCheckboxRadioSwitch :disabled="!canSetDelete" :checked.sync="canDelete">
172-
{{ t('files_sharing', 'Delete') }}
146+
<template v-if="writeNoteToRecipientIsChecked">
147+
<label for="share-note-textarea">
148+
{{ t('files_sharing', 'Enter a note for the share recipient') }}
149+
</label>
150+
<textarea id="share-note-textarea" :value="share.note" @input="share.note = $event.target.value" />
151+
</template>
152+
<NcCheckboxRadioSwitch :checked.sync="setCustomPermissions">
153+
{{ t('files_sharing', 'Custom permissions') }}
173154
</NcCheckboxRadioSwitch>
155+
<section v-if="setCustomPermissions" class="custom-permissions-group">
156+
<NcCheckboxRadioSwitch :disabled="!allowsFileDrop && share.type === SHARE_TYPES.SHARE_TYPE_LINK"
157+
:checked.sync="hasRead">
158+
{{ t('files_sharing', 'Read') }}
159+
</NcCheckboxRadioSwitch>
160+
<NcCheckboxRadioSwitch v-if="isFolder" :disabled="!canSetCreate" :checked.sync="canCreate">
161+
{{ t('files_sharing', 'Create') }}
162+
</NcCheckboxRadioSwitch>
163+
<NcCheckboxRadioSwitch :disabled="!canSetEdit" :checked.sync="canEdit">
164+
{{ t('files_sharing', 'Update') }}
165+
</NcCheckboxRadioSwitch>
166+
<NcCheckboxRadioSwitch v-if="config.isResharingAllowed && share.type !== SHARE_TYPES.SHARE_TYPE_LINK"
167+
:disabled="!canSetReshare"
168+
:checked.sync="canReshare">
169+
{{ t('files_sharing', 'Share') }}
170+
</NcCheckboxRadioSwitch>
171+
<NcCheckboxRadioSwitch :disabled="!canSetDelete" :checked.sync="canDelete">
172+
{{ t('files_sharing', 'Delete') }}
173+
</NcCheckboxRadioSwitch>
174+
</section>
174175
</section>
175-
</section>
176-
</div>
177-
178-
<div class="sharingTabDetailsView__delete">
179-
<NcButton v-if="!isNewShare"
180-
:aria-label="t('files_sharing', 'Delete share')"
181-
:disabled="false"
182-
:readonly="false"
183-
type="tertiary"
184-
@click.prevent="removeShare">
185-
<template #icon>
186-
<CloseIcon :size="16" />
187-
</template>
188-
{{ t('files_sharing', 'Delete share') }}
189-
</NcButton>
176+
</div>
190177
</div>
191178

192179
<div class="sharingTabDetailsView__footer">
180+
<div class="sharingTabDetailsView__delete">
181+
<NcButton v-if="!isNewShare"
182+
:aria-label="t('files_sharing', 'Delete share')"
183+
:disabled="false"
184+
:readonly="false"
185+
type="tertiary"
186+
@click.prevent="removeShare">
187+
<template #icon>
188+
<CloseIcon :size="16" />
189+
</template>
190+
{{ t('files_sharing', 'Delete share') }}
191+
</NcButton>
192+
</div>
193193
<div class="button-group">
194194
<NcButton @click="$emit('close-sharing-details')">
195195
{{ t('files_sharing', 'Cancel') }}
@@ -921,9 +921,11 @@ export default {
921921
.sharingTabDetailsView {
922922
display: flex;
923923
flex-direction: column;
924-
align-items: flex-start;
925-
width: 96%;
924+
width: 100%;
926925
margin: 0 auto;
926+
position: relative;
927+
height: 100%;
928+
overflow: hidden;
927929
928930
&__header {
929931
display: flex;
@@ -943,10 +945,16 @@ export default {
943945
}
944946
}
945947
948+
&__wrapper {
949+
overflow: scroll;
950+
flex-shrink: 1;
951+
padding: 4px;
952+
padding-right: 12px;
953+
}
954+
946955
&__quick-permissions {
947956
display: flex;
948957
justify-content: center;
949-
margin-bottom: 0.2em;
950958
width: 100%;
951959
margin: 0 auto;
952960
border-radius: 0;
@@ -1000,6 +1008,7 @@ export default {
10001008
10011009
textarea {
10021010
height: 80px;
1011+
margin: 0;
10031012
}
10041013
10051014
/*

0 commit comments

Comments
 (0)