lsm/Orchard
1
0
Fork 0
mirror of https://github.com/OrchardCMS/Orchard.git synced 2025-10-15 19:54:57 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Bringing shape tracing tabs back

Browse Source 
--HG--
branch : dev
This commit is contained in:
Sebastien Ros
2011-03-21 09:44:40 -07:00
parent b67a348267
commit 41d14bb9a0
4 changed files with 123 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Orchard.Web/Modules/Orchard.DesignerTools/Orchard.DesignerTools.csproj
View File

@@ -111,7 +111,7 @@
</ItemGroup>
<ItemGroup>
<Content Include="Views\ShapeTracingMeta.cshtml" />
<None Include="Views\_ShapeTracingMeta.cshtml" />
<Content Include="Views\_ShapeTracingMeta.cshtml" />
</ItemGroup>
<Import Project="$(MSBuildBinPath)\Microsoft.CSharp.targets" />
<Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v10.0\WebApplications\Microsoft.WebApplication.targets" />

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

@@ -8,7 +8,7 @@
'</div>' +
'<div id="shape-tracing-window">' +
'<div id="shape-tracing-window-tree"></div>' +
'<div id="shape-tracing-window-content">foo</div>' +
'<div id="shape-tracing-window-content"></div>' +
'</div>' +
'</div>' +
'<div id="shape-tracing-container-ghost"></div>' +
@@ -46,6 +46,8 @@
shapeTracingContainer.offset({ top: windowHeight - containerHeight + scrollTop, left: 0 });
shapeTracingWindow.height(containerHeight - toolbarHeight - resizeHandleHeight);
shapeTracingWindowTree.height(containerHeight - toolbarHeight - resizeHandleHeight);
shapeTracingWindowContent.height(containerHeight - toolbarHeight - resizeHandleHeight);
shapeTracingWindowContent.width(shapeTracingContainer.outerWidth - shapeTracingWindowTree.outerWidth);
shapeTracingContainer.width('100%');
};
@@ -146,7 +148,7 @@
shapeTracingWindowTree.append(shapes);
// add the expand/collapse logic
// add the expand/collapse logic to the shapes tree
var glyph = $('<span class="expando-glyph-container closed"><span class="expando-glyph"></span>&#8203;</span>');
shapeTracingWindowTree.find('div').parent(':has(li)').prepend(glyph);
@@ -169,19 +171,6 @@
}
}
// automatically expand or collapse shapes in the tree
shapeTracingWindowTree.find('.expando-glyph-container').click(function () {
var _this = $(this);
if (_this.hasClass("closed") || _this.hasClass("closing")) {
openExpando(_this);
}
else {
closeExpando(_this);
}
return false;
});
//create an overlay on shapes' descendants
var overlayTarget = null;
$('[shape-id]').add(shapeTracingOverlay).mousemove(
@@ -217,6 +206,14 @@
$('.shape-tracing-selected').removeClass('shape-tracing-selected');
$('li[tree-shape-id="' + shapeId + '"] > div').add('[shape-id="' + shapeId + '"]').addClass('shape-tracing-selected');
shapeTracingOverlay.hide();
// show the properties for the selected shape
$('[shape-id-meta]:visible').toggle(false);
var target = $('[shape-id-meta="' + shapeId + '"]"');
target.toggle(true);
// enable codemirror for the current tab
enableCodeMirror(target);
}
// select shapes when clicked
@@ -262,6 +259,61 @@
event.stopPropagation();
});
// move all shape tracing meta blocks to the content window
$("[shape-id-meta]").detach().prependTo(shapeTracingWindowContent);
// add the expand/collapse logic to the shape model
// var glyph = $('<span class="expando-glyph-container closed"><span class="expando-glyph"></span>&#8203;</span>');
shapeTracingWindowContent.find('h3').parent(':has(li)').prepend(glyph);
// collapse all sub uls
shapeTracingWindowContent.find('ul ul').toggle(false);
// tabs events
shapeTracingWindowContent.find('.shape-tracing-tabs > li').click(function () {
var _this = $(this);
var tabName = this.className.split(/\s/)[0];
// toggle the selected class on the tab li
$('.shape-tracing-tabs > li.selected').removeClass('selected');
$('.shape-tracing-tabs > li.' + tabName).addClass('selected');
// hide all tabs and display the selected one
$('.shape-tracing-meta-content > div').toggle(false);
$('.shape-tracing-meta-content > div.' + tabName).toggle(true);
// look for the targetted panel
var wrapper = _this.parent().parent().first();
var panel = wrapper.find('div.' + tabName);
// enable codemirror for the current tab
enableCodeMirror(panel);
});
// activates codemirror on specific textareas
var enableCodeMirror = function (target) {
// if there is a script, and colorization is not enabled yet, turn it on
// code mirror seems to work only if the textarea is visible
target.find('textarea:visible').each(function () {
if ($(this).next('.CodeMirror').length == 0) {
CodeMirror.fromTextArea(this, { mode: "razor", tabMode: "indent", height: "100%", readOnly: true });
}
});
}
// automatically expand or collapse shapes in the tree
shapeTracingWindow.find('.expando-glyph-container').click(function () {
var _this = $(this);
if (_this.hasClass("closed") || _this.hasClass("closing")) {
openExpando(_this);
}
else {
closeExpando(_this);
}
return false;
});
});
// recursively create a node for the shapes tree

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

@@ -123,21 +123,20 @@
display:block;
float:left;
width:66%;
background:yellow;
height:100%;
overflow:auto;
}
#shape-tracing-window-tree .expando-glyph {
#shape-tracing-window .expando-glyph {
background:transparent no-repeat 0 -19px;
background-image:url(images/menu-glyph.png);
padding-left:15px;
}
#shape-tracing-window-tree .expando-glyph:hover {
#shape-tracing-window .expando-glyph:hover {
background-image:url(images/menu-glyph.png);
}
#shape-tracing-window-tree .expando-glyph-container {
#shape-tracing-window .expando-glyph-container {
float:left;
display:block;
width:15px;
@@ -145,17 +144,17 @@
cursor:default;
}
#shape-tracing-window-tree .expando-glyph-container.closed .expando-glyph {
#shape-tracing-window .expando-glyph-container.closed .expando-glyph {
background-repeat:no-repeat;
background-image:url(images/menu-glyph.png);
background-position:0 3px;
}
#shape-tracing-window-tree .expando-glyph-container.closed .expando-glyph:hover {
#shape-tracing-window .expando-glyph-container.closed .expando-glyph:hover {
background-image:url(images/menu-glyph.png);
}
#shape-tracing-window-tree .expando-glyph-container.closing .expando-glyph
#shape-tracing-window .expando-glyph-container.closing .expando-glyph
{
background-repeat:no-repeat;
-webkit-transition:all .2s ease-in-out;
@@ -166,7 +165,7 @@
transform:rotate(-90deg) translate(3px, -3px);
}
#shape-tracing-window-tree .expando-glyph-container.opening .expando-glyph
#shape-tracing-window .expando-glyph-container.opening .expando-glyph
{
background-repeat:no-repeat;
-webkit-transition:all .2s ease-in-out;
@@ -184,4 +183,36 @@
opacity:0.5;
filter:alpha(opacity=50);
z-index:2;
}
/* tabs */
#shape-tracing-window-content ul.shape-tracing-tabs { margin:8px 0 -8px 0; }
#shape-tracing-window-content .shape-tracing-tabs li {
color:#4053DE;
display: inline;
font-size:15px;
line-height:32px;
}
#shape-tracing-window-content .shape-tracing-tabs li {
margin:0 2px;
padding: 8px 18px 7px 18px;
}
#shape-tracing-window-content .shape-tracing-tabs li.middle, #shape-tracing-window-content .shape-tracing-tabs li.first, #shape-tracing-window-content .shape-tracing-tabs li.last {
border:1px solid #E4E5E6;
border-bottom:none;
background-color: #F5F5F5;
}
#shape-tracing-window-content .shape-tracing-tabs li.first {
margin-left:16px;
}
#shape-tracing-window-content .shape-tracing-tabs li.selected {
background-color: #fff;
}
#shape-tracing-window-content .shape-tracing-tabs li.selected, #shape-tracing-window-content .shape-tracing-tabs li:hover {
background-color: #fff;
}
#shape-tracing-window-content .shape-tracing-tabs li.selected a {
color: #3A822E;
}

24
src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingMeta.cshtml
View File

@@ -1,13 +1,21 @@
@*
@functions {
@functions {
string FormatShapeFilename(string type, string themeId) {
return "~/Themes/" + themeId + "/Views/" + type.Replace("__", "-").Replace("_", ".") + ".cshtml";
}
string RemoveBeacons(string htmlContent) {
var regex = new System.Text.RegularExpressions.Regex(@"<script\sclass=""shape-tracing-wrapper(.*?)</script>");
return regex.Replace(htmlContent, String.Empty);
}
string RemoveEmptyLines(string htmlContent) {
var regex = new System.Text.RegularExpressions.Regex(@"[\r\n]+");
return regex.Replace(htmlContent, System.Environment.NewLine);
}
}
<div class="shape-tracing meta shapeId-@Model.ShapeId" style="display:none">
<ul class="debuggerMenu">
<div class="shape-tracing-meta" shape-id-meta="@Model.ShapeId" style="display:none">
<ul class="shape-tracing-tabs">
<li class="shape selected first"><a href="#">Shape</a></li>
<li class="model middle"><a href="#">Model</a></li>
<li class="placement middle"><a href="#">Placement</a></li>
@@ -16,7 +24,7 @@
<li class="html last"><a href="#">HTML</a></li>
</ul>
<div class="content">
<div class="shape-tracing-meta-content">
<div class="shape">
<ul class="properties">
<li>
@@ -84,9 +92,7 @@
</div>
<div class="html" style="display:none">
<textarea id="html-@Model.ShapeId" name="html-@Model.ShapeId">@HttpUtility.HtmlEncode(Display(Model.ChildContent))</textarea>
<textarea id="html-@Model.ShapeId" name="html-@Model.ShapeId">@RemoveEmptyLines(RemoveBeacons(Display(Model.ChildContent).ToString()))</textarea>
</div>
</div>
</div>
*@