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

Unify modals: shared close button, truncate long filenames, fix sizing & overflow

Browse Source
This commit is contained in:
Ryan
2025-05-04 15:44:43 -04:00
committed by GitHub
parent bde35d1d31
commit bd1841b788
4 changed files with 42 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
CHANGELOG.md
View File

@@ -1,5 +1,20 @@
# Changelog
## Changes 5/4/2025
### Modals
- **Added** a shared `.editor-close-btn` component for all modals:
- File Tags
- User Panel
- TOTP Login & Setup
- Change Password
- **Truncated** long filenames in the File Tags modal header using CSS `text-overflow: ellipsis`.
- **Resized** File Tags modal from 400px → 450px wide (with `max-width: 90vw` fallback).
- **Capped** User Panel height at 381px and hidden scrollbars to eliminate layout jumps on hover.
---
## Changes 5/3/2025 v1.3.0
**Admin Panel Refactor & Enhancements**

2
public/index.html
View File

@@ -428,7 +428,7 @@
<div id="changePasswordModal" class="modal" style="display:none;">
<div class="modal-content" style="max-width:400px; margin:auto;">
<span id="closeChangePasswordModal"
style="position:absolute; top:10px; right:10px; cursor:pointer; font-size:24px;">&times;</span>
class="editor-close-btn">&times;</span>
<h3 data-i18n-key="change_password_title">Change Password</h3>
<input type="password" id="oldPassword" class="form-control" data-i18n-placeholder="old_password"
placeholder="Old Password" style="width:100%; margin: 5px 0;" />

24
public/js/authModals.js
View File

@@ -30,7 +30,7 @@ export function openTOTPLoginModal() {
`;
totpLoginModal.innerHTML = `
<div style="background: ${modalBg}; padding:20px; border-radius:8px; text-align:center; position:relative; color:${textColor};">
<span id="closeTOTPLoginModal" style="position:absolute; top:10px; right:10px; cursor:pointer; font-size:24px;">&times;</span>
<span id="closeTOTPLoginModal" class="editor-close-btn">&times;</span>
<div id="totpSection">
<h3>${t("enter_totp_code")}</h3>
<input type="text" id="totpLoginInput" maxlength="6"
@@ -172,11 +172,13 @@ export function openUserPanel() {
max-width: 600px;
width: 90%;
border-radius: 8px;
position: fixed;
overflow-y: auto;
max-height: 400px !important;
overflow-x: hidden;
max-height: 381px !important;
flex-shrink: 0 !important;
scrollbar-gutter: stable both-edges;
border: ${isDarkMode ? "1px solid #444" : "1px solid #ccc"};
transform: none;
box-sizing: border-box;
transition: none;
`;
const savedLanguage = localStorage.getItem("language") || "en";
@@ -186,19 +188,17 @@ export function openUserPanel() {
userPanelModal.id = "userPanelModal";
userPanelModal.style.cssText = `
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
top: 0; right: 0; bottom: 0; left: 0;
background-color: ${overlayBackground};
display: flex;
justify-content: center;
align-items: center;
z-index: 3000;
z-index: 1000;
overflow: hidden;
`;
userPanelModal.innerHTML = `
<div class="modal-content user-panel-content" style="${modalContentStyles}">
<span id="closeUserPanel" style="position: absolute; top: 10px; right: 10px; cursor: pointer; font-size: 24px;">&times;</span>
<div class="modal-content user-panel-content" style="${modalContentStyles}">
<span id="closeUserPanel" class="editor-close-btn">&times;</span>
<h3>${t("user_panel")} (${username})</h3>
<button type="button" id="openChangePasswordModalBtn" class="btn btn-primary" style="margin-bottom: 15px;">
@@ -369,7 +369,7 @@ export function openTOTPModal() {
`;
totpModal.innerHTML = `
<div class="modal-content" style="${modalContentStyles}">
<span id="closeTOTPModal" style="position: absolute; top: 10px; right: 10px; cursor: pointer; font-size: 24px;">&times;</span>
<span id="closeTOTPModal" class="editor-close-btn">&times;</span>
<h3>${t("totp_setup")}</h3>
<p>${t("scan_qr_code")}</p>
<!-- Create an image placeholder without the CSRF token in the src -->

19
public/js/fileTags.js
View File

@@ -13,10 +13,19 @@ export function openTagModal(file) {
modal.id = 'tagModal';
modal.className = 'modal';
modal.innerHTML = `
<div class="modal-content" style="width: 400px; max-width:90vw;">
<div class="modal-content" style="width: 450px; max-width:90vw;">
<div class="modal-header" style="display:flex; justify-content:space-between; align-items:center;">
<h3 style="margin:0;">${t("tag_file")}: ${file.name}</h3>
<span id="closeTagModal" style="cursor:pointer; font-size:24px;">&times;</span>
<h3 style="
margin:0;
display:inline-block;
max-width: calc(100% - 40px);
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
">
${t("tag_file")}: ${escapeHTML(file.name)}
</h3>
<span id="closeTagModal" class="editor-close-btn">&times;</span>
</div>
<div class="modal-body" style="margin-top:10px;">
<label for="tagNameInput">${t("tag_name")}</label>
@@ -83,10 +92,10 @@ export function openMultiTagModal(files) {
modal.id = 'multiTagModal';
modal.className = 'modal';
modal.innerHTML = `
<div class="modal-content" style="width: 400px; max-width:90vw;">
<div class="modal-content" style="width: 450px; max-width:90vw;">
<div class="modal-header" style="display:flex; justify-content:space-between; align-items:center;">
<h3 style="margin:0;">Tag Selected Files (${files.length})</h3>
<span id="closeMultiTagModal" style="cursor:pointer; font-size:24px;">&times;</span>
<span id="closeMultiTagModal" class="editor-close-btn">&times;</span>
</div>
<div class="modal-body" style="margin-top:10px;">
<label for="multiTagNameInput">Tag Name:</label>