yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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.

Browse Source
This commit is contained in:
Shannon
2014-10-23 14:01:16 +10:00
parent e8a2ddb2a4
commit 238f5fc5f3
9 changed files with 49 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/Umbraco.Web.UI/umbraco/developer/Python/editPython.aspx
View File

@@ -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>

4
src/Umbraco.Web.UI/umbraco/developer/Xslt/editXslt.aspx
View File

@@ -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>

8
src/Umbraco.Web.UI/umbraco/settings/editTemplate.aspx
View File

@@ -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>

10
src/Umbraco.Web.UI/umbraco/settings/scripts/editScript.aspx
View File

@@ -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" />

2
src/Umbraco.Web.UI/umbraco/settings/stylesheet/editstylesheet.aspx
View File

@@ -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>

14
src/Umbraco.Web.UI/umbraco/settings/views/EditView.aspx
View File

@@ -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>

46
src/umbraco.controls/CodeArea.cs
View File

@@ -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,

2
src/umbraco.controls/Panel.cs
View File

@@ -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;

2
src/umbraco.controls/TabPage.cs
View File

@@ -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);