diff --git a/src/Orchard.Web/Modules/Orchard.DesignerTools/Scripts/orchard-designertools-shapetracing.js b/src/Orchard.Web/Modules/Orchard.DesignerTools/Scripts/orchard-designertools-shapetracing.js index 2d44b3e9d..ee36b1f5d 100644 --- a/src/Orchard.Web/Modules/Orchard.DesignerTools/Scripts/orchard-designertools-shapetracing.js +++ b/src/Orchard.Web/Modules/Orchard.DesignerTools/Scripts/orchard-designertools-shapetracing.js @@ -20,7 +20,7 @@ for (i = 0; i < classes.length; i++) { if (classes[i].indexOf("zone-") === 0) { - $(this).append('
' + classes[i].substr(classes[i].indexOf("-")+1) + '
'); + $(this).append('
' + classes[i].substr(classes[i].indexOf("-") + 1) + '
'); } } @@ -39,5 +39,43 @@ _this.prev().show("fast", function () { _this.addClass(open).html("«"); }); } }); + + $("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); diff --git a/src/Orchard.Web/Modules/Orchard.DesignerTools/Styles/orchard-designertools-shapetracing.css b/src/Orchard.Web/Modules/Orchard.DesignerTools/Styles/orchard-designertools-shapetracing.css index 1f66e6c95..91168a8a9 100644 --- a/src/Orchard.Web/Modules/Orchard.DesignerTools/Styles/orchard-designertools-shapetracing.css +++ b/src/Orchard.Web/Modules/Orchard.DesignerTools/Styles/orchard-designertools-shapetracing.css @@ -12,9 +12,6 @@ position:fixed; top:0; } -#debug-control :hover { - color:yellow; -} #debug-control .debug-active { color:Lime; } @@ -48,30 +45,27 @@ min-width:20px; min-height:20px; } -.debug-shapes body -{ + +.debug-shapes body { margin-top:25px; } -.debug-shapes .shape-tracing .wrapper :hover { - background:#E0E9EE; -} - -.shape-tracing .meta { - display:none; -} - -.debug-shapes .shape-tracing .meta { +.debug-shapes div.shape-tracing.meta { clear:both; display:block; - background:#cfc; + background:#ccc; font-size:9pt; font-family:Segoe; color:black; 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; margin:5px; position: relative; @@ -84,10 +78,6 @@ opacity: 0.7; } -.debug-shapes .Zone :hover { - background:#E0E9EE; -} - .meta .shape { color:black; } @@ -98,4 +88,53 @@ .meta .wrappers { color:green; -} \ No newline at end of file +} + +.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; +} diff --git a/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracing.Wrapper.cshtml b/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracing.Wrapper.cshtml index 761b1face..2ac94ade1 100644 --- a/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracing.Wrapper.cshtml +++ b/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracing.Wrapper.cshtml @@ -4,8 +4,7 @@ @using System.Xml; @{ - Script.Require("jQuery"); - Script.Include("tooltip.min.js"); + Script.Require("jQueryUI_Tabs"); Script.Include("orchard-designertools-shapetracing.js"); Style.Include("orchard-designertools-shapetracing.css"); @@ -13,6 +12,7 @@ var shapeTable = workContext.Resolve().GetShapeTable(workContext.CurrentTheme.Id); var descriptor = shapeTable.Descriptors[Model.Metadata.Type]; } + @functions { string FormatShapeFilename(string type, string themeId) { return "~/Themes/" + themeId + "/Views/" + type.Replace("__", "-").Replace("_", ".") + ".cshtml"; @@ -28,34 +28,66 @@ } } -
- @Display(Model.Metadata.ChildContent) +
+ @Display(Model.Metadata.ChildContent) -
-
- Shape: @Model.Metadata.Type
- Definition: @descriptor.BindingSource
- Display Type: @(Model.Metadata.DisplayType ?? "n/a")
- Position: @(Model.Metadata.Position ?? "n/a")
- Placement Source: @(Model.Metadata.PlacementSource ?? "n/a")
-
+ +
+
+ Shape: @Model.Metadata.Type
+ Definition: @descriptor.BindingSource
+ Display Type: @(Model.Metadata.DisplayType ?? "n/a")
+ Position: @(Model.Metadata.Position ?? "n/a")
+ Placement Source: @(Model.Metadata.PlacementSource ?? "n/a")
+
+ + + + + + + + + + +
+