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

Fix #6917 - sharing indicators&description for spaces #6921

Merged
merged 1 commit into from
Jun 27, 2022
Merged

Fix #6917 - sharing indicators&description for spaces #6921

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
6 changes: 6 additions & 0 deletions changelog/unreleased/bugfix-space-sidebar-sharingindicators
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
Bugfix: Space sidebar sharing indicators

We have fixed the way the sharing indicators for space members and link shares were displayed in the details panel of the sidebar as well as the click behavior for accessing the shares panel through the sharing information.

https://github.com/owncloud/web/pull/6921
https://github.com/owncloud/web/issues/6917
187 changes: 104 additions & 83 deletions packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,91 +12,68 @@
class="space-default-image oc-px-m oc-py-m"
/>
</div>
<div
v-if="hasMemberShares || hasLinkShares"
class="oc-flex oc-flex-middle oc-mb-m oc-text-small"
>
<div v-if="hasMemberShares" class="oc-flex oc-flex-middle">
<oc-button
appearance="raw"
:aria-label="$gettext('Open the member panel')"
@click="expandMemberPanel"
>
<oc-icon name="group" class="oc-mr-s" />
</oc-button>
</div>
<div v-if="hasLinkShares" class="oc-flex oc-flex-middle">
<oc-button
appearance="raw"
:aria-label="$gettext('Open the link panel')"
@click="expandLinkPanel"
>
<oc-icon name="link" class="oc-mr-s" />
</oc-button>
</div>
<div>
<span v-if="hasMemberShares">
<span v-text="memberShareLabel" />
<oc-button
appearance="raw"
:aria-label="$gettext('Open the member panel')"
size="small"
@click="expandMemberPanel"
>
<span class="oc-text-small" v-text="$gettext('Show')"></span>
</oc-button>
</span>
<span v-if="hasMemberShares && hasLinkShares">·</span>
<span v-if="hasLinkShares">
<span v-text="linkShareLabel" />
<oc-button
appearance="raw"
:aria-label="$gettext('Open the link panel')"
size="small"
@click="expandLinkPanel"
>
<span class="oc-text-small" v-text="$gettext('Show')"></span>
</oc-button>
</span>
</div>
</div>
<div>
<table class="details-table" :aria-label="detailsTableLabel">
<tr>
<th scope="col" class="oc-pr-s" v-text="$gettext('Last activity')" />
<td v-text="lastModifyDate" />
</tr>
<tr v-if="space.description">
<th scope="col" class="oc-pr-s" v-text="$gettext('Subtitle')" />
<td v-text="space.description" />
</tr>
<tr>
<th scope="col" class="oc-pr-s" v-text="$gettext('Manager')" />
<td>
<span v-text="ownerUsernames" />
</td>
</tr>
<tr>
<th scope="col" class="oc-pr-s" v-text="$gettext('Quota')" />
<td>
<space-quota :space-quota="space.spaceQuota" />
</td>
</tr>
</table>
<div v-if="hasShares" class="oc-flex oc-flex-middle oc-mb-m oc-text-small" style="gap: 15px">
Copy link
Contributor

Choose a reason for hiding this comment

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

minor finding, inline style :)

<oc-button
v-if="hasMemberShares"
appearance="raw"
:aria-label="openSharesPanelMembersHint"
@click="expandSharesPanel"
>
<oc-icon name="group" />
</oc-button>
<oc-button
v-if="hasLinkShares"
appearance="raw"
:aria-label="openSharesPanelLinkHint"
@click="expandSharesPanel"
>
<oc-icon name="link" />
</oc-button>
<p v-text="shareLabel" />
<oc-button
appearance="raw"
:aria-label="openSharesPanelHint"
size="small"
@click="expandSharesPanel"
>
<span class="oc-text-small" v-text="$gettext('Show')" />
</oc-button>
</div>
<table class="details-table" :aria-label="detailsTableLabel">
<tr>
<th scope="col" class="oc-pr-s" v-text="$gettext('Last activity')" />
<td v-text="lastModifyDate" />
</tr>
<tr v-if="space.description">
<th scope="col" class="oc-pr-s" v-text="$gettext('Subtitle')" />
<td v-text="space.description" />
</tr>
<tr>
<th scope="col" class="oc-pr-s" v-text="$gettext('Manager')" />
<td>
<span v-text="ownerUsernames" />
</td>
</tr>
<tr>
<th scope="col" class="oc-pr-s" v-text="$gettext('Quota')" />
<td>
<space-quota :space-quota="space.spaceQuota" />
</td>
</tr>
</table>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from '@vue/composition-api'
import Mixins from '../../../mixins'
import MixinResources from '../../../mixins/resources'
import { mapActions, mapGetters } from 'vuex'
import { useTask } from 'vue-concurrency'
import Mixins from '../../../mixins'
import MixinResources from '../../../mixins/resources'
import { buildResource, buildWebDavSpacesPath } from '../../../helpers/resources'
import { spaceRoleManager } from '../../../helpers/share'
import SpaceQuota from '../../SpaceQuota.vue'
import { loadPreview } from '../../../helpers/resource'
import { spaceRoleManager } from '../../../helpers/share'
import { ImageDimension } from '../../../constants'
import SpaceQuota from '../../SpaceQuota.vue'

export default defineComponent({
name: 'SpaceDetails',
Expand Down Expand Up @@ -141,10 +118,59 @@ export default defineComponent({
'currentFileOutgoingLinks'
]),
...mapGetters(['user', 'getToken']),

space() {
return this.displayedItem.value
},
hasShares() {
return this.hasMemberShares || this.hasLinkShares
},
shareLabel() {
if (this.hasMemberShares && !this.hasLinkShares) {
return this.memberShareLabel
}
if (!this.hasMemberShares && this.hasLinkShares) {
return this.linkShareLabel
}

switch (this.memberShareCount) {
case 1:
return this.$gettextInterpolate(
this.$ngettext(
'This space has one member and %{linkShareCount} link.',
'This space has one member and %{linkShareCount} links.',
this.linkShareCount
),
{
linkShareCount: this.linkShareCount
}
)
default:
if (this.linkShareCount === 1) {
return this.$gettextInterpolate(
'This space has %{memberShareCount} members and one link.',
{
memberShareCount: this.memberShareCount
}
)
}
return this.$gettextInterpolate(
'This space has %{memberShareCount} members and %{linkShareCount} links.',
{
memberShareCount: this.memberShareCount,
linkShareCount: this.linkShareCount
}
)
}
},
openSharesPanelHint() {
return this.$gettext('Open share panel')
},
openSharesPanelLinkHint() {
JammingBen marked this conversation as resolved.
Show resolved Hide resolved
return this.$gettext('Open link list in share panel')
},
openSharesPanelMembersHint() {
JammingBen marked this conversation as resolved.
Show resolved Hide resolved
return this.$gettext('Open member list in share panel')
},
detailsTableLabel() {
return this.$gettext('Overview of the information about the selected space')
},
Expand All @@ -166,7 +192,7 @@ export default defineComponent({
.join(', ')
},
hasMemberShares() {
return this.memberShareCount > 1
return this.memberShareCount > 0
},
hasLinkShares() {
return this.linkShareCount > 0
Expand Down Expand Up @@ -218,13 +244,8 @@ export default defineComponent({
setSidebarPanel: 'setActivePanel',
closeSidebar: 'close'
}),

expandMemberPanel() {
expandSharesPanel() {
this.setSidebarPanel('space-share-item')
},

expandLinkPanel() {
this.setSidebarPanel('links-item')
}
}
})
Expand Down
43 changes: 24 additions & 19 deletions ...b-app-files/tests/unit/components/SideBar/Details/__snapshots__/SpaceDetails.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,25 +5,30 @@ exports[`Details SideBar Panel displays the details side panel 1`] = `
<div class="oc-space-details-sidebar-image oc-text-center">
<oc-icon-stub name="layout-grid" size="xxlarge" class="space-default-image oc-px-m oc-py-m"></oc-icon-stub>
</div>
<!---->
<div>
<table aria-label="Overview of the information about the selected space" class="details-table">
<tr>
<th scope="col" class="oc-pr-s">Last activity</th>
<td>Invalid DateTime</td>
</tr>
<!---->
<tr>
<th scope="col" class="oc-pr-s">Manager</th>
<td><span>alice</span></td>
</tr>
<tr>
<th scope="col" class="oc-pr-s">Quota</th>
<td>
<space-quota-stub spacequota="[object Object]"></space-quota-stub>
</td>
</tr>
</table>
<div class="oc-flex oc-flex-middle oc-mb-m oc-text-small" style="gap: 15px;">
<oc-button-stub appearance="raw" aria-label="Open member list in share panel">
<oc-icon-stub name="group"></oc-icon-stub>
</oc-button-stub>
<!---->
<p>This space has 1 member.</p>
<oc-button-stub appearance="raw" aria-label="Open share panel" size="small"><span class="oc-text-small">Show</span></oc-button-stub>
</div>
<table aria-label="Overview of the information about the selected space" class="details-table">
<tr>
<th scope="col" class="oc-pr-s">Last activity</th>
<td>Invalid DateTime</td>
</tr>
<!---->
<tr>
<th scope="col" class="oc-pr-s">Manager</th>
<td><span>alice</span></td>
</tr>
<tr>
<th scope="col" class="oc-pr-s">Quota</th>
<td>
<space-quota-stub spacequota="[object Object]"></space-quota-stub>
</td>
</tr>
</table>
</div>
`;