design and functionality update.

Widgets much easier to move, changed rounded corners on every widget, calendar got some design changes

README.md

@@ -15,7 +15,7 @@ An electron app which creates OneUI Widgets on your desktop
 - [x] Flight WIdget
 - [x] Calendar Widget
 - [x] Upcoming Movies Widget
-- [ ] Hours Forecast Widget
+- [x] Hours Forecast Widget
 - [ ] Galaxy Watch on Battery Widget (Person with Galaxy Watch needed)
 
 # How to use

main.js

@@ -8,6 +8,8 @@ const path = require('path');
 const icon = __dirname + '/favicon.ico'
 const { spawn } = require('child_process');
 
+var moveable = false;
+
 // checks if the appExe is named electron so it doesn't autostart electron.exe while developing
 if (!app.getPath('exe').includes('electron')) {
     // starts the app at login
@@ -34,7 +36,6 @@ let topStoriesWidget = null;
 let flightWidget = null;
 let calendarWidget = null;
 let quickNotesWidget = null;
-let untisWidget = null;
 let digitalClockWidget = null;
 let forecastWidget = null;
 let upcomingMoviesWidget = null;
@@ -57,7 +58,6 @@ const positionData = {
     topStoriesWidget: { y: "75", x: "475" },
     calendarWidget: { y: "300", x: "475" },
     quickNotesWidget: { y: "550", x: "475" },
-    untisWidget: { y: "900", x: "75" },
     digitalClockWidget: { y: "75", x: "875" },
     forecastWidget: { y: "750", x: "475" },
     upcomingMoviesWidget: { y: "200", x: "875" },
@@ -73,7 +73,6 @@ const stateData = {
     flightWidget: { show: "false" },
     calendarWidget: { show: "true" },
     quickNotesWidget: { show: "true" },
-    untisWidget: { show: "false" },
     digitalClockWidget: { show: "true" },
     forecastWidget: { show: "false" },
     upcomingMoviesWidget: { show: "false" },
@@ -149,7 +148,6 @@ const widgetsData = {
         { name: "flightWidget", width: 390, height: 175, html: "./src/widgets/wallet/flight.html", "clickthrough": true },
         { name: "calendarWidget", width: 390, height: 225, html: "./src/widgets/calendar/calendar.html", "clickthrough": true },
         { name: "quickNotesWidget", width: 390, height: 175, html: "./src/widgets/notes/quickNotes.html", "clickthrough": false },
-        { name: "untisWidget", width: 390, height: 125, html: "./src/widgets/untis.html", "clickthrough": true },
         { name: "digitalClockWidget", width: 390, height: 100, html: "./src/widgets/clock/digitalClock.html", "clickthrough": true },
         { name: "forecastWidget", width: 390, height: 175, html: "./src/widgets/weather/forecast.html", "clickthrough": true },
         { name: "upcomingMoviesWidget", width: 390, height: 200, html: "./src/widgets/videoPlayer/upcomingMovies.html", "clickthrough": true },
@@ -161,8 +159,10 @@ app.on('ready', () => {
     // creates tray for quitting the app+
     tray = new Tray(icon)
     const contextMenu = Menu.buildFromTemplate([
-        { role: 'quit' },
-    ])
+        { label: 'Toggle Moveable', click: () => { moveable = !moveable; } },
+        { type: 'separator' },
+        { label: 'Quit', click: () => { app.quit(); } } // Quit the app completely when clicked
+    ]);
     tray.setToolTip('Galaxy Widgets')
     tray.setContextMenu(contextMenu)
 
@@ -191,6 +191,7 @@ app.on('ready', () => {
                 // sets clickthrough based on widgetsData
                 widgetWindow.setIgnoreMouseEvents(widget.clickthrough)
 
+
                 // sets the variable to something else than null so it wont get created again
                 eval(`${widget.name} = widgetWindow`)
 
@@ -206,6 +207,7 @@ app.on('ready', () => {
 
                 widgetWindow.loadFile(path.join(__dirname, widget.html));
 
+
                 // sets the variable again to null when its closed
                 widgetWindow.on('closed', () => {
                     eval(`${widget.name} = null`);
@@ -216,6 +218,30 @@ app.on('ready', () => {
                     widgetWindow.setSkipTaskbar(true)
                 });
 
+
+                widgetWindow.on('moved', () => {
+                    let roundedX, roundedY;
+
+                    const currentPosition = widgetWindow.getPosition()
+                    const currentX = currentPosition[0];
+                    const currentY = currentPosition[1];
+
+                    roundedX = Math.round(currentX / 25) * 25;
+                    roundedY = Math.round(currentY / 25) * 25;
+
+                    widgetPositions[widget.name].x = roundedX.toString();
+                    widgetPositions[widget.name].y = roundedY.toString();
+                    fs.writeFileSync(path.join(folderPath, 'widgetPositions.json'), JSON.stringify(widgetPositions, null, 4));
+
+                    widgetWindow.setBounds({
+                        width: widget.width,
+                        height: widget.height,
+                        x: roundedX,
+                        y: roundedY
+                    });
+                });
+
+
             }
             // destroys window if it gets deactivated
             else if (widgetStates[widget.name].show != "true" && eval(widget.name) != null) {
@@ -225,20 +251,23 @@ app.on('ready', () => {
             }
             // fixes widget appearing in taskbar
             else if (widgetStates[widget.name].show == "true" && eval(widget.name) != null) {
-                eval(`${widget.name}.setBounds({
-                    width: ${widget.width},  
-                     height: ${widget.height},  
-                     x: parseInt(widgetPositions[widget.name].x),
-                     y: parseInt(widgetPositions[widget.name].y), 
-                })`)
+                // eval(`${widget.name}.setBounds({
+                //     width: ${widget.width},  
+                //      height: ${widget.height},  
+                //      x: parseInt(widgetPositions[widget.name].x),
+                //      y: parseInt(widgetPositions[widget.name].y), 
+                // })`)
+
+                eval(`${widget.name}.setIgnoreMouseEvents(${!moveable})`)
+                eval(`${widget.name}.setMovable(${moveable})`)
             }
         });
     }
 
     setStates()
     setInterval(function () {
         setStates();
-    }, 200);
+    }, 400);
 });
 
 // hot reloader for easier development

src/css/colors.css

@@ -0,0 +1,4 @@
+* {
+    -webkit-user-select: none;
+    -webkit-app-region: drag;
+}

src/css/widgets/calendar/calendar.css

@@ -10,21 +10,20 @@ body {
     width: 100%;
     height: 100%;
     background-color: var(--background-secondary);
-    border-radius: 33px;
+    border-radius: 36px;
     display: flex;
     color: var(--text);
-    justify-content: center;
+    justify-content: space-between;
     align-items: flex-start;
     flex-direction: column;
-    gap: 10px;
     padding: 20px 20px 20px 20px;
     box-sizing: border-box;
 }
 
 #container-calendar {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
-    gap: 3px;
+    gap: 6px;
     column-gap: 35px;
 }
 
@@ -46,6 +45,7 @@ body {
 
 .current-day {
     background-color: var(--secondary);
+    color: var(--text);
     border-radius: 4px;
 }
 
@@ -62,6 +62,7 @@ body {
     display: flex;
     width: 100%;
     font-weight: bold;
+    font-size: 18px;
 }
 
 .sunday {

src/css/widgets/clock/clock.css

@@ -9,7 +9,7 @@ body {
 #container-main {
     width: 100%;
     height: 100%;
-    border-radius: 33px;
+    border-radius: 36px;
     display: flex;
     color: var(--text);
     justify-content: center;

src/css/widgets/deviceCare/battery.css

@@ -9,7 +9,7 @@ body {
     height: 100%;
     width: 100%;
     display: flex;
-    border-radius: 33px;
+    border-radius: 36px;
     padding: 20px 20px 20px 20px;
     box-sizing: border-box;
     justify-content: flex-start;

src/css/widgets/deviceCare/deviceCare.css

@@ -9,7 +9,7 @@ body {
     display: flex;
     height: 100%;
     width: 100%;
-    border-radius: 33px;
+    border-radius: 36px;
     justify-content: center;
     align-items: center;
     gap: 20px;