From 084e2ee37f2f9471e99bc49868cfd473a8358b4e Mon Sep 17 00:00:00 2001
From: Shannon Deminick <sdeminick@gmail.com>
Date: Sun, 9 Dec 2012 01:22:53 +0500
Subject: [PATCH] Updated EditMacro to use CSS instead of hard coded styles
 throughout.

---
 src/Umbraco.Web.UI/Umbraco.Web.UI.csproj      |  1 +
 .../Macros/EditMacro.aspx.designer.cs         |  9 +++
 .../umbraco/developer/Macros/editMacro.aspx   | 57 ++++++++++---------
 .../umbraco_client/Editors/EditMacro.css      | 36 ++++++++++++
 4 files changed, 77 insertions(+), 26 deletions(-)
 create mode 100644 src/Umbraco.Web.UI/umbraco_client/Editors/EditMacro.css

diff --git a/src/Umbraco.Web.UI/Umbraco.Web.UI.csproj b/src/Umbraco.Web.UI/Umbraco.Web.UI.csproj
index 93cdb8802b..90a4ae33ed 100644
--- a/src/Umbraco.Web.UI/Umbraco.Web.UI.csproj
+++ b/src/Umbraco.Web.UI/Umbraco.Web.UI.csproj
@@ -610,6 +610,7 @@
     <Content Include="Umbraco_Client\ContextMenu\Css\jquery.contextMenu.css" />
     <Content Include="Umbraco_Client\ContextMenu\Js\jquery.contextMenu.js" />
     <Content Include="Umbraco_Client\Dialogs\UmbracoField.js" />
+    <Content Include="Umbraco_Client\Editors\EditMacro.css" />
     <Content Include="Umbraco_Client\Editors\EditView.js" />
     <Content Include="Umbraco_Client\FileUploader\Js\jquery.fileUploader.js" />
     <Content Include="Umbraco_Client\FolderBrowser\Css\folderbrowser.css" />
diff --git a/src/Umbraco.Web.UI/umbraco/developer/Macros/EditMacro.aspx.designer.cs b/src/Umbraco.Web.UI/umbraco/developer/Macros/EditMacro.aspx.designer.cs
index 5b6dde9290..a1febaa2ba 100644
--- a/src/Umbraco.Web.UI/umbraco/developer/Macros/EditMacro.aspx.designer.cs
+++ b/src/Umbraco.Web.UI/umbraco/developer/Macros/EditMacro.aspx.designer.cs
@@ -12,6 +12,15 @@ namespace Umbraco.Web.UI.Umbraco.Developer.Macros {
     
     public partial class EditMacro {
         
+        /// <summary>
+        /// CssInclude1 control.
+        /// </summary>
+        /// <remarks>
+        /// Auto-generated field.
+        /// To modify move field declaration from designer file to code-behind file.
+        /// </remarks>
+        protected global::ClientDependency.Core.Controls.CssInclude CssInclude1;
+        
         /// <summary>
         /// SelectedPartialView control.
         /// </summary>
diff --git a/src/Umbraco.Web.UI/umbraco/developer/Macros/editMacro.aspx b/src/Umbraco.Web.UI/umbraco/developer/Macros/editMacro.aspx
index 01a664569c..20bbb8fe36 100644
--- a/src/Umbraco.Web.UI/umbraco/developer/Macros/editMacro.aspx
+++ b/src/Umbraco.Web.UI/umbraco/developer/Macros/editMacro.aspx
@@ -2,7 +2,12 @@
     CodeBehind="EditMacro.aspx.cs" AutoEventWireup="True" Inherits="Umbraco.Web.UI.Umbraco.Developer.Macros.EditMacro" %>
 
 <%@ Register TagPrefix="cc1" Namespace="umbraco.uicontrols" Assembly="controls" %>
+<%@ Register TagPrefix="CD" Namespace="ClientDependency.Core.Controls" Assembly="ClientDependency.Core" %>
+
 <asp:Content ContentPlaceHolderID="head" runat="server">
+    
+    <CD:CssInclude ID="CssInclude1" runat="server" FilePath="Editors/EditMacro.css" PathNameAlias="UmbracoClient" />
+
     <script type="text/javascript">
         function doSubmit() {
             document.forms.aspnetForm.submit();
@@ -29,81 +34,81 @@
 <asp:Content ContentPlaceHolderID="body" runat="server">
     <cc1:TabView ID="TabView1" runat="server" Width="552px" Height="392px"></cc1:TabView>
     <cc1:Pane ID="Pane1" runat="server">
-        <table id="macroPane" cellspacing="0" cellpadding="4" width="98%" border="0" runat="server">
+        <table id="macroPane" class="macro-props" runat="server">
             <tr>
-                <td class="propertyHeader" width="30%">
+                <td class="propertyHeader">
                     Name
                 </td>
                 <td class="propertyContent">
-                    <asp:TextBox ID="macroName" runat="server" Width="230px" CssClass="guiInputText"></asp:TextBox>
+                    <asp:TextBox ID="macroName" runat="server" CssClass="guiInputText"></asp:TextBox>
                 </td>
             </tr>
             <tr>
-                <td class="propertyHeader" width="30%">
+                <td class="propertyHeader">
                     Alias
                 </td>
                 <td class="propertyContent">
-                    <asp:TextBox ID="macroAlias" runat="server" Width="230px" CssClass="guiInputText"></asp:TextBox>
+                    <asp:TextBox ID="macroAlias" runat="server" CssClass="guiInputText"></asp:TextBox>
                 </td>
             </tr>
         </table>
     </cc1:Pane>
     <cc1:Pane ID="Pane1_2" BackColor="mediumaquamarine" runat="server">
-        <table id="Table2" cellspacing="0" cellpadding="4" width="98%" border="0">
+        <table id="Table2" class="macro-props" >
             <tr>
-                <td class="propertyHeader" width="30%">
+                <td class="propertyHeader">
                     <img alt="python Icon" src="../../images/umbraco/developerScript.gif" align="absMiddle" />
                     Use MVC Partial View
                 </td>
                 <td class="propertyContent">
-                    <asp:TextBox ID="SelectedPartialView" runat="server" Width="230px" CssClass="guiInputText"></asp:TextBox>
+                    <asp:TextBox ID="SelectedPartialView" runat="server" CssClass="guiInputText"></asp:TextBox>
                     <asp:DropDownList ID="PartialViewList" runat="server" >
                     </asp:DropDownList>
                 </td>
             </tr>
             <tr>
-                <td class="propertyHeader" width="30%">
+                <td class="propertyHeader">
                     <img alt="Xslt Icon" src="../../images/umbraco/developerXslt.gif" align="absMiddle"/>
                     or XSLT file
                 </td>
                 <td class="propertyContent">
-                    <asp:TextBox ID="macroXslt" runat="server" Width="230px" CssClass="guiInputText"></asp:TextBox>
+                    <asp:TextBox ID="macroXslt" runat="server" CssClass="guiInputText"></asp:TextBox>
                     <asp:DropDownList ID="xsltFiles" runat="server">
                     </asp:DropDownList>
                 </td>
             </tr>
             <tr>
-                <td class="propertyHeader" width="30%">
+                <td class="propertyHeader">
                     <img alt="User control Icon" src="../../images/developer/userControlIcon.png" align="absMiddle"/>
                     or .NET User Control
                 </td>
                 <td class="propertyContent">
-                    <asp:TextBox ID="macroUserControl" runat="server" Width="230px" CssClass="guiInputText"></asp:TextBox>
+                    <asp:TextBox ID="macroUserControl" runat="server" CssClass="guiInputText"></asp:TextBox>
                     <asp:DropDownList ID="userControlList" runat="server">
                     </asp:DropDownList>
                     <asp:PlaceHolder ID="assemblyBrowserUserControl" runat="server"></asp:PlaceHolder>
                 </td>
             </tr>
             <tr>
-                <td class="propertyHeader" valign="top" width="30%">
+                <td class="propertyHeader">
                     <img alt="Custom Control Icon" src="../../images/developer/customControlIcon.png" align="absMiddle"/>
                     or .NET Custom Control
                 </td>
                 <td class="propertyContent">
-                    <asp:TextBox ID="macroAssembly" runat="server" Width="230px" CssClass="guiInputText"></asp:TextBox>
+                    <asp:TextBox ID="macroAssembly" runat="server" CssClass="guiInputText"></asp:TextBox>
                     (Assembly)<br />
-                    <asp:TextBox ID="macroType" runat="server" Width="230px" CssClass="guiInputText"></asp:TextBox>
+                    <asp:TextBox ID="macroType" runat="server" CssClass="guiInputText"></asp:TextBox>
                     (Type)
                     <asp:PlaceHolder ID="assemblyBrowser" runat="server"></asp:PlaceHolder>
                 </td>
             </tr>
             <tr>
-                <td class="propertyHeader" width="30%">
+                <td class="propertyHeader">
                     <img alt="python Icon" src="../../images/umbraco/developerScript.gif" align="absMiddle"/>
                     or script file
                 </td>
                 <td class="propertyContent">
-                    <asp:TextBox ID="macroPython" runat="server" Width="230px" CssClass="guiInputText"></asp:TextBox>
+                    <asp:TextBox ID="macroPython" runat="server" CssClass="guiInputText"></asp:TextBox>
                     <asp:DropDownList ID="pythonFiles" runat="server">
                     </asp:DropDownList>
                 </td>
@@ -111,9 +116,9 @@
         </table>
     </cc1:Pane>
     <cc1:Pane ID="Pane1_3" runat="server">
-        <table id="Table1" cellspacing="0" cellpadding="4" width="98%" border="0" runat="server">
+        <table id="Table1"  class="macro-props" runat="server">
             <tr>
-                <td class="propertyHeader" width="30%">
+                <td class="propertyHeader">
                     Use in editor
                 </td>
                 <td class="propertyContent">
@@ -121,7 +126,7 @@
                 </td>
             </tr>
             <tr>
-                <td class="propertyHeader" width="30%">
+                <td class="propertyHeader">
                     Render content in editor
                 </td>
                 <td class="propertyContent">
@@ -131,17 +136,17 @@
         </table>
     </cc1:Pane>
     <cc1:Pane ID="Pane1_4" runat="server">
-        <table id="Table3" cellspacing="0" cellpadding="4" width="98%" border="0" runat="server">
+        <table id="Table3"  class="macro-props" runat="server">
             <tr>
-                <td class="propertyHeader" width="30%">
+                <td class="propertyHeader">
                     Cache Period
                 </td>
                 <td class="propertyContent">
-                    <asp:TextBox ID="cachePeriod" Width="60px" runat="server" CssClass="guiInputText"></asp:TextBox>Seconds
+                    <asp:TextBox ID="cachePeriod" runat="server" CssClass="guiInputText small"></asp:TextBox>&nbsp;Seconds
                 </td>
             </tr>
             <tr>
-                <td class="propertyHeader" width="30%">
+                <td class="propertyHeader">
                     Cache By Page
                 </td>
                 <td class="propertyContent">
@@ -149,7 +154,7 @@
                 </td>
             </tr>
             <tr>
-                <td class="propertyHeader" width="30%">
+                <td class="propertyHeader">
                     Cache Personalized
                 </td>
                 <td class="propertyContent">
@@ -161,7 +166,7 @@
     <cc1:Pane ID="Panel2" runat="server">
         <asp:Repeater ID="macroProperties" runat="server">
             <HeaderTemplate>
-                <table cellspacing="0" cellpadding="2" width="98%" border="0">
+                <table class="macro-props params">
                     <tr>
                         <td class="propertyHeader">
                             <%=umbraco.ui.Text("general", "alias",this.getUser())%>
diff --git a/src/Umbraco.Web.UI/umbraco_client/Editors/EditMacro.css b/src/Umbraco.Web.UI/umbraco_client/Editors/EditMacro.css
new file mode 100644
index 0000000000..f1a3e6e674
--- /dev/null
+++ b/src/Umbraco.Web.UI/umbraco_client/Editors/EditMacro.css
@@ -0,0 +1,36 @@
+table.macro-props {
+	width: 98%;
+	border: 0;
+}
+table.macro-props td {
+	padding: 4px;	
+}
+table.macro-props td.propertyHeader {
+	width: 200px;
+	vertical-align: middle;
+}
+table.macro-props td.propertyContent {
+	vertical-align: middle;
+}
+table.macro-props td.propertyContent .guiInputText {
+	width: 300px;
+}
+table.macro-props td.propertyContent .guiInputText.small
+{
+	width: 60px;
+	display: inline-block;
+}
+
+
+table.macro-props.params td.propertyHeader
+{
+	width: 25%;
+}
+table.macro-props.params td.propertyContent input,
+table.macro-props.params td.propertyContent select
+{
+	width: 90%;
+}
+table.macro-props.params td.propertyContent input[type=submit] {
+	width: 100px;
+}
\ No newline at end of file