Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[full-ci] Show sharees as avatars #5758

Merged
merged 21 commits into from
Sep 7, 2021
Merged

[full-ci] Show sharees as avatars #5758

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
cbd54fe
WIP
lookacat Aug 30, 2021
679b2ca
WIP
lookacat Aug 31, 2021
2e90b87
fixed styling
lookacat Sep 1, 2021
a3d26a7
Merge branch 'master' into show-sharees-as-avatar-group
lookacat Sep 2, 2021
c83bfc4
fixed open people panel
lookacat Sep 2, 2021
446eaa1
fixed linting
lookacat Sep 2, 2021
d3214d4
changed to RC ODS version
lookacat Sep 6, 2021
476e55c
Merge branch 'master' into show-sharees-as-avatar-group
lookacat Sep 6, 2021
f2f8587
hide shredwith label when no sharees
lookacat Sep 6, 2021
dc440b3
remove dev leftover
lookacat Sep 6, 2021
ea82d90
refactored raw button around ocavatars
lookacat Sep 6, 2021
19fad05
added closing mechanism
lookacat Sep 6, 2021
787124c
removed copy pasta id
lookacat Sep 6, 2021
a046251
addressed PR issues
lookacat Sep 6, 2021
ca95441
fixed PR issues
lookacat Sep 7, 2021
51ec2ce
Merge branch '02092021_bump-ods-10.0.0' into show-sharees-as-avatar-g…
lookacat Sep 7, 2021
98e5ec6
fixed tooltip, alignment
lookacat Sep 7, 2021
160fc69
Merge branch 'show-sharees-as-avatar-group' of https://github.com/own…
lookacat Sep 7, 2021
3a529ab
fixed PR issues
lookacat Sep 7, 2021
9b96c9c
removed aria-hidden
lookacat Sep 7, 2021
38aab1a
fixed alignment
lookacat Sep 7, 2021
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
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,3 +50,4 @@ comments.file
# Report for tests
tests/report/cucumber_report.json
tests/report/cucumber_report.html
.vscode/settings.json
134 changes: 99 additions & 35 deletions packages/web-app-files/src/components/SideBar/Shares/FileShares.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,45 +24,64 @@
data-testid="files-collaborators-no-reshare-permissions-message"
v-text="noResharePermsMessage"
/>
<template v-if="$_ownerAsCollaborator">
<p id="original-sharing-user" v-translate class="oc-invisible-sr">File owner</p>
<show-collaborator
:collaborator="$_ownerAsCollaborator"
aria-describedby="original-sharing-user"
/>
<hr />
<show-collaborator :collaborator="$_currentUserAsCollaborator" />
</template>
<template v-else>
<p id="collaborator-as-fileowner" v-translate class="oc-invisible-sr">
You are the file owner
</p>
<show-collaborator
:collaborator="$_currentUserAsCollaborator"
aria-describedby="collaborator-as-fileowner"
/>
</template>
<hr v-if="collaborators.length > 0" class="oc-mt-s oc-mb-s" />
<transition-group
id="files-collaborators-list"
class="uk-list uk-list-divider uk-overflow-hidden oc-m-rm"
:enter-active-class="$_transitionGroupEnter"
:leave-active-class="$_transitionGroupLeave"
name="custom-classes-transition"
tag="ul"
:aria-label="$gettext('Share receivers')"
<div
class="avatars-wrapper"
:aria-label="sharedWithTooltip"
data-testid="shared-with-avatars"
@click="sharedWithClick"
>
<li v-for="collaborator in collaborators" :key="collaborator.key">
<h2 class="shared-with-label" v-text="sharedWithLabel" />
<oc-avatars
Copy link
Contributor

Choose a reason for hiding this comment

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

No clue how the CI got that green if you're referencing a component the current version of ODS doesn't even know about 🤔

Copy link
Contributor Author

Choose a reason for hiding this comment

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

oh that is true lol

v-oc-tooltip="sharedWithTooltip"
:items="collaborators_avatar"
accessible-description="This resource is shared with many users."
:stacked="true"
:is-tooltip-displayed="false"
class="oc-mb debug-avatar"
lookacat marked this conversation as resolved.
Show resolved Hide resolved
/>
</div>
<template v-if="showShareesList">
<template v-if="$_ownerAsCollaborator">
<p id="original-sharing-user" v-translate class="oc-invisible-sr">File owner</p>
<show-collaborator
:collaborator="collaborator"
:modifiable="!collaborator.indirect"
@onDelete="$_ocCollaborators_deleteShare"
@onEdit="$_ocCollaborators_editShare"
:collaborator="$_ownerAsCollaborator"
aria-describedby="original-sharing-user"
/>
</li>
</transition-group>
<hr />
<show-collaborator :collaborator="$_currentUserAsCollaborator" />
</template>
<template v-else>
<p id="collaborator-as-fileowner" v-translate class="oc-invisible-sr">
You are the file owner
</p>
<show-collaborator
:collaborator="$_currentUserAsCollaborator"
aria-describedby="collaborator-as-fileowner"
/>
</template>
<hr v-if="collaborators.length > 0" class="oc-mt-s oc-mb-s" />
<transition-group
id="files-collaborators-list"
class="uk-list uk-list-divider uk-overflow-hidden oc-m-rm"
:enter-active-class="$_transitionGroupEnter"
:leave-active-class="$_transitionGroupLeave"
name="custom-classes-transition"
tag="ul"
:aria-label="$gettext('Share receivers')"
>
<li v-for="collaborator in collaborators" :key="collaborator.key">
<show-collaborator
:collaborator="collaborator"
:modifiable="!collaborator.indirect"
@onDelete="$_ocCollaborators_deleteShare"
@onEdit="$_ocCollaborators_editShare"
/>
</li>
</transition-group>
</template>
</template>
</div>

<new-collaborator
v-if="$_ocCollaborators_canShare && currentView === VIEW_NEW"
key="new-collaborator"
Expand Down Expand Up @@ -117,7 +136,8 @@ export default {
VIEW_SHOW,
VIEW_EDIT,
VIEW_NEW,
currentView: VIEW_SHOW
currentView: VIEW_SHOW,
showShareesList: false
}
},
computed: {
Expand Down Expand Up @@ -145,6 +165,14 @@ export default {
: ''
},

sharedWithLabel() {
return this.$gettext('Shared with')
},

sharedWithTooltip() {
return this.$gettext('Click to show all')
lookacat marked this conversation as resolved.
Show resolved Hide resolved
},

sharesLoading() {
return (
this.currentFileOutgoingSharesLoading ||
Expand Down Expand Up @@ -176,6 +204,12 @@ export default {
role
}
},
collaborators_avatar() {
const result = []
console.log(this.collaborators)
lookacat marked this conversation as resolved.
Show resolved Hide resolved
this.collaborators.forEach(c => result.push({ ...c.collaborator, shareType: c.shareType }))
Copy link
Contributor

Choose a reason for hiding this comment

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

Instead of building a result in a const, you can just

return this.collaborators.map(c => {
  ...c.collaborator,
  shareType:  c.shareType
})

Copy link
Contributor Author

Choose a reason for hiding this comment

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

nope the '...' doesnt work on map

Copy link
Contributor

Choose a reason for hiding this comment

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

Why? The following works fine:

collaborators_avatar() {
      return this.collaborators.map(c => {
        return {
          ...c.collaborator,
          shareType: c.shareType
        }
      })
    },

Why is the computed prop name in snake case by the way? 🤔

return result
},

$_ownerAsCollaborator() {
if (!this.$_allIncomingShares.length) {
Expand Down Expand Up @@ -322,6 +356,9 @@ export default {
'loadIncomingShares',
'incomingSharesClearState'
]),
sharedWithClick() {
lookacat marked this conversation as resolved.
Show resolved Hide resolved
this.showShareesList = true
},
$_isCollaboratorShare(collaborator) {
return userShareTypes.includes(collaborator.shareType)
},
Expand Down Expand Up @@ -413,6 +450,33 @@ export default {
</script>

<style>
.avatars-wrapper {
display: flex;
justify-content: space-between;
align-content: center;
align-items: center;
width: 100%;
}
.shared-with-label {
font-size: 0.9rem;
font-weight: 600;
}
.debug-avatar {
justify-self: flex-end;
}
.avatar-sharees-table {
width: 100%;
text-align: left;

tr {
height: 1.5rem;
text-align: right;
}

th {
font-weight: 600;
}
}
/* TODO: Move to design system */
.oc-app-side-bar .oc-label {
display: block;
Expand Down
12 changes: 8 additions & 4 deletions packages/web-app-files/src/helpers/resources.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,12 +122,14 @@ export function aggregateResourceShares(
prev.sharedWith.push({
username: share.share_with,
displayName: share.share_with_displayname,
avatar: undefined
avatar: undefined,
shareType: share.share_type
})
} else if (share.share_type === shareTypes.link) {
prev.sharedWith.push({
name: share.name || share.token,
link: true
link: true,
shareType: share.share_type
})
}

Expand All @@ -139,14 +141,16 @@ export function aggregateResourceShares(
{
username: share.share_with,
displayName: share.share_with_displayname,
avatar: undefined
avatar: undefined,
shareType: share.share_type
}
]
} else if (share.share_type === shareTypes.link) {
share.sharedWith = [
{
name: share.name || share.token,
link: true
link: true,
shareType: share.share_type
}
]
}
Expand Down
6 changes: 5 additions & 1 deletion tests/acceptance/pageObjects/FilesPageElement/filesList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@ module.exports = {
*/
openSharingDialog: async function(resource) {
await this.openSideBar(resource)
return await appSideBar.activatePanel('people')
await appSideBar.activatePanel('people')
return await this.click('@sharedWithAvatars')
},
/**
* @param {string} resource
Expand Down Expand Up @@ -743,6 +744,9 @@ module.exports = {
},
btnToggleSideBar: {
selector: '#files-toggle-sidebar'
},
sharedWithAvatars: {
selector: '[data-testid="shared-with-avatars"]'
}
}
}