Skip to content

Commit 36480a2

Browse files
htdguidehtdguide
committed
Disabled icons function added
1 parent f8312d8 commit 36480a2

File tree

6 files changed

+94
-83
lines changed

6 files changed

+94
-83
lines changed

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,6 @@
1414
<body>
1515
<div id="root"></div>
1616
<script type="module" src="/main/main.jsx"></script>
17-
<noscript>You need to enable JavaScript to run webOS .</noscript>
17+
<noscript>You need to enable JavaScript to run webOS.</noscript>
1818
</body>
1919
</html>

‎src/webOS/components/DesktopIcon/DesktopIcon.jsx‎

Lines changed: 27 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
// src/components/DesktopIcon/DesktopIcon.jsx
2-
31
import React, { useState, useRef, useEffect } from 'react';
42
import './DesktopIcon.css';
53

@@ -17,6 +15,9 @@ import {
1715
DOUBLE_TAP_DELAY
1816
} from '../../configs/DesktopIconConfig/DesktopIconConfig.jsx';
1917

18+
// 30%-opacity overlay PNG
19+
import disabledOverlay from '../../media/icons/disable.png';
20+
2021
function DesktopIcon({
2122
wrapId,
2223
id,
@@ -29,6 +30,7 @@ function DesktopIcon({
2930
disableClick,
3031
clearDisableClick,
3132
icon,
33+
available = true, // ← new prop
3234
position: controlledPosition,
3335
onPositionChange
3436
}) {
@@ -81,30 +83,19 @@ function DesktopIcon({
8183
);
8284
}
8385

86+
// Hold/drag/tap interactions (unchanged)…
8487
const handleMouseDown = (e) => {
8588
if (isSelected && selectedCount > 1 && onGroupMouseDown) {
8689
onGroupMouseDown(e);
8790
return;
8891
}
8992
e.preventDefault();
90-
if (enabled) {
91-
log(
92-
'userInteraction',
93-
`Mouse down on "${name}" at clientX=${e.clientX},clientY=${e.clientY}`
94-
);
95-
}
9693
startHold(
9794
e.clientX,
9895
e.clientY,
9996
iconRef,
10097
setHoldTimer,
10198
(x, y, offsetX, offsetY) => {
102-
if (enabled) {
103-
log(
104-
'userInteraction',
105-
`Start dragging "${name}" at x=${x},y=${y}`
106-
);
107-
}
10899
startDragging(
109100
x,
110101
y,
@@ -137,24 +128,12 @@ function DesktopIcon({
137128
});
138129
return;
139130
}
140-
if (enabled) {
141-
log(
142-
'userInteraction',
143-
`Touch start on "${name}" at x=${touch.clientX},y=${touch.clientY}`
144-
);
145-
}
146131
startHold(
147132
touch.clientX,
148133
touch.clientY,
149134
iconRef,
150135
setHoldTimer,
151136
(x, y, offsetX, offsetY) => {
152-
if (enabled) {
153-
log(
154-
'userInteraction',
155-
`Start drag (touch) "${name}" at x=${x},y=${y}`
156-
);
157-
}
158137
startDragging(
159138
x,
160139
y,
@@ -177,15 +156,8 @@ function DesktopIcon({
177156
);
178157
};
179158

180-
const wrapperOnClick = () => {
181-
if (enabled) log('userInteraction', `Single-click "${name}"`);
182-
onClick();
183-
};
184-
185-
const wrapperOnDoubleClick = () => {
186-
if (enabled) log('userInteraction', `Double-click "${name}"`);
187-
onDoubleClick();
188-
};
159+
const wrapperOnClick = () => onClick();
160+
const wrapperOnDoubleClick = () => onDoubleClick();
189161

190162
const iconStyle = {
191163
'--icon-width': `${iconWidth}px`,
@@ -210,12 +182,8 @@ function DesktopIcon({
210182
style={iconStyle}
211183
onMouseDown={handleMouseDown}
212184
onTouchStart={handleTouchStart}
213-
onMouseUp={() => {
214-
if (enabled) log('userInteraction', `Mouse up "${name}"`);
215-
cancelHold(holdTimer, setHoldTimer);
216-
}}
185+
onMouseUp={() => cancelHold(holdTimer, setHoldTimer)}
217186
onTouchEnd={(e) => {
218-
if (enabled) log('userInteraction', `Touch end "${name}"`);
219187
cancelHold(holdTimer, setHoldTimer);
220188
if (disableClick) {
221189
clearDisableClick();
@@ -229,10 +197,7 @@ function DesktopIcon({
229197
DOUBLE_TAP_DELAY
230198
);
231199
}}
232-
onMouseLeave={() => {
233-
if (enabled) log('userInteraction', `Mouse leave "${name}"`);
234-
cancelHold(holdTimer, setHoldTimer);
235-
}}
200+
onMouseLeave={() => cancelHold(holdTimer, setHoldTimer)}
236201
onClick={(e) => {
237202
e.stopPropagation();
238203
if (disableClick) {
@@ -248,12 +213,29 @@ function DesktopIcon({
248213
);
249214
}}
250215
>
251-
<div className="icon-frame">
216+
<div className="icon-frame" style={{ position: 'relative' }}>
252217
<div className="icon-highlight" />
253218
<div
254219
className="icon-image"
255220
style={{ backgroundImage: `url(${icon})` }}
256221
/>
222+
{/* Disabled-overlay */}
223+
{!available && (
224+
<img
225+
src={disabledOverlay}
226+
alt={`${name} disabled`}
227+
style={{
228+
position: 'absolute',
229+
top: 0,
230+
left: 0,
231+
width: '100%',
232+
height: '100%',
233+
opacity: 0.9,
234+
pointerEvents: 'none',
235+
zIndex: 2
236+
}}
237+
/>
238+
)}
257239
</div>
258240
<div className="icon-label">{name}</div>
259241
</div>

‎src/webOS/components/Dock/Dock.jsx‎

Lines changed: 39 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
// src/components/Dock/Dock.jsx
2-
31
import React, { useState, useEffect, useLayoutEffect } from 'react';
42
import { useDock } from '../../interactions/useDock/useDock.jsx';
5-
import { AppsContext } from '../../contexts/AppsContext/AppsContext';
3+
import { AppsContext } from '../../contexts/AppsContext/AppsContext.jsx';
64
import DOCK_CONFIG from '../../configs/DockConfig/DockConfig';
75
import { useDeviceInfo } from '../../contexts/DeviceInfoProvider/DeviceInfoProvider';
86
import { useStateManager } from '../../stores/StateManager/StateManager';
@@ -18,6 +16,7 @@ import {
1816
getTooltipArrowStyle,
1917
getOpenIndicatorStyle,
2018
} from './DockStyle';
19+
import disabledOverlay from '../../media/icons/disable.png'; // <- your 30%-opacity overlay image
2120

2221
export default function Dock() {
2322
const {
@@ -66,15 +65,12 @@ export default function Dock() {
6665
useLogger,
6766
});
6867

69-
// keep opacity true until after slide finishes
7068
const [fadeVisible, setFadeVisible] = useState(isDockVisible);
71-
72-
// measure Safari’s bottom toolbar on iPhone BEFORE paint
7369
const [toolbarOffset, setToolbarOffset] = useState(0);
70+
7471
useLayoutEffect(() => {
7572
const updateOffset = () => {
7673
if (window.visualViewport) {
77-
// never go below zero
7874
const diff = window.innerHeight - window.visualViewport.height;
7975
setToolbarOffset(diff > 0 ? diff : 0);
8076
}
@@ -98,14 +94,11 @@ export default function Dock() {
9894
return () => clearTimeout(timer);
9995
}, [isDockVisible]);
10096

101-
// base style (incl. your existing safe-area handling)
10297
const outerStyle = {
10398
...getOuterContainerStyle(DOCK_POSITION, DOCK_MARGIN, isDockVisible),
10499
opacity: fadeVisible ? 1 : 0,
105-
top: 'auto', // ensure we don't accidentally get pushed to the top
100+
top: 'auto',
106101
};
107-
108-
// if bottom‐docked, include the clamped toolbarOffset
109102
if (DOCK_POSITION === 'bottom') {
110103
outerStyle.bottom = `calc(${toolbarOffset + DOCK_MARGIN}px + env(safe-area-inset-bottom))`;
111104
}
@@ -130,20 +123,23 @@ export default function Dock() {
130123
{appsToRender.map((app, index) => (
131124
<div
132125
key={app.id}
133-
style={getIconContainerStyle({
134-
index,
135-
paginationEnabled,
136-
scales,
137-
currentPage,
138-
iconsPerPage,
139-
ICON_SIZE,
140-
ICON_MARGIN,
141-
ADDITIONAL_MARGIN,
142-
shouldTransition,
143-
INITIAL_TRANSITION,
144-
NO_TRANSITION,
145-
DOCK_POSITION,
146-
})}
126+
style={{
127+
...getIconContainerStyle({
128+
index,
129+
paginationEnabled,
130+
scales,
131+
currentPage,
132+
iconsPerPage,
133+
ICON_SIZE,
134+
ICON_MARGIN,
135+
ADDITIONAL_MARGIN,
136+
shouldTransition,
137+
INITIAL_TRANSITION,
138+
NO_TRANSITION,
139+
DOCK_POSITION,
140+
}),
141+
position: 'relative', // allow overlay
142+
}}
147143
onClick={() => openApp(app)}
148144
onMouseEnter={() => handleIconMouseEnter(app.id)}
149145
onMouseLeave={handleIconMouseLeave}
@@ -164,9 +160,26 @@ export default function Dock() {
164160
</div>
165161
)}
166162

163+
{/* App icon */}
167164
<img src={app.icon} alt={app.name} style={iconImageStyle} />
168165

169-
{/* Open-indicator dot disabled */}
166+
{/* Disabled-overlay */}
167+
{!app.available && (
168+
<img
169+
src={disabledOverlay}
170+
alt={`${app.name} disabled`}
171+
style={{
172+
...iconImageStyle,
173+
position: 'absolute',
174+
top: 0,
175+
left: 0,
176+
opacity: 0.9,
177+
pointerEvents: 'none',
178+
}}
179+
/>
180+
)}
181+
182+
{/* Open-indicator dot (disabled by default) */}
170183
{/*
171184
{openedApps.includes(app.id) && (
172185
<div style={getOpenIndicatorStyle(DOCK_POSITION)} />

‎src/webOS/components/IconGrid/IconGrid.jsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
// src/components/IconGrid/IconGrid.jsx
21
import React, { useState, useContext, useEffect, useRef } from 'react';
32
import { useDraggableWindow } from '../../components/DraggableWindow/DraggableWindowWrap.jsx';
43
import { AppsContext } from '../../contexts/AppsContext/AppsContext.jsx';
@@ -308,15 +307,15 @@ function IconGrid({ onOpenApp }) {
308307
window.addEventListener('touchend', onEnd);
309308
};
310309

311-
// ── Recompute on resize: clamp only OOB icons, keep in-bounds stable ──
310+
// ── Recompute on resize ──────────────────────────────────────────
312311
useEffect(() => {
313312
const handleResize = () => {
314313
if (!containerRef.current) return;
315314
const { clientWidth: width, clientHeight: height } = containerRef.current;
316315
const maxCols = Math.floor((width - leftMargin - rightMargin) / cellSize);
317316
const maxRows = Math.floor((height - topMargin - bottomMargin) / cellSize);
318317

319-
// build occupied set of cells for in-bounds icons
318+
// occupied set for in-bounds
320319
const occupied = new Set();
321320
const outOfBounds = [];
322321
Object.entries(primaryGridRef.current).forEach(([id, { col, row }]) => {
@@ -328,7 +327,7 @@ function IconGrid({ onOpenApp }) {
328327
});
329328

330329
const newPositions = {};
331-
// place in-bounds icons at their grid spots
330+
// in-bounds
332331
Object.entries(primaryGridRef.current).forEach(([id, { col, row }]) => {
333332
if (occupied.has(`${col},${row}`)) {
334333
newPositions[id] = {
@@ -338,7 +337,7 @@ function IconGrid({ onOpenApp }) {
338337
}
339338
});
340339

341-
// clamp out-of-bounds icons to nearest free cells
340+
// clamp OOB
342341
outOfBounds.forEach(([id, { col, row }]) => {
343342
const clampCol = Math.max(0, Math.min(col, maxCols));
344343
const clampRow = Math.max(0, Math.min(row, maxRows));
@@ -390,6 +389,7 @@ function IconGrid({ onOpenApp }) {
390389
id={cfg.id}
391390
name={cfg.name}
392391
icon={cfg.icon}
392+
available={cfg.available}
393393
isSelected={selectedIcons.includes(cfg.id)}
394394
selectedCount={selectedIcons.length}
395395
onClick={() => handleIconClick(cfg.id)}

0 commit comments

Comments
 (0)