style(dropdown): update styling to be less obtrusive

SoftVarE-Group · Jan 3, 2024 · 6e15b5c · 6e15b5c
1 parent 3d1e8ed
commit 6e15b5c
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 8 deletions.
diff --git a/WebSocketClient/index.html b/WebSocketClient/index.html
@@ -27,6 +27,7 @@ <h1>UVL Playground</h1>
 </div>
 <div class="dropdown">
     <div class="dropdown-wrapper">
+        <span>Select an Example</span>
         <button class="dropbtn">›</button>
         <div class="dropdown-content">
             <button id="defaultExample">Default</button>

diff --git a/WebSocketClient/src/ImportExportFiles.ts b/WebSocketClient/src/ImportExportFiles.ts
@@ -27,7 +27,6 @@ export function uploadFile(): Promise<string> {
         uploadInput.click();
         return new Promise<string>((resolve, reject) => {
             uploadInput.onchange = () => {
-                console.log("onchange");
                 if(!uploadInput.files){
                     reject();
                     return;

diff --git a/WebSocketClient/src/main.ts b/WebSocketClient/src/main.ts
@@ -137,7 +137,7 @@ const createLanguageClient = (transports: MessageTransports): MonacoLanguageClie
             if (opsModel) {
                 const fullModelRange = opsModel.getFullModelRange();
                 const operation: IIdentifiedSingleEditOperation = {text: textContent, range: fullModelRange};
-                opsModel.applyEdits([operation], false);
+                opsModel.applyEdits([operation], true);
             }
         })
     });
@@ -267,6 +267,7 @@ export const startUvlClient = async () => {
         model: modelRef.object.textEditorModel, automaticLayout: true
     });
 
+    // Needs to be redone at some point as undo does not always work
     editor.onDidChangeModelContent(() => {
         const model = editor.getModel();
         if (!model) {

diff --git a/WebSocketClient/style/dropdown.css b/WebSocketClient/style/dropdown.css
@@ -1,30 +1,36 @@
 .dropbtn {
     background-color: #1e1e1e;
-    width: 25%;
     color: white;
     font-size: 32px;
     border: none;
     padding: 0;
     margin: 0;
-    text-align: center;
+    text-align: right;
     writing-mode: vertical-lr;
 }
 
 /* The container <div> - needed to position the dropdown content */
 .dropdown {
-    text-align: center;
+    text-align: right;
     width: 100%;
 }
 
+.dropdown-wrapper {
+    padding: 0 20px 5px;
+    span {
+        color: white;
+    }
+}
+
 /* Dropdown Content (Hidden by Default) */
 .dropdown-content {
     display: none;
     position: absolute;
     background-color: #1e1e1e;
-    width: 100%;
     box-shadow: 0 16px 32px 0 rgba(0,0,0,0.5);
+    justify-content: right;
     z-index: 100;
-    justify-content: center;
+    right: 10px;
 }
 
 /* Links inside the dropdown */
@@ -42,5 +48,5 @@
 
 /* Show the dropdown menu on hover */
 .dropdown-wrapper:hover .dropdown-content {
-    display: flex;
+    display: block;
 }