lsm/Orchard
1
0
Fork 0
mirror of https://github.com/OrchardCMS/Orchard.git synced 2025-10-21 11:17:28 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

Updating shape tracing UI

Browse Source 
- Tabs view
- Sticky shape selection

--HG--
branch : dev
This commit is contained in:
Sebastien Ros
2011-02-24 16:59:01 -08:00
parent 94d5703816
commit 455df51df9
3 changed files with 161 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/Orchard.Web/Modules/Orchard.DesignerTools/Scripts/orchard-designertools-shapetracing.js
View File

@@ -20,7 +20,7 @@
for (i = 0; i < classes.length; i++) { for (i = 0; i < classes.length; i++) {
if (classes[i].indexOf("zone-") === 0) { if (classes[i].indexOf("zone-") === 0) {
$(this).append('<div class="zone-name">' + classes[i].substr(classes[i].indexOf("-")+1) + '</div>'); $(this).append('<div class="zone-name">' + classes[i].substr(classes[i].indexOf("-") + 1) + '</div>');
} }
} }
@@ -39,5 +39,43 @@
_this.prev().show("fast", function () { _this.addClass(open).html("&laquo;"); }); _this.prev().show("fast", function () { _this.addClass(open).html("&laquo;"); });
} }
}); });
$("div.shape-tracing.wrapper").click(function (e) {
var _this = $(this);
var classes = $(this).attr("class").split(' ');
e.stopPropagation();
for (i = 0; i < classes.length; i++) {
if (classes[i].indexOf("shapeId-") === 0) {
var shapeId = classes[i].substr(classes[i].indexOf("-") + 1);
$("div.shape-tracing.wrapper").toggleClass('selected', false);
_this.toggleClass('selected', true);
$("div.shape-tracing.meta").toggle(false);
$("div.shape-tracing.meta.shapeId-" + shapeId).toggle(true);
}
}
});
/* tabs */
function bindTab(selector) {
$('li' + selector).click(function () {
var _this = $(this);
// toggle the selected class on the tab li
_this.parent().children('li').toggleClass('selected', false);
_this.toggleClass('selected', true);
// hide all tabs and display the selected one
var wrapper = _this.parent().parent().first();
wrapper.children('.content').children().toggle(false);
wrapper.children('.content').children('div' + selector).toggle(true);
});
}
bindTab('.shape');
bindTab('.model');
bindTab('.placement');
bindTab('.templates');
bindTab('.source');
bindTab('.html');
}); });
})(jQuery); })(jQuery);

81
src/Orchard.Web/Modules/Orchard.DesignerTools/Styles/orchard-designertools-shapetracing.css
View File

@@ -12,9 +12,6 @@
position:fixed; position:fixed;
top:0; top:0;
} }
#debug-control :hover {
color:yellow;
}
#debug-control .debug-active { #debug-control .debug-active {
color:Lime; color:Lime;
} }
@@ -48,30 +45,27 @@
min-width:20px; min-width:20px;
min-height:20px; min-height:20px;
} }
.debug-shapes body
{ .debug-shapes body {
margin-top:25px; margin-top:25px;
} }
.debug-shapes .shape-tracing .wrapper :hover { .debug-shapes div.shape-tracing.meta {
background:#E0E9EE;
}
.shape-tracing .meta {
display:none;
}
.debug-shapes .shape-tracing .meta {
clear:both; clear:both;
display:block; display:block;
background:#cfc; background:#ccc;
font-size:9pt; font-size:9pt;
font-family:Segoe; font-family:Segoe;
color:black; color:black;
margin-top:5px; margin-top:5px;
position:fixed;
left: 0px;
bottom: 0px;
width:100%;
z-index:999;
} }
.debug-zones .Zone { .debug-zones .shapeType-Zone {
border:1px dashed grey; border:1px dashed grey;
margin:5px; margin:5px;
position: relative; position: relative;
@@ -84,10 +78,6 @@
opacity: 0.7; opacity: 0.7;
} }
.debug-shapes .Zone :hover {
background:#E0E9EE;
}
.meta .shape { .meta .shape {
color:black; color:black;
} }
@@ -98,4 +88,53 @@
.meta .wrappers { .meta .wrappers {
color:green; color:green;
} }
.debug-shapes div.wrapper.selected {
background-color:#BAFFC3;
}
/* tabs */
ul.debuggerMenu { margin:8px 0 -8px 0; }
.debuggerMenu li {
color:#4053DE;
display: inline;
font-size:15px;
line-height:32px;
}
.debuggerMenu li {
margin:0 2px;
padding: 8px 18px 7px 18px;
}
.debuggerMenu li.middle, .debuggerMenu li.first, .debuggerMenu li.last {
border:1px solid #E4E5E6;
border-bottom:none;
background-color: #F5F5F5;
}
.debuggerMenu li.first {
margin-left:16px;
}
.debuggerMenu li.selected {
background-color: #fff;
}
.debuggerMenu li.selected, .debuggerMenu li:hover {
background-color: #fff;
}
.debuggerMenu li.selected a {
color: #3A822E;
}
.debug-shapes div.shape-tracing.meta .content {
background-color: #fff;
padding: 20px;
margin:8px 0 0 0;
border: 1px solid #e4e5e6;
height:10em;
overflow:scroll;
/*CSS3 properties*/
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}

92
src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracing.Wrapper.cshtml
View File

@@ -4,8 +4,7 @@
@using System.Xml; @using System.Xml;
@{ @{
Script.Require("jQuery"); Script.Require("jQueryUI_Tabs");
Script.Include("tooltip.min.js");
Script.Include("orchard-designertools-shapetracing.js"); Script.Include("orchard-designertools-shapetracing.js");
Style.Include("orchard-designertools-shapetracing.css"); Style.Include("orchard-designertools-shapetracing.css");
@@ -13,6 +12,7 @@
var shapeTable = workContext.Resolve<IShapeTableManager>().GetShapeTable(workContext.CurrentTheme.Id); var shapeTable = workContext.Resolve<IShapeTableManager>().GetShapeTable(workContext.CurrentTheme.Id);
var descriptor = shapeTable.Descriptors[Model.Metadata.Type]; var descriptor = shapeTable.Descriptors[Model.Metadata.Type];
} }
@functions { @functions {
string FormatShapeFilename(string type, string themeId) { string FormatShapeFilename(string type, string themeId) {
return "~/Themes/" + themeId + "/Views/" + type.Replace("__", "-").Replace("_", ".") + ".cshtml"; return "~/Themes/" + themeId + "/Views/" + type.Replace("__", "-").Replace("_", ".") + ".cshtml";
@@ -28,34 +28,66 @@
} }
} }
<div class="shape-tracing wrapper @Model.Metadata.Type"> <div class="shape-tracing wrapper shapeType-@Model.Metadata.Type shapeId-@Model.GetHashCode() " title="@Model.Metadata.Type">
@Display(Model.Metadata.ChildContent) @Display(Model.Metadata.ChildContent)
<div class="shape-tracing meta"> <div class="shape-tracing meta shapeId-@Model.GetHashCode()" style="display:none">
<div class="shape"> <ul class="debuggerMenu">
Shape: @Model.Metadata.Type <br /> <li class="shape selected first"><a href="#">Shape</a></li>
Definition: @descriptor.BindingSource <br /> <li class="model middle"><a href="#">Model</a></li>
Display Type: @(Model.Metadata.DisplayType ?? "n/a")<br /> <li class="placement middle"><a href="#">Placement</a></li>
Position: @(Model.Metadata.Position ?? "n/a") <br /> <li class="templates middle"><a href="#">Templates</a></li>
Placement Source: @(Model.Metadata.PlacementSource ?? "n/a") <br /> <li class="source middle"><a href="#">Source</a></li>
</div> <li class="html last"><a href="#">HTML</a></li>
</ul>
<div class="alternates"> <div class="content">
@foreach(var alternate in Model.Metadata.Alternates) { <div class="shape">
var formatted = @FormatShapeFilename(alternate, workContext.CurrentTheme.Id); Shape: @Model.Metadata.Type <br />
<div>@formatted</div> Definition: @descriptor.BindingSource <br />
} Display Type: @(Model.Metadata.DisplayType ?? "n/a")<br />
</div> Position: @(Model.Metadata.Position ?? "n/a") <br />
<div class="wrappers"> Placement Source: @(Model.Metadata.PlacementSource ?? "n/a") <br />
@foreach(var wrapper in Model.Metadata.Wrappers) { </div>
if(wrapper != "ShapeTracing_Wrapper") {
var formatted = @FormatShapeFilename(wrapper, workContext.CurrentTheme.Id); <div class="model" style="display:none">
<div>@formatted</div> <pre>@DumpObject((object)Model)</pre>
} </div>
}
</div> <div class="placement" style="display:none">
<div class="dump" style="display:none"> @if(Model.Metadata.PlacementSource != null) {
<pre>@DumpObject((object)Model)</pre> // System.IO.File.ReadAllText(VirtualPathUtility.GetFileName(Model.Metadata.PlacementSource))
</div> }
</div> else {
<div>n/a</div>
}
</div>
<div class="templates" style="display:none">
<div class="alternates">
<span>Alternates</span>
@foreach(var alternate in Model.Metadata.Alternates) {
var formatted = @FormatShapeFilename(alternate, workContext.CurrentTheme.Id);
<div>@formatted</div>
}
</div>
<div class="wrappers">
<span >Wrappers</span>
@foreach(var wrapper in Model.Metadata.Wrappers) {
if(wrapper != "ShapeTracing_Wrapper") {
var formatted = @FormatShapeFilename(wrapper, workContext.CurrentTheme.Id);
<div>@formatted</div>
}
}
</div>
</div>
<div class="source" style="display:none">
</div>
<div class="html" style="display:none">
<pre>@HttpUtility.HtmlEncode(Display(Model.Metadata.ChildContent))</pre>
</div>
</div>
</div>
</div> </div>