initial commit

2025-09-11 05:00:45 +00:00 · 2021-04-06 15:03:44 +02:00
commit 606832a141
21 changed files with 9238 additions and 0 deletions
--- a/src/front/settings/About.tsx
+++ b/src/front/settings/About.tsx
@@ -0,0 +1,36 @@
+import React, { useCallback } from 'react'
+import { shell } from 'electron'
+
+const Link: React.FC<{ text: string; link: string }> = ({ text, link }) => {
+  const fn = useCallback(
+    (e: any) => {
+      e.preventDefault()
+      shell.openExternal(link)
+    },
+    [link]
+  )
+  return (
+    <a onClick={fn} href={link}>
+      {' '}
+      {text}{' '}
+    </a>
+  )
+}
+
+const About: React.FC = () => {
+  return (
+    <div>
+      <h3 className="ma0 mb2">About</h3>
+      <p>
+        UnPixel aims at helping you following the 20/20/20 rule to alleviate stress on the eyes caused by Computer
+        Vision Syndrome (CVS).
+        <br />
+        Read more
+        <Link text="here" link="https://en.wikipedia.org/wiki/Computer_vision_syndrome" /> and
+        <Link text="here." link="https://www.aoa.org/healthy-eyes/eye-and-vision-conditions/computer-vision-syndrome" />
+      </p>
+    </div>
+  )
+}
+
+export default About
--- a/src/front/settings/Field.tsx
+++ b/src/front/settings/Field.tsx
@@ -0,0 +1,54 @@
+import { ipcRenderer } from 'electron'
+import React, { useEffect, useState } from 'react'
+
+const labels = {
+  every: ['Alert every me', 'minutes'],
+  duration: ['For', 'seconds'],
+  boot: ['Start on boot'],
+  autoClose: ['Close window after countdown'],
+}
+
+const Field: React.FC<{ setting: keyof typeof labels }> = ({ setting: key }) => {
+  const label = labels[key]
+
+  const [value, setValue] = useState<null | number | boolean>(null)
+
+  useEffect(() => {
+    const initial = ipcRenderer.sendSync('load', { key })
+    setValue(initial)
+  }, [])
+
+  useEffect(() => {
+    if (value === null) return
+    ipcRenderer.send('save', { key, value })
+  }, [value])
+
+  return value === null ? null : (
+    <div className="ma0 mt0">
+      {typeof value === 'boolean' ? (
+        <label className="form-switch">
+          <input type="checkbox" id={key} onChange={(e) => setValue(e.target.checked)} checked={value} />
+          <i className="form-icon"></i> {label[0]}
+        </label>
+      ) : (
+        <div>
+          <label htmlFor={key}>
+            {label[0]} <b>{value}</b> {label[1]}
+          </label>
+          <input
+            className="mt0 mb3"
+            type="range"
+            id={key}
+            min="1"
+            max="60"
+            step="1"
+            value={value}
+            onChange={(e) => setValue(parseInt(e.target.value))}
+          />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default Field
--- a/src/front/settings/Footer.tsx
+++ b/src/front/settings/Footer.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { version } from '../../../package.json'
+
+const Footer: React.FC = () => {
+  return (
+    <div className="tc mt4 f6 o-40">
+      <span className="code">version: {version}</span>
+    </div>
+  )
+}
+
+export default Footer
--- a/src/front/settings/Settings.tsx
+++ b/src/front/settings/Settings.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import { render } from 'react-dom'
+
+import '../base.css'
+
+import Field from './Field'
+
+const Settings = () => {
+  return (
+    <div>
+      <h3 className="ma0 mb2">Settings</h3>
+      <form>
+        <fieldset className="ma0 pa0">
+          <Field setting="every" />
+          <Field setting="duration" />
+          <Field setting="autoClose" />
+          <Field setting="boot" />
+        </fieldset>
+      </form>
+    </div>
+  )
+}
+
+export default Settings
--- a/src/front/settings/index.html
+++ b/src/front/settings/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Settings</title>
+    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
+  </head>
+  <body>
+    <main></main>
+    <script src="./index.tsx"></script>
+  </body>
+</html>
--- a/src/front/settings/index.tsx
+++ b/src/front/settings/index.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import { render } from 'react-dom'
+
+import '../base.css'
+
+import About from './About'
+import Settings from './Settings'
+import Footer from './Footer'
+
+const Main = () => {
+  return (
+    <div className="pa4">
+      <About />
+      <Settings />
+      <Footer />
+    </div>
+  )
+}
+
+render(<Main />, window.document.querySelector('main'))