Improving the editor toolbar

--HG--
branch : 1.x
extra : rebase_source : 8bd1a013257af1228d2fbb5b26fbc77128090b72
This commit is contained in:
Sebastien Ros
2013-01-23 12:17:15 -08:00
parent 798df52811
commit c7b4706780
10 changed files with 289 additions and 225 deletions

View File

@@ -3,7 +3,7 @@
namespace Orchard.Widgets {
public class ResourceManifest : IResourceManifestProvider {
public void BuildManifests(ResourceManifestBuilder builder) {
builder.Add().DefineStyle("WidgetsAdmin").SetUrl("orchard-widgets-admin.css");
builder.Add().DefineStyle("WidgetsAdmin").SetUrl("orchard-widgets-admin.css").SetDependencies("~/Themes/TheAdmin/Styles/Site.css");
}
}
}

View File

@@ -71,7 +71,7 @@
<Content Include="Scripts\jquery.jsPlumb-1.3.16-all-min.js" />
<Content Include="Scripts\orchard-workflows-serialize.js" />
<Content Include="Scripts\orchard-workflows.js" />
<Content Include="Styles\admin-workflows.css" />
<Content Include="Styles\orchard-workflows-admin.css" />
<Content Include="Styles\admin-usertask.css" />
<Content Include="Styles\workflows-activity-isinrole.css" />
<Content Include="Styles\workflows-activity-usertask.css" />
@@ -144,6 +144,7 @@
<Compile Include="Providers\UserTaskForms.cs" />
<Compile Include="Providers\NotificationActivityForms.cs" />
<Compile Include="Providers\NotificationActivityProvider.cs" />
<Compile Include="ResourceManifest.cs" />
<Compile Include="Services\BaseActivity.cs" />
<Compile Include="Services\BlockingActivity.cs" />
<Compile Include="Services\IActivity.cs" />

View File

@@ -0,0 +1,9 @@
using Orchard.UI.Resources;
namespace Orchard.Workflows {
public class ResourceManifest : IResourceManifestProvider {
public void BuildManifests(ResourceManifestBuilder builder) {
builder.Add().DefineStyle("WorkflowsAdmin").SetUrl("orchard-workflows-admin.css").SetDependencies("~/Themes/TheAdmin/Styles/Site.css");
}
}
}

View File

@@ -48,8 +48,8 @@
// deserialize the previously locally saved workflow
loadActivities(localId);
// create activity overlays for controlling their states
createOverlays();
// create activity toolbar for controlling their states
createToolbar();
// a new connection is created
jsPlumb.bind("jsPlumbConnection", function (connectionInfo) {
@@ -104,7 +104,7 @@
var editor = $('#activity-editor');
editor.append(dom);
jsPlumb.draggable(dom, { containment: "parent", scroll: true, drag: function () { hideOverlay(true); } });
jsPlumb.draggable(dom, { containment: "parent", scroll: true, drag: hideToolbar });
jsPlumb.makeTarget(dom, {
dropOptions: { hoverClass: "dragHover" },
@@ -119,6 +119,7 @@
state: state,
start: start,
clientId: dom.attr("id"),
hasForm: activities[name].hasForm
};
elt.endpoints = {};
@@ -131,9 +132,9 @@
for (i = 0; i < outcomes.length; i++) {
var ep = jsPlumb.addEndpoint(dom, {
anchor: "Continuous",
connectorOverlays: [["Label", { label: outcomes[i], cssClass: "connection-label" }]],
},
anchor: "Continuous",
connectorOverlays: [["Label", { label: outcomes[i], cssClass: "connection-label" }]],
},
sourceEndpointOptions);
elt.endpoints[outcomes[i]] = ep;
@@ -142,92 +143,99 @@
}
if (activities[name].hasForm) {
dom.dblclick(function() {
var edit = function() {
saveLocal(localId);
window.location.href = editActivityUrl + "/" + $("#id").val() + "?name=" + name + "&clientId=" + elt.viewModel.clientId + "&localId=" + localId;
});
};
dom.dblclick(edit);
elt.viewModel.edit = edit;
}
dom.css('top', top + 'px');
dom.css('left', left + 'px');
jsPlumb.repaint(elt.viewModel.clientId);
dom.on("click", function () {
var self = $(this);
var toolbar = $('#activity-toolbar');
toolbar.position({
my: "right bottom",
at: "right top",
offset: "0 -5",
of: self,
collision: "none"
});
toolbar.target = this;
refreshToolbar(this);
toolbar.show();
return false;
});
}
});
};
var onActivity = false;
var onOverlay = false;
var createToolbar = function () {
var editor = $('#activity-editor');
$("#initial-state").button();
var createOverlays = function () {
var events = $('.activity.blocking');
editor.on("click", function () {
hideToolbar();
});
$('#activity-overlay').hover(
function () {
onOverlay = true;
},
function () {
onOverlay = false;
setTimeout(hideOverlay, 50);
});
initToolbar();
};
var initToolbar = function() {
$('#activity-toolbar-start-checkbox').change(function () {
var target = $(toolbar.target);
//var clientId = target.attr('id');
//var activity = getActivity(localId, clientId);
var checked = $(this).is(':checked');
target.get(0).viewModel.start = checked;
target.toggleClass('start', checked);
});
hideOverlay();
events.hover(
// mouse enter
function () {
var self = $(this);
var overlay = $('#activity-overlay');
};
overlay.position({
my: "right bottom",
at: "right top",
offset: "10 10",
of: self, // or $("#otherdiv)
collision: "none"
});
var refreshToolbar = function(target) {
target = $(target);
onActivity = true;
// start button
$('#activity-toolbar-start').toggle(target.hasClass('blocking'));
$('#activity-toolbar-start-checkbox').prop('checked', target.get(0).viewModel.start);
if (!overlay.is(":visible")) {
var state = $("#initial-state");
state.prop('checked', self.hasClass('start')).button("refresh");
// edit button
var editButton = $('#activity-toolbar-edit');
if (target.get(0).viewModel.hasForm) {
editButton.unbind("click").click(target.get(0).viewModel.edit);
editButton.toggle(true);
} else {
editButton.toggle(false);
}
// delete button
var deleteButton = $('#activity-toolbar-delete');
deleteButton.unbind("click").click(function() {
jsPlumb.removeAllEndpoints(target.attr('id'));
target.remove();
});
state.unbind("click").click(function () {
updateStart(self, state.is(":checked"));
});
overlay.show();
}
},
// mouse leave
function () {
onActivity = false;
setTimeout(hideOverlay, 50);
}
);
};
var hideOverlay = function (force) {
if (force || (!onOverlay && !onActivity)) {
var overlay = $('#activity-overlay');
overlay.offset({ top: 0, left: 0 });
overlay.hide();
onOverlay = false;
onActivity = false;
}
// hides the
var hideToolbar = function () {
var toolbar = $('#activity-toolbar');
toolbar.offset({ top: 0, left: 0 });
toolbar.hide();
};
var updateStart = function(dom, isStart) {
var clientId = $(dom).attr('id');
var activity = getActivity(localId, clientId);
$(dom).get(0).viewModel.start = isStart;
$(dom).toggleClass('start', isStart);
};

View File

@@ -1,147 +0,0 @@
/*.activity {
border: 1px solid #346789;
/*box-shadow: 2px 2px 19px #aaa;
-o-box-shadow: 2px 2px 19px #aaa;
-webkit-box-shadow: 2px 2px 19px #aaa;
-moz-box-shadow: 2px 2px 19px #aaa;
-moz-border-radius: 0.5em; /
border-radius: 0.5em;
opacity: 0.8;
filter: alpha(opacity=80);
min-width: 5em;
min-height: 5em;
line-height: 5em;
text-align: center;
z-index: 20;
position: absolute;
background-color: #eeeeef;
color: black;
font-family: helvetica;
padding: 0.5em;
font-size: 0.9em;
}
.activity:hover, .dragHover {
box-shadow: 2px 2px 19px #444;
-o-box-shadow: 2px 2px 19px #444;
-webkit-box-shadow: 2px 2px 19px #444;
-moz-box-shadow: 2px 2px 19px #444;
opacity: 0.6;
filter: alpha(opacity=60);
}*/
.activity {
border: 1px solid #999;
border-radius: 2px;
opacity: 0.8;
filter: alpha(opacity=80);
/*min-width: 5em;*/
text-align: center;
z-index: 20;
position: absolute;
background-color: white;
font-family: helvetica;
padding: 1em;
font-size: 0.9em;
}
.activity:hover, .dragHover {
box-shadow: 2px 2px 19px #aaa;
-o-box-shadow: 2px 2px 19px #aaa;
-webkit-box-shadow: 2px 2px 19px #aaa;
-moz-box-shadow: 2px 2px 19px #aaa;
/*opacity: 0.6;
filter: alpha(opacity=60);*/
}
.blocking {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAKVJREFUOE+lkmENwyAQRusJA7WADiSgAA0oqAMUoAAr/QMh38oCbJQbLR3JS5rvjscFugD4CzKcgQxnKB/QWkMphRgjpJRgjJGs64p931uBMaY2bNuGEAI4583GQidwznVN1tqj9hkzcUiXJO0E1EnnpqFgVPzmsaDUfk15KUiM7qkRnJsSWYrzS+V1LUgIIeC9r/9KXu+9dcynkOEMZDgDGd4HywvvUq4US/BOrgAAAABJRU5ErkJggg==');
background-position: top right;
background-repeat: no-repeat;
}
.start {
background-color: #eee;
border-width: 2px;
}
._jsPlumb_connector { z-index:4; }
._jsPlumb_endpoint { z-index:21;cursor:pointer; }
.sourceEndpoint {
fill: red;
}
.sourceEndpointLabel, .targetEndpointLabel {
z-index: 21;
cursor: pointer;
}
.active {
border:1px dotted green;
}
.hover {
border:1px dotted red;
}
/* attempt to make the editor section to take the full height */
#layout-main, #main, #content {
height: 100%
}
#activity-editor {
position: relative;
height:auto !important; /* real browsers */
min-height:500px; /* real browsers */
}
.connection-label {
z-index: 10;
border-radius: 2px;
filter:alpha(opacity=80);
background-color:white;
padding:0 0.5em;
border:1px solid #999;
opacity: 0.8;
filter: alpha(opacity=80);
}
/* toolbox */
#activity-toolbox {
border: 1px solid #E4E5E6;
background-color: #F3F4F5;
padding: 0 5px;
height: 100px;
}
#activity-toolbox .activity-toolbox-item {
display: block;
padding: 0 10px;
width: auto;
border: 1px solid #EAEAEA;
background-color: white;
margin: 5px 5px;
float: left;
}
#activity-toolbox .activity-toolbox-item h2 {
color: #333;
padding: 2px;
font-size: 1.077em;
}
#activity-overlay {
position: absolute;
z-index: 30;
width: 100px;
height: 20px;
background-color: #EAEAEA;
border: 1px solid #ccc;
left: -2000px;
padding: 2px;
}

View File

@@ -0,0 +1,178 @@
.activity {
position: absolute;
z-index: 20;
padding: 1em; /*min-width: 5em;*/
border: 1px solid #999;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
background-color: white;
text-align: center;
font-size: 0.9em;
font-family: helvetica;
-moz-opacity: 0.8;
opacity: 0.8;
filter: alpha(opacity=80);
}
.activity:hover, .dragHover {
-moz-box-shadow: 2px 2px 19px #aaa;
-o-box-shadow: 2px 2px 19px #aaa;
-webkit-box-shadow: 2px 2px 19px #aaa;
box-shadow: 2px 2px 19px #aaa;
}
.blocking {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAKVJREFUOE+lkmENwyAQRusJA7WADiSgAA0oqAMUoAAr/QMh38oCbJQbLR3JS5rvjscFugD4CzKcgQxnKB/QWkMphRgjpJRgjJGs64p931uBMaY2bNuGEAI4583GQidwznVN1tqj9hkzcUiXJO0E1EnnpqFgVPzmsaDUfk15KUiM7qkRnJsSWYrzS+V1LUgIIeC9r/9KXu+9dcynkOEMZDgDGd4HywvvUq4US/BOrgAAAABJRU5ErkJggg==');
background-position: top right;
background-repeat: no-repeat;
}
.start {
border-width: 2px;
background-color: #eee;
}
._jsPlumb_connector {
z-index: 4;
}
._jsPlumb_endpoint {
z-index: 21;
cursor: pointer;
}
.sourceEndpoint {
fill: red;
}
.sourceEndpointLabel, .targetEndpointLabel {
z-index: 21;
cursor: pointer;
}
.active {
border: 1px dotted green;
}
.hover {
border: 1px dotted red;
}
/* attempt to make the editor section to take the full height */
#layout-main, #main, #content {
height: 100%;
}
#activity-editor {
position: relative;
min-height: 500px; /* real browsers */
height: auto !important; /* real browsers */
}
.connection-label {
z-index: 10;
padding: 0 0.5em;
border: 1px solid #999;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
background-color: white;
-moz-opacity: 0.8;
opacity: 0.8;
filter: alpha(opacity=80);
filter: alpha(opacity=80);
}
/* toolbox */
#activity-toolbox {
padding: 0 5px;
height: 100px;
border: 1px solid #E4E5E6;
background-color: #F3F4F5;
}
#activity-toolbox .activity-toolbox-item {
display: block;
float: left;
margin: 5px 5px;
padding: 0 10px;
width: auto;
border: 1px solid #EAEAEA;
background-color: white;
}
#activity-toolbox .activity-toolbox-item h2 {
padding: 2px;
color: #333;
font-size: 1.077em;
}
#activity-toolbar {
position: absolute;
z-index: 30;
left: -2000px;
padding: 2px 0;
min-width: 50px;
border: 1px solid #ccc;
background-color: white;
}
#activity-toolbar > div {
width: 24px;
height: 24px;
margin: 0;
padding: 0 2px;
float: left;
border-right: 1px solid #ccc;
}
#activity-toolbar > div:last-child {
border-right: none;
}
#activity-toolbar > div label {
display: inline-block;
width: 22px;
height: 22px;
padding: 0;
margin: 0;
background-color: #eaeaea;
background-repeat: no-repeat;
border: 1px solid #999;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
#activity-toolbar > div label:hover {
border-color: #333;
}
/* Start button */
#activity-toolbar #activity-toolbar-start-checkbox { /* hide the checkbox and rely on the label for two-state button */
display:none;
}
#activity-toolbar #activity-toolbar-start-checkbox + label {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAMCAYAAABfnvydAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAIlJREFUKFOFjrERhBEUhF9PQolIrg4lqEAN+lGBWKoCCWP2/ueOc3MBM5u8/XYXAaDeO4wxEEJMKaVQa30sEJVSoLXe5pKUEjlnUAhhHrz3nJjvvBFXn5WsNcn3O3CduH7yCeyWU9ZatNZoAimlPyDGyGtvYIwB59w2P+kvwDpbVvoHWC1nGgC9AJ139gdKftEFAAAAAElFTkSuQmCC');
background-position: center;
}
/* Edit button */
#activity-toolbar #activity-toolbar-edit > label {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAJFJREFUKFOVkLENAyEMRdmJBajoaakpkCgpmYAZGIoxmOAaJPQjLPmSiCN3KV6D3rOMBYAtYwyRUkIIAb13elskhmUpJcHRVi6loNZ6BpOc87XMk+fUz2gJWPbeI8b4FS0rXcnM8umnMgX/yBRM2TkHrfWtTIG1FsdxoLV2RjuZAmMMlFIUzdv/kicU3K3xBuIFb6p0auW2YMcAAAAASUVORK5CYII=');
background-position: center;
}
/* Delete button */
#activity-toolbar #activity-toolbar-delete > label {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAJCAYAAADkZNYtAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAGVJREFUKFOVkLENwCAMBL2TS3p2YwbvwwSuaRnjEywZBRJHSXEFr3sDJgCkqmBmlFLOIywbiIjltVbLqfeOnLOF14KLg5QSWmvrhAgfcLsyEhd5sBf2P4TiU+FVdOabf2/j255BB4ch671zW3IBAAAAAElFTkSuQmCC');
background-position: center;
}
#activity-toolbar #activity-toolbar-start-checkbox:checked + label{
background-color: white;
}

View File

@@ -2,10 +2,9 @@
@{
string name = Model.Name;
bool blocking = Model.IsBlocking;
}
<div class="@blocking" title="@Model.State.Roles">
<div title="@Model.State.Roles">
<div class="isinrole" ></div>
@*@name.CamelFriendly()*@
</div>

View File

@@ -1,10 +1,15 @@
@using Orchard.DisplayManagement
@using Orchard.UI.Resources
@using Orchard.Utility.Extensions
@using Orchard.Workflows.Models.Descriptors
@using Orchard.Workflows.Services
@{
IList<IActivity> allActivities = Model.AllActivities;
foreach (var activity in allActivities) {
Style.Include("workflows-activity-" + activity.Name.ToLower()).Define(x => x.SetDependencies("WidgetsAdmin"));
}
}
<!-- List of available activities -->
@@ -14,8 +19,6 @@
<li class="activity-toolbox-item" data-activity-name="@activity.Name" title="@activity.Description">
<h2>@activity.Name.CamelFriendly()</h2>
</li>
Style.Include("workflows-activity-" + activity.Name.ToLower());
}
</ul>
</div>
@@ -32,7 +35,7 @@
isBlocking: @(activity.IsBlocking ? "true" : "false"),
hasForm: @(!String.IsNullOrWhiteSpace(activity.Form) ? "true" : "false")
},</text>
}
}
};
//]]>

View File

@@ -4,7 +4,7 @@
@{
Layout.Title = @T("Edit Workflow");
Style.Include("admin-workflows.css");
Style.Require("WorkflowsAdmin");
Script.Require("jQueryUI");
Style.Require("jQueryUI_Orchard");
Script.Include("jquery.jsPlumb-1.3.16-all-min.js");
@@ -22,9 +22,18 @@
@Html.ValidationSummary()
<div id="activity-editor">
<span id="activity-overlay">
<input type="checkbox" id="initial-state" /><label for="initial-state">@T("Start")</label>
</span>
<div id="activity-toolbar">
<div id="activity-toolbar-start">
<input type="checkbox" id="activity-toolbar-start-checkbox"/>
<label for="activity-toolbar-start-checkbox" title="@T("Start")"></label>
</div>
<div id="activity-toolbar-edit">
<label title="@T("Edit")"></label>
</div>
<div id="activity-toolbar-delete">
<label title="@T("Remove")"></label>
</div>
</div>
</div>
@@ -77,6 +86,6 @@
<fieldset>
<button class="primaryAction" type="submit" name="submit.Save" value="@T("Save")">@T("Save")</button>
<button class="cancel" type="submit" name="submit.Cancel" value="@T("Cancel")">@T("Cancel")</button>
@Html.ActionLink(T("Cancel").Text, "Index", "Admin", new { area = "Orchard.Workflows" }, new { @class = "primaryAction button" })
</fieldset>
}

View File

@@ -21,6 +21,10 @@
</UpgradeBackupLocation>
<TargetFrameworkProfile />
<UseIISExpress>false</UseIISExpress>
<IISExpressSSLPort />
<IISExpressAnonymousAuthentication />
<IISExpressWindowsAuthentication />
<IISExpressUseClassicPipelineMode />
</PropertyGroup>
<PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Debug|AnyCPU' ">
<DebugSymbols>true</DebugSymbols>