Skip to content

Commit e0d1deb

Browse files
artongeartonge
committed
Move modal outside of the Version component.
This is for accessibility, to have the NcListItem (<li>) as a direct child of the <ul> Signed-off-by: Louis Chemineau <[email protected]>
1 parent 5940161 commit e0d1deb

76 files changed

Lines changed: 384 additions & 345 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apps/files_versions/src/components/Version.vue‎

Lines changed: 75 additions & 150 deletions
Original file line numberDiff line numberDiff line change
@@ -16,126 +16,90 @@
1616
- along with this program. If not, see <http://www.gnu.org/licenses/>.
1717
-->
1818
<template>
19-
<div>
20-
<NcListItem class="version"
21-
:name="versionLabel"
22-
:force-display-actions="true"
23-
data-files-versions-version
24-
@click="click">
25-
<template #icon>
26-
<div v-if="!(loadPreview || previewLoaded)" class="version__image" />
27-
<img v-else-if="(isCurrent || version.hasPreview) && !previewErrored"
28-
:src="version.previewUrl"
29-
alt=""
30-
decoding="async"
31-
fetchpriority="low"
32-
loading="lazy"
33-
class="version__image"
34-
@load="previewLoaded = true"
35-
@error="previewErrored = true">
36-
<div v-else
37-
class="version__image">
38-
<ImageOffOutline :size="20" />
39-
</div>
40-
</template>
41-
<template #subname>
42-
<div class="version__info">
43-
<span :title="formattedDate">{{ version.mtime | humanDateFromNow }}</span>
44-
<!-- Separate dot to improve alignement -->
45-
<span class="version__info__size">•</span>
46-
<span class="version__info__size">{{ version.size | humanReadableSize }}</span>
47-
</div>
48-
</template>
49-
<template #actions>
50-
<NcActionButton v-if="enableLabeling"
51-
:close-after-click="true"
52-
@click="openVersionLabelModal">
53-
<template #icon>
54-
<Pencil :size="22" />
55-
</template>
56-
{{ version.label === '' ? t('files_versions', 'Name this version') : t('files_versions', 'Edit version name') }}
57-
</NcActionButton>
58-
<NcActionButton v-if="!isCurrent && canView && canCompare"
59-
:close-after-click="true"
60-
@click="compareVersion">
61-
<template #icon>
62-
<FileCompare :size="22" />
63-
</template>
64-
{{ t('files_versions', 'Compare to current version') }}
65-
</NcActionButton>
66-
<NcActionButton v-if="!isCurrent"
67-
:close-after-click="true"
68-
@click="restoreVersion">
69-
<template #icon>
70-
<BackupRestore :size="22" />
71-
</template>
72-
{{ t('files_versions', 'Restore version') }}
73-
</NcActionButton>
74-
<NcActionLink :href="downloadURL"
75-
:close-after-click="true"
76-
:download="downloadURL">
77-
<template #icon>
78-
<Download :size="22" />
79-
</template>
80-
{{ t('files_versions', 'Download version') }}
81-
</NcActionLink>
82-
<NcActionButton v-if="!isCurrent && enableDeletion"
83-
:close-after-click="true"
84-
@click="deleteVersion">
85-
<template #icon>
86-
<Delete :size="22" />
87-
</template>
88-
{{ t('files_versions', 'Delete version') }}
89-
</NcActionButton>
90-
</template>
91-
</NcListItem>
92-
<NcModal v-if="showVersionLabelForm"
93-
:title="t('files_versions', 'Name this version')"
94-
@close="showVersionLabelForm = false">
95-
<form class="version-label-modal"
96-
@submit.prevent="setVersionLabel(formVersionLabelValue)">
97-
<label>
98-
<div class="version-label-modal__title">{{ t('files_versions', 'Version name') }}</div>
99-
<NcTextField ref="labelInput"
100-
:value.sync="formVersionLabelValue"
101-
:placeholder="t('files_versions', 'Version name')"
102-
:label-outside="true" />
103-
</label>
104-
105-
<div class="version-label-modal__info">
106-
{{ t('files_versions', 'Named versions are persisted, and excluded from automatic cleanups when your storage quota is full.') }}
107-
</div>
108-
109-
<div class="version-label-modal__actions">
110-
<NcButton :disabled="formVersionLabelValue.trim().length === 0" @click="setVersionLabel('')">
111-
{{ t('files_versions', 'Remove version name') }}
112-
</NcButton>
113-
<NcButton type="primary" native-type="submit">
114-
<template #icon>
115-
<Check />
116-
</template>
117-
{{ t('files_versions', 'Save version name') }}
118-
</NcButton>
119-
</div>
120-
</form>
121-
</NcModal>
122-
</div>
19+
<NcListItem class="version"
20+
:name="versionLabel"
21+
:force-display-actions="true"
22+
data-files-versions-version
23+
@click="click">
24+
<template #icon>
25+
<div v-if="!(loadPreview || previewLoaded)" class="version__image" />
26+
<img v-else-if="(isCurrent || version.hasPreview) && !previewErrored"
27+
:src="version.previewUrl"
28+
alt=""
29+
decoding="async"
30+
fetchpriority="low"
31+
loading="lazy"
32+
class="version__image"
33+
@load="previewLoaded = true"
34+
@error="previewErrored = true">
35+
<div v-else
36+
class="version__image">
37+
<ImageOffOutline :size="20" />
38+
</div>
39+
</template>
40+
<template #subname>
41+
<div class="version__info">
42+
<span :title="formattedDate">{{ version.mtime | humanDateFromNow }}</span>
43+
<!-- Separate dot to improve alignement -->
44+
<span class="version__info__size">•</span>
45+
<span class="version__info__size">{{ version.size | humanReadableSize }}</span>
46+
</div>
47+
</template>
48+
<template #actions>
49+
<NcActionButton v-if="enableLabeling"
50+
:close-after-click="true"
51+
@click="labelUpdate">
52+
<template #icon>
53+
<Pencil :size="22" />
54+
</template>
55+
{{ version.label === '' ? t('files_versions', 'Name this version') : t('files_versions', 'Edit version name') }}
56+
</NcActionButton>
57+
<NcActionButton v-if="!isCurrent && canView && canCompare"
58+
:close-after-click="true"
59+
@click="compareVersion">
60+
<template #icon>
61+
<FileCompare :size="22" />
62+
</template>
63+
{{ t('files_versions', 'Compare to current version') }}
64+
</NcActionButton>
65+
<NcActionButton v-if="!isCurrent"
66+
:close-after-click="true"
67+
@click="restoreVersion">
68+
<template #icon>
69+
<BackupRestore :size="22" />
70+
</template>
71+
{{ t('files_versions', 'Restore version') }}
72+
</NcActionButton>
73+
<NcActionLink :href="downloadURL"
74+
:close-after-click="true"
75+
:download="downloadURL">
76+
<template #icon>
77+
<Download :size="22" />
78+
</template>
79+
{{ t('files_versions', 'Download version') }}
80+
</NcActionLink>
81+
<NcActionButton v-if="!isCurrent && enableDeletion"
82+
:close-after-click="true"
83+
@click="deleteVersion">
84+
<template #icon>
85+
<Delete :size="22" />
86+
</template>
87+
{{ t('files_versions', 'Delete version') }}
88+
</NcActionButton>
89+
</template>
90+
</NcListItem>
12391
</template>
12492

12593
<script>
12694
import BackupRestore from 'vue-material-design-icons/BackupRestore.vue'
12795
import Download from 'vue-material-design-icons/Download.vue'
12896
import FileCompare from 'vue-material-design-icons/FileCompare.vue'
12997
import Pencil from 'vue-material-design-icons/Pencil.vue'
130-
import Check from 'vue-material-design-icons/Check.vue'
13198
import Delete from 'vue-material-design-icons/Delete.vue'
13299
import ImageOffOutline from 'vue-material-design-icons/ImageOffOutline.vue'
133100
import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
134101
import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
135102
import NcListItem from '@nextcloud/vue/dist/Components/NcListItem.js'
136-
import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
137-
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
138-
import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
139103
import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
140104
import moment from '@nextcloud/moment'
141105
import { translate as t } from '@nextcloud/l10n'
@@ -149,14 +113,10 @@ export default {
149113
NcActionLink,
150114
NcActionButton,
151115
NcListItem,
152-
NcModal,
153-
NcButton,
154-
NcTextField,
155116
BackupRestore,
156117
Download,
157118
FileCompare,
158119
Pencil,
159-
Check,
160120
Delete,
161121
ImageOffOutline,
162122
},
@@ -180,7 +140,7 @@ export default {
180140
},
181141
},
182142
props: {
183-
/** @type {Vue.PropOptions<import('../utils/versions.js').Version>} */
143+
/** @type {Vue.PropOptions<import('../utils/versions.ts').Version>} */
184144
version: {
185145
type: Object,
186146
required: true,
@@ -214,8 +174,6 @@ export default {
214174
return {
215175
previewLoaded: false,
216176
previewErrored: false,
217-
showVersionLabelForm: false,
218-
formVersionLabelValue: this.version.label,
219177
capabilities: loadState('core', 'capabilities', { files: { version_labeling: false, version_deletion: false } }),
220178
}
221179
},
@@ -268,23 +226,14 @@ export default {
268226
},
269227
},
270228
methods: {
271-
openVersionLabelModal() {
272-
this.showVersionLabelForm = true
273-
this.$nextTick(() => {
274-
this.$refs.labelInput.$el.getElementsByTagName('input')[0].focus()
275-
})
229+
labelUpdate() {
230+
this.$emit('label-update-request')
276231
},
277232
278233
restoreVersion() {
279234
this.$emit('restore', this.version)
280235
},
281236
282-
setVersionLabel(label) {
283-
this.formVersionLabelValue = label
284-
this.showVersionLabelForm = false
285-
this.$emit('label-update', this.version, label)
286-
},
287-
288237
deleteVersion() {
289238
this.$emit('delete', this.version)
290239
},
@@ -337,28 +286,4 @@ export default {
337286
color: var(--color-text-light);
338287
}
339288
}
340-
341-
.version-label-modal {
342-
display: flex;
343-
justify-content: space-between;
344-
flex-direction: column;
345-
height: 250px;
346-
padding: 16px;
347-
348-
&__title {
349-
margin-bottom: 12px;
350-
font-weight: 600;
351-
}
352-
353-
&__info {
354-
margin-top: 12px;
355-
color: var(--color-text-maxcontrast);
356-
}
357-
358-
&__actions {
359-
display: flex;
360-
justify-content: space-between;
361-
margin-top: 64px;
362-
}
363-
}
364289
</style>

0 commit comments

Comments
 (0)