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

Finedesign share panel #7372

Merged
merged 10 commits into from
Aug 1, 2022
+223 −299
Merged

Finedesign share panel #7372

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
a8314c1
Redesign share panel
Jul 29, 2022
5d51cf4
Lint
Jul 29, 2022
cb07c09
Fix unit tests
Jul 29, 2022
b6f68c0
Cleanup unit tests
Jul 29, 2022
2393a54
Expunge ct helpers from h3
Jul 29, 2022
c32482b
Update snapshots
Jul 29, 2022
c67d797
Improve
Jul 29, 2022
46f050b
Fix acceptance tests
Jul 29, 2022
4c0c95c
Update snapshots
Jul 29, 2022
09f4f1f
Update changelog item
Jul 29, 2022
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
3 changes: 2 additions & 1 deletion changelog/unreleased/enhancement-redesign-shared-with-list
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,5 +6,6 @@ We've also fixed a bug, where the role in a child of a share wasn't shown.
https://github.com/owncloud/web/pull/7252
https://github.com/owncloud/web/pull/7310
https://github.com/owncloud/web/pull/7315
https://github.com/owncloud/web/pull/7372
https://github.com/owncloud/web/issues/7110

https://github.com/owncloud/web/issues/7340
48 changes: 1 addition & 47 deletions packages/web-app-files/src/components/SideBar/FileInfo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,6 @@
:truncate-name="false"
/>
</h3>
<p class="oc-my-rm">
<template v-if="file.size > -1">{{ getResourceSize(file.size) }},</template>
<span
v-oc-tooltip="timeData.time"
data-testid="files-info-mdate"
tabindex="0"
:aria-label="timeData.ariaLabel"
>{{ timeData.infoString }}</span
>
</p>
</div>
<private-link-item v-if="privateLinkEnabled" />
</div>
Expand All @@ -31,7 +21,7 @@
<script>
import Mixins from '../../mixins'
import MixinResources from '../../mixins/resources'
import { isLocationSpacesActive, isLocationTrashActive } from '../../router'
import { isLocationSpacesActive } from '../../router'
import { mapGetters, mapState } from 'vuex'
import PrivateLinkItem from './PrivateLinkItem.vue'
import { useActiveLocation } from '../../composables'
Expand All @@ -57,42 +47,6 @@ export default {
computed: {
...mapGetters(['capabilities']),
...mapState('Files', ['areFileExtensionsShown']),
timeData() {
const interpolate = (obj) => {
obj.time = this.formDateFromRFC(obj.sourceTime)
obj.timeRelative = this.formRelativeDateFromRFC(obj.sourceTime)

obj.infoString = this.$gettextInterpolate(obj.infoString, obj)
obj.ariaLabel = this.$gettextInterpolate(obj.ariaLabel, obj)
return obj
}

if (
isLocationTrashActive(this.$router, 'files-trash-personal') ||
isLocationTrashActive(this.$router, 'files-trash-spaces-project')
) {
return interpolate({
sourceTime: this.file.ddate,
infoString: this.$pgettext('inline info about deletion date', 'deleted %{timeRelative}'),
ariaLabel: this.$pgettext(
'aria label for inline info about deletion date',
'deleted %{timeRelative} (%{time})'
)
})
}

return interpolate({
sourceTime: this.file.mdate,
infoString: this.$pgettext(
'inline info about last modification date',
'modified %{timeRelative}'
),
ariaLabel: this.$pgettext(
'aria label for inline info about last modification date',
'modified %{timeRelative} (%{time})'
)
})
},

privateLinkEnabled() {
return this.isPersonalLocation && this.capabilities.files.privateLinks
Expand Down
8 changes: 4 additions & 4 deletions ...files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<avatar-image
v-if="isUser || isSpace"
class="oc-mr-s"
:width="48"
:width="36"
:userid="item.value.shareWith"
:user-name="item.label"
/>
Expand All @@ -16,7 +16,7 @@
key="avatar-guest"
class="oc-mr-s files-recipient-suggestion-avatar"
name="global"
size="xlarge"
size="large"
:accessible-label="$gettext('Guest')"
>
</oc-icon>
Expand All @@ -25,15 +25,15 @@
key="avatar-group"
class="oc-mr-s files-recipient-suggestion-avatar"
name="group"
size="xlarge"
size="large"
:accessible-label="$gettext('Group')"
/>
<oc-icon
v-else
key="avatar-generic-person"
class="oc-mr-s files-recipient-suggestion-avatar"
name="person"
size="xlarge"
size="large"
:accessible-label="$gettext('User')"
/>
<div class="files-collaborators-autocomplete-user-text oc-text-truncate">
Expand Down
52 changes: 8 additions & 44 deletions ...src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,16 +35,7 @@
<span />
</template>
</oc-select>
<p>
<span
id="files-share-invite-hint"
class="oc-mt-xs oc-text-meta"
v-text="inviteDescriptionMessage"
/>
<oc-contextual-helper v-if="resourceIsSpace && helpersEnabled" v-bind="spaceAddMemberHelp" />
<oc-contextual-helper v-else-if="helpersEnabled" v-bind="inviteCollaboratorHelp" />
</p>
<div class="oc-flex oc-flex-middle oc-flex-between oc-mb-l">
<div class="oc-flex oc-flex-middle oc-flex-between oc-mb-l oc-mt-s">
<role-dropdown
:resource="highlightedFile"
:allow-share-permission="hasResharing || resourceIsSpace"
Expand Down Expand Up @@ -95,11 +86,7 @@ import {
useCapabilityFilesSharingResharing,
useCapabilityShareJailEnabled
} from 'web-pkg/src/composables'
import {
shareInviteCollaboratorHelp,
shareInviteCollaboratorHelpCern,
shareSpaceAddMemberHelp
} from '../../../../../helpers/contextualHelpers.js'

import { defineComponent } from '@vue/runtime-core'
import { useGraphClient } from 'web-client/src/composables'

Expand All @@ -121,6 +108,11 @@ export default defineComponent({
type: String,
required: false,
default: () => $gettext('Share')
},
inviteLabel: {
type: String,
required: false,
default: ''
}
},

Expand Down Expand Up @@ -149,34 +141,6 @@ export default defineComponent({
...mapGetters('Files', ['currentFileOutgoingCollaborators', 'highlightedFile']),
...mapGetters(['configuration', 'user', 'capabilities']),

helpersEnabled() {
return this.configuration?.options?.contextHelpers
},

inviteCollaboratorHelp() {
const cernFeatures = !!this.configuration?.options?.cernFeatures
return cernFeatures
? {
text: shareInviteCollaboratorHelp.text,
list: [...shareInviteCollaboratorHelp.list, ...shareInviteCollaboratorHelpCern.list]
}
: shareInviteCollaboratorHelp
},

spaceAddMemberHelp() {
return shareSpaceAddMemberHelp
},

inviteDescriptionMessage() {
if (this.capabilities.files_sharing.federation?.outgoing === true) {
return this.$gettext('Add new person by name, email or federation IDs')
}
const cernFeatures = !!this.configuration?.options?.cernFeatures
return cernFeatures
Copy link
Contributor

Choose a reason for hiding this comment

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

@elizavetaRa @diocas decision was made to remove the description message below the sharing invite form. If you can't drop the line from your UI we'll have to find a different solution. Please reach out then.

? this.$gettext('Add new person by name, email or service/secondary/guest accounts')
: this.$gettext('Add new person by name or email')
},

$_announcementWhenCollaboratorAdded() {
return this.$gettext('Person was added')
},
Expand All @@ -189,7 +153,7 @@ export default defineComponent({
return parseInt(this.user.capabilities.files_sharing.search_min_length, 10)
},
selectedCollaboratorsLabel() {
return this.$gettext('Invite')
return this.inviteLabel || this.$gettext('Invite')
},

resourceIsSpace() {
Expand Down
137 changes: 71 additions & 66 deletions packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,49 +10,36 @@
v-if="isUser || isSpace"
:userid="share.collaborator.name"
:user-name="share.collaborator.displayName"
:width="48"
:width="36"
class="files-collaborators-collaborator-indicator"
/>
<oc-avatar-item
v-else
:width="48"
:width="36"
icon-size="medium"
:icon="shareTypeIcon"
:name="shareTypeKey"
class="files-collaborators-collaborator-indicator"
/>
<div class="oc-text-truncate oc-width-1-1">
<div class="oc-flex oc-flex-middle">
<span v-oc-tooltip="shareDisplayNameTooltip" class="oc-text-truncate oc-m-rm">
<span
aria-hidden="true"
class="files-collaborators-collaborator-name"
v-text="shareDisplayName"
/>
</span>
<span class="oc-invisible-sr" v-text="screenreaderShareDisplayName" />
<oc-drop
ref="accessDetails"
class="share-access-details-drop"
mode="manual"
:target="`#edit-drop-down-${editDropDownToggleId}`"
>
<h5 v-translate class="oc-text-bold oc-m-rm">Access details</h5>
<dl class="oc-mt-s">
<dt v-if="shareAdditionalInfo" v-translate class="oc-text-muted oc-mb-s">Addition</dt>
<dd
v-if="shareAdditionalInfo"
class="files-collaborators-collaborator-additional-info"
v-text="shareAdditionalInfo"
<div
class="
oc-width-1-1 oc-flex oc-flex-between oc-flex-middle
files-collaborators-collaborator-details
"
>
<div>
<div>
<span v-oc-tooltip="shareDisplayNameTooltip" class="oc-text-truncate oc-m-rm">
<span
aria-hidden="true"
class="files-collaborators-collaborator-name"
v-text="shareDisplayName"
/>
<dt v-translate class="oc-text-muted">Type</dt>
<dd class="files-collaborators-collaborator-share-type" v-text="shareTypeText" />
</dl>
</oc-drop>
</div>
<div class="oc-m-rm oc-flex oc-flex-middle oc-flex-between">
</span>
<span class="oc-invisible-sr" v-text="screenreaderShareDisplayName" />
</div>
<div>
<div v-if="canEditOrDelete" class="oc-flex oc-flex-nowrap oc-flex-right oc-flex-middle">
<div v-if="canEditOrDelete" class="oc-flex oc-flex-nowrap oc-flex-middle">
<role-dropdown
:resource="highlightedFile"
:dom-selector="shareDomSelector"
Expand All @@ -71,41 +58,59 @@
/>
</div>
</div>
<div class="oc-flex oc-flex-between oc-flex-middle oc-pl-s">
<span v-if="hasExpirationDate">
<oc-icon
v-oc-tooltip="expirationDate"
class="files-collaborators-collaborator-expiration"
data-testid="recipient-info-expiration-date"
:aria-label="expirationDate"
name="calendar"
fill-type="line"
/>
<span class="oc-invisible-sr" v-text="screenreaderShareExpiration" />
</span>
<div v-if="sharedParentRoute" class="oc-resource-indicators oc-text-truncate">
<router-link
v-oc-tooltip="$gettext('Navigate to parent folder')"
class="parent-folder oc-text-truncate"
:to="sharedParentRoute"
>
<span class="text" v-text="$gettext('via')" />
<oc-icon name="folder-2" size="small" fill-type="line" class="oc-px-xs" />
<span class="text oc-text-truncate" v-text="sharedParentDir" />
</router-link>
</div>
<edit-dropdown
:id="`edit-drop-down-${editDropDownToggleId}`"
class="files-collaborators-collaborator-edit"
data-testid="collaborator-edit"
:expiration-date="share.expires ? share.expires : null"
:share-category="shareCategory"
:can-edit-or-delete="canEditOrDelete"
@expirationDateChanged="shareExpirationChanged"
@removeShare="removeShare"
@showAccessDetails="showAccessDetails"
</div>
<div class="oc-flex oc-flex-between oc-flex-middle">
<span v-if="hasExpirationDate">
<oc-icon
v-oc-tooltip="expirationDate"
class="files-collaborators-collaborator-expiration"
data-testid="recipient-info-expiration-date"
:aria-label="expirationDate"
name="calendar"
fill-type="line"
/>
<span class="oc-invisible-sr" v-text="screenreaderShareExpiration" />
</span>
<div v-if="sharedParentRoute" class="oc-resource-indicators oc-text-truncate">
<router-link
v-oc-tooltip="$gettext('Navigate to parent folder')"
class="parent-folder oc-text-truncate"
:to="sharedParentRoute"
>
<span class="text" v-text="$gettext('via')" />
<oc-icon name="folder-2" size="small" fill-type="line" class="oc-px-xs" />
<span class="text oc-text-truncate" v-text="sharedParentDir" />
</router-link>
</div>
<edit-dropdown
:id="`edit-drop-down-${editDropDownToggleId}`"
class="files-collaborators-collaborator-edit"
data-testid="collaborator-edit"
:expiration-date="share.expires ? share.expires : null"
:share-category="shareCategory"
:can-edit-or-delete="canEditOrDelete"
@expirationDateChanged="shareExpirationChanged"
@removeShare="removeShare"
@showAccessDetails="showAccessDetails"
/>
<oc-drop
ref="accessDetails"
class="share-access-details-drop"
mode="manual"
:target="`#edit-drop-down-${editDropDownToggleId}`"
>
<h5 v-translate class="oc-text-bold oc-m-rm">Access details</h5>
<dl class="oc-mt-s">
<dt v-if="shareAdditionalInfo" v-translate class="oc-text-muted oc-mb-s">Addition</dt>
<dd
v-if="shareAdditionalInfo"
class="files-collaborators-collaborator-additional-info"
v-text="shareAdditionalInfo"
/>
<dt v-translate class="oc-text-muted">Type</dt>
<dd class="files-collaborators-collaborator-share-type" v-text="shareTypeText" />
</dl>
</oc-drop>
</div>
</div>
</div>
Expand Down Expand Up @@ -340,7 +345,7 @@ export default defineComponent({

<style lang="scss" scoped>
.sharee-avatar {
min-width: 48px;
min-width: 36px;
}

.share-access-details-drop {
Expand Down
Loading