Skip to content

Commit dd4176b

Browse files
gaminghackintoshgaminghackintosh
committed
upd. icon for header in settings
1 parent 9dc6dd4 commit dd4176b

57 files changed

Lines changed: 935 additions & 710 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎src/assets/icons/apps/Light_Themes/Apple_Music.png‎

32 KB
Loading

‎src/features/settings/SettingsContent.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { SettingsSidebar } from "./SettingsContent/components";
55
import { AboutPanel } from "./SettingsContent/panels/AboutPanel";
66
import { WallpaperPanel } from "./SettingsContent/panels/WallpaperPanel";
77

8-
export const SettingsContent = memo(function SettingsContent({ currentWallpaper, onWallpaperChange }) {
8+
const SettingsContent = memo(function SettingsContent({ currentWallpaper, onWallpaperChange }) {
99
const [activeTab, setActiveTab] = useState("general");
1010
const [searchQuery, setSearchQuery] = useState("");
1111
const [isExpanded, setIsExpanded] = useState(false);
@@ -50,3 +50,4 @@ export const SettingsContent = memo(function SettingsContent({ currentWallpaper,
5050
</div>
5151
);
5252
});
53+
export default SettingsContent;

‎src/features/settings/SettingsContent/components/SettingsSidebar.jsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,7 @@ export const SettingsSidebar = memo(({
1212
onTabClick,
1313
filteredSections
1414
}) => {
15-
const { onClose, onMinimize, onFocus, onZoom, onTitleMouseDown } = useContext(WindowContext);
16-
17-
const handleZoom = useCallback(() => {
18-
onZoom?.();
19-
}, [onZoom]);
15+
const { onClose, onMinimize, onZoom, onTitleMouseDown } = useContext(WindowContext);
2016

2117
const handleAppleIdClick = useCallback(() => {
2218
onTabClick("appleid");
@@ -25,7 +21,7 @@ export const SettingsSidebar = memo(({
2521
return (
2622
<div className="settings-sidebar">
2723
<div className="sidebar-drag-handle" onMouseDown={(e) => { if (e.target.closest('button, input')) return; onTitleMouseDown(e); }}>
28-
<TrafficLights onClose={onClose} onMinimize={onMinimize} onZoom={handleZoom} />
24+
<TrafficLights onClose={onClose} onMinimize={onMinimize} onZoom={onZoom} />
2925
</div>
3026

3127
<SearchBar value={searchQuery} onChange={e => setSearchQuery(e.target.value)} />

‎src/features/settings/SettingsContent/components/TrafficLights.jsx‎

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,22 @@
1-
import React, { memo } from "react";
1+
import React from "react";
22

3-
export const TrafficLights = memo(({ onClose, onMinimize, onZoom }) => (
3+
export const TrafficLights = ({ onClose, onMinimize, onZoom }) => (
44
<div className="sidebar-traffic-lights">
5-
<button className="traffic-light traffic-light--close" onClick={onClose} aria-label="Close" />
6-
<button className="traffic-light traffic-light--minimize" onClick={onMinimize} aria-label="Minimize" />
7-
<button className="traffic-light traffic-light--zoom" onClick={onZoom} aria-label="Zoom" />
5+
<button className="traffic-light traffic-light--close" onClick={onClose} aria-label="Close">
6+
<svg width="7" height="7" fill="none" xmlns="http://www.w3.org/2000/svg">
7+
<path stroke="#000" strokeWidth="1.2" strokeLinecap="round" d="M1.182 5.99L5.99 1.182m0 4.95L1.182 1.323" />
8+
</svg>
9+
</button>
10+
<button className="traffic-light traffic-light--minimize" onClick={onMinimize} aria-label="Minimize">
11+
<svg fill="none" xmlns="http://www.w3.org/2000/svg" width="6" height="1">
12+
<path stroke="#000" strokeLinecap="round" d="M.61.703h5.8" strokeWidth="2" />
13+
</svg>
14+
</button>
15+
<button className="traffic-light traffic-light--zoom" onClick={onZoom} aria-label="Zoom">
16+
<svg viewBox="0 0 13 13" xmlns="http://www.w3.org/2000/svg" fill="none" fillRule="evenodd" clipRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2">
17+
<path d="M4.871 3.553L9.37 8.098V3.553H4.871zm3.134 5.769L3.506 4.777v4.545h4.499z" />
18+
<circle cx="6.438" cy="6.438" r="6.438" />
19+
</svg>
20+
</button>
821
</div>
9-
));
22+
);

‎src/features/settings/SettingsContent/constants.jsx‎

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -33,14 +33,18 @@ import { SettingsPanel } from "@/features/settings/Settings_Components/SettingsP
3333
import {
3434
AccessibilitySettings, AppearanceSettings, BluetoothSettings, ControlCenterSettings,
3535
DesktopDockSettings, DisplaysSettings, EnergySaverSettings, FocusSettings,
36-
GameCenterSettings, GameControllersSettings, GeneralSettings, InternetAccountsSettings,
37-
LockScreenSettings, LoginPasswordSettings, MouseSettings, NetworkSettings,
38-
NotificationsSettings, PasswordsSettings, PrivacySettings, SoundSettings,
39-
UsersSettings, VPNSettings, WiFiSettings,
36+
GameCenterSettings, GameControllersSettings, GeneralSettings,
37+
LockscreenSettings as LockScreenSettings, LoginpasswordSettings as LoginPasswordSettings,
38+
MouseSettings, NetworkSettings, NotificationsSettings, PasswordsSettings,
39+
PrivacySettings, SoundSettings, UsersgroupsSettings as UsersSettings,
40+
VPNSettings, WiFiSettings, ScreenSaverSettings, WallpaperSettings,
41+
SiriSettings, KeyboardSettings, PrintersSettings,
42+
InternetAccountsSettings, WalletSettings,
4043
} from "@/features/settings/Settings_Components/panels";
4144

42-
const UnimplementedPanel = memo(({ title }) => (
43-
<SettingsPanel title={title}>
45+
// ✅ UnimplementedPanel для заглушек
46+
const UnimplementedPanel = memo(({ title, icon }) => (
47+
<SettingsPanel title={title} icon={icon}>
4448
<div className="unimplemented-placeholder">
4549
<div className="unimplemented-icon">🚧</div>
4650
<h3>{title}</h3>
@@ -54,31 +58,38 @@ export const PANELS = {
5458
bluetooth: BluetoothSettings,
5559
network: NetworkSettings,
5660
vpn: VPNSettings,
61+
5762
notifications: NotificationsSettings,
5863
sound: SoundSettings,
5964
focus: FocusSettings,
65+
screentime: () => <UnimplementedPanel title="Screen Time" icon="storage" />,
66+
6067
general: GeneralSettings,
6168
appearance: AppearanceSettings,
6269
accessibility: AccessibilitySettings,
6370
controlcenter: ControlCenterSettings,
71+
siri: SiriSettings,
6472
privacy: PrivacySettings,
73+
6574
desktopdock: DesktopDockSettings,
6675
displays: DisplaysSettings,
76+
wallpaper: WallpaperSettings,
77+
screensaver: ScreenSaverSettings,
6778
energysaver: EnergySaverSettings,
79+
6880
lockscreen: LockScreenSettings,
6981
loginpassword: LoginPasswordSettings,
82+
usersgroups: UsersSettings,
83+
7084
passwords: PasswordsSettings,
7185
internetaccounts: InternetAccountsSettings,
7286
gamecenter: GameCenterSettings,
87+
wallet: WalletSettings,
88+
89+
keyboard: KeyboardSettings,
7390
mouse: MouseSettings,
7491
gamecontrollers: GameControllersSettings,
75-
usersgroups: UsersSettings,
76-
screentime: () => <UnimplementedPanel title="Screen Time" />,
77-
siri: () => <UnimplementedPanel title="Siri & Spotlight" />,
78-
wallet: () => <UnimplementedPanel title="Wallet & Apple Pay" />,
79-
keyboard: () => <UnimplementedPanel title="Keyboard" />,
80-
printersscanners: () => <UnimplementedPanel title="Printers & Scanners" />,
81-
screensaver: () => <UnimplementedPanel title="Screen Saver" />,
92+
printersscanners: PrintersSettings
8293
};
8394

8495
export const MENU_SECTIONS = [

‎src/features/settings/SettingsContent/panels/AboutPanel.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export const AboutPanel = memo(() => {
3838
};
3939

4040
return (
41-
<SettingsPanel title="About">
41+
<SettingsPanel title="About" hideHeader>
4242
<div className="about-panel">
4343

4444
{/* ── Hero ── */}

‎src/features/settings/Settings_Components/SettingsPanel.jsx‎

Lines changed: 202 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,216 @@ import React from "react";
22

33
// Импорты иконок
44
import settingsIcon from "@/assets/icons/apps/Light_Themes/settings_1.png";
5+
import notesIcon from "@/assets/icons/apps/Light_Themes/Notes.png";
6+
import launchpadIcon from "@/assets/icons/apps/Light_Themes/Launchpad.png";
7+
import calculatorIcon from "@/assets/icons/apps/Light_Themes/Calculator.png";
8+
import calendarIcon from "@/assets/icons/apps/Light_Themes/Calendrier.png";
9+
import safariIcon from "@/assets/icons/apps/Light_Themes/Safari.png";
10+
import finderIcon from "@/assets/icons/apps/Light_Themes/Finder.png";
11+
import musicIcon from "@/assets/icons/apps/Light_Themes/Apple_Music.png";
512

13+
import WifiIcon from "@/assets/icons/Settings_menuSections/Network/Wi-Fi.png";
14+
import BluetoothIcon from "@/assets/icons/Settings_menuSections/Network/Bluetooth.png";
15+
import NetworkIcon from "@/assets/icons/Settings_menuSections/Network/Network.ico";
16+
import VPNIcon from "@/assets/icons/Settings_menuSections/Network/VPN.png";
617

7-
export const SettingsPanel = ({ title, description, icon, children }) => {
8-
// Путь к иконкам (импортированные)
18+
// SVG иконки для разделов настроек
19+
const SettingsIcons = {
20+
wifi: <img src={WifiIcon} alt="Wi-Fi" />,
21+
bluetooth: <img src={BluetoothIcon} alt="Bluetooth" />,
22+
network: <img src={NetworkIcon} alt="Network" />,
23+
vpn: <img src={VPNIcon} alt="VPN" />,
24+
25+
display: (
26+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
27+
<rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
28+
<line x1="8" y1="21" x2="16" y2="21" />
29+
<line x1="12" y1="17" x2="12" y2="21" />
30+
</svg>
31+
),
32+
sound: (
33+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
34+
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
35+
<path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07" />
36+
</svg>
37+
),
38+
lock: (
39+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
40+
<rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
41+
<path d="M7 11V7a5 5 0 0 1 10 0v4" />
42+
</svg>
43+
),
44+
battery: (
45+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
46+
<rect x="1" y="6" width="18" height="12" rx="2" ry="2" />
47+
<line x1="23" y1="13" x2="23" y2="11" />
48+
</svg>
49+
),
50+
appearance: (
51+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
52+
<circle cx="12" cy="12" r="10" />
53+
<path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
54+
</svg>
55+
),
56+
menuBar: (
57+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
58+
<rect x="3" y="4" width="18" height="4" rx="1" />
59+
<rect x="3" y="16" width="18" height="4" rx="1" />
60+
<line x1="6" y1="8" x2="6" y2="8" />
61+
<line x1="10" y1="8" x2="10" y2="8" />
62+
<line x1="6" y1="20" x2="6" y2="20" />
63+
<line x1="10" y1="20" x2="10" y2="20" />
64+
</svg>
65+
),
66+
dock: (
67+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
68+
<rect x="4" y="18" width="4" height="4" rx="1" />
69+
<rect x="10" y="18" width="4" height="4" rx="1" />
70+
<rect x="16" y="18" width="4" height="4" rx="1" />
71+
</svg>
72+
),
73+
focus: (
74+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
75+
<circle cx="12" cy="12" r="10" />
76+
<line x1="12" y1="8" x2="12" y2="12" />
77+
<line x1="12" y1="16" x2="12.01" y2="16" />
78+
</svg>
79+
),
80+
notifications: (
81+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
82+
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
83+
<path d="M13.73 21a2 2 0 0 1-3.46 0" />
84+
</svg>
85+
),
86+
keyboard: (
87+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
88+
<rect x="2" y="4" width="20" height="16" rx="2" ry="2" />
89+
<line x1="6" y1="8" x2="6" y2="8" />
90+
<line x1="10" y1="8" x2="10" y2="8" />
91+
<line x1="14" y1="8" x2="14" y2="8" />
92+
<line x1="18" y1="8" x2="18" y2="8" />
93+
<line x1="6" y1="12" x2="6" y2="12" />
94+
<line x1="10" y1="12" x2="10" y2="12" />
95+
<line x1="14" y1="12" x2="14" y2="12" />
96+
<line x1="18" y1="12" x2="18" y2="12" />
97+
<line x1="7" y1="16" x2="17" y2="16" />
98+
</svg>
99+
),
100+
mouse: (
101+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
102+
<rect x="6" y="4" width="12" height="16" rx="6" />
103+
<line x1="12" y1="4" x2="12" y2="10" />
104+
</svg>
105+
),
106+
trackpad: (
107+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
108+
<rect x="4" y="4" width="16" height="16" rx="2" />
109+
<line x1="4" y1="18" x2="20" y2="18" />
110+
</svg>
111+
),
112+
printer: (
113+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
114+
<polyline points="6 9 6 2 18 2 18 9" />
115+
<path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2" />
116+
<rect x="6" y="14" width="12" height="8" />
117+
</svg>
118+
),
119+
sharing: (
120+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
121+
<circle cx="18" cy="5" r="3" />
122+
<circle cx="6" cy="12" r="3" />
123+
<circle cx="18" cy="19" r="3" />
124+
<line x1="8.59" y1="13.51" x2="15.42" y2="17.49" />
125+
<line x1="15.41" y1="6.51" x2="8.59" y2="10.49" />
126+
</svg>
127+
),
128+
datetime: (
129+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
130+
<circle cx="12" cy="12" r="10" />
131+
<polyline points="12 6 12 12 16 14" />
132+
</svg>
133+
),
134+
region: (
135+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
136+
<circle cx="12" cy="12" r="10" />
137+
<line x1="2" y1="12" x2="22" y2="12" />
138+
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
139+
</svg>
140+
),
141+
privacy: (
142+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
143+
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
144+
</svg>
145+
),
146+
security: (
147+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
148+
<rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
149+
<path d="M7 11V7a5 5 0 0 1 10 0v4" />
150+
</svg>
151+
),
152+
users: (
153+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
154+
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
155+
<circle cx="9" cy="7" r="4" />
156+
<path d="M23 21v-2a4 4 0 0 0-3-3.87" />
157+
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
158+
</svg>
159+
),
160+
storage: (
161+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
162+
<ellipse cx="12" cy="5" rx="9" ry="3" />
163+
<path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" />
164+
<path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" />
165+
</svg>
166+
),
167+
softwareupdate: (
168+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
169+
<path d="M21 12a9 9 0 1 1-6.219-8.56" />
170+
<polyline points="21 12 16 12 16 7" />
171+
</svg>
172+
),
173+
about: (
174+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
175+
<circle cx="12" cy="12" r="10" />
176+
<line x1="12" y1="16" x2="12" y2="12" />
177+
<line x1="12" y1="8" x2="12.01" y2="8" />
178+
</svg>
179+
),
180+
};
181+
182+
export const SettingsPanel = ({ title, description, icon, hideHeader = false, children }) => {
183+
// Путь к иконкам (импортированные или SVG)
9184
const iconPaths = {
10185
settings: settingsIcon,
186+
notes: notesIcon,
187+
launchpad: launchpadIcon,
188+
calculator: calculatorIcon,
189+
calendar: calendarIcon,
190+
safari: safariIcon,
191+
finder: finderIcon,
192+
music: musicIcon,
193+
};
194+
195+
const renderIcon = () => {
196+
if (iconPaths[icon]) {
197+
return <img src={iconPaths[icon]} alt={title} />;
198+
}
199+
return SettingsIcons[icon] || SettingsIcons.settings;
11200
};
12201

13202
return (
14203
<div className="settings-panel">
15-
<div className="panel-header">
16-
{icon && (
17-
<div className="panel-icon">
18-
<img src={iconPaths[icon] || iconPaths.settings} alt={title} />
19-
</div>
20-
)}
21-
<h2 className="panel-title">{title}</h2>
22-
{description && <p className="panel-description">{description}</p>}
23-
</div>
204+
{!hideHeader && (
205+
<div className="panel-header">
206+
{icon && (
207+
<div className="panel-icon">
208+
{renderIcon()}
209+
</div>
210+
)}
211+
<h2 className="panel-title">{title}</h2>
212+
{description && <p className="panel-description">{description}</p>}
213+
</div>
214+
)}
24215
<div className="panel-body">{children}</div>
25216
</div>
26217
);

‎src/features/settings/Settings_Components/panels/General/AccessibilitySettings.jsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from "react";
2+
import { SettingsPanel, SettingsGroup, ToggleSwitch } from "../../SettingsPanel";
3+
4+
export const AccessibilitySettings = () => (
5+
<SettingsPanel title="Accessibility" icon="accessibility">
6+
<SettingsGroup label="Vision">
7+
<ToggleSwitch label="VoiceOver" checked={false} onChange={() => {}} />
8+
<ToggleSwitch label="Zoom" checked={false} onChange={() => {}} />
9+
<ToggleSwitch label="Display" checked={false} onChange={() => {}} />
10+
</SettingsGroup>
11+
<SettingsGroup label="Hearing">
12+
<ToggleSwitch label="Sound Recognition" checked={false} onChange={() => {}} />
13+
</SettingsGroup>
14+
<SettingsGroup label="Motor">
15+
<ToggleSwitch label="Pointer Control" checked={false} onChange={() => {}} />
16+
</SettingsGroup>
17+
</SettingsPanel>
18+
);

0 commit comments

Comments
 (0)