Close icon added for 4 x tools

This commit is contained in:
mattpass
2020-08-13 12:26:32 +01:00
parent fbe19fc431
commit b5b6b92204
5 changed files with 21 additions and 5 deletions

View File

@@ -9,9 +9,7 @@ body {overflow: hidden;
h1 {font-size: 36px; font-weight: normal; color: #888; margin-bottom: 20px}
h2 {font-size: 18px; font-weight: normal; color: #fff}
.icon {position: absolute; margin-left: 2px}
.icon-tabler {width: 24px; height: 24px; stroke-width: 1.25; color: #888}
.icon-tabler {width: 24px; height: 24px; stroke-width: 1.25}
.blackMask {position: fixed; display: table; width: 100%; height: 100%; top: 0; left: 0; visibility: hidden; background-color: rgba(0,0,0,0.8); text-align: center; z-index: 100}
.blackMask .popupVCenter {#position: absolute; display: table-cell; #top: 50%; vertical-align: middle; text-align: center}
.popupVCenter .popup {#position: relative; #top: -50%; text-align: center; color: #fff; font-size: 10px}
@@ -151,6 +149,8 @@ h2 {font-size: 18px; font-weight: normal; color: #fff}
.fileMenu hr {border: 0; height: 1px; padding: 0; margin: 0; background: #444}
.tooltip {position: absolute; top: 0; left: 0; padding: 5px; background: #444; color: #bbb}
.closeIcon {position: fixed; display: inline-block; top: 10px; right: 10px; width: 24px; height: 24px; color: #888; cursor: pointer; z-index: 101}
.closeIcon:hover {color: #ddd}
.screenContainer {position: absolute; display: table; width: 100%; height: 100%; top: 0; left: 0; text-align: center}
.screenContainer .screenVCenter {#position: absolute; display: table-cell; #top: 50%; vertical-align: middle; text-align: center}
@@ -163,3 +163,4 @@ h2 {font-size: 18px; font-weight: normal; color: #fff}
.screenCenter .password:focus {outline: none; background: rgba(0,198,255,0.5); color: #fff}
.screenCenter .button {border: 0; background: #444; color: #eee; height: 22px; cursor: pointer}
.screenCenter .button:hover {background: #2187e7; color: #eee}
.screenCenter .iconCapsLock {position: absolute; margin-left: 2px; color: #888}

View File

@@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-x" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<line x1="18" y1="6" x2="6" y2="18" />
<line x1="6" y1="6" x2="18" y2="18" />
</svg>

After

Width:  |  Height:  |  Size: 360 B

View File

@@ -332,6 +332,14 @@ var ICEcoder = {
// Note which tool we're showing
this.showingTool = this.showingTool !== tool ? tool : false;
// Display and make close icon clickable to close this tool
setTimeout(function() {
get('closeIcon').style.display = ICEcoder.showingTool !== false ? "inline-block" : "none";
get('closeIcon').onclick = function() {
ICEcoder.toolShowHideToggle(ICEcoder.showingTool);
}
}, this.showingTool !== false ? 200 : 0);
}
},

View File

@@ -385,6 +385,8 @@ if (true === $havePrettier && true === file_exists(dirname(__FILE__) . "/plugins
<div id="tooltip" class="tooltip" style="display: none"></div>
<div class="closeIcon" style="display: none" id="closeIcon"><?php echo file_get_contents(dirname(__FILE__) . "/assets/images/icons/x.svg");?></div>
<script>
ICEcoder.initAliases();
ICEcoder.setLayout(false);

View File

@@ -39,7 +39,7 @@ echo $settingPW ? "Setup" : "Login";
} else {
?> onkeyup="checkCase(event)"<?php
}
?>><div class="icon" style="display: none" id="capsLockDisplay" title="Caps lock on"><?php echo file_get_contents("../assets/images/icons/alert-triangle.svg");?></div><br>
?>><div class="iconCapsLock" style="display: none" id="iconCapsLock" title="Caps lock on"><?php echo file_get_contents(dirname(__FILE__) . "/../assets/images/icons/alert-triangle.svg");?></div><br>
<?php
if ($settingPW) {
echo '<div id="pwReqs">'.
@@ -117,7 +117,7 @@ const checkCase = function(evt) {
// Not caps lock key
if (20 !== key) {
get("capsLockDisplay").style.display = true === evt.getModifierState("CapsLock")
get("iconCapsLock").style.display = true === evt.getModifierState("CapsLock")
? "inline-block"
: "none";
}