GeneralBots/botui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: replace tailwind utility classes with custom css in window manager to ensure theme consistency

Browse source
This commit is contained in:
Rodrigo Rodriguez (Pragmatismo) 2026-02-28 12:09:04 -03:00
parent 7279104bbc
commit d13c82b7c8
2 changed files with 46 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
ui/suite/css/desktop.css
View file

@ -136,3 +136,45 @@
.overflow-y-auto { overflow-y: auto; } .overflow-y-auto { overflow-y: auto; }
.bg-\[\#fafdfa\] { background-color: var(--bg, #fafdfa); } .bg-\[\#fafdfa\] { background-color: var(--bg, #fafdfa); }
.window-header {
height: 40px;
background-color: var(--surface, rgba(255, 255, 255, 0.95));
border-bottom: 1px solid var(--border, #e5e7eb);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
user-select: none;
cursor: move;
}
.window-header .font-mono {
font-family: 'Fira Code', monospace;
font-size: 12px;
font-weight: 700;
color: var(--accent, #16a34a);
letter-spacing: 0.025em;
}
.window-header .flex {
display: flex;
gap: 12px;
color: var(--text-muted, #9ca3af);
}
.window-header button {
background: transparent;
border: none;
cursor: pointer;
transition: color 0.15s ease;
}
.window-header button:hover {
color: var(--text, #4b5563);
}
.window-header .btn-close:hover {
color: var(--error, #ef4444);
}
.window-content {
flex: 1;
overflow-y: auto;
position: relative;
background-color: var(--bg, #ffffff);
}

8
ui/suite/js/window-manager.js
View file

@ -39,14 +39,14 @@ if (typeof window.WindowManager === 'undefined') {
const top = 100 + offset; const top = 100 + offset;
const left = 150 + offset; const left = 150 + offset;
windowEl.className = 'absolute w-[700px] h-[500px] rounded-lg shadow-2xl flex flex-col border overflow-hidden window-element'; windowEl.className = 'window-element';
windowEl.style.top = `${top}px`; windowEl.style.top = `${top}px`;
windowEl.style.left = `${left}px`; windowEl.style.left = `${left}px`;
windowEl.style.zIndex = this.zIndexCounter++; windowEl.style.zIndex = this.zIndexCounter++;
windowEl.innerHTML = ` windowEl.innerHTML = `
<!-- Header (Draggable) --> <!-- Header (Draggable) -->
<div class="window-header h-10 backdrop-blur flex items-center justify-between px-4 border-b select-none cursor-move"> <div class="window-header">
<div class="font-mono text-xs font-bold text-brand-600 tracking-wide">${title}</div> <div class="font-mono text-xs font-bold text-brand-600 tracking-wide">${title}</div>
<div class="flex space-x-3 text-gray-400"> <div class="flex space-x-3 text-gray-400">
<button class="btn-minimize hover:text-gray-600" onclick="window.WindowManager.toggleMinimize('${id}')"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line></svg></button> <button class="btn-minimize hover:text-gray-600" onclick="window.WindowManager.toggleMinimize('${id}')"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line></svg></button>
@ -70,7 +70,7 @@ if (typeof window.WindowManager === 'undefined') {
if (this.taskbarApps) { if (this.taskbarApps) {
const taskbarIcon = document.createElement('div'); const taskbarIcon = document.createElement('div');
taskbarIcon.id = `taskbar-item-${id}`; taskbarIcon.id = `taskbar-item-${id}`;
taskbarIcon.className = 'h-10 w-12 flex items-center justify-center cursor-pointer rounded border-b-2 transition-all taskbar-icon'; taskbarIcon.className = 'taskbar-item taskbar-icon';
taskbarIcon.onclick = () => this.toggleMinimize(id); taskbarIcon.onclick = () => this.toggleMinimize(id);
let iconHtml = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect></svg>'; let iconHtml = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect></svg>';
@ -284,7 +284,7 @@ if (typeof window.WindowManager === 'undefined') {
makeResizable(windowEl) { makeResizable(windowEl) {
// Implement simple bottom-right resize for now // Implement simple bottom-right resize for now
// In a full implementation, you'd add invisible border handles // In a full implementation, you'd add invisible handles
windowEl.style.resize = 'both'; windowEl.style.resize = 'both';
// Note: CSS resize creates conflicts with custom dragging/resizing if not careful. // Note: CSS resize creates conflicts with custom dragging/resizing if not careful.
// For a true "WinBox" feel, custom handles (divs) on all 8 edges/corners are needed. // For a true "WinBox" feel, custom handles (divs) on all 8 edges/corners are needed.