Skip to content

Commit

Permalink
Merge pull request #43167 from nextcloud/backport/43084/stable28
Browse files Browse the repository at this point in the history 
[stable28] Move modal outside of the Version component.
  • Loading branch information
@susnux
susnux authored Feb 2, 2024
2 parents 30706d4 + b65c5ea commit 5e22ee1
Show file tree
Hide file tree
Showing 76 changed files with 398 additions and 345 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 5e22ee1

Please sign in to comment.