From 4b207edd2f5c931ae87eabef7342f69253cb8ddd Mon Sep 17 00:00:00 2001 From: mattpass Date: Wed, 15 Jul 2020 18:10:44 +0100 Subject: [PATCH] Better design on serverMessages --- assets/css/icecoder.css | 7 ++----- assets/js/icecoder.js | 27 +++++++++++++-------------- classes/File.php | 2 +- index.php | 2 +- 4 files changed, 17 insertions(+), 21 deletions(-) diff --git a/assets/css/icecoder.css b/assets/css/icecoder.css index 7892f63..9067554 100644 --- a/assets/css/icecoder.css +++ b/assets/css/icecoder.css @@ -65,10 +65,6 @@ h2 {font-size: 18px; font-weight: normal; color: #fff} .files .button {position: absolute; border: 0; background: #444; color: #eee; height: 20px; margin-top: 16px; margin-left: 5px; font-size: 11px; cursor: pointer} .files .button:hover {background-color: #1d1d1b; color: #eee} .files .frame {display: inline-block; width: 250px; margin-top: 24px} -.files .serverMessage {position: absolute; display: inline-block; width: 450px; bottom: 0; background-color: rgba(255,255,255,0.8); font-size: 10px; padding: 4px 12px 1px 12px; opacity: 0; - transition: opacity 0.2s; -} -.files .serverMessage b {font-size: 10px} .files .tools {position: absolute; display: inline-block; width: 250px; height: 30px; left: 0; bottom: 0} .files .tools div {display: inline-block; margin: 8px 0 8px 15px; color: #666; cursor: pointer} @@ -137,7 +133,8 @@ h2 {font-size: 18px; font-weight: normal; color: #fff} .editor .code {position: relative; display: inline-block; top: 28px; width: 600px; height: 600px; visibility: hidden} .footer {position: fixed; display: inline-block; width: 100%; height: 30px; bottom: 0; background-color: rgba(0,0,0,0.15); left: 0; z-index: 1} -.footer .versionsDisplay {position: absolute; display: inline-block; padding: 5px; margin-top: 3px; left: 275px; color: #fff; cursor: pointer} +.footer .versionsDisplay {position: absolute; display: inline-block; padding: 5px; margin-top: 3px; left: 275px; color: #fff; transition: opacity 0.2s; z-index: 2; cursor: pointer} +.footer .serverMessage {position: absolute; display: inline-block; padding: 5px; margin-top: 3px; left: 250px; color: #fff; transition: opacity 0.2s; z-index: 1} .footer .splitPaneControls {position: absolute; display: inline-block; width: 50px; text-align: center; padding: 6px} .footer .splitPaneControls .off {display: inline-block; width: 18px; height: 18px; margin-right: 10px; background: url('../images/split-pane-controls.gif') no-repeat 0 0; cursor: pointer} .footer .splitPaneControls .on {display: inline-block; width: 19px; height: 18px; background: url('../images/split-pane-controls.gif') no-repeat -18px 0; cursor: pointer} diff --git a/assets/js/icecoder.js b/assets/js/icecoder.js index ca0954b..64edf69 100644 --- a/assets/js/icecoder.js +++ b/assets/js/icecoder.js @@ -198,6 +198,7 @@ var ICEcoder = { this.optionsFile.style.width = this.optionsEdit.style.width = this.optionsSettings.style.width = this.optionsHelp.style.width = this.filesW + "px"; this.filesFrame.style.height = (winH - headerH - fileNavH - 7 - toolsBarH) + "px"; this.versionsDisplay.style.left = (this.filesW + 10) + "px"; + get("serverMessage").style.left = (this.filesW + 10) + "px"; this.splitPaneControls.style.left = parseInt( ((winW - this.filesW) / 2) + @@ -1854,7 +1855,7 @@ var ICEcoder = { if (newFolder) { newFolder = (shortURL + "/" + newFolder).replace(/\/\//, "/"); this.serverQueue("add", iceLoc + "/lib/file-control.php?action=newFolder&csrf=" + this.csrf, encodeURIComponent(newFolder.replace(/\//g, "|"))); - this.serverMessage('' + t['Creating Folder'] + '
' + newFolder); + this.serverMessage('' + t['Creating Folder'] + ' ' + newFolder); } }, @@ -1918,7 +1919,7 @@ var ICEcoder = { if ("/[NEW]" !== shortURL) { fileLink = fileLink.replace(/\//g, "|"); this.serverQueue("add", iceLoc + "/lib/file-control.php?action=load&file=" + encodeURIComponent(fileLink) + "&csrf=" + this.csrf + "&lineNumber=" + line); - this.serverMessage('' + t['Opening File'] + '
' + shortURL); + this.serverMessage('' + t['Opening File'] + ' ' + shortURL.substr(shortURL.lastIndexOf("/") + 1)); } else { this.createNewTab(true, shortURL); } @@ -1956,7 +1957,7 @@ var ICEcoder = { } this.serverQueue("add", iceLoc + "/lib/file-control.php?action=getRemoteFile&csrf=" + this.csrf + "&lineNumber=" + line, encodeURIComponent(remoteFile)); - this.serverMessage('' + t['Getting'] + '
' + remoteFile); + this.serverMessage('' + t['Getting'] + ' ' + remoteFile); }, // Get changes to save (used when simply saving, gets diff changes between current and last known version) @@ -2050,7 +2051,7 @@ var ICEcoder = { } filePath = filePath.replace("||", "|"); ic.serverQueue("add", iceLoc + "/lib/file-control.php?action=save&fileMDT=" + ic.openFileMDTs[ic.selectedTab - 1] + "&fileVersion=" + ic.openFileVersions[ic.selectedTab - 1] + "&saveType=" + saveType + "&newFileAutoSave=" + newFileAutoSave + "&tabNum=" + ic.selectedTab + "&csrf=" + ic.csrf,encodeURIComponent(filePath), changes); - ic.serverMessage('' + t['Saving'] + '
' + ic.openFiles[ic.selectedTab - 1].replace(iceRoot, "")); + ic.serverMessage('' + t['Saving'] + ' ' + ic.openFiles[ic.selectedTab - 1].replace(iceRoot, "")); }, 0, ic); }, @@ -2069,7 +2070,7 @@ var ICEcoder = { } if (newName) { this.serverQueue("add", iceLoc + "/lib/file-control.php?action=rename&oldFileName=" + encodeURIComponent(oldName.replace(/\|/g, "/")) + "&csrf=" + this.csrf,encodeURIComponent(newName)); - this.serverMessage('' + t['Renaming to'] + '
' + newName); + this.serverMessage('' + t['Renaming to'] + ' ' + newName); this.setPreviousFiles(); } }, @@ -2081,7 +2082,7 @@ var ICEcoder = { if (newName && newName !== oldName) { if (this.ask("Are you sure you want to move file " + oldName + " to " + newName + " ?")){ this.serverQueue("add", iceLoc + "/lib/file-control.php?action=move&oldFileName=" + encodeURIComponent(oldName.replace(/\//g, "|")) + "&csrf=" + this.csrf, encodeURIComponent(newName.replace(/\//g, "|"))); - this.serverMessage('' + t['Moving to'] + '
' + newName); + this.serverMessage('' + t['Moving to'] + ' ' + newName); } this.setPreviousFiles(); @@ -2096,7 +2097,7 @@ var ICEcoder = { tgtListDisplay = tgtFiles.toString().replace(/\|/g, "/").replace(/,/g, "\n"); if (0 < tgtFiles.length && this.ask('Delete:\n\n' + tgtListDisplay + '?')) { this.serverQueue("add", iceLoc + "/lib/file-control.php?action=delete&csrf=" + this.csrf,encodeURIComponent(tgtFiles.join(";"))); - this.serverMessage('' + t['Deleting File'] + '
' + tgtListDisplay); + this.serverMessage('' + t['Deleting File'] + ' ' + tgtListDisplay); } }, @@ -2120,7 +2121,7 @@ var ICEcoder = { for (let i = 0; i < this.copiedFiles.length; i++) { if ("|" !== this.copiedFiles[i]) { this.serverQueue("add", iceLoc + "/lib/file-control.php?action=paste&location=" + location + "&csrf=" + this.csrf, encodeURIComponent(this.copiedFiles[i])); - this.serverMessage('' + t['Pasting File'] + '
' + this.copiedFiles[i].toString().replace(/\|/g, "/").replace(/,/g, "\n")); + this.serverMessage('' + t['Pasting File'] + ' ' + this.copiedFiles[i].toString().replace(/\|/g, "/").replace(/,/g, "\n")); } else { this.message(t['Sorry cannot paste...']); } @@ -2843,7 +2844,7 @@ var ICEcoder = { "&replace=" + replace + "&csrf=" + this.csrf, encodeURIComponent(fileRef.replace(/\//g, "|"))); - this.serverMessage('' + t['Replacing text in'] + '
' + fileRef); + this.serverMessage('' + t['Replacing text in'] + ' ' + fileRef); }, @@ -3014,12 +3015,10 @@ var ICEcoder = { serverMessage = get('serverMessage'); if (message) { - serverMessage.innerHTML = this.xssClean(message).replace(/\<b\>/g,"").replace(/\<\/b\>/g,"").replace(/\<br\>/g,"
"); - serverMessage.style.left = "0"; - } else { - setTimeout(function() {serverMessage.style.left = "2000px";},200); + serverMessage.innerHTML = this.xssClean(message).replace(/\<b\>/g,"").replace(/\<\/b\>/g,""); } serverMessage.style.opacity = message ? 1 : 0; + get("versionsDisplay").style.opacity = message ? 0 : 1; }, // Show a CSS color block next to our text cursor @@ -3671,7 +3670,7 @@ var ICEcoder = { file = file.replace(iceRoot,""); this.showHide('hide',get('blackMask')); this.serverQueue("add",iceLoc+"/lib/file-control.php?action=perms&perms="+perms+"&csrf="+this.csrf,encodeURIComponent(file)); - this.serverMessage('chMod '+perms+' on
'+file.replace(/\|/g,"/")); + this.serverMessage('chMod '+perms+' on '+file.replace(/\|/g,"/")); }, // Open/show the preview window diff --git a/classes/File.php b/classes/File.php index 814af2c..7bd3320 100644 --- a/classes/File.php +++ b/classes/File.php @@ -326,7 +326,7 @@ class File xhr.open("POST",saveURL,true); xhr.setRequestHeader(\'Content-type\', \'application/x-www-form-urlencoded\'); xhr.send(\'timeStart=' . numClean($_POST["timeStart"]) . '&file=' . $fileURL . '&newFileName=\' + newFileName.replace(/\\\+/g, "%2B") + \'&contents=\' + encodeURIComponent(ICEcoder.saveAsContent)); - ICEcoder.serverMessage("' . $t['Saving'] . '
" + "'.("Save" === $finalAction ? "newFileName" : "'" . $fileName . "'") . '"); + ICEcoder.serverMessage("' . $t['Saving'] . ' " + "'.("Save" === $finalAction ? "newFileName" : "'" . $fileName . "'") . '"); } } }, 10);' . diff --git a/index.php b/index.php index 604e4a4..1a4191a 100644 --- a/index.php +++ b/index.php @@ -297,7 +297,6 @@ if (true === $havePrettier && true === file_exists(dirname(__FILE__) . "/plugins -
Terminal
@@ -376,6 +375,7 @@ if (true === $havePrettier && true === file_exists(dirname(__FILE__) . "/plugins