From 8e06f8feb880439afba7f82a1a6215abb5fd1aa4 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Thu, 15 Aug 2024 22:59:52 +0200
Subject: [PATCH] feat: add color to draggables

---
 source/screens/demo/examples/ui/drag.njk | 21 +++++++++++++++++----
 source/style/modules/ui/_new_module.scss |  8 ++++++++
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/source/screens/demo/examples/ui/drag.njk b/source/screens/demo/examples/ui/drag.njk
index 13b48d7..a76f5bb 100755
--- a/source/screens/demo/examples/ui/drag.njk
+++ b/source/screens/demo/examples/ui/drag.njk
@@ -21,12 +21,12 @@ tags:
 {% endblock %}
 
 {% block body %}
-  <button id="addFrame">Add</button>
   <div id="space"></div>
+  <button id="addFrame">Add</button>
 {% endblock %}
 
 {%- block script %}
-  <script>
+	<script>
 // Get the space element
 const space = document.getElementById('space');
 const addFrameButton = document.getElementById('addFrame');
@@ -37,13 +37,16 @@ function createNewDiv() {
   newDiv.style.position = 'absolute';
   newDiv.style.width = '100px';
   newDiv.style.height = '100px';
-  newDiv.style.background = 'red';
   newDiv.style.cursor = 'move';
 
   // Add event listeners for dragging
   let isDown = false;
   let offset = [0, 0];
 
+	// Generate a random background color
+	const randomColor = getRandomColor();
+	newDiv.style.background = randomColor;
+
   newDiv.addEventListener('mousedown', (event) => {
     if (event.button === 0) { // Left mouse button
       isDown = true;
@@ -111,10 +114,20 @@ function createNewDiv() {
   loadData();
 }
 
+// Function to generate a random color
+function getRandomColor() {
+	const letters = '0123456789ABCDEF';
+	let color = '#';
+	for (let i = 0; i < 6; i++) {
+		color += letters[Math.floor(Math.random() * 16)];
+	}
+	return color;
+}
+
 // Add event listener to the add space button
 addFrameButton.addEventListener('click', createNewDiv);
 
 // Create the first new div element
 createNewDiv();
-  </script>
+	</script>
 {% endblock %}
\ No newline at end of file
diff --git a/source/style/modules/ui/_new_module.scss b/source/style/modules/ui/_new_module.scss
index 1456663..100284b 100755
--- a/source/style/modules/ui/_new_module.scss
+++ b/source/style/modules/ui/_new_module.scss
@@ -118,4 +118,12 @@ $module_top_height: 32px;
 	position: relative;
 	height: 100%;
 	background-color: $color-dark;
+}
+
+#addFrame {
+	@extend .io_button;
+	position: fixed;
+	top: 8px;
+	right: 8px;
+	margin: 0;
 }
\ No newline at end of file