Skip to content

Commit d21c662

Browse files
steverstever
committed
Theme changes
1 parent ad57c2a commit d21c662

13 files changed

Lines changed: 8382 additions & 451 deletions

File tree

‎apps/play/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@
3535
"history": "^5.3.0",
3636
"jszip": "^3.10.1",
3737
"pako": "^2.1.0",
38-
"primeflex": "^3.3.1",
39-
"primeicons": "^6.0.1",
38+
"primeflex": "^4.0.0",
39+
"primeicons": "^7.0.0",
4040
"primereact": "^9.6.4",
4141
"query-string": "^9.3.1",
4242
"react": "^19.1.1",

‎apps/play/src/components/App.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@ import React from "react";
22
import {useSelector} from "react-redux";
33
import {Route, Routes} from "react-router-dom";
44
import {Titled} from "react-titled";
5-
import "primereact/resources/themes/md-dark-indigo/theme.css";
5+
import "@zxplay/ui/theme.css";
66
import "primereact/resources/primereact.min.css";
77
import "primeicons/primeicons.css";
88
import "primeflex/primeflex.css";
9+
import "@zxplay/ui/theme.scss";
910
import ErrorBoundary from "./ErrorBoundary";
1011
import RenderEmulator from "./RenderEmulator";
1112
import LoadingScreen from "./LoadingScreen";

‎apps/play/src/components/Nav.jsx‎

Lines changed: 97 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -1,134 +1,97 @@
1-
import React, {useState} from "react";
2-
import {useDispatch, useSelector} from "react-redux";
3-
import {useNavigate} from "react-router-dom";
4-
import {InputText} from "primereact/inputtext";
5-
import {Menubar} from "primereact/menubar";
6-
import {
7-
viewFullScreen
8-
} from "../redux/jsspeccy/actions";
9-
import {resetEmulator} from "../redux/app/actions";
10-
import {useTranslation, LanguageSwitcher} from "@zxplay/i18n";
11-
12-
export default function Nav() {
13-
const dispatch = useDispatch();
14-
const navigate = useNavigate();
15-
const {t} = useTranslation();
16-
17-
const [searchInput, setSearchInput] = useState('');
18-
19-
const pathname = useSelector(state => state?.router.location.pathname);
20-
const emuVisible = pathname === '/';
21-
22-
const isMobile = useSelector(state => state?.window.isMobile);
23-
const className = isMobile ? '' : 'px-2 pt-2';
24-
25-
const items = getMenuItems(t, navigate, dispatch, emuVisible);
26-
27-
return (
28-
<div className={className}>
29-
<Menubar
30-
model={items}
31-
start={<img alt="logo" src="/logo.png" height={"40"} className="mx-1"/>}
32-
end={(
33-
<div className="flex align-items-center">
34-
<InputText
35-
className="mx-1 p-2"
36-
placeholder={t('nav.search')}
37-
type="text"
38-
onChange={(e) => setSearchInput(e.target.value)}
39-
onKeyDown={(e) => {
40-
if (e.key === 'Enter' && searchInput) {
41-
navigate(`/search?q=${searchInput}`);
42-
}
43-
}}/>
44-
<LanguageSwitcher className="mx-1"/>
45-
</div>
46-
)}
47-
style={{
48-
borderRadius: isMobile ? 0 : '5px',
49-
borderColor: '#1E1E1E'
50-
}}
51-
/>
52-
</div>
53-
);
54-
}
55-
56-
function getMenuItems(t, navigate, dispatch, emuVisible) {
57-
const sep = {
58-
separator: true
59-
};
60-
61-
const homeButton = {
62-
label: 'ZX Play',
63-
command: () => {
64-
navigate('/');
65-
}
66-
};
67-
68-
const viewFullScreenMenuItem = {
69-
label: t('nav.fullScreen'),
70-
icon: 'pi pi-fw pi-window-maximize',
71-
disabled: !emuVisible,
72-
command: () => {
73-
dispatch(viewFullScreen());
74-
}
75-
};
76-
77-
const viewMenu = {
78-
label: t('nav.view'),
79-
icon: 'pi pi-fw pi-eye',
80-
items: []
81-
};
82-
83-
viewMenu.items.push(viewFullScreenMenuItem);
84-
85-
const infoMenu = {
86-
label: t('nav.info'),
87-
icon: 'pi pi-fw pi-info-circle',
88-
items: [
89-
{
90-
label: t('nav.aboutThisSite'),
91-
icon: 'pi pi-fw pi-question-circle',
92-
command: () => {
93-
navigate('/about');
94-
}
95-
},
96-
{
97-
label: t('nav.linking'),
98-
icon: 'pi pi-fw pi-link',
99-
command: () => {
100-
navigate('/info/linking');
101-
}
102-
},
103-
// {
104-
// label: 'Privacy Policy',
105-
// icon: 'pi pi-fw pi-eye',
106-
// command: () => {
107-
// navigate('/legal/privacy-policy');
108-
// }
109-
// },
110-
// {
111-
// label: 'Terms of Use',
112-
// icon: 'pi pi-fw pi-info-circle',
113-
// command: () => {
114-
// navigate('/legal/terms-of-use');
115-
// }
116-
// }
117-
]
118-
};
119-
120-
const resetButton = {
121-
label: t('nav.reset'),
122-
icon: 'pi pi-fw pi-power-off',
123-
command: () => {
124-
dispatch(resetEmulator());
125-
}
126-
};
127-
128-
return [
129-
homeButton,
130-
viewMenu,
131-
infoMenu,
132-
resetButton,
133-
];
134-
}
1+
import React, {useState} from "react";
2+
import {useDispatch, useSelector} from "react-redux";
3+
import {useNavigate} from "react-router-dom";
4+
import {InputText} from "primereact/inputtext";
5+
import {Nav as Deck} from "@zxplay/ui";
6+
import {viewFullScreen} from "../redux/jsspeccy/actions";
7+
import {resetEmulator} from "../redux/app/actions";
8+
import {useTranslation} from "@zxplay/i18n";
9+
10+
export default function Nav() {
11+
const dispatch = useDispatch();
12+
const navigate = useNavigate();
13+
const {t} = useTranslation();
14+
15+
const [searchInput, setSearchInput] = useState('');
16+
17+
const pathname = useSelector(state => state?.router.location.pathname);
18+
const emuVisible = pathname === '/';
19+
const isMobile = useSelector(state => state?.window.isMobile);
20+
21+
const model = getMenuItems(t, navigate, dispatch, emuVisible);
22+
23+
const search = (
24+
<InputText
25+
className="p-2"
26+
placeholder={t('nav.search')}
27+
type="text"
28+
onChange={(e) => setSearchInput(e.target.value)}
29+
onKeyDown={(e) => {
30+
if (e.key === 'Enter' && searchInput) {
31+
navigate(`/search?q=${searchInput}`);
32+
}
33+
}}/>
34+
);
35+
36+
return (
37+
<Deck
38+
model={model}
39+
brandTitle="ZX Play"
40+
onBrand={() => navigate('/')}
41+
isMobile={isMobile}
42+
search={search}
43+
/>
44+
);
45+
}
46+
47+
function getMenuItems(t, navigate, dispatch, emuVisible) {
48+
const viewFullScreenMenuItem = {
49+
label: t('nav.fullScreen'),
50+
icon: 'pi pi-fw pi-window-maximize',
51+
disabled: !emuVisible,
52+
command: () => {
53+
dispatch(viewFullScreen());
54+
}
55+
};
56+
57+
const viewMenu = {
58+
label: t('nav.view'),
59+
icon: 'pi pi-fw pi-eye',
60+
items: [viewFullScreenMenuItem]
61+
};
62+
63+
const infoMenu = {
64+
label: t('nav.info'),
65+
icon: 'pi pi-fw pi-info-circle',
66+
items: [
67+
{
68+
label: t('nav.aboutThisSite'),
69+
icon: 'pi pi-fw pi-question-circle',
70+
command: () => {
71+
navigate('/about');
72+
}
73+
},
74+
{
75+
label: t('nav.linking'),
76+
icon: 'pi pi-fw pi-link',
77+
command: () => {
78+
navigate('/info/linking');
79+
}
80+
},
81+
]
82+
};
83+
84+
const resetButton = {
85+
label: t('nav.reset'),
86+
icon: 'pi pi-fw pi-power-off',
87+
command: () => {
88+
dispatch(resetEmulator());
89+
}
90+
};
91+
92+
return [
93+
viewMenu,
94+
infoMenu,
95+
resetButton,
96+
];
97+
}

‎apps/web/src/components/App.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@ import React from "react";
22
import { useSelector } from "react-redux";
33
import { Route, Routes } from "react-router-dom";
44
import { Titled } from "react-titled";
5-
import "primereact/resources/themes/md-dark-indigo/theme.css";
5+
import "@zxplay/ui/theme.css";
66
import "primereact/resources/primereact.min.css";
77
import "primeicons/primeicons.css";
88
import "primeflex/primeflex.css";
9+
import "@zxplay/ui/theme.scss";
910
import ErrorBoundary from "./ErrorBoundary";
1011
import RenderEmulator from "./RenderEmulator";
1112
import LoadingScreen from "./LoadingScreen";

0 commit comments

Comments
 (0)