upstream/nextcloud
1
0
Fork 0
mirror of https://github.com/nextcloud/server.git synced 2026-06-10 09:13:19 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 54

Display play icon over live photos' previews

Browse source 
Signed-off-by: Louis Chemineau <louis@chmn.me>
This commit is contained in:
Louis Chemineau 2023-11-08 15:43:57 +01:00
parent 1c84139fa6
commit b180ca9d47
No known key found for this signature in database
3 changed files with 29 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
apps/files/src/components/FileEntry/FileEntryPreview.vue
View file

@ -50,6 +50,10 @@
:aria-label="t('files', 'Favorite')">
<FavoriteIcon v-once />
</span>
<OverlayIcon :is="fileOverlay"
v-if="fileOverlay"
class="files-list__row-icon-overlay" />
</span>
</template>
@ -71,9 +75,11 @@ import KeyIcon from 'vue-material-design-icons/Key.vue'
import LinkIcon from 'vue-material-design-icons/Link.vue'
import NetworkIcon from 'vue-material-design-icons/Network.vue'
import TagIcon from 'vue-material-design-icons/Tag.vue'
import PlayCircleIcon from 'vue-material-design-icons/PlayCircle.vue'
import { useUserConfigStore } from '../../store/userconfig.ts'
import FavoriteIcon from './FavoriteIcon.vue'
import { isLivePhoto } from '../../services/LivePhotos'
export default Vue.extend({
name: 'FileEntryPreview',
@ -163,6 +169,14 @@ export default Vue.extend({
}
},
fileOverlay() {
if (isLivePhoto(this.source)) {
return PlayCircleIcon
}
return null
},
folderOverlay() {
if (this.source.type !== FileType.Folder) {
return null

16
apps/files/src/components/FilesListVirtual.vue
View file

@ -510,14 +510,26 @@ export default Vue.extend({
right: -10px;
}
// Folder overlay
// File and folder overlay
&-overlay {
position: absolute;
max-height: calc(var(--icon-preview-size) * 0.5);
max-width: calc(var(--icon-preview-size) * 0.5);
color: var(--color-main-background);
color: var(--color-main-text);
// better alignment with the folder icon
margin-top: 2px;
svg {
border-radius: 100%;
// Sow a border around the icon for better contrast
path {
stroke: var(--color-main-background);
stroke-width: 8px;
stroke-linejoin: round;
paint-order: stroke;
}
}
}
}

2
apps/files/src/services/LivePhotos.ts
View file

@ -29,5 +29,5 @@ export function initLivePhotos(): void {
* @param {Node} node - The node
*/
export function isLivePhoto(node: Node): boolean {
return node.attributes['metadata-files-live-photo'] !== null
return node.attributes['metadata-files-live-photo'] !== undefined
}