experimenting with changing to vertically splitting to have more vert…

…ical space for the cecilified code - adds shortcuts to change width of csharp/cecilified views. - enables changing font size for cecilified code. - fixes issue which prevented font size to become smaller than a certain value.
adrianoc · Jul 28, 2023 · d97c5f8 · d97c5f8
1 parent 214eb89
commit d97c5f8
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 60 deletions.
diff --git a/Cecilifier.Web/Pages/Index.cshtml b/Cecilifier.Web/Pages/Index.cshtml
@@ -11,7 +11,7 @@
     var fromGist = Model.FromGist;
 }
 
-<div xmlns="http://www.w3.org/1999/html">
+<div xmlns="http://www.w3.org/1999/html" style="height: 100%">
     <span id="supportedCSharpVersion" hidden>@Core.Cecilifier.SupportedCSharpVersion</span>
 
     <div id="settingsDiv" class="sidenav">
@@ -54,36 +54,40 @@
         </div>
     </nav>
 
-    <div id="csharpcode-container" style="margin-bottom: 5px;">
-        <div id="csharpcode" style="width: 100%; height: 400px; border-left: 10px solid white; border-right: 10px solid white"></div>
-    </div>
-
+
+    <table style="width: 100%; height: 100%">
+    <tbody>
+      <tr style="position: absolute; top: 0; right: 0px; left: 0px">
+          <td style="width: 50%; padding-left: 0px;"><div id="csharpcode"></div></td>
+          <td style="width: 50%; padding-left: 0px;"><div id="cecilifiedcode"></div></td>
+      </tr>
+      <tr style="height: 40px">
+          <td colspan="2">
+              <div align="center" style="vertical-align: middle; margin-bottom: 30px;">
+                  <button type="submit" id="sendbutton" class="button">Cecilify your code!</button>
+                  <button type="submit" id="downloadProject" class="button">Generate Project <i class="fa fa-box"></i></button>
+                  <button class="button" id="copyToClipboard" onclick="copyToClipboard('copyPastHelper');"><i class="fa fa-copy"></i></button>
+                  <button class="button" onclick="changeCecilifierSettings();" id="changeSettings"><i class="fas fa-sliders-h"></i></button>
+                  <button class="button" id="showFixedBugsInStaging" onclick="showListOfFixedIssuesInStagingServer(true);"><i class="fa fa-bug fa-lg"></i></button>
+                  <button class="button" onclick="ShowAssemblyReferencesDialog('Assembly References', 'ssss');" id="assembly_references_button"><i class="fas fa-database"></i></button>
+
+                  <span id="keyboard-shortcuts">
+                      <i class="fas fa-keyboard" style="font-size:28px; vertical-align: middle;"></i>
+                  </span>
+                  <span id="aboutSpan2">
+                      <i class="fas fa-question-circle" style="font-size:28px; vertical-align: middle;"></i>
+                  </span>
+              </div>
+          </td>
+      </tr>
+    </tbody>
+    </table>
     <div class="lds-ring" style="visibility: hidden" id="spinnerDiv">
         <div></div>
         <div></div>
         <div></div>
         <div></div></div>
-
-    <div align="center" style="vertical-align: middle; margin-bottom: 5px;">
-        <button type="submit" id="sendbutton" class="button">Cecilify your code!</button>
-        <button type="submit" id="downloadProject" class="button">Generate Project <i class="fa fa-box"></i></button>
-        <button class="button" id="copyToClipboard" onclick="copyToClipboard('copyPastHelper');"><i class="fa fa-copy"></i></button>
-        <button class="button" onclick="changeCecilifierSettings();" id="changeSettings"><i class="fas fa-sliders-h"></i></button>
-        <button class="button" id="showFixedBugsInStaging" onclick="showListOfFixedIssuesInStagingServer(true);"><i class="fa fa-bug fa-lg"></i></button>
-        <button class="button" onclick="ShowAssemblyReferencesDialog('Assembly References', 'ssss');" id="assembly_references_button"><i class="fas fa-database"></i></button>
-
-        <span id="keyboard-shortcuts">
-            <i class="fas fa-keyboard" style="font-size:28px; vertical-align: middle;"></i>
-        </span>
-        <span id="aboutSpan2">
-            <i class="fas fa-question-circle" style="font-size:28px; vertical-align: middle;"></i>
-        </span>
-    </div>
-
-    <div id="cecilifiedcode-container" style="margin-bottom: 0;">
-        <div id="cecilifiedcode" style="width: 100%; height: 600px; border-left: 10px solid white; border-right: 10px solid white"></div>
-    </div>
-
+
     <div class="modal" aria-hidden="true">
         <div class="modal-dialog" id="bug_reporter_dialog_id">
             <div class="modal-header">

diff --git a/Cecilifier.Web/Pages/Shared/_Layout.cshtml b/Cecilifier.Web/Pages/Shared/_Layout.cshtml
@@ -82,7 +82,7 @@
             margin: 0 auto 15px;
             font-family: 'Big Shoulders Text',monospace;
             font-size: 14px; 
-            text-align: center
+            text-align: center;
          }
 
         .alert.info2 { background-color: #888888; opacity: 0 }
@@ -101,15 +101,15 @@
             cursor: pointer;
             transition: 0.3s;
         }
-
+        
         .closebtn:hover {
             color: black;
         }
     </style> 
 </head>
 <body onload="showReleaseNotes()">
 
-<div class="container body-content" style="width: 100%">
+<div class="container body-content" style="width: 100%; height: 100%">
     @RenderBody()
     <footer>
         <div class="back_social">

diff --git a/Cecilifier.Web/wwwroot/css/site.css b/Cecilifier.Web/wwwroot/css/site.css
@@ -13,6 +13,12 @@ body {
     overflow: hidden;
 }
 
+footer {
+    position : absolute; 
+    bottom : 0; 
+    width: 100%;    
+}
+
 /* Wrapping element */
 /* Set some basic padding to keep content from hitting the edges */
 .body-content {
@@ -36,8 +42,8 @@ body {
 {
     background: rgb(209, 206, 206);
     width: 100%;
-    border-left: 10px solid white;
-    border-right: 10px solid white;
+    border-left: 0px solid white;
+    border-right: 0px solid white;
 }
 
 /* QR code generator */

diff --git a/Cecilifier.Web/wwwroot/css/site.min.css b/Cecilifier.Web/wwwroot/css/site.min.css
diff --git a/Cecilifier.Web/wwwroot/js/cecilifier.js b/Cecilifier.Web/wwwroot/js/cecilifier.js
@@ -2,8 +2,9 @@ let websocket;
 let cecilifiedCode;
 let settings;
 let csharpCode;
+let focusedEditor; // either csharpCode or cecilifiedCode
 let blockMappings = null;
-
+let csharpCodeEditorWidthMultiplier = 0.3;
 class CecilifierRequest
 {
     constructor(code, options, settings, assemblyReferences) {
@@ -13,7 +14,6 @@ class CecilifierRequest
         this.assemblyReferences = assemblyReferences;
     }
 }
-
 class WebOptions
 {
     constructor(deployKind) {
@@ -59,7 +59,6 @@ function getAssemblyReferencesMetadata(callback) {
         callback(event.target.result);
     };   
 }
-
 function loadAssemblyReferenceMetadata(callback) {
     let objectStore = db.transaction(['assembly-references'], "readonly").objectStore('assembly-references');
     let cursor = objectStore.openCursor();
@@ -73,7 +72,6 @@ function loadAssemblyReferenceMetadata(callback) {
         cursor.continue();
     };
 }
-
 function storeReferenceAssembliesLocally() {
     const assembly_references = document.getElementById("assembly_references_list");
     for (let i = 0; i < assembly_references.options.length; i++) {
@@ -104,24 +102,39 @@ function removeSelectedAssemblyReference() {
     assemblyReferenceList.remove(assemblyReferenceList.selectedIndex);
 }
 
+
+function increaseFocusedEditorFontSize() {
+    const options = focusedEditor.getRawOptions();
+
+    const newFontSize = options.fontSize +  1;
+    focusedEditor.updateOptions({ fontSize: newFontSize });    
+}
+function decreaseFocusedEditorFontSize() {
+    const options = focusedEditor.getRawOptions();
+
+    const newFontSize = options.fontSize -  1;
+    focusedEditor.updateOptions({ fontSize: newFontSize });
+}
 function initializeSite(errorAccessingGist, gist, version) {
     require.config({ paths: { vs: 'lib/node_modules/monaco-editor/min/vs' } });
 
     require(['vs/editor/editor.main'], function () {
         csharpCode = monaco.editor.create(document.getElementById('csharpcode'), {
             theme: "vs-dark",
             value: [
-                `// Supported CSharp language version: ${document.getElementById('supportedCSharpVersion').innerText} https://learn.microsoft.com/en-us/dotnet/csharp/whats-new/csharp-${document.getElementById('supportedCSharpVersion').innerText}`,
+                `// Supported CSharp language version: ${document.getElementById('supportedCSharpVersion').innerText}\n// https://learn.microsoft.com/en-us/dotnet/csharp/whats-new/csharp-${document.getElementById('supportedCSharpVersion').innerText}`,
                 'using System;', 
                 'class Foo', 
                 '{', 
                 '\tvoid Bar() => Console.WriteLine("Hello World!");', 
                 '}'].join('\n'),
             language: 'csharp',
             minimap: { enabled: false },
-            fontSize: 16,
-            glyphMargin: true,
+            fontSize: 14,
+            glyphMargin: false,
             renderWhitespace: false,
+            lineNumbersMinChars: 3,
+            wordWrap: "on",
         });
 
         cecilifiedCode = monaco.editor.create(document.getElementById('cecilifiedcode'), {
@@ -130,9 +143,10 @@ function initializeSite(errorAccessingGist, gist, version) {
             language: 'csharp',
             readOnly: true,
             minimap: { enabled: false },
-            fontSize: 16,
-            glyphMargin: true,
+            fontSize: 14,
+            glyphMargin: false,
             renderWhitespace: false,
+            lineNumbersMinChars: 3,
          });
 
         // Configure keyboard shortcuts
@@ -148,30 +162,32 @@ function initializeSite(errorAccessingGist, gist, version) {
             changeCecilifierSettings();
         });
 
-        csharpCode.addCommand(monaco.KeyMod.CtrlCmd + monaco.KeyCode.BracketLeft , function() {
-            const options = csharpCode.getRawOptions();
-            const newFontSize = Math.ceil(options.fontSize - options.fontSize * 0.05);
-
-            csharpCode.updateOptions({ fontSize: newFontSize });
+        csharpCode.addCommand(monaco.KeyMod.Alt + monaco.KeyCode.LeftArrow, function() {
+            csharpCodeEditorWidthMultiplier -= 0.01;
+            updateEditorsSize();
         });
 
-        csharpCode.addCommand(monaco.KeyMod.CtrlCmd + monaco.KeyCode.BracketRight , function() {
-            const options = csharpCode.getRawOptions();
-
-            const newFontSize = Math.ceil(options.fontSize * 1.05);
-            csharpCode.updateOptions({ fontSize: newFontSize });
+        csharpCode.addCommand(monaco.KeyMod.Alt + monaco.KeyCode.RightArrow, function() {
+            csharpCodeEditorWidthMultiplier += 0.01;
+            updateEditorsSize();
         });
 
+        csharpCode.addCommand(monaco.KeyMod.CtrlCmd + monaco.KeyCode.BracketLeft , decreaseFocusedEditorFontSize);
+        csharpCode.addCommand(monaco.KeyMod.CtrlCmd + monaco.KeyCode.BracketRight , increaseFocusedEditorFontSize);
+
         csharpCode.addCommand(monaco.KeyMod.CtrlCmd + monaco.KeyCode.Period, function() {
             ShowErrorDialog("Report a new issue", "Please be kind, check the existing ones before filing a new issue..", "Report an error.");
         });
+
+        cecilifiedCode.addCommand(monaco.KeyMod.CtrlCmd + monaco.KeyCode.BracketLeft , decreaseFocusedEditorFontSize);
+        cecilifiedCode.addCommand(monaco.KeyMod.CtrlCmd + monaco.KeyCode.BracketRight , increaseFocusedEditorFontSize);
 
         setupCursorTracking();
 
         window.onresize = function(ev) {
             updateEditorsSize();
         }
-
+        
         updateEditorsSize();
 
         initializeFormattingSettings();
@@ -182,6 +198,7 @@ function initializeSite(errorAccessingGist, gist, version) {
         handleGist(gist, errorAccessingGist);
 
         csharpCode.focus();
+        focusedEditor = csharpCode;
     });
 
     showListOfFixedIssuesInStagingServer(false);
@@ -329,7 +346,7 @@ var lbl_jump_3 = il_get_11.Create(OpCodes.Nop);`;
     });
 
     let sampleDiv = document.getElementById("_formattingSettingsSample");
-    let h =  window.innerHeight * 0.90;
+    let h =  window.innerHeight;
     let w =  window.innerWidth * 0.75;
     sampleDiv.style.height = `${h}px`;
     sampleDiv.style.width = `${w}px`;
@@ -341,8 +358,8 @@ var lbl_jump_3 = il_get_11.Create(OpCodes.Nop);`;
 
 function disableScroll() {
     // Get the current page scroll position
-    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+    const scrollTop = window.scrollY || document.documentElement.scrollTop;
+    const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
 
     // if any scroll is attempted, set this to the previous value
     window.onscroll = function() {
@@ -352,11 +369,14 @@ function disableScroll() {
 
 function updateEditorsSize() {
     let csharpCodeDiv = document.getElementById("csharpcode");
-    let h = window.innerHeight * 0.35;
+    let h = window.innerHeight * 0.94;
+    let w = window.innerWidth * csharpCodeEditorWidthMultiplier;
     csharpCodeDiv.style.height = `${h}px`;
+    csharpCodeDiv.style.width = `${w - 1}px`;
 
     const cecilifiedCodeDiv = document.getElementById("cecilifiedcode");
-    cecilifiedCodeDiv.style.height = `${window.innerHeight - h - 60}px`;
+    cecilifiedCodeDiv.style.height = `${h}px`;
+    cecilifiedCodeDiv.style.width = `${window.innerWidth - w}px`;
 
     csharpCode.layout();
     cecilifiedCode.layout();
@@ -430,10 +450,12 @@ function setTooltips(version) {
     });
 
     tippy('#keyboard-shortcuts', {
-        content: "<div style='text-align:left'>\
+        content: "<div style='text-align:left; width: 1000px'>\
                   <p><kbd class=\"kbc-button\">Ctrl</kbd> + <kbd class=\"kbc-button\">Alt</kbd> + <kbd class=\"kbc-button\">C</kbd> Cecilify the code.</p>\
                   <p><kbd class=\"kbc-button\">Ctrl</kbd> + <kbd class=\"kbc-button\">Alt</kbd> + <kbd class=\"kbc-button\">D</kbd> Downloads project with cecilified code.</p>\
                   <p><kbd class=\"kbc-button\">Ctrl</kbd> + <kbd class=\"kbc-button\">Alt</kbd> + <kbd class=\"kbc-button\">S</kbd> Opens settings page.</p>\
+                  <p><kbd class=\"kbc-button\">Alt</kbd> + <kbd class=\"kbc-button\">&larr;</kbd> Decreases CSharp editor width / increases Cecilified editor width.</p>\
+                  <p><kbd class=\"kbc-button\">Alt</kbd> + <kbd class=\"kbc-button\">&rarr;</kbd> Increases CSharp editor width / decreases Cecilified editor width.</p>\
                   <p><kbd class=\"kbc-button\">Ctrl</kbd> + <kbd class=\"kbc-button\">]</kbd> Increases font size.</p>\
                   <p><kbd class=\"kbc-button\">Ctrl</kbd> + <kbd class=\"kbc-button\">[</kbd> Decreases font size.</p>\
                   </div>",
@@ -638,10 +660,12 @@ function setAlert(div_id, msg) {
     const div = document.getElementById(div_id);
 
     if (msg == null) {
+        div.style.zIndex = "0";
         div.style.opacity = "0";
         div.style.position = "absolute";
         div.children[1].innerHTML = "";
     } else {
+        div.style.zIndex = "100";
         div.style.opacity = "1";
         div.style.position = "relative";
         div.children[1].innerHTML = msg;
@@ -874,6 +898,10 @@ function hideSpinner() {
 
 function setupCursorTracking() {
     cecilifiedCode.onMouseDown(function(e) {
+        if (focusedEditor !== cecilifiedCode) {
+            focusedEditor = cecilifiedCode;
+        }
+
         if (blockMappings === null)
             return;
 
@@ -888,11 +916,15 @@ function setupCursorTracking() {
                 endLineNumber: blockMapping.Source.End.Line
             });
             csharpCode.revealLineNearTop(blockMapping.Source.Begin.Line);
-            return;            
+            return;
         }
     });
 
     csharpCode.onMouseDown(function(e) {
+        if (focusedEditor !== csharpCode) {
+            focusedEditor = csharpCode;
+        }
+
         if (blockMappings === null)
             return;
 
@@ -917,7 +949,7 @@ function setupCursorTracking() {
         {
             cecilifiedCode.setSelection({startColumn: blockMappings[matchIndex].Cecilified.Begin.Column, endColumn: blockMappings[matchIndex].Cecilified.End.Column, startLineNumber: blockMappings[matchIndex].Cecilified.Begin.Line, endLineNumber: blockMappings[matchIndex].Cecilified.End.Line});
             cecilifiedCode.revealLineNearTop(blockMappings[matchIndex].Cecilified.Begin.Line);
-        }
+        }        
     });    
 }