joachim/FileRise
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated zoom-in, zoom-out, rotate-left & rotate-right buttons to match prev & next

Browse Source
This commit is contained in:
Ryan
2025-04-14 13:06:30 -04:00
committed by GitHub
parent 66e0d7ecbe
commit 844976ef89
2 changed files with 23 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
css/styles.css
View File

@@ -1711,6 +1711,20 @@ body.dark-mode .CodeMirror-matchingbracket {
border-bottom: 1px solid #ffffff !important; border-bottom: 1px solid #ffffff !important;
} }
.zoom_in,
.zoom_out,
.rotate_left,
.rotate_right {
background: rgba(80, 80, 80, 0.6) !important;
border: none !important;
color: white !important;
cursor: pointer !important;
border-radius: 4px !important;
transition: background 0.3s ease, box-shadow 0.3s ease !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
transform: translateY(-10px);
}
.gallery-nav-btn { .gallery-nav-btn {
background: rgba(80, 80, 80, 0.6) !important; background: rgba(80, 80, 80, 0.6) !important;
border: none !important; border: none !important;
@@ -1723,21 +1737,15 @@ body.dark-mode .CodeMirror-matchingbracket {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
} }
.gallery-nav-btn:hover { .gallery-nav-btn:hover,
.zoom_in:hover,
.zoom_out:hover,
.rotate_left:hover,
.rotate_right:hover {
background: rgba(80, 80, 80, 0.8) !important; background: rgba(80, 80, 80, 0.8) !important;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4) !important; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4) !important;
} }
.gallery-nav-btn.left {
left: 10px;
right: auto;
}
.gallery-nav-btn.right {
right: 10px;
left: auto;
}
.drop-hover { .drop-hover {
background-color: #e0e0e0; background-color: #e0e0e0;
border: 1px dashed #666; border: 1px dashed #666;

8
js/filePreview.js
View File

@@ -182,7 +182,7 @@ export function previewFile(fileUrl, fileName) {
leftTop.style.gap = '4px'; leftTop.style.gap = '4px';
// Zoom In button. // Zoom In button.
const zoomInBtn = document.createElement('button'); const zoomInBtn = document.createElement('button');
zoomInBtn.className = 'material-icons'; zoomInBtn.className = 'material-icons zoom_in';
zoomInBtn.title = 'Zoom In'; zoomInBtn.title = 'Zoom In';
zoomInBtn.style.background = 'transparent'; zoomInBtn.style.background = 'transparent';
zoomInBtn.style.border = 'none'; zoomInBtn.style.border = 'none';
@@ -190,7 +190,7 @@ export function previewFile(fileUrl, fileName) {
zoomInBtn.textContent = 'zoom_in'; zoomInBtn.textContent = 'zoom_in';
// Zoom Out button. // Zoom Out button.
const zoomOutBtn = document.createElement('button'); const zoomOutBtn = document.createElement('button');
zoomOutBtn.className = 'material-icons'; zoomOutBtn.className = 'material-icons zoom_out';
zoomOutBtn.title = 'Zoom Out'; zoomOutBtn.title = 'Zoom Out';
zoomOutBtn.style.background = 'transparent'; zoomOutBtn.style.background = 'transparent';
zoomOutBtn.style.border = 'none'; zoomOutBtn.style.border = 'none';
@@ -265,7 +265,7 @@ export function previewFile(fileUrl, fileName) {
rightTop.style.gap = '4px'; rightTop.style.gap = '4px';
// Rotate Left button. // Rotate Left button.
const rotateLeftBtn = document.createElement('button'); const rotateLeftBtn = document.createElement('button');
rotateLeftBtn.className = 'material-icons'; rotateLeftBtn.className = 'material-icons rotate_left';
rotateLeftBtn.title = 'Rotate Left'; rotateLeftBtn.title = 'Rotate Left';
rotateLeftBtn.style.background = 'transparent'; rotateLeftBtn.style.background = 'transparent';
rotateLeftBtn.style.border = 'none'; rotateLeftBtn.style.border = 'none';
@@ -273,7 +273,7 @@ export function previewFile(fileUrl, fileName) {
rotateLeftBtn.textContent = 'rotate_left'; rotateLeftBtn.textContent = 'rotate_left';
// Rotate Right button. // Rotate Right button.
const rotateRightBtn = document.createElement('button'); const rotateRightBtn = document.createElement('button');
rotateRightBtn.className = 'material-icons'; rotateRightBtn.className = 'material-icons rotate_right';
rotateRightBtn.title = 'Rotate Right'; rotateRightBtn.title = 'Rotate Right';
rotateRightBtn.style.background = 'transparent'; rotateRightBtn.style.background = 'transparent';
rotateRightBtn.style.border = 'none'; rotateRightBtn.style.border = 'none';