lsm/Orchard
1
0
Fork 0
mirror of https://github.com/OrchardCMS/Orchard.git synced 2025-10-26 03:40:56 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feature - add front end toggling of shape tracing

Browse Source 
Fixes #7162
This commit is contained in:
Matthew Harris
2016-10-09 00:23:47 +01:00
committed by GitHub
parent 2a8d091e07
commit 0ae205c987
14 changed files with 660 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/Orchard.Web/Modules/Orchard.DesignerTools/Controllers/ShapeTracingController.cs Normal file
View File

@@ -0,0 +1,36 @@
using System.IO;
using System.Web.Mvc;
using Orchard.FileSystems.WebSite;
using Orchard.Localization;
using Orchard.Security;
using Orchard.Mvc.Extensions;
using Orchard.Themes;
using Orchard.ContentManagement;
using Orchard.DesignerTools.Models;
namespace Orchard.DesignerTools.Controllers {
[Themed]
public class ShapeTracingController : Controller {
private readonly IOrchardServices _services;
public ShapeTracingController(IOrchardServices orchardServices) {
_services = orchardServices;
}
public Localizer T { get; set; }
[HttpPost]
public ActionResult DeactivateTracing(string returnUrl) {
_services.WorkContext.CurrentSite.As<ShapeTracingSiteSettingsPart>().IsShapeTracingActive = false;
return this.RedirectLocal(returnUrl);
}
[HttpPost]
public ActionResult ActivateTracing(string returnUrl) {
_services.WorkContext.CurrentSite.As<ShapeTracingSiteSettingsPart>().IsShapeTracingActive = true;
return this.RedirectLocal(returnUrl);
}
}
}

55
src/Orchard.Web/Modules/Orchard.DesignerTools/Events/FeatureEventHandler.cs Normal file
View File

@@ -0,0 +1,55 @@
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Orchard.ContentManagement;
using Orchard.DesignerTools.Models;
using Orchard.Environment;
using Orchard.Environment.Extensions.Models;
namespace Orchard.DesignerTools.Events {
public class FeatureEventHandler : IFeatureEventHandler {
private readonly IOrchardServices _services;
public FeatureEventHandler(IOrchardServices services) {
_services = services;
}
public void Disabled(Feature feature) {
}
public void Disabling(Feature feature) {
}
public void Enabled(Feature feature) {
if(feature.Descriptor.Id != "Orchard.DesignerTools") {
return;
}
// Reset to active each time the module is turned back on so it is less confusing for users.
_services.WorkContext.CurrentSite.As<ShapeTracingSiteSettingsPart>().IsShapeTracingActive = true;
}
public void Enabling(Feature feature) {
}
public void Installed(Feature feature) {
}
public void Installing(Feature feature) {
}
public void Uninstalled(Feature feature) {
}
public void Uninstalling(Feature feature) {
}
}
}

36
src/Orchard.Web/Modules/Orchard.DesignerTools/Handlers/ShapeTracingSiteSettingsPartHandler.cs Normal file
View File

@@ -0,0 +1,36 @@
using System;
using Orchard.ContentManagement;
using Orchard.ContentManagement.Handlers;
using Orchard.DesignerTools.Models;
using Orchard.Localization;
using Orchard.Utility.Extensions;
namespace Orchard.DesignerTools.Handlers {
public class ShapeTracingSiteSettingsPartHandler : ContentHandler {
public Localizer T { get; set; }
public ShapeTracingSiteSettingsPartHandler() {
T = NullLocalizer.Instance;
Filters.Add(new ActivatingFilter<ShapeTracingSiteSettingsPart>("Site"));
Filters.Add(new TemplateFilterForPart<ShapeTracingSiteSettingsPart>("ShapeTracingSiteSettings", "Parts/ShapeTracing.ShapeTracingSiteSettings", "ShapeTracing"));
OnInitializing<ShapeTracingSiteSettingsPart>(AssignDefaultValues);
}
private void AssignDefaultValues(InitializingContentContext context, ShapeTracingSiteSettingsPart part) {
part.IsShapeTracingActive = true;
}
protected override void GetItemMetadata(GetContentItemMetadataContext context) {
if (context.ContentItem.ContentType != "Site")
return;
base.GetItemMetadata(context);
var groupInfo = new GroupInfo(T("Shape Tracing"));
groupInfo.Id = "ShapeTracing";
context.Metadata.EditorGroupInfo.Add(groupInfo);
}
}
}

11
src/Orchard.Web/Modules/Orchard.DesignerTools/Models/ShapeTracingSiteSettingsPart.cs Normal file
View File

@@ -0,0 +1,11 @@
using Orchard.ContentManagement;
namespace Orchard.DesignerTools.Models {
public class ShapeTracingSiteSettingsPart : ContentPart {
public bool IsShapeTracingActive
{
get { return this.Retrieve(x => x.IsShapeTracingActive); }
set { this.Store(x => x.IsShapeTracingActive, value); }
}
}
}

2
src/Orchard.Web/Modules/Orchard.DesignerTools/Module.txt
View File

@@ -8,7 +8,7 @@ Description: Contains designer tools to ease the Themes development process
FeatureName: Shape Tracing
Category: Designer
FeatureDescription: Displays all currently displayed shapes and some information to customize them
Dependencies: Orchard.Resources
Dependencies: Orchard.Resources, Settings
Features:
UrlAlternates:
Name: Url Alternates

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

@@ -98,17 +98,18 @@
<Content Include="Styles\CodeMirror\razor.css" />
<Content Include="Styles\CodeMirror\css.css" />
<Content Include="Styles\CodeMirror\javascript.css" />
<Content Include="Styles\Images\collapse.png" />
<Content Include="Styles\Images\expand.png" />
<Content Include="Styles\Images\menu-glyph.png" />
<Content Include="Scripts\orchard-designertools-shapetracing.js" />
<Content Include="Styles\Images\toolbar-bg.png" />
<Content Include="Styles\orchard-designertools-shapetracing.css" />
<Content Include="Web.config">
<SubType>Designer</SubType>
</Content>
<Content Include="Scripts\Web.config" />
<Content Include="Styles\Web.config" />
<Compile Include="Controllers\ShapeTracingController.cs" />
<Compile Include="Events\FeatureEventHandler.cs" />
<Compile Include="Handlers\ShapeTracingSiteSettingsPartHandler.cs" />
<Compile Include="Models\ShapeTracingSiteSettingsPart.cs" />
<Compile Include="Properties\AssemblyInfo.cs" />
<Content Include="Module.txt" />
</ItemGroup>
@@ -123,9 +124,6 @@
<ItemGroup>
<Content Include="Views\ShapeTracingWrapper.cshtml" />
</ItemGroup>
<ItemGroup>
<Folder Include="Models\" />
</ItemGroup>
<ItemGroup>
<Content Include="Views\ShapeTracingMeta.cshtml" />
</ItemGroup>
@@ -146,6 +144,9 @@
<ItemGroup>
<Content Include="packages.config" />
</ItemGroup>
<ItemGroup>
<Content Include="Views\EditorTemplates\Parts\ShapeTracing.ShapeTracingSiteSettings.cshtml" />
</ItemGroup>
<PropertyGroup>
<VisualStudioVersion Condition="'$(VisualStudioVersion)' == ''">10.0</VisualStudioVersion>
<VSToolsPath Condition="'$(VSToolsPath)' == ''">$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)</VSToolsPath>

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

@@ -27,6 +27,7 @@ jQuery(function ($) {
var shapeTracingTabsPlacement = $('#shape-tracing-tabs-placement');
var shapeTracingTabsTemplate = $('#shape-tracing-tabs-template');
var shapeTracingTabsHtml = $('#shape-tracing-tabs-html');
var shapeTracingTabsSettings = $('#shape-tracing-tabs-settings');
var shapeTracingBreadcrumb = $('#shape-tracing-breadcrumb');
var shapeTracingMetaContent = $('#shape-tracing-meta-content');
var shapeTracingEnabled = false;
@@ -87,22 +88,26 @@ jQuery(function ($) {
// expand/collapse behavior
// ensure the container has always a valid size when expanded
shapeTracingToolbarSwitch.click(function () {
var _this = $(this);
_this.toggleClass('expanded');
if (_this.hasClass('expanded')) {
shapeTracingContainer.height(Math.max(previousSize, defaultHeight, shapeTracingContainer.height()));
enableShapeTracing();
}
else {
// save previous height
previousSize = shapeTracingContainer.height();
shapeTracingContainer.height(initialContainerSize);
disableShapeTracing();
}
var toggleShapeTracingVisibility = function () {
var _this = $(this);
_this.toggleClass('expanded');
if (_this.hasClass('expanded')) {
shapeTracingContainer.height(Math.max(previousSize, defaultHeight, shapeTracingContainer.height()));
enableShapeTracing();
}
else {
// save previous height
previousSize = shapeTracingContainer.height();
shapeTracingContainer.height(initialContainerSize);
disableShapeTracing();
}
syncResize();
}
shapeTracingToolbar.click(toggleShapeTracingVisibility);
shapeTracingToolbarSwitch.click(toggleShapeTracingVisibility);
syncResize();
});
var disableShapeTracing = function () {
shapeTracingEnabled = false;
@@ -113,6 +118,11 @@ jQuery(function ($) {
shapeTracingEnabled = true;
}
// make status act like normal div
$('#shape-tracing-toolbar-status').click(function (e) {
e.stopPropagation();
})
// add a resizable handle to the container
$('#shape-tracing-resize-handle').addClass('ui-resizable-handle ui-resizable-n');
shapeTracingContainer.resizable({
@@ -515,6 +525,27 @@ jQuery(function ($) {
displayTabHtml();
});
// Settings tab
var displayTabSettings = function () {
// toggle the selected class
shapeTracingTabs.children('.selected').removeClass('selected');
shapeTracingTabsSettings.addClass('selected');
// remove old content
shapeTracingMetaContent.children().remove();
// render the template
$("#shape-tracing-tabs-settings-template").tmpl().appendTo(shapeTracingMetaContent);
shapeTracingBreadcrumb.text('');
defaultTab = displayTabSettings;
};
shapeTracingTabsSettings.click(function () {
displayTabSettings();
});
// activates codemirror on specific textareas
var enableCodeMirror = function (target) {
// if there is a script, and colorization is not enabled yet, turn it on

BIN
src/Orchard.Web/Modules/Orchard.DesignerTools/Styles/Images/collapse.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 576 B

BIN
src/Orchard.Web/Modules/Orchard.DesignerTools/Styles/Images/expand.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

BIN
src/Orchard.Web/Modules/Orchard.DesignerTools/Styles/Images/toolbar-bg.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 960 B

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

@@ -6,338 +6,512 @@
/* Global
***************************************************************/
#shape-tracing-container * {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
/* Links
***************************************************************/
#shape-tracing-container a, #shape-tracing-container a:link, #shape-tracing-container a:visited {
color:rgba(0, 94, 153, 0.8);
text-decoration:none;
background-color:transparent;
}
#shape-tracing-container a:hover, #shape-tracing-container a:active, #shape-tracing-container a:focus {
color:rgba(0, 94, 153, 1.0);
text-decoration:none;
background-color:transparent;
#shape-tracing-container a,
#shape-tracing-container a:link,
#shape-tracing-container a:visited {
color: rgba(0, 94, 153, 0.8);
text-decoration: none;
background-color: transparent;
}
#shape-tracing-container a:hover,
#shape-tracing-container a:active,
#shape-tracing-container a:focus {
color: rgba(0, 94, 153, 1.0);
text-decoration: none;
background-color: transparent;
}
/* Forms
***************************************************************/
#shape-tracing-container input[type="submit"],
#shape-tracing-container input[type="button"],
#shape-tracing-container button,
#shape-tracing-container .button {
color:rgba(0, 94, 153, 0.8);
padding:0;
margin:0;
border:1px solid rgba(154, 155, 157, 1.0);
background:rgba(236, 241, 242, 1.0);
/*CSS3 properties*/
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#fffcf1f2', endColorstr='#ffeffcfc');
background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(251, 252, 252, 1.0)), to(rgba(236, 241, 242, 1.0)));
background: -moz-linear-gradient(top, rgba(251, 252, 252, 1.0), rgba(236, 241, 242, 1.0));
}
color: rgba(0, 94, 153, 0.8);
padding: 0;
margin: 0;
border: 1px solid rgba(154, 155, 157, 1.0);
background: rgba(236, 241, 242, 1.0);
/*CSS3 properties*/
background: -moz-linear-gradient(top, rgba(251, 252, 252, 1.0), rgba(236, 241, 242, 1.0));
background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(251, 252, 252, 1.0)), to(rgba(236, 241, 242, 1.0)));
background: linear-gradient(to bottom, rgba(251, 252, 252, 1.0) 0%, rgba(236, 241, 242, 1.0) 100%);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#fffcf1f2', endColorstr='#ffeffcfc');
}
#shape-tracing-container input[type="submit"]:hover,
#shape-tracing-container input[type="button"]:hover,
#shape-tracing-container button:hover,
#shape-tracing-container .button:hover {
background-color:rgba(255, 255, 255, 0.5);
color:#005e99;
color:rgba(0, 94, 153, 1.0);
border:1px solid rgba(0, 94, 153, 1.0);
text-decoration:none;
cursor:pointer;
}
#shape-tracing-container input[type="submit"]:hover,
#shape-tracing-container input[type="button"]:hover,
#shape-tracing-container button:hover,
#shape-tracing-container .button:hover {
background-color: rgba(255, 255, 255, 0.5);
color: #005e99;
color: rgba(0, 94, 153, 1.0);
border: 1px solid rgba(0, 94, 153, 1.0);
text-decoration: none;
cursor: pointer;
}
button.create-template, button.create-template:hover, background-image:hover {
background-color:transparent;
background-image:none;
display:inline;
button.create-template,
button.create-template:hover {
background-color: transparent;
background-image: none;
display: inline;
}
#shape-tracing-container button.primaryAction {
background: #6a7b42;
border: 1px solid #487328;
color: #fff;
cursor: pointer;
display: inline-block;
font: 12px Arial,Helvetica,sans-serif;
padding: 5px 14px 5px 14px;
text-align: center;
text-decoration: none;
/*----CSS3 properties----*/
text-shadow: rgba(40,53,9,.2) 0px 0px 1px;
-webkit-box-shadow: inset 0px 0px 1px rgba(255, 255, 255, 1.0), 1px 1px 1px rgba(102, 102, 102, 0.2);
-moz-box-shadow: inset 0px 0px 1px rgba(255, 255, 255, 1.0), 1px 1px 1px rgba(102, 102, 102, 0.2);
box-shadow: inset 0px 0px 1px rgba(255, 255, 255, 1.0), 1px 1px 1px rgba(102, 102, 102, 0.2);
background: -moz-linear-gradient(top, rgba(155, 179, 108, 1.0), rgba(133, 154, 93, 1.0));
background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(155, 179, 108, 1.0)), to(rgba(128, 159, 67, 1.0)));
background: linear-gradient(to bottom, rgba(155, 179, 108, 1.0) 0%, rgba(133, 154, 93, 1.0) 100%);
/*----In ie the first couplet sets the alpha value so 00=transparent and ff=opaque)----*/
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#ff9bb36c', endColorstr='#ff809f43');
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
#shape-tracing-container button.link /* For link buttons */ {
padding: 5px 14px 5px 14px;
}
#shape-tracing-container button.primaryAction,
x:-moz-any-link {
padding: 3px 14px 3px 14px;
}
#shape-tracing-container button.primaryAction:hover {
border-color: #3a822e;
color: #eefcec;
text-decoration: none;
background: #809f43;
/*CSS3 properties*/
background: -moz-linear-gradient(top, rgba(110, 127, 69, 1.0), rgba(106, 123, 66, 1.0));
background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(110, 127, 69, 1.0)), to(rgba(106, 123, 66, 1.0)));
background: linear-gradient(to bottom, rgba(110, 127, 69, 1.0) 0%, rgba(106, 123, 66, 1.0) 100%);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#ff6e7f45', endColorstr='#ff6a7b42');
}
#shape-tracing-container button.primaryAction:active {
text-decoration: none;
background: #6a7b42;
border: 1px solid #487328;
color: #fff;
/*CSS3 properties*/
text-shadow: rgba(0,0,0,.5) 0px 0px 1px;
background: -moz-linear-gradient(top, rgba(155, 179, 108, 1.0), rgba(128, 159, 67, 1.0));
background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(155, 179, 108, 1.0)), to(rgba(128, 159, 67, 1.0)));
background: linear-gradient(to bottom, rgba(155, 179, 108, 1.0) 0%, rgba(128, 159, 67, 1.0) 100%);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#ff9bb36c', endColorstr='#ff809f43');
}
/* and allow all of that button style to be undone and beyond - to look like a link */
#shape-tracing-container button.link {
background: none;
border: 0;
padding: inherit;
text-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
filter: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
/* Layout
***************************************************************/
#shape-tracing-container ul, #shape-tracing-container li {
margin:0;
padding:0;
color:#000;
font-size:100%;
list-style-type:none;
#shape-tracing-window-content-deactivated {
display: table;
width: 100%;
height: 100%;
}
#shape-tracing-window-content-deactivated .deactivated-content {
display: table-cell;
text-align: center;
vertical-align: middle;
}
#shape-tracing-container ul,
#shape-tracing-container li {
margin: 0;
padding: 0;
color: #000;
font-size: 100%;
list-style-type: none;
}
#shape-tracing-container {
clear:both;
display:block;
font-size:10pt;
font-family:Segoe UI,Trebuchet,Arial,Sans-Serif;;
left: 0px;
bottom: 0px;
position:fixed;
z-index:999;
width:100%;
display:none;
max-height:66%;
height:24px; /* handle (21) + toolbar (3) */
min-height:24px;
padding:0;
margin:0;
clear: both;
display: block;
font-size: 10pt;
font-family: Segoe UI,Trebuchet,Arial,Sans-Serif;
left: 0px;
bottom: 0px;
position: fixed;
z-index: 999;
width: 100%;
display: none;
max-height: 66%;
height: 31px; /* handle (5) + toolbar (26) */
min-height: 24px;
padding: 0;
margin: 0;
}
#shape-tracing-meta-content {
overflow:auto;
overflow: auto;
}
#shape-tracing-container .shape, #shape-tracing-container .model {
padding:8px 0 30px 0;
padding-left:30px;
#shape-tracing-container .shape,
#shape-tracing-container .model {
padding: 8px 0 30px 30px;
}
#shape-tracing-toolbar {
color:#333;
background:rgba(236, 241, 242, 1.0);
border:1px solid rgba(182, 188, 189, 1.0);
height:21px;
padding-top:0;
padding-left:5px;
padding-right:5px;
margin:0;
/*CSS3 properties*/
/*----In ie the first couplet sets the alpha value so 00=transparent and ff=opaque)----*/
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#fffcf1f2', endColorstr='#ffeffcfc');
background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(251, 252, 252, 1.0)), to(rgba(236, 241, 242, 1.0)));
background: -moz-linear-gradient(top, rgba(251, 252, 252, 1.0), rgba(236, 241, 242, 1.0));
#shape-tracing-toolbar {
color: #333;
background: rgba(236, 241, 242, 1.0);
border: 1px solid rgba(182, 188, 189, 1.0);
height: 26px;
padding-top: 0;
padding-left: 5px;
padding-right: 5px;
margin: 0;
cursor: pointer;
/*CSS3 properties*/
background: -moz-linear-gradient(top, rgba(251, 252, 252, 1.0), rgba(236, 241, 242, 1.0));
background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(251, 252, 252, 1.0)), to(rgba(236, 241, 242, 1.0)));
background: linear-gradient(to bottom, rgba(251, 252, 252, 1.0) 0%, rgba(236, 241, 242, 1.0) 100%);
/*----In ie the first couplet sets the alpha value so 00=transparent and ff=opaque)----*/
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#fffcf1f2', endColorstr='#ffeffcfc');
}
#shape-tracing-toolbar-switch {
display:block;
float:right;
width:14px;
height:100%;
background: url(images/expand.png) no-repeat;
margin-top:3px;
#shape-tracing-toolbar-switch {
display: block;
float: right;
width: 18px;
height: 18px;
margin-top: 3px;
cursor: pointer;
transition: all linear .4s;
border: 1px solid #a6abb2;
background: rgb(230,230,230);
background: -moz-linear-gradient(top, rgba(230,230,230,1) 0%, rgba(182,184,186,1) 100%);
background: -webkit-linear-gradient(top, rgba(230,230,230,1) 0%,rgba(182,184,186,1) 100%);
background: linear-gradient(to bottom, rgba(230,230,230,1) 0%,rgba(182,184,186,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6e6e6', endColorstr='#b6b8ba',GradientType=0 );
color: #37393f;
}
#shape-tracing-toolbar-switch.expanded {
background: url(images/collapse.png) no-repeat;
#shape-tracing-toolbar-switch:hover {
background: rgb(221,221,221);
background: -moz-linear-gradient(top, rgba(221,221,221,1) 0%, rgba(162,164,165,1) 100%);
background: -webkit-linear-gradient(top, rgba(221,221,221,1) 0%,rgba(162,164,165,1) 100%);
background: linear-gradient(to bottom, rgba(221,221,221,1) 0%,rgba(162,164,165,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#a2a4a5',GradientType=0 );
}
#shape-tracing-toolbar-switch::before {
content: '';
width: 60%;
height: 40%;
margin-top: 4px;
margin-right: auto;
margin-left: auto;
border: 1px solid #37393f;
border-top-width: 3px;
display: block;
}
#shape-tracing-toolbar-switch.expanded::before {
margin-top: 8px;
border-top-width: 1px;
height: 1px;
background: #37393f;
}
#shape-tracing-toolbar-status {
height: 18px;
float: right;
font-size: 12px;
line-height: 18px;
padding-left: 3px;
padding-right: 3px;
margin-top: 3px;
margin-right: 5px;
cursor: default;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
not supported by any browser */
}
#shape-tracing-toolbar-status.active {
border: 1px solid #487328;
color: #fff;
background: #6a7b42;
background: -moz-linear-gradient(top, rgba(155, 179, 108, 1.0), rgba(133, 154, 93, 1.0));
background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(155, 179, 108, 1.0)), to(rgba(128, 159, 67, 1.0)));
background: linear-gradient(to bottom, rgba(155, 179, 108, 1.0) 0%, rgba(133, 154, 93, 1.0) 100%);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#ff9bb36c', endColorstr='#ff809f43');
}
#shape-tracing-toolbar-status.inactive {
border: 1px solid #a48986;
background: rgb(235,220,219);
background: -moz-linear-gradient(top, rgba(235,220,219,1) 0%, rgba(199,166,163,1) 100%);
background: -webkit-linear-gradient(top, rgba(235,220,219,1) 0%,rgba(199,166,163,1) 100%);
background: linear-gradient(to bottom, rgba(235,220,219,1) 0%,rgba(199,166,163,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebdcdb', endColorstr='#c7a6a3',GradientType=0 );
}
/*
this element is behind the stw to ensure the document is bigger and a scrollbar is added on the document
so that the stw doesn't hide some content
*/
#shape-tracing-container-ghost {
width:100%;
display:block;
#shape-tracing-container-ghost {
width: 100%;
display: block;
}
#shape-tracing-resize-handle {
width:100%;
display:block;
height:5px;
background-color:transparent;
cursor:n-resize;
#shape-tracing-resize-handle {
width: 100%;
display: block;
height: 5px;
background-color: transparent;
cursor: n-resize;
}
.shape-tracing-overlay {
background-color:#EBEFF9;
cursor: pointer;
background-color: #EBEFF9;
cursor: pointer;
}
.shape-tracing-tree-overlay {
background-color:#eee;
cursor: pointer;
background-color: #eee;
cursor: pointer;
}
#shape-tracing-window {
background: #fff;
background: #fff;
}
#shape-tracing-window-tree {
display:block;
float:left;
overflow:auto;
width:33%;
border-right:2px solid rgba(182, 188, 189, 0.8);
background:#fff;
display: block;
float: left;
overflow: auto;
width: 33%;
border-right: 2px solid rgba(182, 188, 189, 0.8);
background: #fff;
}
#shape-tracing-window-tree li {
clear:both;
line-height:20px;
}
#shape-tracing-window-tree li {
clear: both;
line-height: 20px;
}
.shape-tracing-selected {
background-color: #EBEFF9;
background-color: #EBEFF9;
}
#shape-tracing-window .shape-tracing-selected {
background:#2c66c3;
color:#fff;
/*----In ie the first couplet sets the alpha value so 00=transparent and ff=opaque)----*/
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#ff3875d7', endColorstr='#ff2c66c3')
background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(56, 117, 215, 1.0)), to(rgba(44, 102, 195, 1.0)));
background: -moz-linear-gradient(top, rgba(56, 117, 215, 1.0), rgba(44, 102, 195, 1.0));
#shape-tracing-window .shape-tracing-selected {
background: #2c66c3;
color: #fff;
background: -moz-linear-gradient(top, rgba(56, 117, 215, 1.0), rgba(44, 102, 195, 1.0));
background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(56, 117, 215, 1.0)), to(rgba(44, 102, 195, 1.0)));
background: linear-gradient(to bottom, rgba(56, 117, 215, 1.0) 0%, rgba(44, 102, 195, 1.0) 100%);
/*----In ie the first couplet sets the alpha value so 00=transparent and ff=opaque)----*/
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#ff3875d7', endColorstr='#ff2c66c3') background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(56, 117, 215, 1.0)), to(rgba(44, 102, 195, 1.0)));
}
#shape-tracing-window-tree ul {
margin:0 0 0 18px;
padding:0 0 0 4px;
list-style-type:none;
margin: 0 0 0 18px;
padding: 0 0 0 4px;
list-style-type: none;
}
#shape-tracing-window-tree li > div {}
#shape-tracing-window-tree li > div {
}
#shape-tracing-window-content {
padding:0 0 0 6px;
padding: 0 0 0 6px;
}
#shape-tracing-window .expando-glyph {
background:transparent no-repeat 0 -19px;
background-image:url(images/menu-glyph.png);
padding-left:15px;
background: transparent no-repeat 0 -19px;
background-image: url(images/menu-glyph.png);
padding-left: 15px;
}
#shape-tracing-window .expando-glyph:hover {
background-image:url(images/menu-glyph.png);
#shape-tracing-window .expando-glyph:hover {
background-image: url(images/menu-glyph.png);
}
#shape-tracing-window .expando-glyph-container {
float: left;
display: block;
width: 15px;
margin-left: -15px;
cursor: default;
}
#shape-tracing-window .expando-glyph-container {
float:left;
display:block;
width:15px;
margin-left:-15px;
cursor:default;
}
#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 .expando-glyph-container.closed .expando-glyph {
background-repeat:no-repeat;
background-image:url(images/menu-glyph.png);
background-position:0 3px;
}
#shape-tracing-window .expando-glyph-container.closed .expando-glyph:hover {
background-image: url(images/menu-glyph.png);
}
#shape-tracing-window .expando-glyph-container.closed .expando-glyph:hover {
background-image:url(images/menu-glyph.png);
}
#shape-tracing-window .expando-glyph-container.closing .expando-glyph {
background-repeat: no-repeat;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
-webkit-transform: rotate(-90deg) translate(3px, -3px);
-moz-transform: rotate(-90deg) translate(3px, -3px);
transform: rotate(-90deg) translate(3px, -3px);
}
#shape-tracing-window .expando-glyph-container.closing .expando-glyph
{
background-repeat:no-repeat;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
-webkit-transform:rotate(-90deg) translate(3px, -3px);
-moz-transform:rotate(-90deg) translate(3px, -3px);
transform:rotate(-90deg) translate(3px, -3px);
}
#shape-tracing-window .expando-glyph-container.opening .expando-glyph {
background-repeat: no-repeat;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
-webkit-transform: rotate(90deg) translate(3px, 3px);
-moz-transform: rotate(90deg) translate(3px, 3px);
transform: rotate(90deg) translate(3px, 3px);
}
#shape-tracing-window .expando-glyph-container.opening .expando-glyph
{
background-repeat:no-repeat;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
-webkit-transform:rotate(90deg) translate(3px, 3px);
-moz-transform:rotate(90deg) translate(3px, 3px);
transform:rotate(90deg) translate(3px, 3px);
}
#shape-tracing-overlay {
display:none;
background-color:#0015FF;
position:absolute;
opacity:0.5;
filter:alpha(opacity=50);
z-index:2;
#shape-tracing-overlay {
display: none;
background-color: #0015FF;
position: absolute;
opacity: 0.5;
filter: alpha(opacity=50);
z-index: 2;
}
/* Tabs
***************************************************************/
#shape-tracing-tabs li {
display: inline;
font-size:14px;
padding: 4px 18px;
color:#005e99;
color:rgba(0, 94, 153, 0.8);
text-decoration:none;
display: inline;
font-size: 14px;
padding: 4px 18px;
color: #005e99;
color: rgba(0, 94, 153, 0.8);
text-decoration: none;
}
ul#shape-tracing-tabs {
padding:8px 0;
border-bottom:1px solid rgba(182, 188, 189, 1.0);
background:rgba(236, 241, 242, 1.0);
/*CSS3 properties*/
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#fffcf1f2', endColorstr='#ffeffcfc');
background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(251, 252, 252, 1.0)), to(rgba(236, 241, 242, 1.0)));
background: -moz-linear-gradient(top, rgba(251, 252, 252, 1.0), rgba(236, 241, 242, 1.0));
padding: 8px 0;
border-bottom: 1px solid rgba(182, 188, 189, 1.0);
background: rgba(236, 241, 242, 1.0);
/*CSS3 properties*/
background: -moz-linear-gradient(top, rgba(251, 252, 252, 1.0), rgba(236, 241, 242, 1.0));
background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(251, 252, 252, 1.0)), to(rgba(236, 241, 242, 1.0)));
background: linear-gradient(to bottom, rgba(251, 252, 252, 1.0) 0%, rgba(236, 241, 242, 1.0) 100%);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#fffcf1f2', endColorstr='#ffeffcfc');
}
#shape-tracing-tabs li.middle, #shape-tracing-tabs li.first, #shape-tracing-tabs li.last {
border:1px solid rgba(154,155,157,1.0);
background-color: #F5F5F5;
#shape-tracing-tabs li.middle,
#shape-tracing-tabs li.first,
#shape-tracing-tabs li.last {
border: 1px solid rgba(154,155,157,1.0);
background-color: #F5F5F5;
}
#shape-tracing-tabs li.first {margin:0 0 0 4px;}
#shape-tracing-tabs li.first {
margin: 0 0 0 4px;
}
#shape-tracing-tabs li:hover {
background-color:rgba(255, 255, 255, 0.5);
color:#005e99;
color:rgba(0, 94, 153, 1.0);
border:1px solid rgba(0, 94, 153, 1.0);
text-decoration:none;
cursor:pointer;
background-color: rgba(255, 255, 255, 0.5);
color: #005e99;
color: rgba(0, 94, 153, 1.0);
border: 1px solid rgba(0, 94, 153, 1.0);
text-decoration: none;
cursor: pointer;
}
#shape-tracing-tabs li.selected {
background-color:rgba(255, 255, 255, 0.9);
color:rgba(51, 51, 51, 1.0);
border:1px solid rgba(102, 102, 102, 1.0);
background-color: rgba(255, 255, 255, 0.9);
color: rgba(51, 51, 51, 1.0);
border: 1px solid rgba(102, 102, 102, 1.0);
}
#shape-tracing-window-content .grid-display {
position:relative;
position: relative;
}
#shape-tracing-window-content .grid-display li {
clear:both;
#shape-tracing-window-content .grid-display li {
clear: both;
}
#shape-tracing-window-content .grid-display ul ul {
margin: 0 0 0 18px;
padding: 0 0 0 10px;
list-style-type: none;
}
#shape-tracing-window-content .grid-display div.name {
float: left;
}
#shape-tracing-window-content .grid-display div.type,
#shape-tracing-window-content .grid-display div.value {
position: absolute;
left: 40%;
white-space: nowrap;
}
#shape-tracing-window-content div.model div.type,
#shape-tracing-window-content div.model div.value {
left: 66%;
}
#shape-tracing-window-content .grid-display ul ul {
margin:0 0 0 18px;
padding:0 0 0 10px;
list-style-type:none;
}
#shape-tracing-window-content .grid-display div.name {
float:left;
}
#shape-tracing-window-content .grid-display div.type, #shape-tracing-window-content .grid-display div.value {
position:absolute;
left:40%;
white-space:nowrap;
}
#shape-tracing-window-content div.model div.type, #shape-tracing-window-content div.model div.value {
left:66%;
#shape-tracing-window-content .settings {
padding: 8px 0 30px 30px;
}
#shape-tracing-breadcrumb {
background:rgba(236, 241, 242, 1.0);
border-bottom:1px solid rgba(182, 188, 189, 1.0);
padding: 3px 0 0 4px;
font-weight:700;
height: 18px;
background: rgba(236, 241, 242, 1.0);
border-bottom: 1px solid rgba(182, 188, 189, 1.0);
padding: 3px 0 0 4px;
font-weight: 700;
height: 18px;
}
.CodeMirror {
height:auto;
overflow:hidden !important;
}
height: auto;
overflow: hidden !important;
}

10
src/Orchard.Web/Modules/Orchard.DesignerTools/Views/EditorTemplates/Parts/ShapeTracing.ShapeTracingSiteSettings.cshtml Normal file
View File

@@ -0,0 +1,10 @@
@model Orchard.DesignerTools.Models.ShapeTracingSiteSettingsPart
<fieldset>
<legend>@T("Shape Tracing")</legend>
<div>
@Html.EditorFor(m => m.IsShapeTracingActive)
<label class="forcheckbox" for="@Html.FieldIdFor(m => m.IsShapeTracingActive)">@T("Use shape tracing")</label>
<span class="hint">@T("Enable to apply shape tracing to each page displayed on the front end of the site.")</span>
</div>
</fieldset>

56
src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingTemplates.cshtml
View File

@@ -1,21 +1,42 @@
<div id="shape-tracing-container">
@using Orchard.ContentManagement
@using Orchard.DesignerTools.Models
@{
var isShapeTracingActive = WorkContext.CurrentSite.As<ShapeTracingSiteSettingsPart>().IsShapeTracingActive;
var statusText = (isShapeTracingActive ? "Active" : "Inactive");
var statusCssClass = statusText.ToLowerInvariant();
}
<div id="shape-tracing-container">
<div id="shape-tracing-resize-handle" ></div>
<div id="shape-tracing-toolbar">
<div id="shape-tracing-toolbar-switch"></div>
<div id="shape-tracing-toolbar-status" class="@statusCssClass">@T(statusText)</div>
</div>
<div id="shape-tracing-window">
<div id="shape-tracing-window-tree"></div>
<div id="shape-tracing-window-content">
<ul id="shape-tracing-tabs">
<li id="shape-tracing-tabs-shape" class="selected first">@T("Shape")</li>
<li id="shape-tracing-tabs-model" class="middle">@T("Model")</li>
<li id="shape-tracing-tabs-placement" class="middle">@T("Placement")</li>
<li id="shape-tracing-tabs-template" class="middle">@T("Template")</li>
<li id="shape-tracing-tabs-html" class="last">@T("HTML")</li>
</ul>
<div id="shape-tracing-breadcrumb"></div>
<div id="shape-tracing-meta-content"></div>
</div>
@if (!isShapeTracingActive) {
<div id="shape-tracing-window-content-deactivated">
<div class="deactivated-content">
@using (Html.BeginFormAntiForgeryPost(Url.Action("ActivateTracing", "ShapeTracing", new { Area = "Orchard.DesignerTools" }), FormMethod.Post, new { @class = "inline link" })) {
@Html.Hidden("ReturnUrl", Context.Request.RawUrl)
<button type="submit" class="primaryAction">@T("Activate Shape Tracing").Text</button>
}
</div>
</div>
}
else {
<div id="shape-tracing-window-tree"></div>
<div id="shape-tracing-window-content">
<ul id="shape-tracing-tabs">
<li id="shape-tracing-tabs-shape" class="selected first">@T("Shape")</li>
<li id="shape-tracing-tabs-model" class="middle">@T("Model")</li>
<li id="shape-tracing-tabs-placement" class="middle">@T("Placement")</li>
<li id="shape-tracing-tabs-template" class="middle">@T("Template")</li>
<li id="shape-tracing-tabs-html" class="middle">@T("HTML")</li>
<li id="shape-tracing-tabs-settings" class="last">@T("Settings")</li>
</ul>
<div id="shape-tracing-breadcrumb"></div>
<div id="shape-tracing-meta-content"></div>
</div>
}
</div>
</div>
<div id="shape-tracing-container-ghost"></div>
@@ -96,3 +117,12 @@
<textarea>${$data}</textarea>
</div>
</script>
<script id="shape-tracing-tabs-settings-template" type="text/x-jquery-tmpl">
<div class="settings">
@using (Html.BeginFormAntiForgeryPost(Url.Action("DeactivateTracing", "ShapeTracing", new { Area = "Orchard.DesignerTools" }), FormMethod.Post, new { @class = "inline link" })) {
@Html.Hidden("ReturnUrl", Context.Request.RawUrl)
<button type="submit" class="primaryAction">@T("Deactivate Shape Tracing").Text</button>
}
</div>
</script>

17
src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingWrapper.cshtml
View File

@@ -1,14 +1,21 @@
@{
@using Orchard.ContentManagement
@using Orchard.DesignerTools.Models
@{
if (Model.IgnoreShapeTracer != null && (bool)Model.IgnoreShapeTracer) {
@Display(Model.Metadata.ChildContent)
return;
}
Script.Require("jQueryUI").AtHead();
Script.Include("orchard-designertools-shapetracing.js").AtHead();
Script.Include("jquery.scrollTo-1.4.4.min.js").AtHead();
Style.Include("orchard-designertools-shapetracing.css");
if (!WorkContext.CurrentSite.As<ShapeTracingSiteSettingsPart>().IsShapeTracingActive) {
@Display(Model.Metadata.ChildContent)
return;
}
// Code Mirror
Script.Include("CodeMirror/codemirror.js");
Style.Include("CodeMirror/codemirror.css");
@@ -19,7 +26,7 @@
Script.Include("CodeMirror/css.js");
Style.Include("CodeMirror/css.css");
Script.Include("CodeMirror/htmlmixed.js");
Script.Include("jquery.tmpl.min.js");
}
@@ -41,4 +48,4 @@
ShapeId: Model.ShapeId,
Dump: Model._Dump
));
}
}