Skip to content

Commit aeefc2c

Browse files
chriscareycodechriscareycode
committed
BottomPanel auto hide, and some style changes
1 parent f75f3b8 commit aeefc2c

5 files changed

Lines changed: 98 additions & 19 deletions

File tree

‎src/components/hosts/HostItem.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,7 @@ class HostItem extends Component<HostItemProps> {
160160

161161
<div className="host-item-host-name">{e.name}</div>
162162

163-
<span className="ml-2 cursor-pointer" onClick={this.openNagiosHostPage}><FontAwesomeIcon icon={faUpRightFromSquare} size="xs" /></span>
163+
<span className="ml-1.5 cursor-pointer" onClick={this.openNagiosHostPage}><FontAwesomeIcon icon={faUpRightFromSquare} size="xs" /></span>
164164

165165
{/*<span className="alert-item-description">{e.description}</span>*/}
166166

‎src/components/llm/LocalLLM.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -856,7 +856,7 @@ export default function LocalLLM() {
856856
>
857857
<div className="text-4xl leading-none row-span-2 col-start-1 flex items-start">{responseEmoji}</div>
858858

859-
<div className="local-llm-response-content">
859+
<div className={`local-llm-response-content${borderClasses === 'border-green' ? ' text-[1.5em]' : ''}`}>
860860
{/* Collapsible thinking/reasoning section */}
861861
{currentHistoryItem?.thinkingContent && (
862862
<div className="mb-3">

‎src/components/panels/BottomPanel.css‎

Lines changed: 49 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242

4343
font-size: 0.9em;
4444
color: #999;
45-
cursor: pointer;
45+
cursor: pointer !important;
4646
}
4747

4848
.BottomPanel>.bottom-panel-area>.bottom-panel-area-text {
@@ -60,7 +60,7 @@
6060
padding: 2px 5px;
6161
font-size: 0.9em;
6262
color: #999;
63-
cursor: pointer;
63+
cursor: pointer !important;
6464
}
6565

6666
.bottom-panel-nav-area {
@@ -70,7 +70,7 @@
7070
transform: translateX(-50%);
7171
z-index: 12;
7272

73-
height: 49px;
73+
height: 55px;
7474
transition: bottom 250ms linear, opacity 350ms linear;
7575

7676
border: 2px solid #333;
@@ -119,12 +119,13 @@
119119
text-align: center;
120120
display: inline-block;
121121
vertical-align: middle;
122-
cursor: pointer;
122+
cursor: pointer !important;
123123
}
124124

125125
.BottomPanel .nav-sidebar-icon .nav-sidebar-icon-text {
126126
font-size: 0.8em;
127127
color: #555;
128+
transition: color 0.1s ease;
128129
}
129130

130131
.BottomPanel .nav-sidebar-icon span {
@@ -137,6 +138,7 @@
137138
.BottomPanel .nav-sidebar-icon svg {
138139
font-size: 1.2em;
139140
color: #666;
141+
transition: color 0.1s ease;
140142
}
141143

142144
/*
@@ -179,15 +181,53 @@
179181

180182
.BottomPanel a {
181183
text-decoration: none;
184+
cursor: pointer;
185+
}
186+
187+
.BottomPanel .nav-sidebar-icon * {
188+
cursor: pointer !important;
189+
}
190+
191+
/* active state colors for menu items */
192+
.BottomPanel .nav-sidebar-icon.nav-dash .is-active>svg,
193+
.BottomPanel .nav-sidebar-icon.nav-dash .is-active>.nav-sidebar-icon-text {
194+
color: #4ade80; /* green */
195+
}
196+
197+
.BottomPanel .nav-sidebar-icon.nav-settings .is-active>svg,
198+
.BottomPanel .nav-sidebar-icon.nav-settings .is-active>.nav-sidebar-icon-text {
199+
color: #60a5fa; /* blue */
200+
}
201+
202+
.BottomPanel .nav-sidebar-icon.nav-update .is-active>svg,
203+
.BottomPanel .nav-sidebar-icon.nav-update .is-active>.nav-sidebar-icon-text {
204+
color: #fb923c; /* orange */
205+
}
206+
207+
.BottomPanel .nav-sidebar-icon.nav-info .is-active>svg,
208+
.BottomPanel .nav-sidebar-icon.nav-info .is-active>.nav-sidebar-icon-text {
209+
color: #c084fc; /* purple */
210+
}
211+
212+
/* hover colors for menu items */
213+
.BottomPanel .nav-sidebar-icon.nav-dash:hover svg,
214+
.BottomPanel .nav-sidebar-icon.nav-dash:hover .nav-sidebar-icon-text {
215+
color: #4ade80; /* green */
216+
}
217+
218+
.BottomPanel .nav-sidebar-icon.nav-settings:hover svg,
219+
.BottomPanel .nav-sidebar-icon.nav-settings:hover .nav-sidebar-icon-text {
220+
color: #60a5fa; /* blue */
182221
}
183222

184-
.BottomPanel .is-active>svg {
185-
color: #eee !important;
186-
font-size: 0.9em !important;
223+
.BottomPanel .nav-sidebar-icon.nav-update:hover svg,
224+
.BottomPanel .nav-sidebar-icon.nav-update:hover .nav-sidebar-icon-text {
225+
color: #fb923c; /* orange */
187226
}
188227

189-
.BottomPanel .is-active>.nav-sidebar-icon-text {
190-
color: #eee;
228+
.BottomPanel .nav-sidebar-icon.nav-info:hover svg,
229+
.BottomPanel .nav-sidebar-icon.nav-info:hover .nav-sidebar-icon-text {
230+
color: #c084fc; /* purple */
191231
}
192232

193233
/* more footer */

‎src/components/panels/BottomPanel.tsx‎

Lines changed: 45 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
* along with this program. If not, see <https://www.gnu.org/licenses/>.
1717
*/
1818

19-
import { memo, useEffect, useState } from 'react';
19+
import { memo, useCallback, useEffect, useRef, useState } from 'react';
2020

2121
// State Management
2222
import { useAtom, useAtomValue } from 'jotai';
@@ -42,6 +42,8 @@ interface BottomPanelProps {
4242
currentVersionString: string;
4343
}
4444

45+
const AUTO_HIDE_DELAY_MS = 100 * 1000; // 10 seconds
46+
4547
const BottomPanel = ({
4648
latestVersion,
4749
latestVersionString,
@@ -52,6 +54,30 @@ const BottomPanel = ({
5254
const clientSettings = useAtomValue<ClientSettings>(clientSettingsAtom);
5355

5456
const [isVisible, setIsVisible] = useState(false);
57+
const autoHideTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
58+
59+
// Clear the auto-hide timer
60+
const clearAutoHideTimer = useCallback(() => {
61+
if (autoHideTimerRef.current) {
62+
clearTimeout(autoHideTimerRef.current);
63+
autoHideTimerRef.current = null;
64+
}
65+
}, []);
66+
67+
// Start the auto-hide timer
68+
const startAutoHideTimer = useCallback(() => {
69+
clearAutoHideTimer();
70+
autoHideTimerRef.current = setTimeout(() => {
71+
setIsVisible(false);
72+
}, AUTO_HIDE_DELAY_MS);
73+
}, [clearAutoHideTimer]);
74+
75+
// Clean up timer on unmount
76+
useEffect(() => {
77+
return () => {
78+
clearAutoHideTimer();
79+
};
80+
}, [clearAutoHideTimer]);
5581

5682
const [skipVersion, setSkipVersion] = useAtom(skipVersionAtom);
5783

@@ -63,6 +89,9 @@ const BottomPanel = ({
6389
// React Router 6 navigate
6490
navigate(pathname);
6591

92+
// Clear auto-hide timer since user selected a menu item
93+
clearAutoHideTimer();
94+
6695
// Close menu
6796
setTimeout(() => {
6897
setIsVisible(false);
@@ -88,7 +117,17 @@ const BottomPanel = ({
88117
const clickedNagiosTv = (e: React.MouseEvent<HTMLElement>) => {
89118
e.preventDefault();
90119
e.stopPropagation(); // Prevent it from triggering standard menu click
91-
setIsVisible(visible => !visible);
120+
setIsVisible(visible => {
121+
const newVisible = !visible;
122+
if (newVisible) {
123+
// Start auto-hide timer when panel is opened
124+
startAutoHideTimer();
125+
} else {
126+
// Clear timer when panel is manually closed
127+
clearAutoHideTimer();
128+
}
129+
return newVisible;
130+
});
92131
};
93132

94133
const clickedUpdateAvailable = (e: React.MouseEvent<HTMLElement>) => {
@@ -166,7 +205,7 @@ const BottomPanel = ({
166205

167206
<div className={isVisible ? 'bottom-panel-nav-area bottom-panel-nav-area-visible' : 'bottom-panel-nav-area'}>
168207

169-
<div className="nav-sidebar-icon">
208+
<div className="nav-sidebar-icon nav-dash">
170209
<span>
171210
<NavLink className={({ isActive }) => (isActive ? 'is-active' : '')} to="/" onClick={clickedDashboard}>
172211
<FontAwesomeIcon
@@ -178,7 +217,7 @@ const BottomPanel = ({
178217
</span>
179218
</div>
180219

181-
<div className="nav-sidebar-icon" >
220+
<div className="nav-sidebar-icon nav-settings">
182221
<span>
183222
<NavLink className={({ isActive }) => (isActive ? 'is-active' : '')} to="/settings" onClick={clickedSettings}>
184223
<FontAwesomeIcon
@@ -190,7 +229,7 @@ const BottomPanel = ({
190229
</span>
191230
</div>
192231

193-
<div className="nav-sidebar-icon">
232+
<div className="nav-sidebar-icon nav-update">
194233
<span>
195234
<NavLink className={({ isActive }) => (isActive ? 'is-active' : '')} to="/update" onClick={clickedUpdate}>
196235
<FontAwesomeIcon
@@ -202,7 +241,7 @@ const BottomPanel = ({
202241
</span>
203242
</div>
204243

205-
<div className="nav-sidebar-icon">
244+
<div className="nav-sidebar-icon nav-info">
206245
<span>
207246
<NavLink className={({ isActive }) => (isActive ? 'is-active' : '')} to="/help" onClick={clickedInfo}>
208247
<FontAwesomeIcon

‎src/components/services/ServiceItem.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -187,10 +187,10 @@ class ServiceItem extends Component<ServiceItemProps> {
187187
<div className="service-item-left-first-line">
188188

189189
<div className="service-item-host-name">{e.host_name}</div>
190-
<span className="ml-2 cursor-pointer" onClick={this.openNagiosHostPage}><FontAwesomeIcon icon={faUpRightFromSquare} size="xs" /></span>
190+
<span className="ml-1.5 cursor-pointer" onClick={this.openNagiosHostPage}><FontAwesomeIcon icon={faUpRightFromSquare} size="xs" /></span>
191191

192192
<span className="service-item-description">{e.description}</span>
193-
<span className="cursor-pointer" onClick={this.openNagiosServicePage}><FontAwesomeIcon icon={faUpRightFromSquare} size="xs" /></span>
193+
<span className="-ml-1 cursor-pointer" onClick={this.openNagiosServicePage}><FontAwesomeIcon icon={faUpRightFromSquare} size="xs" /></span>
194194

195195
<span className={serviceTextClass(e.status)}>
196196
<span className="ml-2 plugin-output">{e.plugin_output}</span>

0 commit comments

Comments
 (0)