From 054cc5cad9a7ad067c19d5c532138a0c508ac6e9 Mon Sep 17 00:00:00 2001 From: Matt Pass Date: Thu, 30 May 2013 08:41:39 +0100 Subject: [PATCH] newTab behind others and fix move glitch newTab now has a z-index of 0 so that it slides behind other tabs when new tabs are opened serverMessage is now display: inline-block and hiding and showing is done on moving the left position to 0 or 2000px to show or hide (doing the show/hide on changing the display type was causing reflow issues which seemed to mean occassionally the newTab wasn't moving to the correct position) --- lib/ice-coder.css | 4 ++-- lib/ice-coder.js | 4 ++-- lib/ice-coder.min.js | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/lib/ice-coder.css b/lib/ice-coder.css index 7dfdbc5..56a2651 100644 --- a/lib/ice-coder.css +++ b/lib/ice-coder.css @@ -92,7 +92,7 @@ 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: #222; color: #eee} .files .frame {display: inline-block; width: 250px} -.files .serverMessage {position: absolute; display: none; width: 450px; bottom: 0; margin-bottom: 30px; background-color: rgba(255,255,255,0.8); font-size: 10px; padding: 7px 12px; opacity: 0; +.files .serverMessage {position: absolute; display: inline-block; width: 450px; bottom: 0; margin-bottom: 30px; background-color: rgba(255,255,255,0.8); font-size: 10px; padding: 7px 12px; opacity: 0; -webkit-transition: opacity 0.2s; -moz-transition: opacity 0.2s; transition: opacity 0.2s; @@ -125,7 +125,7 @@ h2 {font-size: 18px; font-weight: normal; color: #fff} .tabsBar .alphaTabs:hover {background: #000} .tabsBar .closeAllTabs {position: absolute; margin: 6px 0 0 -33px; background: #bbb} .tabsBar .closeAllTabs:hover {background: #000} -.tabsBar .newTab {position: absolute; display: inline-block; background-image: url('../images/nav-bg.jpg'); background-repeat: repeat-x; background-position: 0 0; padding: 6px 5px 5px 5px; border-left: solid 1px #eee; border-right: solid 1px #777; border-radius: 4px 4px 0 0; cursor: pointer; z-index: 1; +.tabsBar .newTab {position: absolute; display: inline-block; background-image: url('../images/nav-bg.jpg'); background-repeat: repeat-x; background-position: 0 0; padding: 6px 5px 5px 5px; border-left: solid 1px #eee; border-right: solid 1px #777; border-radius: 4px 4px 0 0; cursor: pointer; z-index: 0; -webkit-transition: left 0.15s ease-in-out; -moz-transition: left 0.15s ease-in-out; transition: left 0.15s ease-in-out; diff --git a/lib/ice-coder.js b/lib/ice-coder.js index f74ceeb..5a29f61 100644 --- a/lib/ice-coder.js +++ b/lib/ice-coder.js @@ -1265,9 +1265,9 @@ var ICEcoder = { serverMessage = document.getElementById('serverMessage'); if (message) { serverMessage.innerHTML = message; - serverMessage.style.display = "inline-block"; + serverMessage.style.left = "0"; } else { - setTimeout(function() {serverMessage.style.display = "none"},200); + setTimeout(function() {serverMessage.style.left = "2000px";},200); } serverMessage.style.opacity = message ? 1 : 0; }, diff --git a/lib/ice-coder.min.js b/lib/ice-coder.min.js index 696f213..667b1d0 100644 --- a/lib/ice-coder.min.js +++ b/lib/ice-coder.min.js @@ -57,7 +57,7 @@ ICEcoder.htmlTagArray[a]+"",ICEcoder.nestDisplay.innerHTML+=a=a||10<=a))&&top.ICEcoder.mouseX>parseInt(top.ICEcoder.files.style.width,10))top.ICEcoder.tabDragMouseX=top.ICEcoder.mouseX-parseInt(top.ICEcoder.files.style.width,10)-top.ICEcoder.tabDragMouseXStart,top.ICEcoder.tabDragMove();if(top.ICEcoder.ready&&(a=window.innerWidth?window.innerHeight:document.body.clientHeight,top.ICEcoder.mouseDown|| (top.ICEcoder.draggingFilesW=!1),a=!ICEcoder.draggingTab&&(top.ICEcoder.mouseX>top.ICEcoder.filesW-7&&top.ICEcoder.mouseXd.index+d[0].length;);(b=top.document.getElementById("content").contentWindow.document.getElementById("cssColor"))&& +a}},serverMessage:function(a){var b;b=document.getElementById("serverMessage");a?(b.innerHTML=a,b.style.left="0"):setTimeout(function(){b.style.left="2000px"},200);b.style.opacity=a?1:0},cssColorPreview:function(){var a,b,c,d;a=ICEcoder.getcMInstance();b=a.getLine(a.getCursor().line);for(c=/(#[\da-f]{3}(?:[\da-f]{3})?\b|\b(?:rgb|hsl)a?\([\s\d%,.-]+\)|\b[a-z]+\b)/gi;(d=c.exec(b))&&a.getCursor().ch>d.index+d[0].length;);(b=top.document.getElementById("content").contentWindow.document.getElementById("cssColor"))&& b.parentNode.removeChild(b);top.ICEcoder.codeAssist&&"CSS"==top.ICEcoder.caretLocType&&(b=top.document.createElement("div"),b.id="cssColor",b.style.position="absolute",b.style.display="block",b.style.width=b.style.height="20px",b.style.zIndex="1000",b.style.background=d?d[0]:"",b.style.cursor="pointer",b.onclick=function(){top.ICEcoder.showColorPicker(d[0])},""==b.style.backgroundColor&&(b.style.display="none"),top.document.getElementById("header").appendChild(b),a.addWidget(a.getCursor(),top.document.getElementById("cssColor"), !0))},showColorPicker:function(a){top.document.getElementById("blackMask").style.visibility="visible";top.document.getElementById("mediaContainer").innerHTML='



'; farbtastic("picker","color");a&&top.document.getElementById("picker").farbtastic.setColor(a)},drawCanvasImage:function(a){var b=document.getElementById("canvasPicker").getContext("2d"),c=new Image;c.src=a.src;c.onload=function(){document.getElementById("canvasPicker").width=a.width;document.getElementById("canvasPicker").height=a.height;b.drawImage(c,0,0,a.width,a.height)};document.getElementById("canvasPicker").onmousemove=function(a){var c=b.getImageData(a.pageX-this.offsetLeft,a.pageY-this.offsetTop,