paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-10-23 04:52:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

lightbox: Use icons for control elements.

Browse Source 
Fixes #33068.

Co-Authored-By: sammamama <samridhsame@gmail.com>
This commit is contained in:
Karl Stolley
2025-05-30 15:49:25 -05:00
committed by Tim Abbott
parent fbb0516385
commit 2458f57547
3 changed files with 14 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web/shared/icons/chevron-left.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="M10.4702 3.52973C10.2105 3.27004 9.78947 3.27004 9.52977 3.52973L5.52977 7.52974C5.27008 7.78943 5.27008 8.21049 5.52977 8.47019L9.52977 12.4702C9.78947 12.7299 10.2105 12.7299 10.4702 12.4702C10.7299 12.2105 10.7299 11.7894 10.4702 11.5297L6.94045 7.99996L10.4702 4.47019C10.7299 4.21049 10.7299 3.78943 10.4702 3.52973Z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 428 B

16
web/styles/lightbox.css
View File

@@ -53,11 +53,8 @@
flex-shrink: 0;
color: hsl(0deg 0% 100% / 80%);
font-size: 2rem;
line-height: 1.8rem;
transform: scaleY(0.75);
font-weight: 300;
font-size: 14px;
line-height: 31px;
opacity: 0;
pointer-events: none;
@@ -180,13 +177,12 @@
padding: 12px 20px;
.arrow {
padding: 0 10px;
color: hsl(0deg 0% 100%);
font-size: 1.8rem;
line-height: 1.6rem;
font-weight: 200;
/* The thumbnails do not scale, so we express these
dimensions as pixels, too. */
font-size: 35px;
line-height: 25.6px;
transform: scaleY(2);
cursor: pointer;
opacity: 0.5;

8
web/templates/lightbox_overlay.hbs
View File

@@ -9,7 +9,9 @@
<a class="button open" rel="noopener noreferrer" target="_blank">{{t "Open" }}</a>
<a class="button download" download>{{t "Download" }}</a>
</div>
<div class="exit" aria-label="{{t 'Close' }}"><span aria-hidden="true">x</span></div>
<div class="exit" aria-label="{{t 'Close' }}">
<span aria-hidden="true" class="zulip-icon zulip-icon-close"></span>
</div>
</div>
<div class="image-preview no-select">
@@ -18,8 +20,8 @@
<div class="video-player"></div>
<div class="player-container"></div>
<div class="center">
<div class="arrow no-select" data-direction="prev">&lt;</div>
<div class="arrow no-select" data-direction="prev"><i class="zulip-icon zulip-icon-chevron-left"></i></div>
<div class="image-list"></div>
<div class="arrow no-select" data-direction="next">&gt;</div>
<div class="arrow no-select" data-direction="next"><i class="zulip-icon zulip-icon-chevron-right"></i></div>
</div>
</div>