mirror of
https://github.com/wukko/cobalt.git
synced 2024-11-15 12:50:01 +00:00
web/PickerItem: always show type badge, prevent right click on video
- fixed type badge centering in webkit - increased border radius of type badge to match icons inside it
This commit is contained in:
parent
c03337fed9
commit
b0a69f9944
1 changed files with 15 additions and 12 deletions
|
@ -26,21 +26,20 @@
|
||||||
downloadFile(item.url);
|
downloadFile(item.url);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{#if item.type}
|
|
||||||
<div class="picker-type">
|
<div class="picker-type">
|
||||||
{#if item.type === "video"}
|
{#if itemType === "video"}
|
||||||
<IconMovie />
|
<IconMovie />
|
||||||
{:else if item.type === "photo"}
|
{:else}
|
||||||
<IconPhoto />
|
<IconPhoto />
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
|
||||||
|
|
||||||
<img
|
<img
|
||||||
class="picker-image"
|
class="picker-image"
|
||||||
src={item.thumb ? item.thumb : item.url}
|
src={item.thumb ? item.thumb : item.url}
|
||||||
|
|
||||||
class:loading={!imageLoaded}
|
class:loading={!imageLoaded}
|
||||||
|
class:video-thumbnail={item.thumb}
|
||||||
on:load={() => (imageLoaded = true)}
|
on:load={() => (imageLoaded = true)}
|
||||||
|
|
||||||
alt="{$t(`a11y.dialog.picker.item.${itemType}`)} {number}"
|
alt="{$t(`a11y.dialog.picker.item.${itemType}`)} {number}"
|
||||||
|
@ -77,6 +76,10 @@
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.picker-image.video-thumbnail {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
@media (hover: hover) {
|
@media (hover: hover) {
|
||||||
.picker-item:hover .picker-image {
|
.picker-item:hover .picker-image {
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
|
@ -99,13 +102,13 @@
|
||||||
top: 6px;
|
top: 6px;
|
||||||
left: 6px;
|
left: 6px;
|
||||||
|
|
||||||
border-radius: 4px;
|
border-radius: 6px;
|
||||||
|
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.picker-type :global(svg) {
|
.picker-type :global(svg) {
|
||||||
width: 21px;
|
width: 22px;
|
||||||
height: 21px;
|
height: 22px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue