Tweaking the UI debugging...UI...so it's not so "in yo' face" by default

--HG--
branch : theming
This commit is contained in:
Nathan Heskew
2010-09-14 07:24:54 -07:00
parent bab30e826d
commit 5cb5d0868f
4 changed files with 75 additions and 3 deletions

View File

@@ -127,6 +127,7 @@
</ProjectReference>
</ItemGroup>
<ItemGroup>
<None Include="Views\HackScript.cshtml" />
<None Include="Views\HackStyle.cshtml" />
<None Include="Views\ThinBorder.cshtml" />
<None Include="Views\Home\FormShapes.cshtml" />

View File

@@ -9,8 +9,10 @@ namespace Orchard.DevTools {
public void Created(ShapeCreatedContext context) {
if (context.ShapeType != "Layout" && context.ShapeType != "DocumentZone")
context.Shape.Metadata.Wrappers.Add("ThinBorder");
if (context.ShapeType == "Header")
if (context.ShapeType == "Header") {
context.Shape.Metadata.Wrappers.Add("HackScript");
context.Shape.Metadata.Wrappers.Add("HackStyle");
}
}
}
}

View File

@@ -0,0 +1,31 @@
<script>
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='/orchardlocal/core/shapes/scripts/jquery-1.4.2.min.js'%3E%3C/script%3E"));
}
</script>
<script>
(function($) {
$(function() {
$("<div id='debug-control'><ul><li id='debug-shape-templates'>shape templates</li></ul><div id='debug-control-toggle'>&raquo;</div></div>")
.appendTo("body");
$("#debug-shape-templates").click(function() {
var _this = $(this);
$("html").toggleClass(_this.attr("id"));
$(this).toggleClass("debug-active");
});
$("#debug-control-toggle").click(function() {
var _this = $(this), open = "debug-open";
if (_this.is(":animated")) {
alert("aghhhh!");
return;
}
if (_this.is("."+open)) {
_this.prev().hide("fast", function() {_this.removeClass(open).html("&raquo;");});
} else {
_this.prev().show("fast", function() {_this.addClass(open).html("&laquo;");});
}
});
});
})(jQuery);
</script>
@Display(Model.Metadata.ChildContent)

View File

@@ -1,10 +1,48 @@
<style>
.thin-dotted-orange-border-with-a-little-padding {
#debug-control * {
margin:0 !important;
padding:0 !important;
}
#debug-control {
background:#666;
border:1px solid #000;
color:#FFF;
float:left;
font:12px/12px Consolas,"Lucida Console",Monaco,monospace;
left:0;
position:fixed;
top:0;
}
#debug-control :hover {
color:yellow;
}
#debug-control .debug-active {
color:greenyellow;
}
#debug-control ul {
display:none;
}
#debug-control ul, #debug-control-toggle {
float:left;
padding:2px !important;
}
#debug-control li, #debug-control-toggle {
cursor:pointer;
display:inline;
list-style-type:none;
padding-left:2px !important;
padding-right:2px !important;
white-space:nowrap;
}
#debug-control li {
border-right:1px solid #999;
}
html.debug-shape-templates .thin-dotted-orange-border-with-a-little-padding {
background:#FFF;
border:1px dotted #CA7230;
padding:5px;
}
.thin-dotted-orange-border-with-a-little-padding:hover {
html.debug-shape-templates .thin-dotted-orange-border-with-a-little-padding:hover {
background:#E0E9EE;
}
</style>