cjw/Oxicloud
1
0
Fork 0
Code Issues Pull Requests Actions 1 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 Buttons */
.view-toggle { .view-toggle {
display: flex; display: flex;
gap: 6px; gap: 2px;
padding: 4px; padding: 3px;
background-color: #f0f3f7; background-color: #f0f3f7;
border-radius: 12px; border-radius: 10px;
border: 1px solid #e2e8f0; border: 1px solid #e2e8f0;
} }
@@ -80,26 +80,26 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 40px; width: 36px;
height: 36px; height: 32px;
background-color: transparent; background-color: transparent;
border: none; border: none;
border-radius: 8px; border-radius: 8px;
cursor: pointer; cursor: pointer;
color: #64748b; color: #94a3b8;
font-size: 16px; font-size: 14px;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.toggle-btn:hover { .toggle-btn:hover {
background-color: #e2e8f0; background-color: #e2e8f0;
color: #4a5568; color: #64748b;
} }
.toggle-btn.active { .toggle-btn.active {
background-color: white; background-color: white;
color: #ff5e3a; 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 { .toggle-btn i {
static/css/views/auth.css
+1 -4
View File
@@ -240,10 +240,7 @@
display: none; display: none;
} }
/* Admin setup panel styles */ /* Admin setup panel styles — visibility controlled via .hidden class */
.admin-setup-panel {
display: none;
}
.setup-steps { .setup-steps {
margin-bottom: 28px; 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 USER_DATA_KEY = 'oxicloud_user';
const userData = JSON.parse(localStorage.getItem(USER_DATA_KEY) || '{}'); const userData = JSON.parse(localStorage.getItem(USER_DATA_KEY) || '{}');
const isAdmin = userData.role === 'admin'; const isAdmin = userData.role === 'admin';
if (adminBtn) adminBtn.style.display = isAdmin ? 'flex' : 'none'; if (adminBtn) { isAdmin ? adminBtn.classList.remove('hidden') : adminBtn.classList.add('hidden'); }
if (adminDivider) adminDivider.style.display = isAdmin ? 'block' : 'none'; if (adminDivider) { isAdmin ? adminDivider.classList.remove('hidden') : adminDivider.classList.add('hidden'); }
if (roleBadge) roleBadge.style.display = isAdmin ? 'block' : 'none'; 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 }, { 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) // Check if this is a first run (no locale saved)
function isFirstRun() { function isFirstRun() {
return !localStorage.getItem(LOCALE_KEY); return !localStorage.getItem(LOCALE_KEY);
@@ -316,7 +322,7 @@ function initLanguageSelector() {
} }
// Hide language panel // Hide language panel
languagePanel.style.display = 'none'; hidePanel(languagePanel);
// Check system status to determine which panel to show // Check system status to determine which panel to show
const systemStatus = await checkSystemStatus(); const systemStatus = await checkSystemStatus();
@@ -324,16 +330,16 @@ function initLanguageSelector() {
if (!systemStatus.initialized) { if (!systemStatus.initialized) {
console.log('No admin exists, showing admin setup panel'); console.log('No admin exists, showing admin setup panel');
document.getElementById('login-panel').style.display = 'none'; hidePanel(document.getElementById('login-panel'));
document.getElementById('register-panel').style.display = 'none'; hidePanel(document.getElementById('register-panel'));
document.getElementById('admin-setup-panel').style.display = 'block'; showPanel(document.getElementById('admin-setup-panel'));
const backToLoginLink = document.getElementById('back-to-login'); const backToLoginLink = document.getElementById('back-to-login');
if (backToLoginLink) { if (backToLoginLink) {
backToLoginLink.parentElement.style.display = 'none'; backToLoginLink.parentElement.style.display = 'none';
} }
} else { } else {
document.getElementById('login-panel').style.display = 'block'; showPanel(document.getElementById('login-panel'));
// Configure OIDC login UI if SSO is enabled // Configure OIDC login UI if SSO is enabled
await configureOidcLoginUI(); await configureOidcLoginUI();
} }
@@ -371,10 +377,10 @@ async function showInitialPanel() {
// First run - show language selector first // First run - show language selector first
// After language is selected, the continue button handler will check system status // After language is selected, the continue button handler will check system status
console.log('First run - showing language selector'); console.log('First run - showing language selector');
languagePanel.style.display = 'block'; showPanel(languagePanel);
loginPanel.style.display = 'none'; hidePanel(loginPanel);
registerPanel.style.display = 'none'; hidePanel(registerPanel);
adminSetupPanel.style.display = 'none'; hidePanel(adminSetupPanel);
return; return;
} }
@@ -385,10 +391,10 @@ async function showInitialPanel() {
if (!systemStatus.initialized) { if (!systemStatus.initialized) {
// No admin exists - this is a fresh install, show admin setup // No admin exists - this is a fresh install, show admin setup
console.log('Fresh install detected - showing admin setup'); console.log('Fresh install detected - showing admin setup');
languagePanel.style.display = 'none'; hidePanel(languagePanel);
loginPanel.style.display = 'none'; hidePanel(loginPanel);
registerPanel.style.display = 'none'; hidePanel(registerPanel);
adminSetupPanel.style.display = 'block'; showPanel(adminSetupPanel);
// Hide the "Already set up? Sign in" link since there's no admin yet // Hide the "Already set up? Sign in" link since there's no admin yet
const backToLoginLink = document.getElementById('back-to-login'); const backToLoginLink = document.getElementById('back-to-login');
@@ -399,10 +405,10 @@ async function showInitialPanel() {
} }
// System is initialized - show login panel // System is initialized - show login panel
languagePanel.style.display = 'none'; hidePanel(languagePanel);
loginPanel.style.display = 'block'; showPanel(loginPanel);
registerPanel.style.display = 'none'; hidePanel(registerPanel);
adminSetupPanel.style.display = 'none'; hidePanel(adminSetupPanel);
// Hide the admin setup link if admin already exists // Hide the admin setup link if admin already exists
const showAdminSetupLink = document.getElementById('show-admin-setup'); const showAdminSetupLink = document.getElementById('show-admin-setup');
@@ -450,10 +456,10 @@ async function configureOidcLoginUI() {
if (loginForm) loginForm.style.display = 'none'; if (loginForm) loginForm.style.display = 'none';
if (authDivider) authDivider.style.display = 'none'; if (authDivider) authDivider.style.display = 'none';
if (showRegisterToggle) showRegisterToggle.parentElement.style.display = 'none'; if (showRegisterToggle) showRegisterToggle.parentElement.style.display = 'none';
oidcSection.style.display = 'block'; showPanel(oidcSection);
} else { } else {
// Both password and OIDC enabled: show divider + SSO button // Both password and OIDC enabled: show divider + SSO button
oidcSection.style.display = 'block'; showPanel(oidcSection);
} }
} catch (err) { } catch (err) {
console.error('Failed to fetch OIDC provider info:', err); console.error('Failed to fetch OIDC provider info:', err);
@@ -492,27 +498,27 @@ function initLoginElements() {
// Panel toggles // Panel toggles
document.getElementById('show-register').addEventListener('click', () => { document.getElementById('show-register').addEventListener('click', () => {
loginPanel.style.display = 'none'; hidePanel(loginPanel);
registerPanel.style.display = 'block'; showPanel(registerPanel);
adminSetupPanel.style.display = 'none'; hidePanel(adminSetupPanel);
}); });
document.getElementById('show-login').addEventListener('click', () => { document.getElementById('show-login').addEventListener('click', () => {
loginPanel.style.display = 'block'; showPanel(loginPanel);
registerPanel.style.display = 'none'; hidePanel(registerPanel);
adminSetupPanel.style.display = 'none'; hidePanel(adminSetupPanel);
}); });
document.getElementById('show-admin-setup').addEventListener('click', () => { document.getElementById('show-admin-setup').addEventListener('click', () => {
loginPanel.style.display = 'none'; hidePanel(loginPanel);
registerPanel.style.display = 'none'; hidePanel(registerPanel);
adminSetupPanel.style.display = 'block'; showPanel(adminSetupPanel);
}); });
document.getElementById('back-to-login').addEventListener('click', () => { document.getElementById('back-to-login').addEventListener('click', () => {
loginPanel.style.display = 'block'; showPanel(loginPanel);
registerPanel.style.display = 'none'; hidePanel(registerPanel);
adminSetupPanel.style.display = 'none'; hidePanel(adminSetupPanel);
}); });
return true; return true;
@@ -660,9 +666,9 @@ document.addEventListener('DOMContentLoaded', () => {
// Check if admin account exists (customize this as needed) // Check if admin account exists (customize this as needed)
const isFirstRun = await checkFirstRun(); const isFirstRun = await checkFirstRun();
if (isFirstRun) { if (isFirstRun) {
loginPanel.style.display = 'none'; hidePanel(loginPanel);
registerPanel.style.display = 'none'; hidePanel(registerPanel);
adminSetupPanel.style.display = 'block'; showPanel(adminSetupPanel);
} }
} catch (error) { } catch (error) {
console.error('Authentication check failed:', error); console.error('Authentication check failed:', error);
@@ -740,8 +746,8 @@ if (isLoginPage && registerForm) {
// Switch to login panel after 2 seconds // Switch to login panel after 2 seconds
setTimeout(() => { setTimeout(() => {
loginPanel.style.display = 'block'; showPanel(loginPanel);
registerPanel.style.display = 'none'; hidePanel(registerPanel);
}, 2000); }, 2000);
} catch (error) { } catch (error) {
const errorMsg = window.i18n ? window.i18n.t('auth.admin_create_error') : 'Error registering account'; 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 // Wait 2 seconds then switch to login panel
setTimeout(() => { setTimeout(() => {
loginPanel.style.display = 'block'; showPanel(loginPanel);
adminSetupPanel.style.display = 'none'; hidePanel(adminSetupPanel);
if (adminSetupSuccess) adminSetupSuccess.style.display = 'none'; if (adminSetupSuccess) adminSetupSuccess.style.display = 'none';
}, 2000); }, 2000);
static/js/views/profile/profile.js
+4 -4
View File
@@ -84,8 +84,8 @@ async function init() {
} catch (oidcErr) { } catch (oidcErr) {
} }
document.getElementById('loading').style.display = 'none'; document.getElementById('loading').classList.add('hidden');
document.getElementById('main-content').style.display = 'block'; document.getElementById('main-content').classList.remove('hidden');
} catch (e) { } catch (e) {
console.error(e); console.error(e);
showError(); showError();
@@ -93,8 +93,8 @@ async function init() {
} }
function showError() { function showError() {
document.getElementById('loading').style.display = 'none'; document.getElementById('loading').classList.add('hidden');
document.getElementById('auth-error').style.display = 'block'; document.getElementById('auth-error').classList.remove('hidden');
} }
async function changePassword(e) { async function changePassword(e) {
static/login.html
+1 -1
View File
@@ -194,7 +194,7 @@
</div> </div>
</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">
<div class="auth-logo-icon"> <div class="auth-logo-icon">
<svg viewBox="0 0 500 500"> <svg viewBox="0 0 500 500">