Skip to content

Commit ece3cc2

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 th <ul> Signed-off-by: Louis Chemineau <louis@chmn.me>
1 parent 5940161 commit ece3cc2

241 files changed

Lines changed: 659406 additions & 6781 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: 74 additions & 149 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
},
@@ -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>

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

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<!--
2+
- @copyright 2022 Carl Schwan <carl@carlschwan.eu>
3+
- @license AGPL-3.0-or-later
4+
-
5+
- This program is free software: you can redistribute it and/or modify
6+
- it under the terms of the GNU Affero General Public License as
7+
- published by the Free Software Foundation, either version 3 of the
8+
- License, or (at your option) any later version.
9+
-
10+
- This program is distributed in the hope that it will be useful,
11+
- but WITHOUT ANY WARRANTY; without even the implied warranty of
12+
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13+
- GNU Affero General Public License for more details.
14+
-
15+
- You should have received a copy of the GNU Affero General Public License
16+
- along with this program. If not, see <http://www.gnu.org/licenses/>.
17+
-->
18+
<template>
19+
<form class="version-label-modal"
20+
@submit.prevent="setVersionLabel(innerVersionLabel)">
21+
<label>
22+
<div class="version-label-modal__title">{{ t('files_versions', 'Version name') }}</div>
23+
<NcTextField ref="labelInput"
24+
:value.sync="innerVersionLabel"
25+
:placeholder="t('files_versions', 'Version name')"
26+
:label-outside="true" />
27+
</label>
28+
29+
<div class="version-label-modal__info">
30+
{{ t('files_versions', 'Named versions are persisted, and excluded from automatic cleanups when your storage quota is full.') }}
31+
</div>
32+
33+
<div class="version-label-modal__actions">
34+
<NcButton :disabled="innerVersionLabel.trim().length === 0" @click="setVersionLabel('')">
35+
{{ t('files_versions', 'Remove version name') }}
36+
</NcButton>
37+
<NcButton type="primary" native-type="submit">
38+
<template #icon>
39+
<Check />
40+
</template>
41+
{{ t('files_versions', 'Save version name') }}
42+
</NcButton>
43+
</div>
44+
</form>
45+
</template>
46+
47+
<script lang="ts">
48+
import Check from 'vue-material-design-icons/Check.vue'
49+
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
50+
import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
51+
import { translate } from '@nextcloud/l10n'
52+
53+
import { defineComponent } from 'vue'
54+
55+
export default defineComponent({
56+
name: 'VersionLabelForm',
57+
components: {
58+
NcButton,
59+
NcTextField,
60+
Check,
61+
},
62+
props: {
63+
versionLabel: {
64+
type: String,
65+
default: '',
66+
},
67+
},
68+
data() {
69+
return {
70+
innerVersionLabel: this.versionLabel,
71+
}
72+
},
73+
mounted() {
74+
this.$nextTick(() => {
75+
(this.$refs.labelInput as Vue).$el.getElementsByTagName('input')[0].focus()
76+
})
77+
},
78+
methods: {
79+
setVersionLabel(label: string) {
80+
this.$emit('label-update', label)
81+
},
82+
83+
t: translate,
84+
},
85+
})
86+
</script>
87+
88+
<style scoped lang="scss">
89+
.version-label-modal {
90+
display: flex;
91+
justify-content: space-between;
92+
flex-direction: column;
93+
height: 250px;
94+
padding: 16px;
95+
96+
&__title {
97+
margin-bottom: 12px;
98+
font-weight: 600;
99+
}
100+
101+
&__info {
102+
margin-top: 12px;
103+
color: var(--color-text-maxcontrast);
104+
}
105+
106+
&__actions {
107+
display: flex;
108+
justify-content: space-between;
109+
margin-top: 64px;
110+
}
111+
}
112+
</style>

0 commit comments

Comments
 (0)