upstream/nextcloud
1
0
Fork 0
mirror of https://github.com/nextcloud/server.git synced 2026-04-28 17:48:40 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 29

fix(unifiedsearch): Simplify and correct thumbnail styles

Browse source 
Ensure that the if a preview is available the maximum sizes are
respected (clickable area).

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
This commit is contained in:
Ferdinand Thiessen 2025-01-26 16:39:41 +01:00 committed by Andy Scherzinger
parent 4561b4eba1
commit c5c5f68f48
1 changed files with 52 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

117
core/src/components/UnifiedSearch/SearchResult.vue
View file

@ -3,18 +3,18 @@
- SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
<NcListItem class="result-items__item"
<NcListItem class="result-item"
:name="title"
:bold="false"
:href="resourceUrl"
target="_self">
<template #icon>
<div aria-hidden="true"
class="result-items__item-icon"
class="result-item__icon"
:class="{
'result-items__item-icon--rounded': rounded,
'result-items__item-icon--no-preview': !isValidIconOrPreviewUrl(thumbnailUrl),
'result-items__item-icon--with-thumbnail': isValidIconOrPreviewUrl(thumbnailUrl),
'result-item__icon--rounded': rounded,
'result-item__icon--no-preview': !isValidIconOrPreviewUrl(thumbnailUrl),
'result-item__icon--with-thumbnail': isValidIconOrPreviewUrl(thumbnailUrl),
[icon]: !isValidIconOrPreviewUrl(icon),
}"
:style="{
@ -101,72 +101,59 @@ export default {
</script>
<style lang="scss" scoped>
@use "sass:math";
$clickable-area: 44px;
$margin: 10px;
.result-items {
&__item:deep {
a {
border: 2px solid transparent;
border-radius: var(--border-radius-large) !important;
&--focused {
background-color: var(--color-background-hover);
}
&:active,
&:hover,
&:focus {
background-color: var(--color-background-hover);
border: 2px solid var(--color-border-maxcontrast);
}
* {
cursor: pointer;
}
.result-item {
:deep(a) {
border: 2px solid transparent;
border-radius: var(--border-radius-large) !important;
&:active,
&:hover,
&:focus {
background-color: var(--color-background-hover);
border: 2px solid var(--color-border-maxcontrast);
}
&-icon {
overflow: hidden;
width: $clickable-area;
height: $clickable-area;
border-radius: var(--border-radius);
background-repeat: no-repeat;
background-position: center center;
* {
cursor: pointer;
}
}
&__icon {
overflow: hidden;
width: var(--default-clickable-area);
height: var(--default-clickable-area);
border-radius: var(--border-radius);
background-repeat: no-repeat;
background-position: center center;
background-size: 32px;
&--rounded {
border-radius: calc(var(--default-clickable-area) / 2);
}
&--no-preview {
background-size: 32px;
&--rounded {
border-radius: math.div($clickable-area, 2);
}
&--no-preview {
background-size: 32px;
}
&--with-thumbnail {
background-size: cover;
}
&--with-thumbnail:not(&--rounded) {
// compensate for border
max-width: $clickable-area - 2px;
max-height: $clickable-area - 2px;
border: 1px solid var(--color-border);
}
img {
// Make sure to keep ratio
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
&--with-thumbnail {
background-size: cover;
}
&--with-thumbnail:not(#{&}--rounded) {
border: 1px solid var(--color-border);
// compensate for border
max-height: calc(var(--default-clickable-area) - 2px);
max-width: calc(var(--default-clickable-area) - 2px);
}
img {
// Make sure to keep ratio
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
}
</style>