Skip to content

Commit

Permalink
Move modal outside of the Version component.
Browse files Browse the repository at this point in the history 
This is for accessibility, to have the NcListItem (<li>) as a direct child of the <ul>

Signed-off-by: Louis Chemineau <louis@chmn.me>
  • Loading branch information
@artonge @JuliaKirschenheuter
artonge authored and JuliaKirschenheuter committed Feb 2, 2024
1 parent dce5df4 commit 752a40b
Show file tree
Hide file tree
Showing 4 changed files with 290 additions and 237 deletions.
225 changes: 75 additions & 150 deletions apps/files_versions/src/components/Version.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,126 +16,90 @@
- along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<template>
<div>
<NcListItem class="version"
:name="versionLabel"
:force-display-actions="true"
data-files-versions-version
@click="click">
<template #icon>
<div v-if="!(loadPreview || previewLoaded)" class="version__image" />
<img v-else-if="(isCurrent || version.hasPreview) && !previewErrored"
:src="version.previewUrl"
alt=""
decoding="async"
fetchpriority="low"
loading="lazy"
class="version__image"
@load="previewLoaded = true"
@error="previewErrored = true">
<div v-else
class="version__image">
<ImageOffOutline :size="20" />
</div>
</template>
<template #subname>
<div class="version__info">
<span :title="formattedDate">{{ version.mtime | humanDateFromNow }}</span>
<!-- Separate dot to improve alignement -->
<span class="version__info__size">•</span>
<span class="version__info__size">{{ version.size | humanReadableSize }}</span>
</div>
</template>
<template #actions>
<NcActionButton v-if="enableLabeling"
:close-after-click="true"
@click="openVersionLabelModal">
<template #icon>
<Pencil :size="22" />
</template>
{{ version.label === '' ? t('files_versions', 'Name this version') : t('files_versions', 'Edit version name') }}
</NcActionButton>
<NcActionButton v-if="!isCurrent && canView && canCompare"
:close-after-click="true"
@click="compareVersion">
<template #icon>
<FileCompare :size="22" />
</template>
{{ t('files_versions', 'Compare to current version') }}
</NcActionButton>
<NcActionButton v-if="!isCurrent"
:close-after-click="true"
@click="restoreVersion">
<template #icon>
<BackupRestore :size="22" />
</template>
{{ t('files_versions', 'Restore version') }}
</NcActionButton>
<NcActionLink :href="downloadURL"
:close-after-click="true"
:download="downloadURL">
<template #icon>
<Download :size="22" />
</template>
{{ t('files_versions', 'Download version') }}
</NcActionLink>
<NcActionButton v-if="!isCurrent && enableDeletion"
:close-after-click="true"
@click="deleteVersion">
<template #icon>
<Delete :size="22" />
</template>
{{ t('files_versions', 'Delete version') }}
</NcActionButton>
</template>
</NcListItem>
<NcModal v-if="showVersionLabelForm"
:title="t('files_versions', 'Name this version')"
@close="showVersionLabelForm = false">
<form class="version-label-modal"
@submit.prevent="setVersionLabel(formVersionLabelValue)">
<label>
<div class="version-label-modal__title">{{ t('files_versions', 'Version name') }}</div>
<NcTextField ref="labelInput"
:value.sync="formVersionLabelValue"
:placeholder="t('files_versions', 'Version name')"
:label-outside="true" />
</label>

<div class="version-label-modal__info">
{{ t('files_versions', 'Named versions are persisted, and excluded from automatic cleanups when your storage quota is full.') }}
</div>

<div class="version-label-modal__actions">
<NcButton :disabled="formVersionLabelValue.trim().length === 0" @click="setVersionLabel('')">
{{ t('files_versions', 'Remove version name') }}
</NcButton>
<NcButton type="primary" native-type="submit">
<template #icon>
<Check />
</template>
{{ t('files_versions', 'Save version name') }}
</NcButton>
</div>
</form>
</NcModal>
</div>
<NcListItem class="version"
:name="versionLabel"
:force-display-actions="true"
data-files-versions-version
@click="click">
<template #icon>
<div v-if="!(loadPreview || previewLoaded)" class="version__image" />
<img v-else-if="(isCurrent || version.hasPreview) && !previewErrored"
:src="version.previewUrl"
alt=""
decoding="async"
fetchpriority="low"
loading="lazy"
class="version__image"
@load="previewLoaded = true"
@error="previewErrored = true">
<div v-else
class="version__image">
<ImageOffOutline :size="20" />
</div>
</template>
<template #subname>
<div class="version__info">
<span :title="formattedDate">{{ version.mtime | humanDateFromNow }}</span>
<!-- Separate dot to improve alignement -->
<span class="version__info__size">•</span>
<span class="version__info__size">{{ version.size | humanReadableSize }}</span>
</div>
</template>
<template #actions>
<NcActionButton v-if="enableLabeling"
:close-after-click="true"
@click="labelUpdate">
<template #icon>
<Pencil :size="22" />
</template>
{{ version.label === '' ? t('files_versions', 'Name this version') : t('files_versions', 'Edit version name') }}
</NcActionButton>
<NcActionButton v-if="!isCurrent && canView && canCompare"
:close-after-click="true"
@click="compareVersion">
<template #icon>
<FileCompare :size="22" />
</template>
{{ t('files_versions', 'Compare to current version') }}
</NcActionButton>
<NcActionButton v-if="!isCurrent"
:close-after-click="true"
@click="restoreVersion">
<template #icon>
<BackupRestore :size="22" />
</template>
{{ t('files_versions', 'Restore version') }}
</NcActionButton>
<NcActionLink :href="downloadURL"
:close-after-click="true"
:download="downloadURL">
<template #icon>
<Download :size="22" />
</template>
{{ t('files_versions', 'Download version') }}
</NcActionLink>
<NcActionButton v-if="!isCurrent && enableDeletion"
:close-after-click="true"
@click="deleteVersion">
<template #icon>
<Delete :size="22" />
</template>
{{ t('files_versions', 'Delete version') }}
</NcActionButton>
</template>
</NcListItem>
</template>

<script>
import BackupRestore from 'vue-material-design-icons/BackupRestore.vue'
import Download from 'vue-material-design-icons/Download.vue'
import FileCompare from 'vue-material-design-icons/FileCompare.vue'
import Pencil from 'vue-material-design-icons/Pencil.vue'
import Check from 'vue-material-design-icons/Check.vue'
import Delete from 'vue-material-design-icons/Delete.vue'
import ImageOffOutline from 'vue-material-design-icons/ImageOffOutline.vue'
import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
import NcListItem from '@nextcloud/vue/dist/Components/NcListItem.js'
import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
import moment from '@nextcloud/moment'
import { translate as t } from '@nextcloud/l10n'
Expand All @@ -149,14 +113,10 @@ export default {
NcActionLink,
NcActionButton,
NcListItem,
NcModal,
NcButton,
NcTextField,
BackupRestore,
Download,
FileCompare,
Pencil,
Check,
Delete,
ImageOffOutline,
},
Expand All @@ -180,7 +140,7 @@ export default {
},
},
props: {
/** @type {Vue.PropOptions<import('../utils/versions.js').Version>} */
/** @type {Vue.PropOptions<import('../utils/versions.ts').Version>} */
version: {
type: Object,
required: true,
Expand Down Expand Up @@ -214,8 +174,6 @@ export default {
return {
previewLoaded: false,
previewErrored: false,
showVersionLabelForm: false,
formVersionLabelValue: this.version.label,
capabilities: loadState('core', 'capabilities', { files: { version_labeling: false, version_deletion: false } }),
}
},
Expand Down Expand Up @@ -268,23 +226,14 @@ export default {
},
},
methods: {
openVersionLabelModal() {
this.showVersionLabelForm = true
this.$nextTick(() => {
this.$refs.labelInput.$el.getElementsByTagName('input')[0].focus()
})
labelUpdate() {
this.$emit('label-update-request')
},

restoreVersion() {
this.$emit('restore', this.version)
},

setVersionLabel(label) {
this.formVersionLabelValue = label
this.showVersionLabelForm = false
this.$emit('label-update', this.version, label)
},

deleteVersion() {
this.$emit('delete', this.version)
},
Expand Down Expand Up @@ -337,28 +286,4 @@ export default {
color: var(--color-text-light);
}
}

.version-label-modal {
display: flex;
justify-content: space-between;
flex-direction: column;
height: 250px;
padding: 16px;

&__title {
margin-bottom: 12px;
font-weight: 600;
}

&__info {
margin-top: 12px;
color: var(--color-text-maxcontrast);
}

&__actions {
display: flex;
justify-content: space-between;
margin-top: 64px;
}
}
</style>
Loading

0 comments on commit 752a40b

Please sign in to comment.