gray

Cysharp · Mar 13, 2024 · b0772ec · b0772ec
1 parent 26df93e
commit b0772ec
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 12 deletions.
diff --git a/sandbox/BlazorApp1/Components/Pages/Home.razor b/sandbox/BlazorApp1/Components/Pages/Home.razor
@@ -6,7 +6,7 @@
 
 <div class="flex flex-col relative h-full w-full overflow-auto transition-width">
 
-    <div class="flex-0 bg-white text-2xl font-bold py-2 text-center border-b-2">Blazor Claude</div>
+    <div class="flex-0 text-base font-bold mt-4 text-center">Blazor Claude</div>
 
     <div class="flex-1 text-sm p-4">
 
@@ -30,11 +30,12 @@
     </div>
 
 
-    <div class="flex-0 bg-white p-4 border-t-2">
+    <div class="flex-0 bg-white p-2 border-t-2">
         <div class="flex w-full mb-2">
-            <div class="flex-0 mr-2">
+            <div class="flex-0 mr-2 range_slider">
                 <div class="block text-sm font-medium leading-6 text-gray-900">Temperature</div>
-                <input class="w-full h-1 mb-6 bg-gray-200 rounded-lg appearance-none cursor-pointer range-sm dark:bg-gray-700" type="range" min="0.0" max="1.0" step=0.1 value=@temperature>
+                <input onmouseover="" class="w-full h-1 mb-6 bg-gray-200 rounded-lg appearance-none cursor-pointer range-sm dark:bg-gray-700" type="range" min="0.0" max="1.0" step=0.1 value=@temperature>
+                <span class="bubble">@temperature</span>
             </div>
             <div class="flex-1">
                 <div class="block text-sm font-medium leading-6 text-gray-900">System</div>
@@ -43,12 +44,59 @@
             </div>
         </div>
         <div class="w-full">
-            <div class="flex">
-                <form @onsubmit=SendClick>
-                    <input type="text" id="chat-input" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 text-sm leading-6" placeholder=" Enter Message..." @bind="textInput">
-                    <button class="ml-2 mt-0 w-auto inline-flex items-center justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" disabled="@running">Send</button>
-                </form>
-            </div>
+            <form class="flex" @onsubmit=SendClick>
+                <input type="text" id="chat-input" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 text-sm leading-6" placeholder=" Enter Message..." @bind="textInput">
+                <button class="ml-2 mt-0 w-auto inline-flex items-center justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" disabled="@running">Send</button>
+            </form>
         </div>
     </div>
-</div>
+</div>
+
+
+<style>
+    button:disabled {
+        background: #AAA;
+    }
+
+    .range_slider {
+        position: relative;
+    }
+    .range_slider .bubble {
+        background-color: #333;
+        color: #fff;
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        padding: 2px 6px;
+        border-radius: 3px;
+        z-index: 10;
+        display: none;
+    }
+</style>
+
+<script>
+    var rangeLabel1 = document.querySelector(".range_slider");
+    var rangeBubble = document.querySelector(".bubble");
+    var rangeInput = rangeLabel1.children[1];
+
+    rangeInput.addEventListener("input", () => {
+        setBubble(rangeInput, rangeBubble);
+    });
+    rangeInput.addEventListener("mouseover", () => {
+        setBubble(rangeInput, rangeBubble);
+    });
+    rangeInput.addEventListener("mouseleave", () => {
+        rangeBubble.style.display = "none";
+    });
+
+    function setBubble(range, bubble) {
+        var val = range.value;
+        var min = range.min ? range.min : 0;
+        var max = range.max ? range.max : 100;
+        var newVal = Number(((val - min) * 100) / (max - min));
+        bubble.innerHTML = val;
+
+        bubble.style.left = `calc(${newVal}% + (${-5 - newVal * 0.15}px))`;
+        rangeBubble.style.display = "inline-block";
+    }
+</script>
diff --git a/sandbox/BlazorApp1/Components/Pages/Home.razor.cs b/sandbox/BlazorApp1/Components/Pages/Home.razor.cs
@@ -52,6 +52,7 @@ async void SendClick()
         finally
         {
             running = false;
+            StateHasChanged();
         }
     }
 }
diff --git a/src/Claudia.FunctionGenerator/Emitter.cs b/src/Claudia.FunctionGenerator/Emitter.cs
@@ -83,6 +83,5 @@ internal void Emit()
 
 
 
-        throw new NotImplementedException();
     }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -52,6 +52,7 @@ async void SendClick() @@
             finally
             {
                 running = false;
+                StateHasChanged();
             }
         }
     }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -83,6 +83,5 @@ internal void Emit()



		throw new NotImplementedException();
		}
		}