mirror of
https://github.com/nextcloud/server.git
synced 2026-06-08 16:26:59 -04:00
fix(files): Remove deprecated function calls from sidebar and add aria-label to favorite icon
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
This commit is contained in:
Ferdinand Thiessen
backportbot[bot]
parent
1c0afb0d1d
commit
363a46566c
1 changed files with 44 additions and 57 deletions
|
|
@ -32,6 +32,15 @@
|
|||
@opened="handleOpened"
|
||||
@closing="handleClosing"
|
||||
@closed="handleClosed">
|
||||
<template #subname>
|
||||
<NcIconSvgWrapper v-if="fileInfo.isFavourited"
|
||||
:path="mdiStar"
|
||||
:name="t('files', 'Favorite')"
|
||||
inline />
|
||||
{{ size }}
|
||||
<NcDateTime :timestamp="fileInfo.mtime" />
|
||||
</template>
|
||||
|
||||
<!-- TODO: create a standard to allow multiple elements here? -->
|
||||
<template v-if="fileInfo" #description>
|
||||
<div class="sidebar__description">
|
||||
|
|
@ -50,11 +59,8 @@
|
|||
<template v-if="fileInfo" #secondary-actions>
|
||||
<NcActionButton :close-after-click="true"
|
||||
@click="toggleStarred(!fileInfo.isFavourited)">
|
||||
<template v-if="fileInfo.isFavourited" #icon>
|
||||
<StarOutline :size="20" />
|
||||
</template>
|
||||
<template v-else #icon>
|
||||
<Star :size="20" />
|
||||
<template #icon>
|
||||
<NcIconSvgWrapper :path="fileInfo.isFavourited ? mdiStarOutline : mdiStar" />
|
||||
</template>
|
||||
{{ fileInfo.isFavourited ? t('files', 'Remove from favorites') : t('files', 'Add to favorites') }}
|
||||
</NcActionButton>
|
||||
|
|
@ -96,27 +102,29 @@
|
|||
</NcAppSidebar>
|
||||
</template>
|
||||
<script>
|
||||
import { emit } from '@nextcloud/event-bus'
|
||||
import { encodePath } from '@nextcloud/paths'
|
||||
import { File, Folder } from '@nextcloud/files'
|
||||
import { getCapabilities } from '@nextcloud/capabilities'
|
||||
import { getCurrentUser } from '@nextcloud/auth'
|
||||
import { getCapabilities } from '@nextcloud/capabilities'
|
||||
import { showError } from '@nextcloud/dialogs'
|
||||
import { emit } from '@nextcloud/event-bus'
|
||||
import { File, Folder, formatFileSize } from '@nextcloud/files'
|
||||
import { encodePath } from '@nextcloud/paths'
|
||||
import { generateRemoteUrl, generateUrl } from '@nextcloud/router'
|
||||
import { Type as ShareTypes } from '@nextcloud/sharing'
|
||||
import $ from 'jquery'
|
||||
import { mdiStar, mdiStarOutline } from '@mdi/js'
|
||||
import axios from '@nextcloud/axios'
|
||||
import moment from '@nextcloud/moment'
|
||||
|
||||
import Star from 'vue-material-design-icons/Star.vue'
|
||||
import StarOutline from 'vue-material-design-icons/StarOutline.vue'
|
||||
import $ from 'jquery'
|
||||
|
||||
import NcAppSidebar from '@nextcloud/vue/dist/Components/NcAppSidebar.js'
|
||||
import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
|
||||
import NcDateTime from '@nextcloud/vue/dist/Components/NcDateTime.js'
|
||||
import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
|
||||
import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
|
||||
|
||||
import FileInfo from '../services/FileInfo.js'
|
||||
import LegacyView from '../components/LegacyView.vue'
|
||||
import SidebarTab from '../components/SidebarTab.vue'
|
||||
import SystemTags from '../../../systemtags/src/components/SystemTags.vue'
|
||||
import logger from '../logger.js'
|
||||
|
||||
export default {
|
||||
name: 'Sidebar',
|
||||
|
|
@ -125,11 +133,23 @@ export default {
|
|||
LegacyView,
|
||||
NcActionButton,
|
||||
NcAppSidebar,
|
||||
NcDateTime,
|
||||
NcEmptyContent,
|
||||
NcIconSvgWrapper,
|
||||
SidebarTab,
|
||||
SystemTags,
|
||||
Star,
|
||||
StarOutline,
|
||||
},
|
||||
|
||||
setup() {
|
||||
const currentUser = getCurrentUser()
|
||||
|
||||
// Non reactive properties
|
||||
return {
|
||||
currentUser,
|
||||
|
||||
mdiStar,
|
||||
mdiStarOutline,
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
|
|
@ -140,7 +160,6 @@ export default {
|
|||
error: null,
|
||||
loading: true,
|
||||
fileInfo: null,
|
||||
starLoading: false,
|
||||
isFullScreen: false,
|
||||
hasLowHeight: false,
|
||||
}
|
||||
|
|
@ -182,55 +201,26 @@ export default {
|
|||
* @return {string}
|
||||
*/
|
||||
davPath() {
|
||||
const user = OC.getCurrentUser().uid
|
||||
return OC.linkToRemote(`dav/files/${user}${encodePath(this.file)}`)
|
||||
const user = this.currentUser.uid
|
||||
return generateRemoteUrl(`dav/files/${user}${encodePath(this.file)}`)
|
||||
},
|
||||
|
||||
/**
|
||||
* Current active tab handler
|
||||
*
|
||||
* @param {string} id the tab id to set as active
|
||||
* @return {string} the current active tab
|
||||
*/
|
||||
activeTab() {
|
||||
return this.Sidebar.activeTab
|
||||
},
|
||||
|
||||
/**
|
||||
* Sidebar subtitle
|
||||
*
|
||||
* @return {string}
|
||||
*/
|
||||
subtitle() {
|
||||
const starredIndicator = this.fileInfo.isFavourited ? '★ ' : ''
|
||||
return `${starredIndicator} ${this.size}, ${this.time}`
|
||||
},
|
||||
|
||||
/**
|
||||
* File last modified formatted string
|
||||
*
|
||||
* @return {string}
|
||||
*/
|
||||
time() {
|
||||
return OC.Util.relativeModifiedDate(this.fileInfo.mtime)
|
||||
},
|
||||
|
||||
/**
|
||||
* File last modified full string
|
||||
*
|
||||
* @return {string}
|
||||
*/
|
||||
fullTime() {
|
||||
return moment(this.fileInfo.mtime).format('LLL')
|
||||
},
|
||||
|
||||
/**
|
||||
* File size formatted string
|
||||
*
|
||||
* @return {string}
|
||||
*/
|
||||
size() {
|
||||
return OC.Util.humanFileSize(this.fileInfo.size)
|
||||
return formatFileSize(this.fileInfo.size)
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -251,7 +241,6 @@ export default {
|
|||
if (this.fileInfo) {
|
||||
return {
|
||||
'data-mimetype': this.fileInfo.mimetype,
|
||||
'star-loading': this.starLoading,
|
||||
active: this.activeTab,
|
||||
background: this.background,
|
||||
class: {
|
||||
|
|
@ -260,8 +249,6 @@ export default {
|
|||
},
|
||||
compact: this.hasLowHeight || !this.fileInfo.hasPreview || this.isFullScreen,
|
||||
loading: this.loading,
|
||||
subname: this.subtitle,
|
||||
subtitle: this.fullTime,
|
||||
name: this.fileInfo.name,
|
||||
title: this.fileInfo.name,
|
||||
}
|
||||
|
|
@ -346,7 +333,7 @@ export default {
|
|||
|
||||
getPreviewIfAny(fileInfo) {
|
||||
if (fileInfo.hasPreview && !this.isFullScreen) {
|
||||
return OC.generateUrl(`/core/preview?fileId=${fileInfo.id}&x=${screen.width}&y=${screen.height}&a=true`)
|
||||
return generateUrl(`/core/preview?fileId=${fileInfo.id}&x=${screen.width}&y=${screen.height}&a=true`)
|
||||
}
|
||||
return this.getIconUrl(fileInfo)
|
||||
},
|
||||
|
|
@ -405,7 +392,6 @@ export default {
|
|||
*/
|
||||
async toggleStarred(state) {
|
||||
try {
|
||||
this.starLoading = true
|
||||
await axios({
|
||||
method: 'PROPPATCH',
|
||||
url: this.davPath,
|
||||
|
|
@ -431,11 +417,12 @@ export default {
|
|||
root: `/files/${getCurrentUser().uid}`,
|
||||
mime: isDir ? undefined : this.fileInfo.mimetype,
|
||||
}))
|
||||
|
||||
this.fileInfo.isFavourited = state
|
||||
} catch (error) {
|
||||
OC.Notification.showTemporary(t('files', 'Unable to change the favourite state of the file'))
|
||||
console.error('Unable to change favourite state', error)
|
||||
showError(t('files', 'Unable to change the favourite state of the file'))
|
||||
logger.error('Unable to change favourite state', { error })
|
||||
}
|
||||
this.starLoading = false
|
||||
},
|
||||
|
||||
onDefaultAction() {
|
||||
|
|
|
|||
Loading…
Reference in a new issue