mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Minor UI fixes for updated Lightbox

Browse source
This commit is contained in:
Fedor Indutny 2023-03-07 09:32:00 -08:00 committed by GitHub
parent a9395ddecc
commit cd5ac544bb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 74 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
stylesheets/components/Lightbox.scss
View file

@ -3,7 +3,7 @@
.Lightbox {
&__container {
background-color: $color-gray-90;
background-color: $color-black;
bottom: 0;
left: 0;
position: absolute;
@ -52,6 +52,10 @@
}
}
&__thumbnails_placeholder {
height: 44px;
}
&__thumbnail {
@include button-reset;
position: relative;
@ -210,10 +214,11 @@
&__header {
align-items: center;
display: flex;
height: 56px;
height: 52px;
justify-content: space-between;
margin-top: calc(12px + var(--title-bar-drag-area-height));
min-height: 56px;
margin-top: var(--title-bar-drag-area-height);
margin-bottom: 16px;
min-height: 52px;
opacity: 1;
padding: 0 16px;
transition: opacity 150ms cubic-bezier(0.17, 0.17, 0, 1);
@ -239,7 +244,7 @@
&__footer {
opacity: 1;
padding: 20px 16px;
padding: 16px 16px 24px 16px;
transition: opacity 150ms cubic-bezier(0.17, 0.17, 0, 1);
}
@ -250,6 +255,17 @@
}
}
&__container--has-controls {
.Lightbox__nav-next,
.Lightbox__nav-prev {
// Give some room for <video/>'s controls.
$controls-height: 64px;
padding-top: $controls-height;
height: calc(100% - $controls-height);
}
}
&__controls {
display: flex;
gap: 32px;

108
ts/components/Lightbox.tsx
View file

@ -430,7 +430,7 @@ export function Lightbox({
const caption = attachment?.caption;
let content: JSX.Element;
let hasFooter = true;
let hasControls = false;
if (!contentType) {
content = <>{children}</>;
} else {
@ -498,7 +498,7 @@ export function Lightbox({
</video>
);
hasFooter = false;
hasControls = true;
} else if (isUnsupportedImageType || isUnsupportedVideoType) {
content = (
<button
@ -536,6 +536,7 @@ export function Lightbox({
<div
className={classNames('Lightbox Lightbox__container', {
'Lightbox__container--zoom': isZoomed,
'Lightbox__container--has-controls': hasControls,
})}
onClick={(event: React.MouseEvent<HTMLDivElement>) => {
event.stopPropagation();
@ -633,61 +634,58 @@ export function Lightbox({
)}
</animated.div>
</div>
{hasFooter ? (
<div className="Lightbox__footer">
{isViewOnce && videoTime ? (
<div className="Lightbox__timestamp">
{formatDuration(videoTime)}
</div>
) : null}
{caption ? (
<div className="Lightbox__caption">{caption}</div>
) : null}
{media.length > 1 && (
<div className="Lightbox__thumbnails--container">
<div
className="Lightbox__thumbnails"
style={{
marginLeft:
0 - (selectedIndex * 44 + selectedIndex * 8 + 22),
}}
>
{media.map((item, index) => (
<button
className={classNames({
Lightbox__thumbnail: true,
'Lightbox__thumbnail--selected':
index === selectedIndex,
})}
key={item.thumbnailObjectUrl}
type="button"
onClick={(
event: React.MouseEvent<
HTMLButtonElement,
MouseEvent
>
) => {
event.stopPropagation();
event.preventDefault();
<div className="Lightbox__footer">
{isViewOnce && videoTime ? (
<div className="Lightbox__timestamp">
{formatDuration(videoTime)}
</div>
) : null}
{caption ? (
<div className="Lightbox__caption">{caption}</div>
) : null}
{media.length > 1 ? (
<div className="Lightbox__thumbnails--container">
<div
className="Lightbox__thumbnails"
style={{
marginLeft:
0 - (selectedIndex * 44 + selectedIndex * 8 + 22),
}}
>
{media.map((item, index) => (
<button
className={classNames({
Lightbox__thumbnail: true,
'Lightbox__thumbnail--selected':
index === selectedIndex,
})}
key={item.thumbnailObjectUrl}
type="button"
onClick={(
event: React.MouseEvent<HTMLButtonElement, MouseEvent>
) => {
event.stopPropagation();
event.preventDefault();
onSelectAttachment(index);
}}
>
{item.thumbnailObjectUrl ? (
<img
alt={i18n('lightboxImageAlt')}
src={item.thumbnailObjectUrl}
/>
) : (
<div className="Lightbox__thumbnail--unavailable" />
)}
</button>
))}
</div>
onSelectAttachment(index);
}}
>
{item.thumbnailObjectUrl ? (
<img
alt={i18n('lightboxImageAlt')}
src={item.thumbnailObjectUrl}
/>
) : (
<div className="Lightbox__thumbnail--unavailable" />
)}
</button>
))}
</div>
)}
</div>
) : null}
</div>
) : (
<div className="Lightbox__thumbnails_placeholder" />
)}
</div>
</div>
</div>,
root