milleral
/
CTF_Senior_Project
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added tooltips to Create Image Page

Browse Source
main
Alex 5 months ago
parent c5adde5509
commit acce365b64
3 changed files with 89 additions and 0 deletions
Show Stats Download Patch File Download Diff File

3
CTF/CTF-Frontend/src/app/create-image/create-image.component.css
Unescape View File

@ -97,3 +97,6 @@ button {
height: 25%; height: 25%;
margin: 10px; margin: 10px;
} }
h1 {
display: inline;
}

68
CTF/CTF-Frontend/src/app/create-image/create-image.component.html
Unescape View File

@ -13,6 +13,16 @@
<!-- Header --> <!-- Header -->
<div id="HeaderDiv"> <div id="HeaderDiv">
<h1> Create Image </h1> <h1> Create Image </h1>
<div class="tooltip">
?
<span class="tooltipText">
This is where you can create <span style="color: white">Images</span>
<br>
These are used as the file system inside the containers
</span>
</div>
<br>
<br>
<button class="Blue" (click)="navtoPageMC()">Back to Modify</button> <button class="Blue" (click)="navtoPageMC()">Back to Modify</button>
<br> <br>
<br> <br>
@ -21,6 +31,16 @@
<!-- File Contents --> <!-- File Contents -->
<div id="FileContentsDiv"> <div id="FileContentsDiv">
<h1> Contents of File </h1> <h1> Contents of File </h1>
<div class="tooltip">
?
<span class="tooltipText">
This is where you can insert text to
<br>
files you create using the <span style="color:white">File and Image</span> section
</span>
</div>
<br>
<br>
<div id="FileContents"> <div id="FileContents">
<div id="TextBox"> <div id="TextBox">
<textarea id="filecontents" placeholder="Enter contents of files here" cols="40" rows="20"></textarea> <textarea id="filecontents" placeholder="Enter contents of files here" cols="40" rows="20"></textarea>
@ -31,6 +51,24 @@
<!-- Form for adding files and directories --> <!-- Form for adding files and directories -->
<div id="FormDiv"> <div id="FormDiv">
<h1> File and Image </h1> <h1> File and Image </h1>
<div class="tooltip">
?
<span class="tooltipText">
This is where you add Folders and Files that you are not uploading
<br>
Just insert the name of the file, select a Directory in <span style="color: white">File Tree</span>
<br>
and click the appropriate button to add to the Directory you just selected.
<br>
you can also select multiple Directories at once to add to
<br>
once you're done, simply click <span style="color:lawngreen">Create Image</span>
<br>
to create your new image
</span>
</div>
<br>
<br>
<div id="FormStuff"> <div id="FormStuff">
<label> Image Name: </label> <label> Image Name: </label>
<input id="ImageName" type="text" placeholder="image name"> <input id="ImageName" type="text" placeholder="image name">
@ -52,6 +90,17 @@
<!-- Drop Box --> <!-- Drop Box -->
<div id="DropBoxDiv"> <div id="DropBoxDiv">
<h1> Drop Box </h1> <h1> Drop Box </h1>
<div class="tooltip">
?
<span class="tooltipText">
This is where you can drop files into and add to the <span style="color:white">File Tree</span>
<br>
just drop the files in after selecting the Directories you want
<br>
there is <span style="color:red">NO</span> need to click on <span style="color:lawngreen">Add File</span>
</span>
</div>
<br>
<div id="DropBox"> <div id="DropBox">
<p> Drag and Drop files here or: </p> <p> Drag and Drop files here or: </p>
<input type="file" id="FileInput" multiple (change)="onFileChange($event)"> <input type="file" id="FileInput" multiple (change)="onFileChange($event)">
@ -61,6 +110,25 @@
<!-- File Tree --> <!-- File Tree -->
<div id="FileTreeDiv"> <div id="FileTreeDiv">
<h1> File Tree </h1> <h1> File Tree </h1>
<div class="tooltip">
?
<span class="tooltipText">
In this section, it shows the whole file tree as you are making it
<br>
you can select Directories to <span style="color:lawngreen">Add</span>
<br>
to the Directory or you can select Directories <span style="color:white">AND</span>
<br>
Files and click on <span style="color:red">Delete</span> to delete them
<br>
when deleting a Directory, everything inside that Directoy will be deleted.
<br>
you can also select <span style="background-color:black; color:white">Root</span>
<br>
in order to delete the whole tree itself, Directories are noted by <span style="color:white">(D)-</span>
</span>
</div>
<br>
<div id="FileTree"> <div id="FileTree">
</div> </div>

18
CTF/CTF-Frontend/src/styles.css
Unescape View File

@ -102,3 +102,21 @@ label {
font-weight: bold; font-weight: bold;
} }
/* tooltips */
.tooltip {
font-weight: bold;
color: white;
display: inline;
}
.tooltip:hover .tooltipText {
visibility: visible;
}
.tooltip .tooltipText {
visibility: hidden;
height: auto;
background-color: gray;
color: black;
text-align: center;
position: absolute;
padding: 5px;
}

Write Preview
Loading…
Cancel
Save