cjw/Oxicloud
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

fix(ui): resolve hidden class vs style.display conflict, polish toggle buttons

Browse Source 
style.display='block'. All panel show/hide now uses classList.
- Fix admin badge/panel not showing in user menu (same root cause).
- Fix profile page main-content/auth-error panels (same root cause).
- Add hidden class to admin-setup-panel in login.html for consistency.
- Remove redundant .admin-setup-panel{display:none} CSS rule.
- Polish view toggle buttons: tighter gap, smaller size, subtler shadow.
This commit is contained in:
Dionisio
2026-04-05 00:51:17 +02:00
parent e90fb2ea3c
commit 4c796aaf61
6 changed files with 62 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/components/buttons.css
+9 -9
View File
@@ -69,10 +69,10 @@
/* View Toggle Buttons */
.view-toggle {
display: flex;
gap: 6px;
padding: 4px;
gap: 2px;
padding: 3px;
background-color: #f0f3f7;
border-radius: 12px;
border-radius: 10px;
border: 1px solid #e2e8f0;
}
@@ -80,26 +80,26 @@
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 36px;
width: 36px;
height: 32px;
background-color: transparent;
border: none;
border-radius: 8px;
cursor: pointer;
color: #64748b;
font-size: 16px;
color: #94a3b8;
font-size: 14px;
transition: all 0.2s ease;
}
.toggle-btn:hover {
background-color: #e2e8f0;
color: #4a5568;
color: #64748b;
}
.toggle-btn.active {
background-color: white;
color: #ff5e3a;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.toggle-btn i {
static/css/views/auth.css
+1 -4
View File
@@ -240,10 +240,7 @@
display: none;
}
/* Admin setup panel styles */
.admin-setup-panel {
display: none;
}
/* Admin setup panel styles — visibility controlled via .hidden class */
.setup-steps {
margin-bottom: 28px;
static/js/app/userMenu.js
+3 -3
View File
@@ -31,9 +31,9 @@ function setupUserMenu() {
const USER_DATA_KEY = 'oxicloud_user';
const userData = JSON.parse(localStorage.getItem(USER_DATA_KEY) || '{}');
const isAdmin = userData.role === 'admin';
if (adminBtn) adminBtn.style.display = isAdmin ? 'flex' : 'none';
if (adminDivider) adminDivider.style.display = isAdmin ? 'block' : 'none';
if (roleBadge) roleBadge.style.display = isAdmin ? 'block' : 'none';
if (adminBtn) { isAdmin ? adminBtn.classList.remove('hidden') : adminBtn.classList.add('hidden'); }
if (adminDivider) { isAdmin ? adminDivider.classList.remove('hidden') : adminDivider.classList.add('hidden'); }
if (roleBadge) { isAdmin ? roleBadge.classList.remove('hidden') : roleBadge.classList.add('hidden'); }
}
});
static/js/features/auth/auth.js
+44 -38
View File
@@ -148,6 +148,12 @@ const ALL_LANGUAGES = [
{ code: 'gl', name: 'Galician', nativeName: 'Galego', flag: '🏴', popular: false },
];
// --- Panel visibility helpers ---
// The `.hidden` CSS class uses `display: none !important`, so inline
// `style.display` can never override it. Always toggle the class instead.
function showPanel(el) { if (el) el.classList.remove('hidden'); }
function hidePanel(el) { if (el) el.classList.add('hidden'); }
// Check if this is a first run (no locale saved)
function isFirstRun() {
return !localStorage.getItem(LOCALE_KEY);
@@ -316,7 +322,7 @@ function initLanguageSelector() {
}
// Hide language panel
languagePanel.style.display = 'none';
hidePanel(languagePanel);
// Check system status to determine which panel to show
const systemStatus = await checkSystemStatus();
@@ -324,16 +330,16 @@ function initLanguageSelector() {
if (!systemStatus.initialized) {
console.log('No admin exists, showing admin setup panel');
document.getElementById('login-panel').style.display = 'none';
document.getElementById('register-panel').style.display = 'none';
document.getElementById('admin-setup-panel').style.display = 'block';
hidePanel(document.getElementById('login-panel'));
hidePanel(document.getElementById('register-panel'));
showPanel(document.getElementById('admin-setup-panel'));
const backToLoginLink = document.getElementById('back-to-login');
if (backToLoginLink) {
backToLoginLink.parentElement.style.display = 'none';
}
} else {
document.getElementById('login-panel').style.display = 'block';
showPanel(document.getElementById('login-panel'));
// Configure OIDC login UI if SSO is enabled
await configureOidcLoginUI();
}
@@ -371,10 +377,10 @@ async function showInitialPanel() {
// First run - show language selector first
// After language is selected, the continue button handler will check system status
console.log('First run - showing language selector');
languagePanel.style.display = 'block';
loginPanel.style.display = 'none';
registerPanel.style.display = 'none';
adminSetupPanel.style.display = 'none';
showPanel(languagePanel);
hidePanel(loginPanel);
hidePanel(registerPanel);
hidePanel(adminSetupPanel);
return;
}
@@ -385,10 +391,10 @@ async function showInitialPanel() {
if (!systemStatus.initialized) {
// No admin exists - this is a fresh install, show admin setup
console.log('Fresh install detected - showing admin setup');
languagePanel.style.display = 'none';
loginPanel.style.display = 'none';
registerPanel.style.display = 'none';
adminSetupPanel.style.display = 'block';
hidePanel(languagePanel);
hidePanel(loginPanel);
hidePanel(registerPanel);
showPanel(adminSetupPanel);
// Hide the "Already set up? Sign in" link since there's no admin yet
const backToLoginLink = document.getElementById('back-to-login');
@@ -399,10 +405,10 @@ async function showInitialPanel() {
}
// System is initialized - show login panel
languagePanel.style.display = 'none';
loginPanel.style.display = 'block';
registerPanel.style.display = 'none';
adminSetupPanel.style.display = 'none';
hidePanel(languagePanel);
showPanel(loginPanel);
hidePanel(registerPanel);
hidePanel(adminSetupPanel);
// Hide the admin setup link if admin already exists
const showAdminSetupLink = document.getElementById('show-admin-setup');
@@ -450,10 +456,10 @@ async function configureOidcLoginUI() {
if (loginForm) loginForm.style.display = 'none';
if (authDivider) authDivider.style.display = 'none';
if (showRegisterToggle) showRegisterToggle.parentElement.style.display = 'none';
oidcSection.style.display = 'block';
showPanel(oidcSection);
} else {
// Both password and OIDC enabled: show divider + SSO button
oidcSection.style.display = 'block';
showPanel(oidcSection);
}
} catch (err) {
console.error('Failed to fetch OIDC provider info:', err);
@@ -492,27 +498,27 @@ function initLoginElements() {
// Panel toggles
document.getElementById('show-register').addEventListener('click', () => {
loginPanel.style.display = 'none';
registerPanel.style.display = 'block';
adminSetupPanel.style.display = 'none';
hidePanel(loginPanel);
showPanel(registerPanel);
hidePanel(adminSetupPanel);
});
document.getElementById('show-login').addEventListener('click', () => {
loginPanel.style.display = 'block';
registerPanel.style.display = 'none';
adminSetupPanel.style.display = 'none';
showPanel(loginPanel);
hidePanel(registerPanel);
hidePanel(adminSetupPanel);
});
document.getElementById('show-admin-setup').addEventListener('click', () => {
loginPanel.style.display = 'none';
registerPanel.style.display = 'none';
adminSetupPanel.style.display = 'block';
hidePanel(loginPanel);
hidePanel(registerPanel);
showPanel(adminSetupPanel);
});
document.getElementById('back-to-login').addEventListener('click', () => {
loginPanel.style.display = 'block';
registerPanel.style.display = 'none';
adminSetupPanel.style.display = 'none';
showPanel(loginPanel);
hidePanel(registerPanel);
hidePanel(adminSetupPanel);
});
return true;
@@ -660,9 +666,9 @@ document.addEventListener('DOMContentLoaded', () => {
// Check if admin account exists (customize this as needed)
const isFirstRun = await checkFirstRun();
if (isFirstRun) {
loginPanel.style.display = 'none';
registerPanel.style.display = 'none';
adminSetupPanel.style.display = 'block';
hidePanel(loginPanel);
hidePanel(registerPanel);
showPanel(adminSetupPanel);
}
} catch (error) {
console.error('Authentication check failed:', error);
@@ -740,8 +746,8 @@ if (isLoginPage && registerForm) {
// Switch to login panel after 2 seconds
setTimeout(() => {
loginPanel.style.display = 'block';
registerPanel.style.display = 'none';
showPanel(loginPanel);
hidePanel(registerPanel);
}, 2000);
} catch (error) {
const errorMsg = window.i18n ? window.i18n.t('auth.admin_create_error') : 'Error registering account';
@@ -801,8 +807,8 @@ if (isLoginPage && adminSetupForm) {
// Wait 2 seconds then switch to login panel
setTimeout(() => {
loginPanel.style.display = 'block';
adminSetupPanel.style.display = 'none';
showPanel(loginPanel);
hidePanel(adminSetupPanel);
if (adminSetupSuccess) adminSetupSuccess.style.display = 'none';
}, 2000);
static/js/views/profile/profile.js
+4 -4
View File
@@ -84,8 +84,8 @@ async function init() {
} catch (oidcErr) {
}
document.getElementById('loading').style.display = 'none';
document.getElementById('main-content').style.display = 'block';
document.getElementById('loading').classList.add('hidden');
document.getElementById('main-content').classList.remove('hidden');
} catch (e) {
console.error(e);
showError();
@@ -93,8 +93,8 @@ async function init() {
}
function showError() {
document.getElementById('loading').style.display = 'none';
document.getElementById('auth-error').style.display = 'block';
document.getElementById('loading').classList.add('hidden');
document.getElementById('auth-error').classList.remove('hidden');
}
async function changePassword(e) {
static/login.html
+1 -1
View File
@@ -194,7 +194,7 @@
</div>
</div>
<div class="auth-panel admin-setup-panel" id="admin-setup-panel">
<div class="auth-panel admin-setup-panel hidden" id="admin-setup-panel">
<div class="auth-logo">
<div class="auth-logo-icon">
<svg viewBox="0 0 500 500">