Skip to content
This repository has been archived by the owner on Jul 12, 2022. It is now read-only.

Commit

Permalink
#11 Icon functionality + beginnings of WF removal
Browse files Browse the repository at this point in the history
  • Loading branch information
Adam Scott committed May 23, 2021
1 parent 10e572e commit d0ff956
Show file tree
Hide file tree
Showing 2 changed files with 94 additions and 9 deletions.
17 changes: 8 additions & 9 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@
</svg>
<span class="tooltiptext">Open File</span>
</div>
<div class="tooltip">
<div id="searchFolderIcon" class="tooltip">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-list-search" width="24"
height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
stroke-linecap="round" stroke-linejoin="round">
Expand All @@ -76,15 +76,15 @@
<div id="iconTwo">
<p>Text Options</p>
<div id="textOptions">
<div class="tooltip">
<div id="boldTextIcon" class="tooltip">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-bold" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M7 5h6a3.5 3.5 0 0 1 0 7h-6z" />
<path d="M13 12h1a3.5 3.5 0 0 1 0 7h-7v-7" />
</svg>
<span class="tooltiptext">Bold text</span>
<span class="tooltiptext">Bold text (ctrl + b)</span>
</div>
<div class="tooltip">
<div id="italicTextIcon" class="tooltip">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-italic" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<line x1="11" y1="5" x2="17" y2="5" />
Expand All @@ -93,7 +93,7 @@
</svg>
<span class="tooltiptext">Italicise text</span>
</div>
<div class="tooltip">
<div id="underlineTextIcon" class="tooltip">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-underline" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M7 5v5a5 5 0 0 0 10 0v-5" />
Expand All @@ -102,6 +102,8 @@
<span class="tooltiptext">Underline text</span>
</div>
<div class='psuedoButton'>
<!-- TODO MAKE THIS ENTIRE SECTION A FORM POPUP, SO WE CAN ADD A CONFIRM BUTTON TO THE COLOUR -->

<div class="tooltip">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-palette" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
Expand All @@ -110,7 +112,6 @@
<circle cx="12" cy="7.5" r=".5" fill="currentColor" />
<circle cx="16.5" cy="10.5" r=".5" fill="currentColor" />
</svg>

<input type="color" id="colourPicker" value="currentColor">
<span class="tooltiptext">Colour text</span>
</div>
Expand All @@ -132,9 +133,7 @@
<div id="leftSideContainer">
<details id="workingFilesDetail">
<summary>Working files</summary>
<div><p>Samplefile.yarn</p><button>x</button></div>
<div><p>Samplefile.yarn</p><button>x</button></div>
<div><p>Samplefile.yarn</p><button>x</button></div>
<!-- <div><p>Samplefile.yarn</p><button id="0">x</button></div> -->
</details>
</div>
</div>
Expand Down
86 changes: 86 additions & 0 deletions src/views/ts/renderer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,92 @@ if (containerElement)
});
}



const workingFiles = document.getElementById("workingFilesDetail");

if (workingFiles){

var childrenOfWF = workingFiles.children;


}



/*
Generic function for inserting at the front and the end of a selection
*/
function wrapTextWithTag(textFront: String, textBack: String){

var selection = editor.getSelection() as monaco.IRange;
var selectFront = new monaco.Selection(selection.startLineNumber, selection.startColumn, selection.startLineNumber, selection.startColumn);
var selectBack = new monaco.Selection(selection.endLineNumber, selection.endColumn, selection.endLineNumber, selection.endColumn);


var frontString = textFront.concat("");//Needs to concat an empty character in order to set the cursor properly

//In this order, so when nothing is selected, textFront is prepended after textBack is inserted
editor.focus();//Set focus back to editor

editor.executeEdits("", [{range: selectBack, text: textBack as string}]);//Set textBack
editor.setPosition(new monaco.Position(selectFront.startLineNumber, selectFront.startColumn));//reset cursor to behind textFront input
editor.executeEdits("", [{range: selectFront, text: frontString as string}]);//Set textFront
editor.setSelection(new monaco.Selection(selection.startLineNumber, selection.startColumn + frontString.length, selection.startLineNumber, selection.startColumn + frontString.length));
//Reset collection to an empty range
}


//Set selection to BOLD
const boldText = document.getElementById("boldTextIcon");
if (boldText){
boldText.onclick = () => { wrapTextWithTag("[b]", "[\\b]"); };
}

//Set selection to Italics
const italicText = document.getElementById("italicTextIcon");
if (italicText){
italicText.onclick = () => { wrapTextWithTag("[i]", "[\\i]"); };
}

//Set selection to Underline
const underlineText = document.getElementById("underlineTextIcon");
if (underlineText){
underlineText.onclick = () => { wrapTextWithTag("[u]", "[\\u]"); };
}

//TODO Set selection to selected colour
const colourPick = document.getElementById("colourPicker");
if (colourPick){
colourPick.onchange = () => {
var value = (colourPick as HTMLInputElement).value;

var startText = "[col=\'".concat(value.substr(1)).concat("\']");
var endText = "[\\col]";

wrapTextWithTag(startText, endText);
editor.focus();
}
}

//Listen for editor commands
window.addEventListener("keydown", (e) =>{
if (e.ctrlKey && e.key === "b"){
boldText?.click();//send bold click event
}

//TODO remove the monaco commands that use these command combinations
// if (e.ctrlKey && e.key === "i"){
// italicText?.click();
// }

// if (e.ctrlKey && e.key === "u"){
// underlineText?.click();
// }
});



const saveFileIcon = document.getElementById("saveFileIcon");

if (saveFileIcon)
Expand Down

0 comments on commit d0ff956

Please sign in to comment.