used ListItemIcon component in VersionEntry Component
This commit is contained in:
Terry
parent
4a04a6afc4
commit
27ce9abd68
|
|
@ -1,99 +0,0 @@
|
|||
<!--
|
||||
- @copyright Copyright (c) 2021 Enoch <enoch@nextcloud.com>
|
||||
-
|
||||
- @author Enoch <enoch@nextcloud.com>
|
||||
-
|
||||
- This program is free software: you can redistribute it and/or modify
|
||||
- it under the terms of the GNU Affero General Public License as
|
||||
- published by the Free Software Foundation, either version 3 of the
|
||||
- License, or (at your option) any later version.
|
||||
-
|
||||
- This program is distributed in the hope that it will be useful,
|
||||
- but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
- GNU Affero General Public License for more details.
|
||||
-
|
||||
- You should have received a copy of the GNU Affero General Public License
|
||||
- along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
-
|
||||
-->
|
||||
|
||||
<template>
|
||||
<li class="version-entry">
|
||||
<slot name="avatar" />
|
||||
<div v-tooltip="tooltip" class="sharing-entry__desc">
|
||||
<h5>{{ title }}</h5>
|
||||
<p v-if="subtitle">
|
||||
{{ subtitle }}
|
||||
</p>
|
||||
</div>
|
||||
<Actions v-if="$slots['default']" menu-align="right" class="version-entry__actions">
|
||||
<slot />
|
||||
</Actions>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Actions from '@nextcloud/vue/dist/Components/Actions'
|
||||
import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
|
||||
|
||||
export default {
|
||||
name: 'VersionEntry',
|
||||
|
||||
components: {
|
||||
Actions,
|
||||
},
|
||||
|
||||
directives: {
|
||||
Tooltip,
|
||||
},
|
||||
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
required: true,
|
||||
},
|
||||
tooltip: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
subtitle: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
isUnique: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.version-entry {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 44px;
|
||||
&__desc {
|
||||
padding: 8px;
|
||||
line-height: 1.2em;
|
||||
position: relative;
|
||||
flex: 1 1;
|
||||
min-width: 0;
|
||||
h5 {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
max-width: inherit;
|
||||
}
|
||||
p {
|
||||
color: var(--color-text-maxcontrast);
|
||||
}
|
||||
}
|
||||
&__actions {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -19,18 +19,19 @@
|
|||
-->
|
||||
|
||||
<template>
|
||||
<li class="version-entry">
|
||||
<slot name="avatar" />
|
||||
<div v-tooltip="tooltip" class="sharing-entry__desc">
|
||||
<h5>{{ title }}</h5>
|
||||
<p v-if="subtitle">
|
||||
{{ subtitle }}
|
||||
</p>
|
||||
</div>
|
||||
<Actions v-if="$slots['default']" menu-align="right" class="version-entry__actions">
|
||||
<slot />
|
||||
<ListItemIcon class="version-entry"
|
||||
icon="icon-text"
|
||||
title="10 days ago"
|
||||
subtitle="< 1KB">
|
||||
<Actions>
|
||||
<ActionButton icon="icon-edit" @click="alert('Edit')">
|
||||
{{ version.timestamp }}Restore
|
||||
</ActionButton>
|
||||
<ActionButton icon="icon-delete" @click="alert('Delete')">
|
||||
Download
|
||||
</ActionButton>
|
||||
</Actions>
|
||||
</li>
|
||||
</ListItemIcon>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -42,29 +43,15 @@ export default {
|
|||
|
||||
components: {
|
||||
Actions,
|
||||
|
||||
},
|
||||
|
||||
directives: {
|
||||
Tooltip,
|
||||
},
|
||||
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
required: true,
|
||||
},
|
||||
tooltip: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
subtitle: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
isUnique: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
versions: {
|
||||
|
||||
},
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -27,36 +27,22 @@
|
|||
<div class="icon icon-error" />
|
||||
<h2>{{ error }}</h2>
|
||||
</div>
|
||||
|
||||
<!-- Version content -->
|
||||
<template>
|
||||
<!-- Version information -->
|
||||
<ListItemIcon :versions="versionsList"
|
||||
icon="icon-text"
|
||||
title="10 days ago"
|
||||
subtitle="< 1KB">
|
||||
<Actions>
|
||||
<ActionButton icon="icon-edit" @click="alert('Edit')">
|
||||
{{ version.timestamp }}Restore
|
||||
</ActionButton>
|
||||
<ActionButton icon="icon-delete" @click="alert('Delete')">
|
||||
Download
|
||||
</ActionButton>
|
||||
</Actions>
|
||||
</ListItemIcon>
|
||||
<VersionEntry :versions="versionsList" />
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { CollectionList } from 'nextcloud-vue-collections'
|
||||
|
||||
import Avatar from '@nextcloud/vue/dist/Components/Avatar'
|
||||
import axios from '@nextcloud/axios'
|
||||
import { generateRemoteUrl } from '@nextcloud/router'
|
||||
import { ListItemIcon } from '@nextcloud/vue'
|
||||
import { getCurrentUser } from '@nextcloud/auth'
|
||||
|
||||
import VersionEntry from '../components/VersionEntry'
|
||||
|
||||
export default {
|
||||
name: 'VersionTab',
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue