refactor(monitors): improve settings by monitors

changelog.md

@@ -7,6 +7,7 @@
 ### refactor
 - themes now use widget ids instead hard-coded keys.
 - improvements on events propagation.
+- improvements on settings by monitor implementation.
 
 ## [2.0.8]
 ### enhancements

src/apps/seelen_wall/modules/shared/store/infra.ts

@@ -27,7 +27,7 @@ export async function initStore() {
     store.dispatch(Actions.setStop(payload));
   });
 
-  webview.listen(SeelenEvent.GlobalMonitorsChanged, () => {
+  webview.listen(SeelenEvent.SystemMonitorsChanged, () => {
     let version = store.getState().version;
     store.dispatch(Actions.setVersion(version + 1));
   });

src/apps/settings/components/monitor/index.module.css

@@ -1,28 +1,34 @@
-.monitor {
-  height: 144px;
-  width: 256px;
-  border-radius: 12px;
-  background-color: var(--color-persist-gray-800);
-  padding: 8px;
-
-  .screen {
-    position: relative;
-    border-radius: 8px;
-    background: linear-gradient(
-      40deg,
-      var(--color-blue-500) 2%,
-      var(--color-blue-300) 60%,
-      var(--color-blue-100) 100%
-    );
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-
-    .wallpaper {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      position: absolute;
-    }
-  }
-}
+.monitorContainer {
+  height: 100%;
+  aspect-ratio: 1 / 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.monitor {
+  border-radius: 12px;
+  background-color: var(--color-persist-gray-800);
+  padding: 5px;
+
+  .screen {
+    position: relative;
+    border-radius: 8px;
+    background: linear-gradient(
+      40deg,
+      var(--color-blue-500) 2%,
+      var(--color-blue-300) 60%,
+      var(--color-blue-100) 100%
+    );
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+
+    .wallpaper {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      position: absolute;
+    }
+  }
+}

src/apps/settings/components/monitor/index.tsx

@@ -1,3 +1,4 @@
+import { convertFileSrc } from '@tauri-apps/api/core';
 import { motion, useAnimationControls } from 'framer-motion';
 import { PropsWithChildren } from 'react';
 import { useSelector } from 'react-redux';
@@ -7,27 +8,48 @@ import { newSelectors } from '../../modules/shared/store/app/reducer';
 import { cx } from '../../../shared/styles';
 import cs from './index.module.css';
 
-interface Props extends PropsWithChildren, React.HTMLAttributes<HTMLDivElement> {}
+interface Props extends PropsWithChildren, React.HTMLAttributes<HTMLDivElement> {
+  width?: number;
+  height?: number;
+}
+
+export function Monitor({ children, className, width = 1920, height = 1080, ...props }: Props) {
+  const seleenWallpaper = useSelector(newSelectors.wall.backgrounds);
+  const systemWallpaper = useSelector(newSelectors.wallpaper);
 
-export function Monitor({ children, className, ...props }: Props) {
-  const wallpaper = useSelector(newSelectors.wallpaper);
   const controls = useAnimationControls();
 
+  const wallpaper = seleenWallpaper[0]?.path || systemWallpaper;
+
+  const style: React.CSSProperties = {
+    aspectRatio: `${width} / ${height}`,
+  };
+  if (width > height) {
+    style.width = '100%';
+  } else {
+    style.height = '100%';
+  }
+
   return (
-    <div className={cx(cs.monitor, className)} {...props}>
-      <div className={cs.screen}>
-        {wallpaper && (
-          <motion.img
-            className={cs.wallpaper}
-            src={wallpaper}
-            initial={{ opacity: 0 }}
-            animate={controls}
-            onLoad={() => {
-              controls.start({ opacity: 1, transition: { duration: 0.3, ease: 'linear' } });
-            }}
-          />
-        )}
-        {children}
+    <div className={cs.monitorContainer} {...props}>
+      <div
+        className={cx(cs.monitor, className)}
+        style={style}
+      >
+        <div className={cs.screen}>
+          {wallpaper && (
+            <motion.img
+              className={cs.wallpaper}
+              src={convertFileSrc(wallpaper)}
+              initial={{ opacity: 0 }}
+              animate={controls}
+              onLoad={() => {
+                controls.start({ opacity: 1, transition: { duration: 0.3, ease: 'linear' } });
+              }}
+            />
+          )}
+          {children}
+        </div>
       </div>
     </div>
   );

src/apps/settings/modules/ByMonitor/infra/index.module.css

@@ -1,15 +1,24 @@
 .itemContainer {
-  display: flex;
-  align-items: center;
+  height: 35vh;
+  display: grid;
+  grid-template-columns: minmax(35vh, 1fr) 2fr;
+  grid-template-rows: 100%;
   gap: 10px;
 
   .itemLeft {
-    display: flex;
+    display: grid;
+    grid-template-rows: min-content 1fr;
+    justify-items: center;
     align-items: center;
-    justify-content: center;
-    flex-direction: column;
     gap: 5px;
 
+    .label {
+      font-weight: 600;
+      font-size: 1.2rem;
+      line-height: 1.2em;
+      text-align: center;
+    }
+
     .actions {
       display: flex;
       align-items: center;
@@ -21,4 +30,9 @@
       }
     }
   }
+
+  .itemRight {
+    overflow-y: auto;
+    min-height: 100%;
+  }
 }