[Bps-public-commit] rt-extension-lifecycleui branch, master, updated. 4a279f7579173dbd128003c6cf64322218424001
Shawn Moore
shawn at bestpractical.com
Tue Sep 5 12:42:33 EDT 2017
The branch, master has been updated
via 4a279f7579173dbd128003c6cf64322218424001 (commit)
via de4cb6e84f663ee823d40ced9956e1cfc6a8fc85 (commit)
via f07737baaed616dbcfa7457f624639dc03e1b61c (commit)
via 51c16556ea1ed431649838e9b5c3db58390b3dbc (commit)
via 7ee382580e72dc065155db383f56837d070366a7 (commit)
via 5e67fd5f8e3d52301d1deaaeb170247711bcd7cb (commit)
via 36c0fd8d5fcaaf02be0ccfae702d3509413a6c7c (commit)
via 8a63dfd24a7a6565c415815d9d0916f996597ca4 (commit)
from 9ce2cc6d0513672a0ae05074aea0bfa29d068f6d (commit)
Summary of changes:
html/Admin/Lifecycles/Modify.html | 10 ++++++++
html/Elements/LifecycleInspector | 2 +-
html/Elements/LifecycleInspectorCanvas | 4 ++--
html/Elements/LifecycleInspectorPolygon | 7 ++++++
html/Elements/LifecycleInspectorShape | 5 ----
html/Elements/LifecycleInspectorStatus | 2 +-
static/css/lifecycleui-editor.css | 2 +-
static/css/lifecycleui-viewer.css | 4 ++++
static/js/lifecycleui-editor.js | 41 +++++++++++++++++++++++++--------
static/js/lifecycleui-model.js | 14 ++++++-----
static/js/lifecycleui-viewer.js | 30 ++++++++++++++++++++++++
11 files changed, 96 insertions(+), 25 deletions(-)
create mode 100644 html/Elements/LifecycleInspectorPolygon
delete mode 100644 html/Elements/LifecycleInspectorShape
- Log -----------------------------------------------------------------
commit 8a63dfd24a7a6565c415815d9d0916f996597ca4
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Tue Sep 5 15:48:48 2017 +0000
Start rendering polygons
diff --git a/html/Elements/LifecycleInspector b/html/Elements/LifecycleInspector
index 17b5127..b6a0e0a 100644
--- a/html/Elements/LifecycleInspector
+++ b/html/Elements/LifecycleInspector
@@ -5,5 +5,5 @@
<& LifecycleInspectorStatus, %ARGS &>
<& LifecycleInspectorTransition, %ARGS &>
<& LifecycleInspectorText, %ARGS &>
-<& LifecycleInspectorShape, %ARGS &>
+<& LifecycleInspectorPolygon, %ARGS &>
<& LifecycleInspectorAction, %ARGS &>
diff --git a/html/Elements/LifecycleInspectorCanvas b/html/Elements/LifecycleInspectorCanvas
index 82bf634..2146191 100644
--- a/html/Elements/LifecycleInspectorCanvas
+++ b/html/Elements/LifecycleInspectorCanvas
@@ -2,7 +2,7 @@
<div class="canvas">
<button class="add-status"><&|/l&>Add Status</&></button><br>
<button class="add-text"><&|/l&>Add Text</&></button><br>
- <button class="add-shape"><&|/l&>Add Shape</&></button><br>
+ <button class="add-polygon"><&|/l&>Add Polygon</&></button><br>
<br>
<ul class="toplevel sf-menu sf-vertical sf-js-enabled sf-shadow">
<li class="has-children">Select Status
@@ -14,7 +14,7 @@
</li>
<li class="has-children">Select Transition</li>
<li class="has-children">Select Text</li>
- <li class="has-children">Select Shape</li>
+ <li class="has-children">Select Polygon</li>
</ul>
</div>
</script>
diff --git a/html/Elements/LifecycleInspectorShape b/html/Elements/LifecycleInspectorPolygon
similarity index 52%
rename from html/Elements/LifecycleInspectorShape
rename to html/Elements/LifecycleInspectorPolygon
index 92a308f..9cee662 100644
--- a/html/Elements/LifecycleInspectorShape
+++ b/html/Elements/LifecycleInspectorPolygon
@@ -1,5 +1,5 @@
-<script type="text/x-template" class="lifecycle-inspector-template" data-type="shape">
- <div class="shape">
- Delete Shape<br>
+<script type="text/x-template" class="lifecycle-inspector-template" data-type="polygon">
+ <div class="polygon">
+ Delete Polygon<br>
</div>
</script>
diff --git a/static/js/lifecycleui-model.js b/static/js/lifecycleui-model.js
index e2de2ee..00504db 100644
--- a/static/js/lifecycleui-model.js
+++ b/static/js/lifecycleui-model.js
@@ -150,6 +150,7 @@ jQuery(function () {
}
self.decorations.text = self.decorations.text || [];
+ self.decorations.polygon = self.decorations.polygon || [];
};
Lifecycle.prototype.defaultRightForTransition = function (transition) {
@@ -383,7 +384,7 @@ jQuery(function () {
else if (type == 'transition') {
this.deleteTransition(key);
}
- else if (type == 'text') {
+ else if (type == 'text' || type == 'polygon') {
this.deleteDecoration(type, key);
}
else {
diff --git a/static/js/lifecycleui-viewer.js b/static/js/lifecycleui-viewer.js
index 829de9c..5c52d3f 100644
--- a/static/js/lifecycleui-viewer.js
+++ b/static/js/lifecycleui-viewer.js
@@ -49,6 +49,7 @@ jQuery(function () {
Viewer.prototype.didEnterStatusLabels = function (labels) { };
Viewer.prototype.didEnterTransitions = function (paths) { };
Viewer.prototype.didEnterTextDecorations = function (labels) { };
+ Viewer.prototype.didEnterPolygonDecorations = function (polygons) { };
Viewer.prototype.renderStatusNodes = function () {
var self = this;
@@ -169,7 +170,33 @@ jQuery(function () {
.text(function (d) { return d.text });
};
+ Viewer.prototype.renderPolygonDecorations = function () {
+ var self = this;
+ var polygons = self.decorationContainer.selectAll("polygon")
+ .data(self.lifecycle.decorations.polygon, function (d) { return d._key });
+
+ polygons.exit()
+ .classed("removing", true)
+ .transition().duration(200)
+ .remove();
+
+ polygons.enter().append("polygon")
+ .attr("data-key", function (d) { return d._key })
+ .on("click", function (d) {
+ d3.event.stopPropagation();
+ self.clickedDecoration(d);
+ })
+ .call(function (polygons) { self.didEnterPolygonDecorations(polygons) })
+ .merge(polygons)
+ .attr("points", function (d) {
+ return jQuery.map(d.points, function(p) {
+ return [self.xScale(p.x),self.yScale(p.y)].join(",");
+ }).join(" ");
+ });
+ };
+
Viewer.prototype.renderDecorations = function () {
+ this.renderPolygonDecorations();
this.renderTextDecorations();
};
commit 36c0fd8d5fcaaf02be0ccfae702d3509413a6c7c
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Tue Sep 5 15:51:19 2017 +0000
Delete polygon
diff --git a/html/Elements/LifecycleInspectorPolygon b/html/Elements/LifecycleInspectorPolygon
index 9cee662..709d08c 100644
--- a/html/Elements/LifecycleInspectorPolygon
+++ b/html/Elements/LifecycleInspectorPolygon
@@ -1,5 +1,5 @@
<script type="text/x-template" class="lifecycle-inspector-template" data-type="polygon">
<div class="polygon">
- Delete Polygon<br>
+ <button class="delete"><&|/l&>Delete Polygon</&></button>
</div>
</script>
commit 5e67fd5f8e3d52301d1deaaeb170247711bcd7cb
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Tue Sep 5 16:03:16 2017 +0000
Make color handling more reusable
diff --git a/html/Elements/LifecycleInspectorStatus b/html/Elements/LifecycleInspectorStatus
index 868324c..b22e19e 100644
--- a/html/Elements/LifecycleInspectorStatus
+++ b/html/Elements/LifecycleInspectorStatus
@@ -9,7 +9,7 @@
{{/select}}
</select><br>
Creation: <input type="checkbox" name="creation" {{#if status.creation}}checked=checked{{/if}}><br>
- Color: <span class="current-color" title="{{status.color}}" style="background-color: {{status.color}}"> </span> <button class="change-color"><&|/l&>Change</&></button><br>
+ Color: <span class="color-control" data-field="color"><span class="current-color" title="{{status.color}}" style="background-color: {{status.color}}"> </span> <button class="change-color"><&|/l&>Change</&></button></span><br>
Add Transition:
<ul>
diff --git a/static/css/lifecycleui-editor.css b/static/css/lifecycleui-editor.css
index 4a08ec3..becc4d4 100644
--- a/static/css/lifecycleui-editor.css
+++ b/static/css/lifecycleui-editor.css
@@ -33,7 +33,7 @@
stroke-width: 6px;
}
-.lifecycle-ui .inspector .status span.current-color {
+.lifecycle-ui .inspector .color-control span.current-color {
display: inline;
padding-left: 1em;
border: 1px solid black;
diff --git a/static/js/lifecycleui-editor.js b/static/js/lifecycleui-editor.js
index 70934c2..f64b755 100644
--- a/static/js/lifecycleui-editor.js
+++ b/static/js/lifecycleui-editor.js
@@ -81,6 +81,8 @@ jQuery(function () {
inspector.on('click', 'button.change-color', function (e) {
e.preventDefault();
+ var container = jQuery(this).closest('.color-control');
+ var field = container.data('field');
var picker = jQuery('<div class="color-picker"></div>');
jQuery(this).replaceWith(picker);
@@ -89,14 +91,14 @@ jQuery(function () {
if (skipUpdateCallback) {
return;
}
- inspector.find('.current-color').val(newColor);
- lifecycle.updateItem(self.inspectorNode, 'color', newColor);
+ container.find('.current-color').val(newColor);
+ lifecycle.updateItem(self.inspectorNode, field, newColor);
self.renderDisplay();
});
- farb.setColor(self.inspectorNode.color);
+ farb.setColor(self.inspectorNode[field]);
var input = jQuery('<input class="current-color" size=8 maxlength=7>');
- inspector.find('.current-color').replaceWith(input);
+ container.find('.current-color').replaceWith(input);
input.on('input', function () {
var newColor = input.val();
if (newColor.match(/^#[a-fA-F0-9]{6}$/)) {
@@ -104,11 +106,11 @@ jQuery(function () {
farb.setColor(newColor);
skipUpdateCallback = 0;
- lifecycle.updateItem(self.inspectorNode, 'color', newColor);
+ lifecycle.updateItem(self.inspectorNode, field, newColor);
self.renderDisplay();
}
});
- input.val(self.inspectorNode.color);
+ input.val(self.inspectorNode[field]);
});
inspector.on('click', 'button.delete', function (e) {
commit 7ee382580e72dc065155db383f56837d070366a7
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Tue Sep 5 16:03:45 2017 +0000
Stroke/fill color pickers for polygons
diff --git a/html/Elements/LifecycleInspectorPolygon b/html/Elements/LifecycleInspectorPolygon
index 709d08c..04a3e2d 100644
--- a/html/Elements/LifecycleInspectorPolygon
+++ b/html/Elements/LifecycleInspectorPolygon
@@ -1,5 +1,7 @@
<script type="text/x-template" class="lifecycle-inspector-template" data-type="polygon">
<div class="polygon">
+ Stroke: <span class="color-control" data-field="stroke"><span class="current-color" title="{{polygon.stroke}}" style="background-color: {{polygon.stroke}}"> </span> <button class="change-color"><&|/l&>Change</&></button></span><br>
+ Fill: <span class="color-control" data-field="fill"><span class="current-color" title="{{polygon.fill}}" style="background-color: {{polygon.fill}}"> </span> <button class="change-color"><&|/l&>Change</&></button></span><br>
<button class="delete"><&|/l&>Delete Polygon</&></button>
</div>
</script>
diff --git a/static/css/lifecycleui-viewer.css b/static/css/lifecycleui-viewer.css
index ff8f954..e500f20 100644
--- a/static/css/lifecycleui-viewer.css
+++ b/static/css/lifecycleui-viewer.css
@@ -30,6 +30,10 @@
alignment-baseline: middle;
}
+.lifecycle-ui .decorations polygon {
+ stroke-width: 2px;
+}
+
.lifecycle-ui text {
cursor: default;
-webkit-user-select: none;
diff --git a/static/js/lifecycleui-viewer.js b/static/js/lifecycleui-viewer.js
index 5c52d3f..9fd6051 100644
--- a/static/js/lifecycleui-viewer.js
+++ b/static/js/lifecycleui-viewer.js
@@ -188,6 +188,8 @@ jQuery(function () {
})
.call(function (polygons) { self.didEnterPolygonDecorations(polygons) })
.merge(polygons)
+ .attr("stroke", function (d) { return d.stroke })
+ .attr("fill", function (d) { return d.fill })
.attr("points", function (d) {
return jQuery.map(d.points, function(p) {
return [self.xScale(p.x),self.yScale(p.y)].join(",");
commit 51c16556ea1ed431649838e9b5c3db58390b3dbc
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Tue Sep 5 16:06:35 2017 +0000
Render stroke/fill checkboxes
diff --git a/html/Elements/LifecycleInspectorPolygon b/html/Elements/LifecycleInspectorPolygon
index 04a3e2d..e7092b3 100644
--- a/html/Elements/LifecycleInspectorPolygon
+++ b/html/Elements/LifecycleInspectorPolygon
@@ -1,7 +1,7 @@
<script type="text/x-template" class="lifecycle-inspector-template" data-type="polygon">
<div class="polygon">
- Stroke: <span class="color-control" data-field="stroke"><span class="current-color" title="{{polygon.stroke}}" style="background-color: {{polygon.stroke}}"> </span> <button class="change-color"><&|/l&>Change</&></button></span><br>
- Fill: <span class="color-control" data-field="fill"><span class="current-color" title="{{polygon.fill}}" style="background-color: {{polygon.fill}}"> </span> <button class="change-color"><&|/l&>Change</&></button></span><br>
+ Stroke: <input type="checkbox" name="renderStroke" {{#if polygon.renderStroke}}checked=checked{{/if}} data-show-hide=".color-control[data-field=stroke]"> <span class="color-control" data-field="stroke"><span class="current-color" title="{{polygon.stroke}}" style="background-color: {{polygon.stroke}}"> </span> <button class="change-color"><&|/l&>Change</&></button></span><br>
+ Fill: <input type="checkbox" name="renderFill" {{#if polygon.renderFill}}checked=checked{{/if}} data-show-hide=".color-control[data-field=fill]"> <span class="color-control" data-field="fill"><span class="current-color" title="{{polygon.fill}}" style="background-color: {{polygon.fill}}"> </span> <button class="change-color"><&|/l&>Change</&></button></span><br>
<button class="delete"><&|/l&>Delete Polygon</&></button>
</div>
</script>
diff --git a/static/js/lifecycleui-editor.js b/static/js/lifecycleui-editor.js
index f64b755..af8ebcf 100644
--- a/static/js/lifecycleui-editor.js
+++ b/static/js/lifecycleui-editor.js
@@ -51,6 +51,21 @@ jQuery(function () {
inspector.html(self.templates[type](params));
inspector.find('sf-menu').supersubs().superfish({ dropShadows: false, speed: 'fast', delay: 0 }).supposition()
+
+ inspector.find(':checkbox[data-show-hide]').each(function () {
+ var field = jQuery(this);
+ var selector = field.data('show-hide');
+ console.log(field, selector);
+ var toggle = function () {
+ if (field.prop('checked')) {
+ jQuery(selector).show();
+ } else {
+ jQuery(selector).hide();
+ }
+ }
+ field.change(function (e) { toggle() });
+ toggle();
+ });
};
Editor.prototype.bindInspectorEvents = function () {
diff --git a/static/js/lifecycleui-viewer.js b/static/js/lifecycleui-viewer.js
index 9fd6051..50edd9f 100644
--- a/static/js/lifecycleui-viewer.js
+++ b/static/js/lifecycleui-viewer.js
@@ -188,8 +188,8 @@ jQuery(function () {
})
.call(function (polygons) { self.didEnterPolygonDecorations(polygons) })
.merge(polygons)
- .attr("stroke", function (d) { return d.stroke })
- .attr("fill", function (d) { return d.fill })
+ .attr("stroke", function (d) { return d.renderStroke ? d.stroke : 'none' })
+ .attr("fill", function (d) { return d.renderFill ? d.fill : 'none' })
.attr("points", function (d) {
return jQuery.map(d.points, function(p) {
return [self.xScale(p.x),self.yScale(p.y)].join(",");
commit f07737baaed616dbcfa7457f624639dc03e1b61c
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Tue Sep 5 16:21:44 2017 +0000
Drag and drop for polygons
diff --git a/static/js/lifecycleui-editor.js b/static/js/lifecycleui-editor.js
index af8ebcf..e7d5bb8 100644
--- a/static/js/lifecycleui-editor.js
+++ b/static/js/lifecycleui-editor.js
@@ -280,6 +280,10 @@ jQuery(function () {
labels.call(this._createDrag());
};
+ Editor.prototype.didEnterPolygonDecorations = function (polygons) {
+ polygons.call(this._createDrag());
+ };
+
Editor.prototype.initializeEditor = function (node, config) {
var self = this;
self.initializeViewer(node, config);
diff --git a/static/js/lifecycleui-viewer.js b/static/js/lifecycleui-viewer.js
index 50edd9f..544ef6e 100644
--- a/static/js/lifecycleui-viewer.js
+++ b/static/js/lifecycleui-viewer.js
@@ -190,6 +190,7 @@ jQuery(function () {
.merge(polygons)
.attr("stroke", function (d) { return d.renderStroke ? d.stroke : 'none' })
.attr("fill", function (d) { return d.renderFill ? d.fill : 'none' })
+ .attr("transform", function (d) { return "translate(" + self.xScale(d.x) + ", " + self.yScale(d.y) + ")" })
.attr("points", function (d) {
return jQuery.map(d.points, function(p) {
return [self.xScale(p.x),self.yScale(p.y)].join(",");
commit de4cb6e84f663ee823d40ced9956e1cfc6a8fc85
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Tue Sep 5 16:40:46 2017 +0000
Add missing transition.actions array for new transitions
diff --git a/static/js/lifecycleui-model.js b/static/js/lifecycleui-model.js
index 00504db..86c17df 100644
--- a/static/js/lifecycleui-model.js
+++ b/static/js/lifecycleui-model.js
@@ -299,11 +299,12 @@ jQuery(function () {
Lifecycle.prototype.addTransition = function (fromStatus, toStatus) {
var transition = {
- _key : _ELEMENT_KEY_SEQ++,
- _type : 'transition',
- from : fromStatus,
- to : toStatus,
- style : 'solid'
+ _key : _ELEMENT_KEY_SEQ++,
+ _type : 'transition',
+ from : fromStatus,
+ to : toStatus,
+ style : 'solid',
+ actions : []
};
this.transitions.push(transition);
this._keyMap[transition._key] = transition;
commit 4a279f7579173dbd128003c6cf64322218424001
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Tue Sep 5 16:41:15 2017 +0000
Serialize config to JSON and send it to server
diff --git a/html/Admin/Lifecycles/Modify.html b/html/Admin/Lifecycles/Modify.html
index 327ab65..3afa0a9 100644
--- a/html/Admin/Lifecycles/Modify.html
+++ b/html/Admin/Lifecycles/Modify.html
@@ -23,6 +23,15 @@ Abort("Invalid lifecycle") unless $LifecycleObj->Name
$title = loc("Modify lifecycle [_1]", $LifecycleObj->Name);
+if ($Config) {
+ my ($ok, $msg) = RT::Extension::LifecycleUI->UpdateLifecycle(
+ CurrentUser => $session{CurrentUser},
+ LifecycleObj => $LifecycleObj,
+ NewConfig => JSON::from_json($Config),
+ );
+ push @results, $msg;
+}
+
# This code does automatic redirection if any updates happen.
MaybeRedirectForResults(
Actions => \@results,
@@ -32,4 +41,5 @@ MaybeRedirectForResults(
<%ARGS>
$Name => undef
$Type => undef
+$Config => undef
</%ARGS>
diff --git a/static/js/lifecycleui-editor.js b/static/js/lifecycleui-editor.js
index e7d5bb8..a43f332 100644
--- a/static/js/lifecycleui-editor.js
+++ b/static/js/lifecycleui-editor.js
@@ -295,10 +295,12 @@ jQuery(function () {
self.bindInspectorEvents();
self.container.closest('form[name=ModifyLifecycle]').submit(function (e) {
- e.preventDefault();
var config = self.lifecycle.exportAsConfiguration();
- console.log(config);
- return false;
+ var form = jQuery(this);
+ var field = jQuery('<input type="hidden" name="Config">');
+ field.val(JSON.stringify(config));
+ form.append(field);
+ return true;
});
self.svg.on('click', function () { self.deselectAll(true) });
-----------------------------------------------------------------------
More information about the Bps-public-commit
mailing list