Merge branch '11-GUI-Design-and-Development' into 22-Identifier-Compl…

…etion-Suggestion-Tokeniser-Edge-Cases
YarnSpinnerTool · May 24, 2021 · f3b1db8 · f3b1db8
2 parents a65c5b3 + c7f9d66
commit f3b1db8
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 41 deletions.
diff --git a/src/controllers/themeReader.ts b/src/controllers/themeReader.ts
@@ -33,32 +33,28 @@ module.exports = {
 }
 /**/
 
-/*
+
 //OG Blue theme
 module.exports = {
-    primary_text: "#000000",
-    secondary_text: "#FFFFFF",
-    editor: "#CFD8DC",
+    default: "#000000",
+    invertDefault: "#FFFFFF",
 
     commands: "#FF00AA",
-    fileTag: "#718C70",
+    commandsInternal: "#FF44AA",
+    varAndNum: "#063B0E",
+    options: "#AD00C4",
     interpolation: "#CC8400",
-    option: "#AD00C4",
-    variables: "#347F36",
-    float: "#063B0E",
-    number: "#063B0E",
-    yarnCommands: "#A30A70",
-    hashtag: "#AAAAAA",
-    operator: "#AAAFFF",
+    strings: "#00DD33",
+    metadata: "#AAAAAA",
+    comments: "#00FF00",
 
+    editor: "#CFD8DC",
     workingFile: "#d5dee2",
     tabGap: "#546E7A",
-    divideColour: "#9eb5c0",
-    lineSelection: "#d5dee2"
-
 }
 /**/
 
+/*
 //Night theme
 module.exports = {
     primary_text: "#FFFFFF",

diff --git a/src/views/css/styles.css b/src/views/css/styles.css
@@ -40,6 +40,14 @@ img {
 
 }
 
+/* ! Hacky semantic fix, might be changed through changes to token provider */
+.mtki {
+    text-decoration-line: underline;
+    text-decoration-style: wavy;
+    text-decoration-color: red;
+    text-decoration-thickness: 1px;
+}
+
 .tooltip {
 	position: relative;
 	display: inline-block;

diff --git a/src/views/ts/renderer.ts b/src/views/ts/renderer.ts
@@ -89,7 +89,7 @@ export class YarnFile
 
 export class YarnFileManager 
 {
-	private openFiles = new Map<number, YarnFile>();
+	private openFiles = new Map<number, YarnFile>(); //Number is the representation of the uniqueIdentifier
 	private currentOpenYarnFile: YarnFile;
 
 	constructor() 
@@ -180,35 +180,33 @@ monaco.editor.defineTheme("customTheme", {
     inherit: true,
     rules: [
         //{ background: 'CFD8DC'},
-
         { token: "body.bold", fontStyle: "bold" },
         { token: "body.underline", fontStyle: "underline" },
         { token: "body.italic", fontStyle: "italic" },
-        { token: "body.commands", foreground: exports.commands },
-        { token: "commands", foreground: exports.commands },
-        { token: "file.tag", foreground: exports.fileTag },
-        { token: "interpolation", foreground: exports.interpolation },
-        { token: "options", foreground: exports.option },
-        { token: "variables", foreground: exports.variables },
-        { token: "float", foreground: exports.float },
-        { token: "number", foreground: exports.number },
-        { token: "yarn.commands", foreground: exports.yarnCommands },
-        { token: "commands.float", foreground: exports.commands },
-        { token: "commands.number", foreground: exports.commands },
-        { token: "commands.operator", foreground: exports.operator },
-        { token: "hashtag", foreground: exports.hashtag },
-        { token: "dialogue", foreground: exports.primary_text }
+
+        { token: "Commands", foreground: exports.commands},
+        { token: "CommandsInternal", foreground: exports.commandsInternal },
+        { token: "VarAndNum", foreground: exports.varAndNum },
+        { token: "Options", foreground: exports.options },
+        { token: "Interpolation", foreground: exports.interpolation },
+        { token: "Strings", foreground: exports.strings },
+        { token: "Metadata", foreground: exports.metadata },
+        { token: "Comments", foreground: exports.comments },
+        { token: "Default", foreground: exports.default },
+
+        { token: "Invalid", foreground: "000000", fontStyle: "italic" }
+
     ],
 
     colors: {
-        "editor.foreground": exports.primary_text,
+        "editor.foreground": exports.default,
         "editor.background": exports.editor,
-        "editorCursor.foreground": exports.workingFile,
-        "editor.lineHighlightBackground": exports.lineSelection,
-        "editorLineNumber.foreground": exports.primary_text,
-        "editor.selectionBackground": exports.lineSelection,
+        "editorCursor.foreground": exports.default,
+        "editor.lineHighlightBackground": exports.default,
+        "editorLineNumber.foreground": exports.default,
+        "editor.selectionBackground": exports.invertDefault,
         "editor.inactiveSelectionBackground": exports.editor,
-        "minimap.background": exports.lineSelection
+        "minimap.background": exports.default
     }
 });
 
@@ -217,9 +215,9 @@ document.documentElement.style.setProperty("--editor", exports.editor);
 document.documentElement.style.setProperty("--topSideEdit", exports.editor);
 document.documentElement.style.setProperty("--workingFile", exports.workingFile);
 document.documentElement.style.setProperty("--tabGap", exports.tabGap);
-document.documentElement.style.setProperty("--dividerColour", exports.divideColour);
+document.documentElement.style.setProperty("--dividerColour", exports.invertDefault);
 document.documentElement.style.setProperty("--primary_text", exports.primary_text);
-document.documentElement.style.setProperty("--secondary_text", exports.secondary_text);
+document.documentElement.style.setProperty("--secondary_text", exports.invertDefault);
 
 const containerElement = document.getElementById("container");
 
@@ -238,6 +236,7 @@ const editor = monaco.editor.create(containerElement, {
     fontSize: 14,
     mouseWheelZoom: true,
     wordWrap: "on"
+
 });
 
 //Instantiate with new empty file
@@ -262,7 +261,7 @@ editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_B, () =>
 //Editor specific events
 editor.onDidChangeModelContent(() => 
 {
-    const workingDetailDiv = document.getElementById(yarnFileManager.getCurrentOpenFile().getUniqueIdentifier().toString());
+    const workingDetailDiv = document.getElementById( yarnFileManager.getCurrentOpenFile().getUniqueIdentifier().toString() );
 
     syncCurrentFile();//Update the contents at each point
     const unsavedIdentifier = "*";//Can change to anything
@@ -297,14 +296,14 @@ const workingFiles = document.getElementById("workingFilesDetail");
 
 if (workingFiles) 
 {
-
     //Set the intiated new empty file into working space
     addFileToDisplay(yarnFileManager.getCurrentOpenFile());
     editor.updateOptions({ readOnly: false });
 
     //Add all listeners
     workingFiles.addEventListener("click", (event) => 
     {
+        //Button clicked event
         if (event && event.target && (event.target as HTMLElement).tagName === "BUTTON") 
         {
             //Get file ID information and HTML elements
@@ -347,6 +346,7 @@ if (workingFiles)
             //Remove the HTML elements from working files
             parentDiv.parentElement?.removeChild(parentDiv);
         }
+
         else if (event && event.target && (event.target as HTMLElement).tagName !== "DETAILS" && (event.target as HTMLElement).tagName !== "SUMMARY") 
         {
             let fileIdentifier: number;