Ismail/CPLv4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: AnalogInputsSettingsModal dark mode

Browse Source
This commit is contained in:
ISA
2025-09-10 11:56:40 +02:00
parent be9954ac29
commit 92b712d7ce
6 changed files with 103 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.development
View File

@@ -6,6 +6,6 @@ NEXT_PUBLIC_USE_MOCK_BACKEND_LOOP_START=false
NEXT_PUBLIC_EXPORT_STATIC=false NEXT_PUBLIC_EXPORT_STATIC=false
NEXT_PUBLIC_USE_CGI=false NEXT_PUBLIC_USE_CGI=false
# App-Versionsnummer # App-Versionsnummer
NEXT_PUBLIC_APP_VERSION=1.6.896 NEXT_PUBLIC_APP_VERSION=1.6.897
NEXT_PUBLIC_CPL_MODE=json # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter) NEXT_PUBLIC_CPL_MODE=json # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter)

2
.env.production
View File

@@ -5,5 +5,5 @@ NEXT_PUBLIC_CPL_API_PATH=/CPL
NEXT_PUBLIC_EXPORT_STATIC=true NEXT_PUBLIC_EXPORT_STATIC=true
NEXT_PUBLIC_USE_CGI=true NEXT_PUBLIC_USE_CGI=true
# App-Versionsnummer # App-Versionsnummer
NEXT_PUBLIC_APP_VERSION=1.6.896 NEXT_PUBLIC_APP_VERSION=1.6.897
NEXT_PUBLIC_CPL_MODE=production NEXT_PUBLIC_CPL_MODE=production

5
CHANGELOG.md
View File

@@ -1,3 +1,8 @@
## [1.6.897] – 2025-09-10
- style: DigitalOutputsModal für dark mode
---
## [1.6.896] – 2025-09-10 ## [1.6.896] – 2025-09-10
- style: Digitale Ausgänge Switch - style: Digitale Ausgänge Switch

65
components/main/analogInputs/AnalogInputsSettingsModal.tsx
View File

@@ -108,64 +108,58 @@ export default function AnalogInputsSettingsModal() {
return ( return (
<div className="fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center z-50"> <div className="fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center z-50">
<div className="bg-white rounded-lg shadow-lg p-6 w-1/2 max-w-lg"> <div className="bg-[var(--color-surface)] border border-base rounded-xl shadow-xl w-[32rem] max-w-full p-0 flex flex-col">
<div className="mb-4 border-b pb-2 flex justify-between items-center"> <header className="modal-header flex items-center justify-between px-6 py-4 border-b border-base">
<h2 className="text-base font-bold"> <h2 className="text-base font-bold text-fg">
Einstellungen Messwerteingang {selectedInput.id} Einstellungen Messwerteingang {selectedInput.id}
</h2> </h2>
<button <button
onClick={() => dispatch(setIsSettingsModalOpen(false))} onClick={() => dispatch(setIsSettingsModalOpen(false))}
className="text-2xl hover:text-gray-400" className="icon-btn text-2xl"
aria-label="Modal schließen" aria-label="Modal schließen"
type="button"
> >
<i className="bi bi-x-circle-fill"></i> <i className="bi bi-x-circle-fill" />
</button> </button>
</div> </header>
<div className="modal-body-scroll px-6 py-5 flex-1 text-fg">
{/* Bezeichnung */}
<div className="grid grid-cols-2 gap-x-4 gap-y-3"> <div className="grid grid-cols-2 gap-x-4 gap-y-3">
<span className="font-normal">Bezeichnung:</span> <span className="font-normal text-fg-secondary">Bezeichnung:</span>
<input <input
type="text" type="text"
className="w-full border rounded px-3 py-1 mb-4" className="border border-base rounded px-2 py-1 w-full bg-[var(--color-surface-alt)] text-fg"
value={label} value={label}
onChange={(e) => setLabel(e.target.value)} onChange={(e) => setLabel(e.target.value)}
/> />
</div> </div>
{/* Offset */}
<div className="grid grid-cols-2 gap-x-4 gap-y-3 mb-4"> <div className="grid grid-cols-2 gap-x-4 gap-y-3 mb-4">
<span className="font-normal">Offset:</span> <span className="font-normal text-fg-secondary">Offset:</span>
<input <input
type="number" type="number"
step="0.001" step="0.001"
className="border border-gray-300 rounded px-2 py-1 w-full text-right" className="border border-base rounded px-2 py-1 w-full text-right bg-[var(--color-surface-alt)] text-fg"
value={offset} value={offset}
onChange={(e) => setOffset(e.target.value)} onChange={(e) => setOffset(e.target.value)}
/> />
</div> </div>
{/* Faktor */}
<div className="grid grid-cols-2 gap-x-4 gap-y-3 mb-4"> <div className="grid grid-cols-2 gap-x-4 gap-y-3 mb-4">
<span className="font-normal">Faktor:</span> <span className="font-normal text-fg-secondary">Faktor:</span>
<input <input
type="number" type="number"
step="0.001" step="0.001"
className="border border-gray-300 rounded px-2 py-1 w-full text-right" className="border border-base rounded px-2 py-1 w-full text-right bg-[var(--color-surface-alt)] text-fg"
value={factor} value={factor}
onChange={(e) => setFactor(e.target.value)} onChange={(e) => setFactor(e.target.value)}
/> />
</div> </div>
{/* Einheit */}
<div className="grid grid-cols-2 gap-x-4 gap-y-3 mb-4"> <div className="grid grid-cols-2 gap-x-4 gap-y-3 mb-4">
<span className="font-normal">Einheit:</span> <span className="font-normal text-fg-secondary">Einheit:</span>
<Listbox value={unit} onChange={setUnit}> <Listbox value={unit} onChange={setUnit}>
<div className="relative w-full"> <div className="relative w-full">
<Listbox.Button className="w-full border px-3 py-1 rounded text-left bg-white flex justify-between items-center text-sm text-gray-900 font-sans"> <Listbox.Button className="w-full border border-base px-2 py-1 rounded text-left bg-[var(--color-surface-alt)] text-fg flex justify-between items-center text-sm font-sans">
<span>{unit}</span> <span>{unit}</span>
<svg <svg
className="w-5 h-5 text-gray-400" className="w-5 h-5 text-muted"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" viewBox="0 0 20 20"
fill="currentColor" fill="currentColor"
@@ -178,7 +172,7 @@ export default function AnalogInputsSettingsModal() {
/> />
</svg> </svg>
</Listbox.Button> </Listbox.Button>
<Listbox.Options className="absolute z-50 mt-1 w-full border rounded bg-white shadow max-h-60 overflow-auto text-sm text-gray-900 font-sans"> <Listbox.Options className="absolute z-50 mt-1 w-full border border-base rounded bg-[var(--color-surface-alt)] shadow max-h-60 overflow-auto text-sm text-fg font-sans">
{unitOptions.map((opt) => ( {unitOptions.map((opt) => (
<Listbox.Option <Listbox.Option
key={opt} key={opt}
@@ -188,8 +182,8 @@ export default function AnalogInputsSettingsModal() {
selected selected
? "bg-littwin-blue text-white font-medium" ? "bg-littwin-blue text-white font-medium"
: active : active
? "bg-gray-200" ? "bg-base-muted"
: "text-gray-900" : "text-fg"
}` }`
} }
> >
@@ -200,33 +194,32 @@ export default function AnalogInputsSettingsModal() {
</div> </div>
</Listbox> </Listbox>
</div> </div>
{/* Speicherintervall */}
<div className="grid grid-cols-2 gap-x-4 gap-y-3"> <div className="grid grid-cols-2 gap-x-4 gap-y-3">
<span className="font-normal">Speicherintervall:</span> <span className="font-normal text-fg-secondary">
Speicherintervall:
</span>
<div className="relative w-full"> <div className="relative w-full">
<input <input
type="number" type="number"
className="border rounded px-2 py-1 pr-20 w-full text-right" className="border border-base rounded px-2 py-1 pr-20 w-full text-right bg-[var(--color-surface-alt)] text-fg"
value={loggerInterval} value={loggerInterval}
onChange={(e) => setLoggerInterval(e.target.value)} onChange={(e) => setLoggerInterval(e.target.value)}
/> />
<span className="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm"> <span className="absolute right-2 top-1/2 transform -translate-y-1/2 text-muted text-sm">
Minuten Minuten
</span> </span>
</div> </div>
</div> </div>
</div>
{/* Speichern-Button */} <footer className="px-6 py-4 border-t border-base flex justify-end">
<div className="flex justify-end gap-2 mt-6">
<button <button
onClick={handleSave} onClick={handleSave}
disabled={isSaving} disabled={isSaving}
className="bg-littwin-blue text-white px-4 py-2 rounded flex items-center" className="btn-primary px-4 py-2 rounded flex items-center"
> >
{isSaving ? "Speichern..." : "Speichern"} {isSaving ? "Speichern..." : "Speichern"}
</button> </button>
</div> </footer>
</div> </div>
</div> </div>
); );

4
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{ {
"name": "cpl-v4", "name": "cpl-v4",
"version": "1.6.896", "version": "1.6.897",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "cpl-v4", "name": "cpl-v4",
"version": "1.6.896", "version": "1.6.897",
"dependencies": { "dependencies": {
"@emotion/react": "^11.13.0", "@emotion/react": "^11.13.0",
"@emotion/styled": "^11.13.0", "@emotion/styled": "^11.13.0",

2
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "cpl-v4", "name": "cpl-v4",
"version": "1.6.896", "version": "1.6.897",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "next dev -p 3000", "dev": "next dev -p 3000",