Updated EditMacro to use CSS instead of hard coded styles throughout.

This commit is contained in:
Shannon Deminick
2012-12-09 01:22:53 +05:00
parent 2e5618b778
commit 084e2ee37f
4 changed files with 77 additions and 26 deletions

View File

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

View File

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

View File

@@ -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())%>

View File

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