Skip to content

Commit 036fcaa

Browse files
dschmidtdschmidt
authored
Merge pull request #3065 from opencloud-eu/fix/details-versions-spinner-position
fix: position versions loading spinner without shifting the details layout
2 parents 27c32e8 + 082687d commit 036fcaa

1 file changed

Lines changed: 95 additions & 90 deletions

File tree

‎packages/web-app-files/src/components/SideBar/Details/FileDetails.vue‎

Lines changed: 95 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -30,97 +30,102 @@
3030
<oc-status-indicators :resource="resource" :indicators="shareIndicators" />
3131
<p class="my-0 mx-2" v-text="detailSharingInformation" />
3232
</div>
33-
<div class="flex justify-end min-h-5">
34-
<oc-spinner
35-
v-if="versionsLoading"
36-
v-oc-tooltip="$gettext('Loading version information')"
37-
size="small"
38-
:aria-label="$gettext('Loading version information')"
39-
/>
40-
<oc-icon
41-
v-else-if="versionsError"
42-
v-oc-tooltip="$gettext('Version information could not be loaded')"
43-
name="error-warning"
44-
fill-type="line"
45-
size="small"
46-
class="text-role-error"
47-
/>
33+
<div class="relative">
34+
<div
35+
v-if="versionsLoading || versionsError"
36+
class="absolute top-0 right-0 z-20 flex items-center"
37+
>
38+
<oc-spinner
39+
v-if="versionsLoading"
40+
v-oc-tooltip="$gettext('Loading version information')"
41+
size="small"
42+
:aria-label="$gettext('Loading version information')"
43+
/>
44+
<oc-icon
45+
v-else
46+
v-oc-tooltip="$gettext('Version information could not be loaded')"
47+
name="error-warning"
48+
fill-type="line"
49+
size="small"
50+
class="text-role-error"
51+
/>
52+
</div>
53+
<dl
54+
class="details-list"
55+
:aria-label="$gettext('Overview of the information about the selected file')"
56+
>
57+
<template v-if="hasDeletionDate">
58+
<dt>{{ $gettext('Deleted at') }}</dt>
59+
<dd data-testid="delete-timestamp">{{ capitalizedTimestamp }}</dd>
60+
</template>
61+
<template v-if="hasTimestamp">
62+
<dt>{{ $gettext('Last modified') }}</dt>
63+
<dd data-testid="timestamp">
64+
<oc-button
65+
v-if="showVersions"
66+
v-oc-tooltip="seeVersionsLabel"
67+
appearance="raw"
68+
:aria-label="seeVersionsLabel"
69+
no-hover
70+
@click="openSideBarPanel('versions')"
71+
>
72+
{{ capitalizedTimestamp }}
73+
</oc-button>
74+
<span v-else v-text="capitalizedTimestamp" />
75+
</dd>
76+
</template>
77+
<template v-if="resource.locked">
78+
<dt>{{ $gettext('Locked via') }}</dt>
79+
<dd data-testid="locked-by">
80+
<span>{{ resource.lockOwner }}</span>
81+
<span v-if="resource.lockTime">({{ formatDateRelative(resource.lockTime) }})</span>
82+
</dd>
83+
</template>
84+
<template v-if="showSharedVia">
85+
<dt>{{ $gettext('Shared via') }}</dt>
86+
<dd data-testid="shared-via">
87+
<router-link :to="sharedAncestorRoute">
88+
<span v-oc-tooltip="sharedViaTooltip" v-text="sharedAncestor.path" />
89+
</router-link>
90+
</dd>
91+
</template>
92+
<template v-if="showSharedBy">
93+
<dt>{{ $gettext('Shared by') }}</dt>
94+
<dd data-testid="shared-by">{{ sharedByDisplayNames }}</dd>
95+
</template>
96+
<template v-if="ownerDisplayName && ownerDisplayName !== sharedByDisplayNames">
97+
<dt>{{ $gettext('Owner') }}</dt>
98+
<dd data-testid="ownerDisplayName">
99+
<p class="m-0">
100+
{{ ownerDisplayName }}
101+
<span v-if="ownedByCurrentUser" v-text="$gettext('(me)')" />
102+
</p>
103+
</dd>
104+
</template>
105+
<template v-if="showSize">
106+
<dt>{{ $gettext('Size') }}</dt>
107+
<dd data-testid="sizeInfo">{{ resourceSize }}</dd>
108+
</template>
109+
<web-dav-details v-if="showWebDavDetails" :space="space" />
110+
<template v-if="versionsRowVisible">
111+
<dt>{{ $gettext('Version') }}</dt>
112+
<dd data-testid="versionsInfo">
113+
<span v-if="versionsPlaceholder" aria-hidden="true">&nbsp;</span>
114+
<oc-button
115+
v-else
116+
v-oc-tooltip="seeVersionsLabel"
117+
appearance="raw"
118+
:aria-label="seeVersionsLabel"
119+
no-hover
120+
@click="openSideBarPanel('versions')"
121+
>
122+
{{ versions.length }}
123+
</oc-button>
124+
</dd>
125+
</template>
126+
<custom-component-target :extension-point="fileSideBarFileDetailsTableExtensionPoint" />
127+
</dl>
48128
</div>
49-
<dl
50-
class="details-list"
51-
:aria-label="$gettext('Overview of the information about the selected file')"
52-
>
53-
<template v-if="hasDeletionDate">
54-
<dt>{{ $gettext('Deleted at') }}</dt>
55-
<dd data-testid="delete-timestamp">{{ capitalizedTimestamp }}</dd>
56-
</template>
57-
<template v-if="hasTimestamp">
58-
<dt>{{ $gettext('Last modified') }}</dt>
59-
<dd data-testid="timestamp">
60-
<oc-button
61-
v-if="showVersions"
62-
v-oc-tooltip="seeVersionsLabel"
63-
appearance="raw"
64-
:aria-label="seeVersionsLabel"
65-
no-hover
66-
@click="openSideBarPanel('versions')"
67-
>
68-
{{ capitalizedTimestamp }}
69-
</oc-button>
70-
<span v-else v-text="capitalizedTimestamp" />
71-
</dd>
72-
</template>
73-
<template v-if="resource.locked">
74-
<dt>{{ $gettext('Locked via') }}</dt>
75-
<dd data-testid="locked-by">
76-
<span>{{ resource.lockOwner }}</span>
77-
<span v-if="resource.lockTime">({{ formatDateRelative(resource.lockTime) }})</span>
78-
</dd>
79-
</template>
80-
<template v-if="showSharedVia">
81-
<dt>{{ $gettext('Shared via') }}</dt>
82-
<dd data-testid="shared-via">
83-
<router-link :to="sharedAncestorRoute">
84-
<span v-oc-tooltip="sharedViaTooltip" v-text="sharedAncestor.path" />
85-
</router-link>
86-
</dd>
87-
</template>
88-
<template v-if="showSharedBy">
89-
<dt>{{ $gettext('Shared by') }}</dt>
90-
<dd data-testid="shared-by">{{ sharedByDisplayNames }}</dd>
91-
</template>
92-
<template v-if="ownerDisplayName && ownerDisplayName !== sharedByDisplayNames">
93-
<dt>{{ $gettext('Owner') }}</dt>
94-
<dd data-testid="ownerDisplayName">
95-
<p class="m-0">
96-
{{ ownerDisplayName }}
97-
<span v-if="ownedByCurrentUser" v-text="$gettext('(me)')" />
98-
</p>
99-
</dd>
100-
</template>
101-
<template v-if="showSize">
102-
<dt>{{ $gettext('Size') }}</dt>
103-
<dd data-testid="sizeInfo">{{ resourceSize }}</dd>
104-
</template>
105-
<web-dav-details v-if="showWebDavDetails" :space="space" />
106-
<template v-if="versionsRowVisible">
107-
<dt>{{ $gettext('Version') }}</dt>
108-
<dd data-testid="versionsInfo">
109-
<span v-if="versionsPlaceholder" aria-hidden="true">&nbsp;</span>
110-
<oc-button
111-
v-else
112-
v-oc-tooltip="seeVersionsLabel"
113-
appearance="raw"
114-
:aria-label="seeVersionsLabel"
115-
no-hover
116-
@click="openSideBarPanel('versions')"
117-
>
118-
{{ versions.length }}
119-
</oc-button>
120-
</dd>
121-
</template>
122-
<custom-component-target :extension-point="fileSideBarFileDetailsTableExtensionPoint" />
123-
</dl>
124129
<div v-if="hasTags" class="mt-2">
125130
<div class="inline-flex items-center text-sm mb-0.5">
126131
{{ $gettext('Tags') }}

0 commit comments

Comments
 (0)