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 { .Lightbox {
&__container { &__container {
background-color: $color-gray-90; background-color: $color-black;
bottom: 0; bottom: 0;
left: 0; left: 0;
position: absolute; position: absolute;
@ -52,6 +52,10 @@
} }
} }
&__thumbnails_placeholder {
height: 44px;
}
&__thumbnail { &__thumbnail {
@include button-reset; @include button-reset;
position: relative; position: relative;
@ -210,10 +214,11 @@
&__header { &__header {
align-items: center; align-items: center;
display: flex; display: flex;
height: 56px; height: 52px;
justify-content: space-between; justify-content: space-between;
margin-top: calc(12px + var(--title-bar-drag-area-height)); margin-top: var(--title-bar-drag-area-height);
min-height: 56px; margin-bottom: 16px;
min-height: 52px;
opacity: 1; opacity: 1;
padding: 0 16px; padding: 0 16px;
transition: opacity 150ms cubic-bezier(0.17, 0.17, 0, 1); transition: opacity 150ms cubic-bezier(0.17, 0.17, 0, 1);
@ -239,7 +244,7 @@
&__footer { &__footer {
opacity: 1; opacity: 1;
padding: 20px 16px; padding: 16px 16px 24px 16px;
transition: opacity 150ms cubic-bezier(0.17, 0.17, 0, 1); 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 { &__controls {
display: flex; display: flex;
gap: 32px; gap: 32px;

108
ts/components/Lightbox.tsx
View file

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