From b7f75a637c714f6412babdc50b453abacc01101c Mon Sep 17 00:00:00 2001 From: mattpass Date: Sat, 4 Jul 2020 12:55:06 +0100 Subject: [PATCH] File icons added to tabs --- assets/css/file-type-icons.css | 56 +++++++++++++++++----------------- assets/css/icecoder.css | 3 ++ assets/js/icecoder.js | 50 +++++++++++++++++++----------- index.php | 1 + 4 files changed, 64 insertions(+), 46 deletions(-) diff --git a/assets/css/file-type-icons.css b/assets/css/file-type-icons.css index ba9a031..1fd378d 100644 --- a/assets/css/file-type-icons.css +++ b/assets/css/file-type-icons.css @@ -1,29 +1,29 @@ /* Additional file types */ -.fileManager LI.ext-c:before {background-position: -48px 0} -.fileManager LI.ext-cpp:before, .fileManager LI.ext-ino:before {background-position: -64px 0} -.fileManager LI.ext-cs:before {background-position: -80px 0} -.fileManager LI.ext-coffee:before {background-position: -96px 0} -.fileManager LI.ext-css:before {background-position: -112px 0} -.fileManager LI.ext-erl:before {background-position: -128px 0} -.fileManager LI.ext-gif:before {background-position: -144px 0} -.fileManager LI.ext-go:before {background-position: -160px 0} -.fileManager LI.ext-htm:before, .fileManager LI.ext-html:before {background-position: -176px 0} -.fileManager LI.ext-jpg:before, .fileManager LI.ext-jpeg:before {background-position: -192px 0} -.fileManager LI.ext-java:before {background-position: -208px 0} -.fileManager LI.ext-js:before, .fileManager LI.ext-json:before {background-position: -224px 0} -.fileManager LI.ext-jl:before {background-position: -240px 0} -.fileManager LI.ext-less:before {background-position: -256px 0} -.fileManager LI.ext-lua:before {background-position: -272px 0} -.fileManager LI.ext-md:before {background-position: -288px 0} -.fileManager LI.ext-pl:before {background-position: -304px 0} -.fileManager LI.ext-php:before {background-position: -320px 0} -.fileManager LI.ext-png:before {background-position: -336px 0} -.fileManager LI.ext-py:before, .fileManager LI.ext-mpy:before {background-position: -352px 0} -.fileManager LI.ext-rb:before, .fileManager LI.ext-ruby:before {background-position: -368px 0} -.fileManager LI.ext-scss:before {background-position: -384px 0} -.fileManager LI.ext-sql:before {background-position: -400px 0} -.fileManager LI.ext-txt:before {background-position: -416px 0} -.fileManager LI.ext-ts:before {background-position: -432px 0} -.fileManager LI.ext-xml:before {background-position: -448px 0} -.fileManager LI.ext-yaml:before {background-position: -464px 0} -.fileManager LI.ext-zip:before {background-position: -480px 0} +.ext-c:before {background-position: -48px 0 !important;} +.ext-cpp:before, .ext-ino:before {background-position: -64px 0 !important;} +.ext-cs:before {background-position: -80px 0 !important;} +.ext-coffee:before {background-position: -96px 0 !important;} +.ext-css:before {background-position: -112px 0 !important;} +.ext-erl:before {background-position: -128px 0 !important;} +.ext-gif:before {background-position: -144px 0 !important;} +.ext-go:before {background-position: -160px 0 !important;} +.ext-htm:before, .ext-html:before {background-position: -176px 0 !important;} +.ext-jpg:before, .ext-jpeg:before {background-position: -192px 0 !important;} +.ext-java:before {background-position: -208px 0 !important;} +.ext-js:before, .ext-json:before {background-position: -224px 0 !important;} +.ext-jl:before {background-position: -240px 0 !important;} +.ext-less:before {background-position: -256px 0 !important;} +.ext-lua:before {background-position: -272px 0 !important;} +.ext-md:before {background-position: -288px 0 !important;} +.ext-pl:before {background-position: -304px 0 !important;} +.ext-php:before {background-position: -320px 0 !important;} +.ext-png:before {background-position: -336px 0 !important;} +.ext-py:before, .ext-mpy:before {background-position: -352px 0 !important;} +.ext-rb:before, .ext-ruby:before {background-position: -368px 0 !important;} +.ext-scss:before {background-position: -384px 0 !important;} +.ext-sql:before {background-position: -400px 0 !important;} +.ext-txt:before {background-position: -416px 0 !important;} +.ext-ts:before {background-position: -432px 0 !important;} +.ext-xml:before {background-position: -448px 0 !important;} +.ext-yaml:before {background-position: -464px 0 !important;} +.ext-zip:before {background-position: -480px 0 !important;} diff --git a/assets/css/icecoder.css b/assets/css/icecoder.css index b8d66ce..7892f63 100644 --- a/assets/css/icecoder.css +++ b/assets/css/icecoder.css @@ -83,6 +83,9 @@ h2 {font-size: 18px; font-weight: normal; color: #fff} transition: width 0.15s ease-in-out; transition: left 0.15s ease-in-out; } +.tabsBar .tab:before { + position: absolute; width: 16px; height: 16px; content: ""; margin-left: -2px; background:url('../images/file-folder-icons.png') no-repeat 0 0; background-position: -32px 0; +} .tabsBar .tabSlide { transition: left 0.15s ease-in-out; } diff --git a/assets/js/icecoder.js b/assets/js/icecoder.js index c49699a..9ec3ead 100644 --- a/assets/js/icecoder.js +++ b/assets/js/icecoder.js @@ -3995,7 +3995,7 @@ var ICEcoder = { // Create a new tab for a file createNewTab: function(isNew) { - var closeTabLink, fileName; + var closeTabLink, fileName, fileExt; // Push new file into array this.openFiles.push(this.shortURL); @@ -4004,8 +4004,10 @@ var ICEcoder = { closeTabLink = ''; get('tab'+(this.openFiles.length)).style.display = "inline-block"; fileName = this.openFiles[this.openFiles.length-1]; - get('tab'+(this.openFiles.length)).innerHTML = closeTabLink + " " + fileName.slice(fileName.lastIndexOf("/")).replace(/\//,""); + fileExt = fileName.substr(fileName.lastIndexOf(".") + 1); + get('tab'+(this.openFiles.length)).innerHTML = closeTabLink + "" + fileName.slice(fileName.lastIndexOf("/")).replace(/\//,""); get('tab'+(this.openFiles.length)).title = "/" + this.openFiles[this.openFiles.length-1].replace(/\//,""); + get('tab'+(this.openFiles.length)).className = "tab ext-" + fileExt; // Set the widths this.setTabWidths(); @@ -4041,7 +4043,7 @@ var ICEcoder = { // Create a new tab for a file renameTab: function(tabNum,newName) { - var closeTabLink, fileName; + var closeTabLink, fileName, fileExt; // Push new file into array this.openFiles[tabNum-1] = newName; @@ -4049,8 +4051,10 @@ var ICEcoder = { // Setup a new tab closeTabLink = ''; fileName = this.openFiles[tabNum-1]; - get('tab'+tabNum).innerHTML = closeTabLink + " " + fileName.slice(fileName.lastIndexOf("/")).replace(/\//,""); + fileExt = fileName.substr(fileName.lastIndexOf(".") + 1); + get('tab'+tabNum).innerHTML = closeTabLink + "" + fileName.slice(fileName.lastIndexOf("/")).replace(/\//,""); get('tab'+tabNum).title = "/" + this.openFiles[tabNum-1].replace(/\//,""); + get('tab'+tabNum).className = "tab ext-" + fileExt; }, // Reset all tabs to be without a highlight and then highlight the selected @@ -4235,6 +4239,7 @@ var ICEcoder = { // Tab dragging start tabDragStart: function(tab) { + var fileName, fileExt; this.draggingTab = tab; this.diffStartX = this.mouseX; this.tabDragMouseXStart = (this.mouseX - (parseInt(this.files.style.width,10)+53+18)) % 150; @@ -4242,9 +4247,11 @@ var ICEcoder = { get('tab'+tab).style.zIndex = 2; // Set classes for other tabs (tabSlide) and the one we're dragging (tabDrag) for (var i=1; i<=this.openFiles.length; i++) { + fileName = this.openFiles[i - 1]; + fileExt = fileName.substr(fileName.lastIndexOf(".") + 1); get('tab'+i).className = i!==tab - ? "tab tabSlide" - : "tab tabDrag"; + ? "tab ext-" + fileExt + " tabSlide" + : "tab ext-" + fileExt + " tabDrag"; } }, @@ -4283,23 +4290,25 @@ var ICEcoder = { // Tab dragging end tabDragEnd: function() { - var swapWith, tempArray; + var swapWith, fileName, fileExt, tempArray; // Set the tab widths this.setTabWidths(); - // Determin what tabs we've swapped and reset classname, opacity & z-index for all + // Determine what tabs we've swapped and reset classname, opacity & z-index for all for (var i=1; i<=this.openFiles.length; i++) { if (this.thisLeft >= this.tabLeftPos[i-1]) { swapWith = this.thisLeft == this.tabLeftPos[0] ? 1 : this.dragTabNo > i ? i+1 : i; } - get('tab'+i).className = "tab"; + fileName = this.openFiles[i - 1]; + fileExt = fileName.substr(fileName.lastIndexOf(".") + 1); + get('tab'+i).className = "tab ext-" + fileExt; get('tab'+i).style.opacity = 1; if (i!=this.dragTabNo) { get('tab'+i).style.zIndex = 1; } else { - setTimeout(function() { - get('tab'+i).style.zIndex = 1; - },150); + setTimeout(function(num) { + get('tab' + num).style.zIndex = 1; + }, 150, swapWith); } } if (this.thisLeft && this.thisLeft!==false) { @@ -4326,6 +4335,7 @@ var ICEcoder = { // Setup an array of our actual arrays and the blank ones a = [this.savedPoints, this.savedContents, this.openFiles, this.openFileMDTs, this.openFileVersions, this.cMInstances]; b = [savedPoints, savedContents, openFiles, openFileMDTs, openFileVersions, cMInstances]; + // Push the new order values into array b then set into array a for (var i=0;i0) { var currentArray, currentArrayFull, alphaArray, nextValue, nextPos; @@ -4371,7 +4383,9 @@ var ICEcoder = { for (var i=0;i0) { diff --git a/index.php b/index.php index b55daf5..a874a5c 100644 --- a/index.php +++ b/index.php @@ -49,6 +49,7 @@ $isMac = false !== strpos($_SERVER['HTTP_USER_AGENT'], "Macintosh") ? true : fal +