From 238f5fc5f3833f8299e2ad8b01ae8a7e4bf8a5f0 Mon Sep 17 00:00:00 2001
From: Shannon <sdeminick@gmail.com>
Date: Thu, 23 Oct 2014 14:01:16 +1000
Subject: [PATCH] Fixes: U4-5676 Styling in template editors is poor with the
 scrollbars and padding , the problem was due to a few too many
 umb-scrollables defined which causes multiple resizing, this should also
 improve the UI performance for legacy editors. Have also removed the hard
 coded width/heights in the code editors, have disabled codemirror from
 autoscaling as well in these editors since that causes additional scrollbars
 and overhead. Have tested all these changes in all browers and it's much
 better.

---
 .../umbraco/developer/Python/editPython.aspx  |  5 +-
 .../umbraco/developer/Xslt/editXslt.aspx      |  4 +-
 .../umbraco/settings/editTemplate.aspx        |  8 ++--
 .../umbraco/settings/scripts/editScript.aspx  | 10 ++--
 .../settings/stylesheet/editstylesheet.aspx   |  2 +-
 .../umbraco/settings/views/EditView.aspx      | 14 +++---
 src/umbraco.controls/CodeArea.cs              | 46 +++++++++++--------
 src/umbraco.controls/Panel.cs                 |  2 +-
 src/umbraco.controls/TabPage.cs               |  2 +-
 9 files changed, 49 insertions(+), 44 deletions(-)

diff --git a/src/Umbraco.Web.UI/umbraco/developer/Python/editPython.aspx b/src/Umbraco.Web.UI/umbraco/developer/Python/editPython.aspx
index 082c480869..d4b2d5ce68 100644
--- a/src/Umbraco.Web.UI/umbraco/developer/Python/editPython.aspx
+++ b/src/Umbraco.Web.UI/umbraco/developer/Python/editPython.aspx
@@ -38,13 +38,12 @@
     <cc1:TabView ID="UmbracoPanel1" runat="server" Text="Edit scripting file">
         
         <cc1:Pane ID="Pane1" runat="server" Style="margin-bottom: 10px;">
-            <cc1:CodeArea ID="pythonSource" ClientSaveMethod="doSubmit" AutoSuggest="true"  CodeBase="Razor" AutoResize="true" OffSetX="47"
-                OffSetY="55" runat="server" />
+            <cc1:CodeArea ID="pythonSource" ClientSaveMethod="doSubmit" AutoSuggest="true"  CodeBase="Razor" AutoResize="false" runat="server" />
         </cc1:Pane>
 
         <cc1:Pane ID="Pane2" runat="server">
             <cc1:PropertyPanel ID="pp_filename" Text="Filename" runat="server">
-                <asp:TextBox ID="pythonFileName" runat="server" Width="400" CssClass="guiInputText"></asp:TextBox>
+                <asp:TextBox ID="pythonFileName" runat="server" CssClass="guiInputText"></asp:TextBox>
             </cc1:PropertyPanel>
             <cc1:PropertyPanel ID="pp_testing" runat="server" Text="Skip testing (ignore errors)">
                 <asp:CheckBox ID="SkipTesting" runat="server"></asp:CheckBox>
diff --git a/src/Umbraco.Web.UI/umbraco/developer/Xslt/editXslt.aspx b/src/Umbraco.Web.UI/umbraco/developer/Xslt/editXslt.aspx
index a51caa8be8..8a58fd6589 100644
--- a/src/Umbraco.Web.UI/umbraco/developer/Xslt/editXslt.aspx
+++ b/src/Umbraco.Web.UI/umbraco/developer/Xslt/editXslt.aspx
@@ -54,12 +54,12 @@
 <asp:Content ContentPlaceHolderID="body" runat="server" ID="cp1">
     <cc1:TabView ID="UmbracoPanel1" runat="server" Text="Edit xsl" hasMenu="true">
             <cc1:Pane runat="server" ID="pane1">
-                <cc1:CodeArea ID="editorSource" CodeBase="XML" runat="server" AutoResize="true" OffSetX="47" OffSetY="55" />
+                <cc1:CodeArea ID="editorSource" CodeBase="XML" runat="server" AutoResize="false"  />
             </cc1:Pane>
             
             <cc1:Pane runat="server" ID="pane2">
                  <cc1:PropertyPanel ID="pp_filename" runat="server" Text="Filename">
-                    <asp:TextBox ID="xsltFileName" runat="server" Width="300" CssClass="guiInputText"></asp:TextBox>
+                    <asp:TextBox ID="xsltFileName" runat="server" CssClass="guiInputText"></asp:TextBox>
                 </cc1:PropertyPanel>
                 <cc1:PropertyPanel ID="pp_testing" runat="server" Text="Skip testing (ignore errors)">
                     <asp:CheckBox ID="SkipTesting" runat="server"></asp:CheckBox>
diff --git a/src/Umbraco.Web.UI/umbraco/settings/editTemplate.aspx b/src/Umbraco.Web.UI/umbraco/settings/editTemplate.aspx
index da36e5ae7d..4f16123fba 100644
--- a/src/Umbraco.Web.UI/umbraco/settings/editTemplate.aspx
+++ b/src/Umbraco.Web.UI/umbraco/settings/editTemplate.aspx
@@ -109,20 +109,20 @@
         
         <cc1:Pane ID="Pane7" runat="server">
             <cc1:PropertyPanel ID="pp_name" runat="server">
-                <asp:TextBox ID="NameTxt" Width="350px" runat="server"></asp:TextBox>
+                <asp:TextBox ID="NameTxt" runat="server"></asp:TextBox>
             </cc1:PropertyPanel>
             <cc1:PropertyPanel ID="pp_alias" runat="server">
-                <asp:TextBox ID="AliasTxt" Width="350px" runat="server"></asp:TextBox>
+                <asp:TextBox ID="AliasTxt" runat="server"></asp:TextBox>
             </cc1:PropertyPanel>
             <cc1:PropertyPanel ID="pp_masterTemplate" runat="server">
-                <asp:DropDownList ID="MasterTemplate" Width="350px" runat="server" />
+                <asp:DropDownList ID="MasterTemplate" runat="server" />
             </cc1:PropertyPanel>
         </cc1:Pane>    
         
         <cc1:Pane ID="Pane8" runat="server">
             <cc1:PropertyPanel ID="pp_source" runat="server">
                 <cc1:CodeArea ID="editorSource" runat="server" CodeBase="HtmlMixed" EditorMimeType="text/html" ClientSaveMethod="doSubmit"
-                    AutoResize="true" OffSetX="37" OffSetY="54"/>
+                    AutoResize="false" />
             </cc1:PropertyPanel>
         </cc1:Pane>
 
diff --git a/src/Umbraco.Web.UI/umbraco/settings/scripts/editScript.aspx b/src/Umbraco.Web.UI/umbraco/settings/scripts/editScript.aspx
index 489470895e..e68922bd98 100644
--- a/src/Umbraco.Web.UI/umbraco/settings/scripts/editScript.aspx
+++ b/src/Umbraco.Web.UI/umbraco/settings/scripts/editScript.aspx
@@ -39,17 +39,17 @@
     </script>
 </asp:Content>
 <asp:Content ContentPlaceHolderID="body" runat="server">
-    <cc1:TabView ID="Panel1" runat="server" Width="608px" Height="336px" hasMenu="true">
-         <cc1:Pane ID="Pane7" runat="server" Height="44px" Width="528px">
+    <cc1:TabView ID="Panel1" runat="server" hasMenu="true">
+         <cc1:Pane ID="Pane7" runat="server" >
             <cc1:PropertyPanel ID="pp_source" runat="server">
                 <cc1:CodeArea ID="editorSource" CodeBase="JavaScript" ClientSaveMethod="doSubmit"
-                    runat="server" AutoResize="true" OffSetX="47" OffSetY="47" />
+                    runat="server" AutoResize="false" />
             </cc1:PropertyPanel>
          </cc1:Pane>
 
-        <cc1:Pane ID="Pane8" runat="server" Height="44px" Width="528px">
+        <cc1:Pane ID="Pane8" runat="server" >
             <cc1:PropertyPanel runat="server" ID="pp_name">
-                <asp:TextBox ID="NameTxt" Width="350px" runat="server"></asp:TextBox>
+                <asp:TextBox ID="NameTxt" runat="server"></asp:TextBox>
             </cc1:PropertyPanel>
             <cc1:PropertyPanel runat="server" ID="pp_path">
                 <asp:Literal ID="lttPath" runat="server" />
diff --git a/src/Umbraco.Web.UI/umbraco/settings/stylesheet/editstylesheet.aspx b/src/Umbraco.Web.UI/umbraco/settings/stylesheet/editstylesheet.aspx
index 4e79f8b3fe..f107edad96 100644
--- a/src/Umbraco.Web.UI/umbraco/settings/stylesheet/editstylesheet.aspx
+++ b/src/Umbraco.Web.UI/umbraco/settings/stylesheet/editstylesheet.aspx
@@ -40,7 +40,7 @@
 
         <cc1:Pane ID="Pane7" CssClass="pane" runat="server">
             <cc1:PropertyPanel ID="pp_source" runat="server">
-                <cc1:CodeArea ID="editorSource" CodeBase="Css" OffSetX="37" OffSetY="54" AutoResize="true" runat="server" />
+                <cc1:CodeArea ID="editorSource" CodeBase="Css" AutoResize="false" runat="server" />
             </cc1:PropertyPanel>
         </cc1:Pane>
 
diff --git a/src/Umbraco.Web.UI/umbraco/settings/views/EditView.aspx b/src/Umbraco.Web.UI/umbraco/settings/views/EditView.aspx
index 2c6fc12f76..ba464262d0 100644
--- a/src/Umbraco.Web.UI/umbraco/settings/views/EditView.aspx
+++ b/src/Umbraco.Web.UI/umbraco/settings/views/EditView.aspx
@@ -55,26 +55,26 @@
 
 <asp:Content ContentPlaceHolderID="body" runat="server">
     
-    <cc1:TabView ID="Panel1" runat="server" Width="608px" Height="336px" hasMenu="true">
+    <cc1:TabView ID="Panel1" runat="server" hasMenu="true">
         
-         <cc1:Pane ID="Pane8" runat="server" Height="44px" Width="528px">
+         <cc1:Pane ID="Pane8" runat="server" >
             <cc1:PropertyPanel ID="pp_source" runat="server">
-                <cc1:CodeArea ID="editorSource" runat="server" CodeBase="Razor" ClientSaveMethod="doSubmit" AutoResize="true" OffSetX="37" OffSetY="54"/>
+                <cc1:CodeArea ID="editorSource" runat="server" CodeBase="Razor" ClientSaveMethod="doSubmit" AutoResize="false" />
             </cc1:PropertyPanel>
          </cc1:Pane>
             
-        <cc1:Pane ID="Pane7" runat="server" Height="44px" Width="528px">
+        <cc1:Pane ID="Pane7" runat="server" >
             
             <cc1:PropertyPanel ID="pp_name" runat="server">
-                <asp:TextBox ID="NameTxt" Width="350px" runat="server"></asp:TextBox>
+                <asp:TextBox ID="NameTxt" runat="server"></asp:TextBox>
             </cc1:PropertyPanel>
             
             <cc1:PropertyPanel ID="pp_alias" runat="server">
-                <asp:TextBox ID="AliasTxt" Width="350px" runat="server"></asp:TextBox>
+                <asp:TextBox ID="AliasTxt" runat="server"></asp:TextBox>
             </cc1:PropertyPanel>
 
             <cc1:PropertyPanel ID="pp_masterTemplate" runat="server">
-                <asp:DropDownList ID="MasterTemplate" Width="350px" runat="server" />
+                <asp:DropDownList ID="MasterTemplate" runat="server" />
             </cc1:PropertyPanel>
 
             
diff --git a/src/umbraco.controls/CodeArea.cs b/src/umbraco.controls/CodeArea.cs
index 6cf048004c..3d0608a322 100644
--- a/src/umbraco.controls/CodeArea.cs
+++ b/src/umbraco.controls/CodeArea.cs
@@ -3,6 +3,7 @@ using System.Collections;
 using System.ComponentModel;
 using System.Data;
 using System.Drawing;
+using System.Text;
 using System.Web;
 using System.Web.SessionState;
 using System.Web.UI;
@@ -132,13 +133,13 @@ namespace umbraco.uicontrols
         {
             EnsureChildControls();
 
-            var jsEventCode = "";
+            var jsEventCode = new StringBuilder();
 
 
             if (CodeMirrorEnabled == false)
             {
                 CodeTextBox.RenderControl(writer);
-                jsEventCode = RenderBasicEditor();
+                jsEventCode.Append(RenderBasicEditor());
             }
             else
             {
@@ -148,13 +149,25 @@ namespace umbraco.uicontrols
                 this.ControlStyle.AddAttributesToRender(writer);
                 writer.Write(HtmlTextWriter.TagRightChar);
                 Menu.RenderControl(writer);
+
+                writer.WriteBeginTag("div");
+                writer.WriteAttribute("class", "code-container");
+                this.ControlStyle.AddAttributesToRender(writer);
+                writer.Write(HtmlTextWriter.TagRightChar);
                 CodeTextBox.RenderControl(writer);
                 writer.WriteEndTag("div");
+                writer.WriteEndTag("div");
 
-                jsEventCode = RenderCodeEditor();
+                jsEventCode.Append(RenderCodeEditor());
             }
 
-
+            jsEventCode.Append(@"   
+					//TODO: for now this is a global var, need to refactor all this so that is using proper js standards
+					//with correct objects, and proper accessors to these objects.
+					var UmbEditor;                 
+                    $(document).ready(function () {
+                        //create the editor
+                       UmbEditor = new Umbraco.Controls.CodeEditor.UmbracoEditor(" + (CodeMirrorEnabled == false).ToString().ToLower() + @", '" + ClientID + @"');");
 
             if (this.AutoResize)
             {
@@ -165,27 +178,22 @@ namespace umbraco.uicontrols
                     OffSetY += 50;
                 }
 
-                jsEventCode += @"   
-					//TODO: for now this is a global var, need to refactor all this so that is using proper js standards
-					//with correct objects, and proper accessors to these objects.
-					var UmbEditor;                 
-                    $(document).ready(function () {
-                        //create the editor
-                       UmbEditor = new Umbraco.Controls.CodeEditor.UmbracoEditor(" + (CodeMirrorEnabled == false).ToString().ToLower() + @", '" + this.ClientID + @"');
-                       var m_textEditor = jQuery('#" + this.ClientID + @"');
+                //add the resize code
+                jsEventCode.Append(@"
+                        var m_textEditor = jQuery('#" + ClientID + @"');
                    
                        //with codemirror adding divs for line numbers, we need to target a different element
                        m_textEditor = m_textEditor.find('iframe').length > 0 ? m_textEditor.children('div').get(0) : m_textEditor.get(0);
                    
-                       jQuery(window).resize(function(){  resizeTextArea(m_textEditor, " + OffSetX.ToString() + "," + OffSetY.ToString() + @"); });
-            	       jQuery(document).ready(function(){  resizeTextArea(m_textEditor, " + OffSetX.ToString() + "," + OffSetY.ToString() + @"); });
-                    });";
-  
+                       jQuery(window).resize(function(){  resizeTextArea(m_textEditor, " + OffSetX + "," + OffSetY + @"); });
+            	       jQuery(document).ready(function(){  resizeTextArea(m_textEditor, " + OffSetX + "," + OffSetY + @"); });");
+
             }
 
-            jsEventCode = string.Format(@"<script type=""text/javascript"">{0}</script>", jsEventCode);
-            writer.WriteLine(jsEventCode);
+            jsEventCode.Append(@"                       
+                    });");
 
+            writer.WriteLine(@"<script type=""text/javascript"">{0}</script>", jsEventCode);
 
         }
 
@@ -212,8 +220,6 @@ namespace umbraco.uicontrols
             var jsEventCode = @"
                                 var textarea = document.getElementById('" + CodeTextBox.ClientID + @"');
                                 var codeEditor = CodeMirror.fromTextArea(textarea, {
-                                                width: ""100%"",
-                                                height: ""100%"",
                                                 tabMode: ""shift"",
                                                 matchBrackets: true,
                                                 indentUnit: 4,
diff --git a/src/umbraco.controls/Panel.cs b/src/umbraco.controls/Panel.cs
index f749b71637..0149627da5 100644
--- a/src/umbraco.controls/Panel.cs
+++ b/src/umbraco.controls/Panel.cs
@@ -109,7 +109,7 @@ namespace umbraco.uicontrols
             row.Controls.Add(rightcol);
 
             body.TagName = "div";
-            body.Attributes.Add("class", "umb-panel-body umb-scrollable row-fluid");
+            body.Attributes.Add("class", "umb-panel-body row-fluid");
 
             Width = Unit.Empty;
             Height = Unit.Empty;
diff --git a/src/umbraco.controls/TabPage.cs b/src/umbraco.controls/TabPage.cs
index e5b59ee97c..aae552de98 100644
--- a/src/umbraco.controls/TabPage.cs
+++ b/src/umbraco.controls/TabPage.cs
@@ -88,7 +88,7 @@ namespace umbraco.uicontrols {
             if (this.ID == parent.ActiveTabId)
                 activeClass = "active";
 
-            writer.WriteLine("<div id='" + this.ID + "' class='umb-tab-pane tab-pane form-horizontal umb-scrollable " + activeClass + " " + parent.ActiveTabId + "'>");
+            writer.WriteLine("<div id='" + this.ID + "' class='umb-tab-pane tab-pane form-horizontal " + activeClass + " " + parent.ActiveTabId + "'>");
             writer.WriteLine("<div class='umb-tab-pane-inner' id='" + this.ClientID + "_contentlayer'>");
 
             this.RenderChildren(writer);