Skip to content
This repository has been archived by the owner on Jan 3, 2024. It is now read-only.

[WIP] Add custom vue-avatar library & update component + snapshot #1242

Closed
wants to merge 1 commit into from
Closed

[WIP] Add custom vue-avatar library & update component + snapshot #1242

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions changelog/unreleased/enhancement-lazyload-avatar
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
Enhancement: Lazy loading avatar

The formerly used `vue-avatar` library used a wrapping div (which led to invalid HTML when used inside e.g. a button tag)
and rendered the avatar image as an background image (which can not easily be lazy-loaded and blocked the page rendering).

By switching to an enhanced fork of the official library, we could solve both of those issues.

https://github.com/owncloud/owncloud-design-system/pull/1242
17 changes: 16 additions & 1 deletion src/components/avatars/OcAvatar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,24 @@
<template>
<img
v-if="src.length > 0"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is an issue: if the image fails to load we also need to fall back to the avatar component.

loading="lazy"
class="oc-avatar"
:width="width"
style="
display: flex;
height: auto;
border-radius: 50%;
align-items: center;
justify-content: center;
user-select: none;
"
:src="src"
/>
<avatar
v-else
class="oc-avatar"
:username="userName"
:size="width"
:src="src"
:aria-label="accessibleLabel === '' ? null : accessibleLabel"
:aria-hidden="accessibleLabel === '' ? 'true' : null"
:focusable="accessibleLabel === '' ? 'false' : null"
Expand Down
30 changes: 6 additions & 24 deletions src/components/table/__snapshots__/OcTableFiles.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,19 +53,13 @@ exports[`OcTableFiles displays all fields 1`] = `
</td>
<td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-size"><span class="oc-resource-size">105.9 MB</span></td>
<td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-sharedWith">
<div class="oc-avatar-group oc-table-files-people oc-avatar-group-stacked" aria-expanded="false">
<div class="vue-avatar--wrapper oc-avatar" style="display: flex; width: 30px; height: 30px; border-radius: 50%; line-height: 31px; font-weight: bold; align-items: center; justify-content: center; text-align: center; user-select: none;" aria-label="Bob" role="img"><img src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" style="display: none;"> <span style="display: none;"></span></div>
<div class="vue-avatar--wrapper oc-avatar" style="display: flex; width: 30px; height: 30px; border-radius: 50%; line-height: 31px; font-weight: bold; align-items: center; justify-content: center; text-align: center; user-select: none;" aria-label="Marie" role="img"><img src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzh8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" style="display: none;"> <span style="display: none;"></span></div>
<div class="vue-avatar--wrapper oc-avatar" style="display: flex; width: 30px; height: 30px; border-radius: 50%; align-items: center; justify-content: center; text-align: center; user-select: none; background-color: rgb(63, 81, 181); font: sans-serif; color: rgb(143, 161, 255);" aria-label="John Richards Emperor of long names" role="img">
<!----> <span>J</span>
</div>
<div class="oc-avatar-group oc-table-files-people oc-avatar-group-stacked" aria-expanded="false"><img loading="lazy" width="30" src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" class="oc-avatar" style="display: flex; height: auto; border-radius: 50%; align-items: center; justify-content: center; user-select: none;"><img loading="lazy" width="30" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzh8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" class="oc-avatar" style="display: flex; height: auto; border-radius: 50%; align-items: center; justify-content: center; user-select: none;"><span class="vue-avatar--wrapper oc-avatar" style="display: flex; width: 30px; height: 30px; border-radius: 50%; align-items: center; justify-content: center; text-align: center; user-select: none; background-color: rgb(63, 81, 181); font: sans-serif; color: rgb(143, 161, 255);" aria-label="John Richards Emperor of long names" role="img"><!----> <span>J</span></span>
<!---->
<!---->
</div>
</td>
<td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-owner">
<div class="oc-avatar-group oc-table-files-people" aria-expanded="false">
<div class="vue-avatar--wrapper oc-avatar" style="display: flex; width: 30px; height: 30px; border-radius: 50%; line-height: 31px; font-weight: bold; align-items: center; justify-content: center; text-align: center; user-select: none;" aria-label="Bob" role="img"><img src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" style="display: none;"> <span style="display: none;"></span></div>
<div class="oc-avatar-group oc-table-files-people" aria-expanded="false"><img loading="lazy" width="30" src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" class="oc-avatar" style="display: flex; height: auto; border-radius: 50%; align-items: center; justify-content: center; user-select: none;">
<!---->
<!---->
</div>
Expand Down Expand Up @@ -102,19 +96,13 @@ exports[`OcTableFiles displays all fields 1`] = `
</td>
<td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-size"><span class="oc-resource-size">?</span></td>
<td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-sharedWith">
<div class="oc-avatar-group oc-table-files-people oc-avatar-group-stacked" aria-expanded="false">
<div class="vue-avatar--wrapper oc-avatar" style="display: flex; width: 30px; height: 30px; border-radius: 50%; line-height: 31px; font-weight: bold; align-items: center; justify-content: center; text-align: center; user-select: none;" aria-label="Bob" role="img"><img src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" style="display: none;"> <span style="display: none;"></span></div>
<div class="vue-avatar--wrapper oc-avatar" style="display: flex; width: 30px; height: 30px; border-radius: 50%; line-height: 31px; font-weight: bold; align-items: center; justify-content: center; text-align: center; user-select: none;" aria-label="Marie" role="img"><img src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzh8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" style="display: none;"> <span style="display: none;"></span></div>
<div class="vue-avatar--wrapper oc-avatar" style="display: flex; width: 30px; height: 30px; border-radius: 50%; align-items: center; justify-content: center; text-align: center; user-select: none; background-color: rgb(63, 81, 181); font: sans-serif; color: rgb(143, 161, 255);" aria-label="John Richards Emperor of long names" role="img">
<!----> <span>J</span>
</div>
<div class="oc-avatar-group oc-table-files-people oc-avatar-group-stacked" aria-expanded="false"><img loading="lazy" width="30" src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" class="oc-avatar" style="display: flex; height: auto; border-radius: 50%; align-items: center; justify-content: center; user-select: none;"><img loading="lazy" width="30" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzh8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" class="oc-avatar" style="display: flex; height: auto; border-radius: 50%; align-items: center; justify-content: center; user-select: none;"><span class="vue-avatar--wrapper oc-avatar" style="display: flex; width: 30px; height: 30px; border-radius: 50%; align-items: center; justify-content: center; text-align: center; user-select: none; background-color: rgb(63, 81, 181); font: sans-serif; color: rgb(143, 161, 255);" aria-label="John Richards Emperor of long names" role="img"><!----> <span>J</span></span>
<!---->
<!---->
</div>
</td>
<td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-owner">
<div class="oc-avatar-group oc-table-files-people" aria-expanded="false">
<div class="vue-avatar--wrapper oc-avatar" style="display: flex; width: 30px; height: 30px; border-radius: 50%; line-height: 31px; font-weight: bold; align-items: center; justify-content: center; text-align: center; user-select: none;" aria-label="Bob" role="img"><img src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" style="display: none;"> <span style="display: none;"></span></div>
<div class="oc-avatar-group oc-table-files-people" aria-expanded="false"><img loading="lazy" width="30" src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" class="oc-avatar" style="display: flex; height: auto; border-radius: 50%; align-items: center; justify-content: center; user-select: none;">
<!---->
<!---->
</div>
Expand Down Expand Up @@ -151,19 +139,13 @@ exports[`OcTableFiles displays all fields 1`] = `
</td>
<td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-size"><span class="oc-resource-size"></span></td>
<td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-sharedWith">
<div class="oc-avatar-group oc-table-files-people oc-avatar-group-stacked" aria-expanded="false">
<div class="vue-avatar--wrapper oc-avatar" style="display: flex; width: 30px; height: 30px; border-radius: 50%; line-height: 31px; font-weight: bold; align-items: center; justify-content: center; text-align: center; user-select: none;" aria-label="Bob" role="img"><img src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" style="display: none;"> <span style="display: none;"></span></div>
<div class="vue-avatar--wrapper oc-avatar" style="display: flex; width: 30px; height: 30px; border-radius: 50%; line-height: 31px; font-weight: bold; align-items: center; justify-content: center; text-align: center; user-select: none;" aria-label="Marie" role="img"><img src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzh8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" style="display: none;"> <span style="display: none;"></span></div>
<div class="vue-avatar--wrapper oc-avatar" style="display: flex; width: 30px; height: 30px; border-radius: 50%; align-items: center; justify-content: center; text-align: center; user-select: none; background-color: rgb(63, 81, 181); font: sans-serif; color: rgb(143, 161, 255);" aria-label="John Richards Emperor of long names" role="img">
<!----> <span>J</span>
</div>
<div class="oc-avatar-group oc-table-files-people oc-avatar-group-stacked" aria-expanded="false"><img loading="lazy" width="30" src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" class="oc-avatar" style="display: flex; height: auto; border-radius: 50%; align-items: center; justify-content: center; user-select: none;"><img loading="lazy" width="30" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzh8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" class="oc-avatar" style="display: flex; height: auto; border-radius: 50%; align-items: center; justify-content: center; user-select: none;"><span class="vue-avatar--wrapper oc-avatar" style="display: flex; width: 30px; height: 30px; border-radius: 50%; align-items: center; justify-content: center; text-align: center; user-select: none; background-color: rgb(63, 81, 181); font: sans-serif; color: rgb(143, 161, 255);" aria-label="John Richards Emperor of long names" role="img"><!----> <span>J</span></span>
<!---->
<!---->
</div>
</td>
<td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-owner">
<div class="oc-avatar-group oc-table-files-people" aria-expanded="false">
<div class="vue-avatar--wrapper oc-avatar" style="display: flex; width: 30px; height: 30px; border-radius: 50%; line-height: 31px; font-weight: bold; align-items: center; justify-content: center; text-align: center; user-select: none;" aria-label="Bob" role="img"><img src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" style="display: none;"> <span style="display: none;"></span></div>
<div class="oc-avatar-group oc-table-files-people" aria-expanded="false"><img loading="lazy" width="30" src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" class="oc-avatar" style="display: flex; height: auto; border-radius: 50%; align-items: center; justify-content: center; user-select: none;">
<!---->
<!---->
</div>
Expand Down