Skip to content
This repository was archived by the owner on Jul 14, 2026. It is now read-only.

Commit f854fc9

Browse files
kulmannkulmann
committed
Move link share list items into a new component to avoid code
duplication and fix styling of indirect link shares.
1 parent 390b149 commit f854fc9

3 files changed

Lines changed: 150 additions & 112 deletions

File tree

‎apps/files/src/components/Collaborators/Collaborator.vue‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
<template>
22
<oc-table middle class="files-collaborators-collaborator">
3-
<oc-table-row v-if="$_reshareInformation || $_getViaLabel" class="files-collaborators-collaborator-table-row-extra">
3+
<oc-table-row v-if="$_reshareInformation || $_viaLabel" class="files-collaborators-collaborator-table-row-extra">
44
<oc-table-cell shrink colspan="2"></oc-table-cell>
55
<oc-table-cell colspan="2">
66
<div v-if="$_reshareInformation" class="uk-text-meta uk-flex uk-flex-middle">
77
<oc-icon name="repeat" class="uk-preserve-width" />
88
<span>{{ $_reshareInformation }}</span>
99
</div>
10-
<div v-if="$_getViaLabel" class="uk-text-meta">
11-
<router-link :to="$_getViaRouterParams" :aria-label="$gettext('Navigate to parent')"
10+
<div v-if="$_viaLabel" class="uk-text-meta">
11+
<router-link :to="$_viaRouterParams" :aria-label="$gettext('Navigate to parent')"
1212
class="files-collaborators-collaborator-follow-via uk-flex uk-flex-middle">
1313
<oc-icon name="exit_to_app" size="small" class="uk-preserve-width" />
14-
<span class="oc-file-name uk-padding-remove uk-text-truncate files-collaborators-collaborator-via-label">{{ $_getViaLabel }}</span>
14+
<span class="oc-file-name uk-padding-remove uk-text-truncate files-collaborators-collaborator-via-label">{{ $_viaLabel }}</span>
1515
</router-link>
1616
</div>
1717
</oc-table-cell>
@@ -99,15 +99,15 @@ export default {
9999
return parseInt(this.collaborator.info.share_type, 10)
100100
},
101101
102-
$_getViaLabel () {
102+
$_viaLabel () {
103103
if (!this.$_isIndirectShare) {
104104
return null
105105
}
106106
const translated = this.$gettext('Via %{folderName}')
107107
return this.$gettextInterpolate(translated, { folderName: basename(this.collaborator.info.path) }, false)
108108
},
109109
110-
$_getViaRouterParams () {
110+
$_viaRouterParams () {
111111
const viaPath = this.collaborator.info.path
112112
return {
113113
name: 'files-list',

‎apps/files/src/components/FileLinkSidebar.vue‎

Lines changed: 16 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -34,42 +34,17 @@
3434
name="custom-classes-transition"
3535
tag="ul">
3636
<li v-for="link in $_links" :key="'li-' + link.id">
37-
<oc-table midldle class="files-file-links-link">
38-
<oc-table-row class="files-file-links-link-table-row-info">
39-
<oc-table-cell shrink>
40-
<oc-button :aria-label="$_deleteButtonLabel" @click="$_removePublicLink(link)" variation="raw" class="oc-files-file-link-delete">
41-
<oc-icon name="close" />
42-
</oc-button>
43-
</oc-table-cell>
44-
<oc-table-cell>
45-
<a :href="link.url" target="_blank" :uk-tooltip="$_tooltipTextLink" class="uk-text-bold uk-text-truncate oc-files-file-link-url">{{ link.name }}</a>
46-
<br>
47-
<span class="uk-text-meta uk-text-break">
48-
<span class="oc-files-file-link-role">{{ link.description }}</span>
49-
<template v-if="link.expiration"> |
50-
<span v-translate>Expires</span> {{ formDateFromNow(link.expiration) }}
51-
</template>
52-
<template v-if="link.password"> |
53-
<span v-translate>Password protected</span>
54-
</template>
55-
</span>
56-
</oc-table-cell>
57-
<oc-table-cell shrink class="uk-text-nowrap">
58-
<oc-button :aria-label="$_publicLinkCopyLabel" variation="raw" class="oc-files-file-link-copy-url">
59-
<oc-icon v-if="!linksCopied[link.url]" name="copy_to_clipboard" size="small"
60-
v-clipboard:copy="link.url" v-clipboard:success="$_clipboardSuccessHandler"/>
61-
<oc-icon v-else name="ready" size="small" class="oc-files-file-link-copied-url _clipboard-success-animation"/>
62-
</oc-button>
63-
<oc-button :aria-label="$_editButtonLabel" @click="$_editPublicLink(link)" variation="raw" class="oc-files-file-link-edit">
64-
<oc-icon name="edit" size="small"/>
65-
</oc-button>
66-
</oc-table-cell>
67-
</oc-table-row>
68-
</oc-table>
37+
<public-link-list-item :link="link"
38+
:modifiable="true"
39+
:indirect="false"
40+
:linksCopied="linksCopied"
41+
@onCopy="$_clipboardSuccessHandler"
42+
@onDelete="$_removePublicLink"
43+
@onEdit="$_editPublicLink" />
6944
</li>
7045
</transition-group>
7146
</section>
72-
<section v-if="$_indirectLinks.length > 0" class="uk-margin-medium-bottom">
47+
<section v-if="$_indirectLinks.length > 0" class="uk-margin-medium-top">
7348
<div class="uk-text-bold">
7449
<translate>Public Links Via Parent</translate>
7550
</div>
@@ -79,43 +54,11 @@
7954
name="custom-classes-transition"
8055
tag="ul">
8156
<li v-for="link in $_indirectLinks" :key="'li-' + link.id">
82-
<div class="uk-text-meta">
83-
<router-link :to="$_getViaRouterParams(link)" :aria-label="$gettext('Navigate to parent')"
84-
class="oc-files-file-link-via uk-flex uk-flex-middle">
85-
<oc-icon name="exit_to_app" size="small" class="uk-preserve-width" />
86-
<span class="oc-file-name uk-padding-remove uk-text-truncate files-collaborators-collaborator-via-label">{{ $_getViaLabel(link) }}</span>
87-
</router-link>
88-
</div>
89-
<oc-table midldle class="files-file-links-link">
90-
<oc-table-row class="files-file-links-link-table-row-info">
91-
<oc-table-cell shrink>
92-
<oc-icon name="lock" />
93-
</oc-table-cell>
94-
<oc-table-cell>
95-
<a :href="link.url" target="_blank" :uk-tooltip="$_tooltipTextLink" class="uk-text-bold uk-text-truncate oc-files-file-link-url">{{ link.name }}</a>
96-
<br>
97-
<span class="uk-text-meta uk-text-break">
98-
<span class="oc-files-file-link-role">{{ link.description }}</span>
99-
<template v-if="link.expiration"> |
100-
<span v-translate>Expires</span> {{ formDateFromNow(link.expiration) }}
101-
</template>
102-
<template v-if="link.password"> |
103-
<span v-translate>Password protected</span>
104-
</template>
105-
</span>
106-
</oc-table-cell>
107-
<oc-table-cell shrink class="uk-text-nowrap">
108-
<oc-button :aria-label="$_publicLinkCopyLabel" variation="raw" class="oc-files-file-link-copy-url">
109-
<oc-icon v-if="!linksCopied[link.url]" name="copy_to_clipboard" size="small"
110-
v-clipboard:copy="link.url" v-clipboard:success="$_clipboardSuccessHandler"/>
111-
<oc-icon v-else name="ready" size="small" class="oc-files-file-link-copied-url _clipboard-success-animation"/>
112-
</oc-button>
113-
<oc-button :aria-label="$_editButtonLabel" @click="$_editPublicLink(link)" variation="raw" class="oc-files-file-link-edit">
114-
<oc-icon name="edit" size="small"/>
115-
</oc-button>
116-
</oc-table-cell>
117-
</oc-table-row>
118-
</oc-table>
57+
<public-link-list-item :link="link"
58+
:modifiable="false"
59+
:indirect="true"
60+
:linksCopied="linksCopied"
61+
@onCopy="$_clipboardSuccessHandler" />
11962
</li>
12063
</transition-group>
12164
</section>
@@ -137,18 +80,19 @@ import { mapGetters, mapActions, mapState } from 'vuex'
13780
import moment from 'moment'
13881
import mixins from '../mixins'
13982
import { shareTypes } from '../helpers/shareTypes'
140-
import { basename, dirname } from 'path'
14183
import { getParentPaths } from '../helpers/path'
14284
14385
const EditPublicLink = _ => import('./PublicLinksSidebar/EditPublicLink.vue')
86+
const PublicLinkListItem = _ => import('./PublicLinksSidebar/PublicLinkListItem.vue')
14487
14588
const PANEL_SHOW = 'showLinks'
14689
const PANEL_EDIT = 'editPublicLink'
14790
14891
export default {
14992
mixins: [mixins],
15093
components: {
151-
EditPublicLink
94+
EditPublicLink,
95+
PublicLinkListItem
15296
},
15397
title: ($gettext) => {
15498
return $gettext('Links')
@@ -242,21 +186,9 @@ export default {
242186
enforced: expireDate.enforced === '1'
243187
}
244188
},
245-
$_tooltipTextLink () {
246-
return `title: ${this.$gettext('Click to open the link')}; pos: bottom`
247-
},
248189
$_addButtonLabel () {
249190
return this.$gettext('Add public link')
250191
},
251-
$_deleteButtonLabel () {
252-
return this.$gettext('Delete public link')
253-
},
254-
$_editButtonLabel () {
255-
return this.$gettext('Edit public link')
256-
},
257-
$_publicLinkCopyLabel () {
258-
return this.$gettext('Copy public link url')
259-
},
260192
$_privateLinkCopyLabel () {
261193
return this.$gettext('Copy private link url')
262194
},
@@ -282,22 +214,6 @@ export default {
282214
expireDate: (this.$_expirationDate.days) ? moment().add(this.$_expirationDate.days, 'days').endOf('day').toISOString() : null
283215
}
284216
},
285-
$_getViaLabel (link) {
286-
const translated = this.$gettext('Via %{folderName}')
287-
return this.$gettextInterpolate(translated, { folderName: basename(link.info.path) }, false)
288-
},
289-
$_getViaRouterParams (link) {
290-
const viaPath = link.info.path
291-
return {
292-
name: 'files-list',
293-
params: {
294-
item: dirname(viaPath) || '/'
295-
},
296-
query: {
297-
scrollTo: basename(viaPath)
298-
}
299-
}
300-
},
301217
$_removePublicLink (link) {
302218
this.removeLink({
303219
client: this.$client,
@@ -351,12 +267,6 @@ export default {
351267
}
352268
}
353269
</style>
354-
<style scoped="scoped">
355-
/* FIXME: Move to ODS somehow */
356-
.files-file-links-link-table-row-info > td {
357-
padding: 0 10px 0 0;
358-
}
359-
</style>
360270
<style>
361271
/* FIXME: Move to design system (copied from FileSharingSidebar.vue) */
362272
.oc-app-side-bar .oc-label {

‎apps/files/src/components/PublicLinksSidebar/PublicLinkListItem.vue‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
<template>
2+
<oc-table middle class="files-file-links-link">
3+
<oc-table-row v-if="$_viaLabel" class="files-file-links-link-table-row-extra">
4+
<oc-table-cell shrink></oc-table-cell>
5+
<oc-table-cell colspan="2">
6+
<div class="uk-text-meta">
7+
<router-link :to="$_viaRouterParams" :aria-label="$gettext('Navigate to parent')"
8+
class="oc-files-file-link-via uk-flex uk-flex-middle">
9+
<oc-icon name="exit_to_app" size="small" class="uk-preserve-width" />
10+
<span class="oc-file-name uk-padding-remove uk-text-truncate files-file-links-link-via-label">{{ $_viaLabel }}</span>
11+
</router-link>
12+
</div>
13+
</oc-table-cell>
14+
</oc-table-row>
15+
<oc-table-row class="files-file-links-link-table-row-info">
16+
<oc-table-cell shrink>
17+
<oc-button v-if="modifiable" :aria-label="$_deleteButtonLabel" @click="$_removePublicLink(link)" variation="raw" class="oc-files-file-link-delete">
18+
<oc-icon name="close" />
19+
</oc-button>
20+
<oc-icon v-else name="lock" />
21+
</oc-table-cell>
22+
<oc-table-cell>
23+
<a :href="link.url" target="_blank" :uk-tooltip="$_tooltipTextLink" class="uk-text-bold uk-text-truncate oc-files-file-link-url">{{ link.name }}</a>
24+
<br>
25+
<span class="uk-text-meta uk-text-break">
26+
<span class="oc-files-file-link-role">{{ link.description }}</span>
27+
<template v-if="link.expiration"> |
28+
<span v-translate>Expires</span> {{ formDateFromNow(link.expiration) }}
29+
</template>
30+
<template v-if="link.password"> |
31+
<span v-translate>Password protected</span>
32+
</template>
33+
</span>
34+
</oc-table-cell>
35+
<oc-table-cell shrink class="uk-text-nowrap">
36+
<oc-button :aria-label="$_publicLinkCopyLabel" variation="raw" class="oc-files-file-link-copy-url">
37+
<oc-icon v-if="!linksCopied[link.url]" name="copy_to_clipboard" size="small"
38+
v-clipboard:copy="link.url" v-clipboard:success="this.$emit('onCopy', link.url)"/>
39+
<oc-icon v-else name="ready" size="small" class="oc-files-file-link-copied-url _clipboard-success-animation"/>
40+
</oc-button>
41+
<oc-button v-if="modifiable" :aria-label="$_editButtonLabel" @click="this.$emit('onEdit', link)" variation="raw" class="oc-files-file-link-edit">
42+
<oc-icon name="edit" size="small"/>
43+
</oc-button>
44+
</oc-table-cell>
45+
</oc-table-row>
46+
</oc-table>
47+
</template>
48+
49+
<script>
50+
import { basename, dirname } from 'path'
51+
52+
export default {
53+
name: 'PublicLinkListItem',
54+
props: {
55+
link: {
56+
type: Object,
57+
required: true
58+
},
59+
modifiable: {
60+
type: Boolean,
61+
default: false
62+
},
63+
indirect: {
64+
type: Boolean,
65+
default: false
66+
},
67+
linksCopied: {
68+
type: Object,
69+
default: () => {}
70+
}
71+
},
72+
computed: {
73+
$_viaLabel () {
74+
if (!this.indirect) {
75+
return null
76+
}
77+
const translated = this.$gettext('Via %{folderName}')
78+
return this.$gettextInterpolate(translated, { folderName: basename(this.link.info.path) }, false)
79+
},
80+
$_viaRouterParams () {
81+
const viaPath = this.link.info.path
82+
console.log({
83+
name: 'files-list',
84+
params: {
85+
item: dirname(viaPath) || '/'
86+
},
87+
query: {
88+
scrollTo: basename(viaPath)
89+
}
90+
})
91+
return {
92+
name: 'files-list',
93+
params: {
94+
item: dirname(viaPath) || '/'
95+
},
96+
query: {
97+
scrollTo: basename(viaPath)
98+
}
99+
}
100+
},
101+
$_tooltipTextLink () {
102+
return `title: ${this.$gettext('Click to open the link')}; pos: bottom`
103+
},
104+
$_deleteButtonLabel () {
105+
return this.$gettext('Delete public link')
106+
},
107+
$_editButtonLabel () {
108+
return this.$gettext('Edit public link')
109+
},
110+
$_publicLinkCopyLabel () {
111+
return this.$gettext('Copy public link url')
112+
}
113+
}
114+
}
115+
</script>
116+
117+
<style scoped="scoped">
118+
/* FIXME: Move to ODS somehow */
119+
.files-file-links-link-table-row-extra > td {
120+
padding: 0 10px 5px 0;
121+
}
122+
.files-file-links-link-table-row-info > td {
123+
padding: 0 10px 0 0;
124+
}
125+
.files-file-links-link-via-label {
126+
max-width: 65%;
127+
}
128+
</style>

0 commit comments

Comments
 (0)