diff options
author | Vincent Petry <vincent@nextcloud.com> | 2022-07-22 18:49:55 +0300 |
---|---|---|
committer | Vincent Petry <vincent@nextcloud.com> | 2022-07-22 18:49:55 +0300 |
commit | be6285acf65a766e708da9e3d0e2326bfe4e3347 (patch) | |
tree | abe0dea7fc08e10a9fbb924c4b389b841319737b /apps/files_sharing/src | |
parent | 6c42874f04477a9741089bd4763ad47ad4130b2f (diff) |
Fix sharing panel lighthouse warnings
Replaced h5 with span and adjusted selectors.
Fixed ul/li hierarchy of some elements.
Signed-off-by: Vincent Petry <vincent@nextcloud.com>
Diffstat (limited to 'apps/files_sharing/src')
5 files changed, 106 insertions, 102 deletions
diff --git a/apps/files_sharing/src/components/SharePermissionsEditor.vue b/apps/files_sharing/src/components/SharePermissionsEditor.vue index 1dfab4112b3..4885f9fb920 100644 --- a/apps/files_sharing/src/components/SharePermissionsEditor.vue +++ b/apps/files_sharing/src/components/SharePermissionsEditor.vue @@ -21,84 +21,86 @@ --> <template> - <span> - <!-- file --> - <ActionCheckbox v-if="!isFolder" - :checked="shareHasPermissions(atomicPermissions.UPDATE)" - :disabled="saving" - @update:checked="toggleSharePermissions(atomicPermissions.UPDATE)"> - {{ t('files_sharing', 'Allow editing') }} - </ActionCheckbox> + <li> + <ul> + <!-- file --> + <ActionCheckbox v-if="!isFolder" + :checked="shareHasPermissions(atomicPermissions.UPDATE)" + :disabled="saving" + @update:checked="toggleSharePermissions(atomicPermissions.UPDATE)"> + {{ t('files_sharing', 'Allow editing') }} + </ActionCheckbox> - <!-- folder --> - <template v-if="isFolder && fileHasCreatePermission && config.isPublicUploadEnabled"> - <template v-if="!showCustomPermissionsForm"> - <ActionRadio :checked="sharePermissionEqual(bundledPermissions.READ_ONLY)" - :value="bundledPermissions.READ_ONLY" - :name="randomFormName" - :disabled="saving" - @change="setSharePermissions(bundledPermissions.READ_ONLY)"> - {{ t('files_sharing', 'Read only') }} - </ActionRadio> + <!-- folder --> + <template v-if="isFolder && fileHasCreatePermission && config.isPublicUploadEnabled"> + <template v-if="!showCustomPermissionsForm"> + <ActionRadio :checked="sharePermissionEqual(bundledPermissions.READ_ONLY)" + :value="bundledPermissions.READ_ONLY" + :name="randomFormName" + :disabled="saving" + @change="setSharePermissions(bundledPermissions.READ_ONLY)"> + {{ t('files_sharing', 'Read only') }} + </ActionRadio> - <ActionRadio :checked="sharePermissionEqual(bundledPermissions.UPLOAD_AND_UPDATE)" - :value="bundledPermissions.UPLOAD_AND_UPDATE" - :disabled="saving" - :name="randomFormName" - @change="setSharePermissions(bundledPermissions.UPLOAD_AND_UPDATE)"> - {{ t('files_sharing', 'Allow upload and editing') }} - </ActionRadio> - <ActionRadio :checked="sharePermissionEqual(bundledPermissions.FILE_DROP)" - :value="bundledPermissions.FILE_DROP" - :disabled="saving" - :name="randomFormName" - class="sharing-entry__action--public-upload" - @change="setSharePermissions(bundledPermissions.FILE_DROP)"> - {{ t('files_sharing', 'File drop (upload only)') }} - </ActionRadio> + <ActionRadio :checked="sharePermissionEqual(bundledPermissions.UPLOAD_AND_UPDATE)" + :value="bundledPermissions.UPLOAD_AND_UPDATE" + :disabled="saving" + :name="randomFormName" + @change="setSharePermissions(bundledPermissions.UPLOAD_AND_UPDATE)"> + {{ t('files_sharing', 'Allow upload and editing') }} + </ActionRadio> + <ActionRadio :checked="sharePermissionEqual(bundledPermissions.FILE_DROP)" + :value="bundledPermissions.FILE_DROP" + :disabled="saving" + :name="randomFormName" + class="sharing-entry__action--public-upload" + @change="setSharePermissions(bundledPermissions.FILE_DROP)"> + {{ t('files_sharing', 'File drop (upload only)') }} + </ActionRadio> - <!-- custom permissions button --> - <ActionButton :title="t('files_sharing', 'Custom permissions')" - @click="showCustomPermissionsForm = true"> - <template #icon> - <Tune /> - </template> - {{ sharePermissionsIsBundle ? "" : sharePermissionsSummary }} - </ActionButton> - </template> + <!-- custom permissions button --> + <ActionButton :title="t('files_sharing', 'Custom permissions')" + @click="showCustomPermissionsForm = true"> + <template #icon> + <Tune /> + </template> + {{ sharePermissionsIsBundle ? "" : sharePermissionsSummary }} + </ActionButton> + </template> - <!-- custom permissions --> - <span v-else :class="{error: !sharePermissionsSetIsValid}"> - <ActionCheckbox :checked="shareHasPermissions(atomicPermissions.READ)" - :disabled="saving || !canToggleSharePermissions(atomicPermissions.READ)" - @update:checked="toggleSharePermissions(atomicPermissions.READ)"> - {{ t('files_sharing', 'Read') }} - </ActionCheckbox> - <ActionCheckbox :checked="shareHasPermissions(atomicPermissions.CREATE)" - :disabled="saving || !canToggleSharePermissions(atomicPermissions.CREATE)" - @update:checked="toggleSharePermissions(atomicPermissions.CREATE)"> - {{ t('files_sharing', 'Upload') }} - </ActionCheckbox> - <ActionCheckbox :checked="shareHasPermissions(atomicPermissions.UPDATE)" - :disabled="saving || !canToggleSharePermissions(atomicPermissions.UPDATE)" - @update:checked="toggleSharePermissions(atomicPermissions.UPDATE)"> - {{ t('files_sharing', 'Edit') }} - </ActionCheckbox> - <ActionCheckbox :checked="shareHasPermissions(atomicPermissions.DELETE)" - :disabled="saving || !canToggleSharePermissions(atomicPermissions.DELETE)" - @update:checked="toggleSharePermissions(atomicPermissions.DELETE)"> - {{ t('files_sharing', 'Delete') }} - </ActionCheckbox> + <!-- custom permissions --> + <span v-else :class="{error: !sharePermissionsSetIsValid}"> + <ActionCheckbox :checked="shareHasPermissions(atomicPermissions.READ)" + :disabled="saving || !canToggleSharePermissions(atomicPermissions.READ)" + @update:checked="toggleSharePermissions(atomicPermissions.READ)"> + {{ t('files_sharing', 'Read') }} + </ActionCheckbox> + <ActionCheckbox :checked="shareHasPermissions(atomicPermissions.CREATE)" + :disabled="saving || !canToggleSharePermissions(atomicPermissions.CREATE)" + @update:checked="toggleSharePermissions(atomicPermissions.CREATE)"> + {{ t('files_sharing', 'Upload') }} + </ActionCheckbox> + <ActionCheckbox :checked="shareHasPermissions(atomicPermissions.UPDATE)" + :disabled="saving || !canToggleSharePermissions(atomicPermissions.UPDATE)" + @update:checked="toggleSharePermissions(atomicPermissions.UPDATE)"> + {{ t('files_sharing', 'Edit') }} + </ActionCheckbox> + <ActionCheckbox :checked="shareHasPermissions(atomicPermissions.DELETE)" + :disabled="saving || !canToggleSharePermissions(atomicPermissions.DELETE)" + @update:checked="toggleSharePermissions(atomicPermissions.DELETE)"> + {{ t('files_sharing', 'Delete') }} + </ActionCheckbox> - <ActionButton @click="showCustomPermissionsForm = false"> - <template #icon> - <ChevronLeft /> - </template> - {{ t('files_sharing', 'Bundled permissions') }} - </ActionButton> - </span> - </template> - </span> + <ActionButton @click="showCustomPermissionsForm = false"> + <template #icon> + <ChevronLeft /> + </template> + {{ t('files_sharing', 'Bundled permissions') }} + </ActionButton> + </span> + </template> + </ul> + </li> </template> <script> diff --git a/apps/files_sharing/src/components/SharingEntry.vue b/apps/files_sharing/src/components/SharingEntry.vue index 2d29aaf1dc6..25baf536f2f 100644 --- a/apps/files_sharing/src/components/SharingEntry.vue +++ b/apps/files_sharing/src/components/SharingEntry.vue @@ -33,7 +33,7 @@ v-tooltip.auto="tooltip" :href="share.shareWithLink" class="sharing-entry__desc"> - <h5>{{ title }}<span v-if="!isUnique" class="sharing-entry__desc-unique"> ({{ share.shareWithDisplayNameUnique }})</span></h5> + <span>{{ title }}<span v-if="!isUnique" class="sharing-entry__desc-unique"> ({{ share.shareWithDisplayNameUnique }})</span></span> <p v-if="hasStatus"> <span>{{ share.status.icon || '' }}</span> <span>{{ share.status.message || '' }}</span> diff --git a/apps/files_sharing/src/components/SharingEntryInternal.vue b/apps/files_sharing/src/components/SharingEntryInternal.vue index 73b86d26180..1f28ced9274 100644 --- a/apps/files_sharing/src/components/SharingEntryInternal.vue +++ b/apps/files_sharing/src/components/SharingEntryInternal.vue @@ -1,20 +1,22 @@ <template> - <SharingEntrySimple class="sharing-entry__internal" - :title="t('files_sharing', 'Internal link')" - :subtitle="internalLinkSubtitle"> - <template #avatar> - <div class="avatar-external icon-external-white" /> - </template> + <ul> + <SharingEntrySimple class="sharing-entry__internal" + :title="t('files_sharing', 'Internal link')" + :subtitle="internalLinkSubtitle"> + <template #avatar> + <div class="avatar-external icon-external-white" /> + </template> - <ActionLink ref="copyButton" - :href="internalLink" - target="_blank" - :icon="copied && copySuccess ? 'icon-checkmark-color' : 'icon-clippy'" - @click.prevent="copyLink"> - {{ clipboardTooltip }} - </ActionLink> - </SharingEntrySimple> + <ActionLink ref="copyButton" + :href="internalLink" + target="_blank" + :icon="copied && copySuccess ? 'icon-checkmark-color' : 'icon-clippy'" + @click.prevent="copyLink"> + {{ clipboardTooltip }} + </ActionLink> + </SharingEntrySimple> + </ul> </template> <script> diff --git a/apps/files_sharing/src/components/SharingEntryLink.vue b/apps/files_sharing/src/components/SharingEntryLink.vue index 638cdf485b0..a8cd09a9a9f 100644 --- a/apps/files_sharing/src/components/SharingEntryLink.vue +++ b/apps/files_sharing/src/components/SharingEntryLink.vue @@ -26,9 +26,9 @@ :icon-class="isEmailShareType ? 'avatar-link-share icon-mail-white' : 'avatar-link-share icon-public-white'" class="sharing-entry__avatar" /> <div class="sharing-entry__desc"> - <h5 :title="title"> + <span class="sharing-entry__title" :title="title"> {{ title }} - </h5> + </span> <p v-if="subtitle"> {{ subtitle }} </p> @@ -883,15 +883,15 @@ export default { line-height: 1.2em; overflow: hidden; - h5 { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } p { color: var(--color-text-maxcontrast); } } + &__title { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } &:not(.sharing-entry--share) &__actions { .new-share-link { diff --git a/apps/files_sharing/src/components/SharingEntrySimple.vue b/apps/files_sharing/src/components/SharingEntrySimple.vue index 8627c87f97a..70b55cbdce1 100644 --- a/apps/files_sharing/src/components/SharingEntrySimple.vue +++ b/apps/files_sharing/src/components/SharingEntrySimple.vue @@ -24,7 +24,7 @@ <li class="sharing-entry"> <slot name="avatar" /> <div v-tooltip="tooltip" class="sharing-entry__desc"> - <h5>{{ title }}</h5> + <span class="sharing-entry__title">{{ title }}</span> <p v-if="subtitle"> {{ subtitle }} </p> @@ -99,16 +99,16 @@ export default { position: relative; flex: 1 1; min-width: 0; - h5 { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - max-width: inherit; - } p { color: var(--color-text-maxcontrast); } } + &__title { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + max-width: inherit; + } &__actions { margin-left: auto !important; } |