[Bps-public-commit] rt-extension-lifecycleui branch, master, updated. 9deb6bd86fa7462b1d70ed0d95496a46ae7503c6
Shawn Moore
shawn at bestpractical.com
Tue Aug 29 11:24:12 EDT 2017
The branch, master has been updated
via 9deb6bd86fa7462b1d70ed0d95496a46ae7503c6 (commit)
via da2556f4920f6f29b4168d73e4ecaabd6645fe62 (commit)
via 25b0fd7204317a102370f9244f8e0e9c23a02153 (commit)
via e420a228ff35f2b56dfdbe260b494f6dd5303a03 (commit)
via 5c5a6b9621fbf417c88afb252a9f20e0a796f605 (commit)
via 88b646f34bbd5b8a2b874265b61802103f5836cd (commit)
via 16a1664493149f655fb96469525a2215f5b5d70a (commit)
via 90cbf89ebe225e47ed10bfeb6912d4900e51e15e (commit)
via 5a9ff97234b3c272958c23c5307ce8ba6a6b1558 (commit)
via b9397f38d88d75c5dc50d5c60158e3d392cdb92c (commit)
via f2a4db5edf3f89172a329693c531285b61749fe4 (commit)
via cc8901bf271fd422537b156d1b3e72511a6cc4f5 (commit)
via 2a042bcbb8e1d5c81efa035ea967bd121a0df739 (commit)
via a9371dc889f50ba7b544c8d824547a852766aca3 (commit)
via 3de50169b40b99346798128740b6fb35eafb6542 (commit)
via 38cd4188ca71064ae2a9037c1f794521ef514128 (commit)
via d331519e2f134271c18340d17de1c12316200455 (commit)
via 383c5bb2720e6b6a4e059e7070bcaf8da2569ba1 (commit)
from af90c7a31831a7ca26cf350fb738ed34c7dd10de (commit)
Summary of changes:
html/Admin/Lifecycles/Modify.html | 1 +
html/Elements/LifecycleInspector | 67 +------------
html/Elements/LifecycleInspectorCanvas | 20 ++++
html/Elements/LifecycleInspectorShape | 5 +
html/Elements/LifecycleInspectorStatus | 17 ++++
html/Elements/LifecycleInspectorText | 6 ++
html/Elements/LifecycleInspectorTransition | 9 ++
static/css/lifecycleui-display.css | 11 +++
static/css/lifecycleui-editor.css | 7 +-
static/js/lifecycleui-editor.js | 150 ++++++++++++++++++++++++++++-
10 files changed, 224 insertions(+), 69 deletions(-)
create mode 100644 html/Elements/LifecycleInspectorCanvas
create mode 100644 html/Elements/LifecycleInspectorShape
create mode 100644 html/Elements/LifecycleInspectorStatus
create mode 100644 html/Elements/LifecycleInspectorText
create mode 100644 html/Elements/LifecycleInspectorTransition
- Log -----------------------------------------------------------------
commit 383c5bb2720e6b6a4e059e7070bcaf8da2569ba1
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Tue Aug 29 13:02:13 2017 +0000
When changing a form field, update the node and refresh UI
diff --git a/static/js/lifecycleui-editor.js b/static/js/lifecycleui-editor.js
index b926b40..c1fd69b 100644
--- a/static/js/lifecycleui-editor.js
+++ b/static/js/lifecycleui-editor.js
@@ -152,6 +152,9 @@ jQuery(function () {
inspector.find(':input').change(function () {
var key = this.name;
var value = jQuery(this).val();
+
+ node[key] = value;
+ addStatusNodes();
});
};
commit d331519e2f134271c18340d17de1c12316200455
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Tue Aug 29 13:09:44 2017 +0000
Build menu from state.statuses which is ordered
state.statusMeta is an object, so it's unordered
diff --git a/html/Elements/LifecycleInspector b/html/Elements/LifecycleInspector
index d4e7a52..d07e26f 100644
--- a/html/Elements/LifecycleInspector
+++ b/html/Elements/LifecycleInspector
@@ -10,8 +10,8 @@
<ul class="toplevel sf-menu sf-vertical sf-js-enabled sf-shadow">
<li class="has-children">Select Status
<ul>
- {{#each state.statusMeta}}
- <li><a href="#" class="select-status menu-item" data-name="{{this.name}}">{{this.name}}</a></li>
+ {{#each state.statuses}}
+ <li><a href="#" class="select-status menu-item" data-name="{{this}}">{{this}}</a></li>
{{/each}}
</ul>
</li>
commit 38cd4188ca71064ae2a9037c1f794521ef514128
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Tue Aug 29 13:10:07 2017 +0000
Better avoid issues with special characters in status names
diff --git a/static/js/lifecycleui-editor.js b/static/js/lifecycleui-editor.js
index c1fd69b..90a7b2e 100644
--- a/static/js/lifecycleui-editor.js
+++ b/static/js/lifecycleui-editor.js
@@ -167,7 +167,7 @@ jQuery(function () {
var d = state.statusMeta[name];
setInspectorContent('status', d);
svg.selectAll('.selected').classed('selected', false);
- svg.select('circle[data-name='+name+']').classed('selected', true);
+ svg.select('circle[data-name="'+name+'"]').classed('selected', true);
};
var addStatusNodes = function () {
commit 3de50169b40b99346798128740b6fb35eafb6542
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Tue Aug 29 13:10:25 2017 +0000
Update internal state on status name change
diff --git a/static/js/lifecycleui-editor.js b/static/js/lifecycleui-editor.js
index 90a7b2e..e05b068 100644
--- a/static/js/lifecycleui-editor.js
+++ b/static/js/lifecycleui-editor.js
@@ -153,7 +153,20 @@ jQuery(function () {
var key = this.name;
var value = jQuery(this).val();
+ var oldValue = node[key];
+
node[key] = value;
+
+ if (type == 'status' && key == 'name') {
+ var oldMeta = state.statusMeta[oldValue];
+ delete state.statusMeta[oldValue];
+
+ state.statusMeta[value] = oldMeta;
+
+ var index = state.statuses.indexOf(oldValue);
+ state.statuses[index] = value;
+ }
+
addStatusNodes();
});
};
commit a9371dc889f50ba7b544c8d824547a852766aca3
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Tue Aug 29 13:16:24 2017 +0000
Factor out updateStatusName
This touches virtually every part of a lifecycle, and so a dedicated
function is merited
diff --git a/static/js/lifecycleui-editor.js b/static/js/lifecycleui-editor.js
index e05b068..8454521 100644
--- a/static/js/lifecycleui-editor.js
+++ b/static/js/lifecycleui-editor.js
@@ -20,6 +20,17 @@ jQuery(function () {
return node.html();
});
+ var updateStatusName = function (state, oldValue, newValue) {
+ // statusMeta key
+ var oldMeta = state.statusMeta[oldValue];
+ delete state.statusMeta[oldValue];
+ state.statusMeta[newValue] = oldMeta;
+
+ // statuses array value
+ var index = state.statuses.indexOf(oldValue);
+ state.statuses[index] = newValue;
+ };
+
var createArrowHead = function (svg) {
var defs = svg.append('defs');
defs.append('marker')
@@ -158,13 +169,7 @@ jQuery(function () {
node[key] = value;
if (type == 'status' && key == 'name') {
- var oldMeta = state.statusMeta[oldValue];
- delete state.statusMeta[oldValue];
-
- state.statusMeta[value] = oldMeta;
-
- var index = state.statuses.indexOf(oldValue);
- state.statuses[index] = value;
+ updateStatusName(state, oldValue, value);
}
addStatusNodes();
commit 2a042bcbb8e1d5c81efa035ea967bd121a0df739
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Tue Aug 29 13:53:33 2017 +0000
Add color picker
diff --git a/html/Admin/Lifecycles/Modify.html b/html/Admin/Lifecycles/Modify.html
index af86beb..327ab65 100644
--- a/html/Admin/Lifecycles/Modify.html
+++ b/html/Admin/Lifecycles/Modify.html
@@ -2,6 +2,7 @@
<& /Elements/Tabs &>
<& /Elements/ListActions, actions => \@results &>
+<script type="text/javascript" src="<%RT->Config->Get('WebPath')%>/static/js/farbtastic.js"></script>
<form action="<%RT->Config->Get('WebPath')%>/Admin/Lifecycles/Modify.html" name="ModifyLifecycle" method="post" enctype="multipart/form-data">
<input type="hidden" class="hidden" name="Name" value="<% $LifecycleObj->Name %>" />
diff --git a/html/Elements/LifecycleInspector b/html/Elements/LifecycleInspector
index d07e26f..cb95b3f 100644
--- a/html/Elements/LifecycleInspector
+++ b/html/Elements/LifecycleInspector
@@ -32,7 +32,7 @@
<option value="inactive">inactive</option>
{{/select}}
</select><br>
- Color: <span class="color" style="color: {{status.color}}">{{status.color}}</span><br>
+ Color: <span class="status-color" style="color: {{status.color}}">{{status.color}}</span> <button class="change-color"><&|/l&>Change</&></button><br>
Add Transiition:<br>
Select Transition:<br>
diff --git a/static/css/lifecycleui-editor.css b/static/css/lifecycleui-editor.css
index cc912a2..5a70bff 100644
--- a/static/css/lifecycleui-editor.css
+++ b/static/css/lifecycleui-editor.css
@@ -28,7 +28,7 @@
stroke-width: 6px;
}
-.lifecycle-ui .inspector .status .color {
+.lifecycle-ui .inspector .status .status-color {
font-weight: bold;
}
diff --git a/static/js/lifecycleui-editor.js b/static/js/lifecycleui-editor.js
index 8454521..c591628 100644
--- a/static/js/lifecycleui-editor.js
+++ b/static/js/lifecycleui-editor.js
@@ -174,6 +174,18 @@ jQuery(function () {
addStatusNodes();
});
+
+ inspector.find('button.change-color').click(function (e) {
+ e.preventDefault();
+ var picker = jQuery('<div class="color-picker"></div>');
+ jQuery(this).replaceWith(picker);
+ var farb = jQuery.farbtastic(picker, function (newColor) {
+ inspector.find('.status-color').text(newColor).css('color', newColor);
+ node.color = newColor;
+ addStatusNodes();
+ });
+ farb.setColor(node.color);
+ });
};
var deselectAll = function () {
commit cc8901bf271fd422537b156d1b3e72511a6cc4f5
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Tue Aug 29 14:01:08 2017 +0000
Allow typing in a color name too
This is needed because we want perfectly replicable lifecycles.
farbtastic makes it a little bit of a challenge to get the exact same
color
diff --git a/static/css/lifecycleui-editor.css b/static/css/lifecycleui-editor.css
index 5a70bff..6e60be4 100644
--- a/static/css/lifecycleui-editor.css
+++ b/static/css/lifecycleui-editor.css
@@ -28,7 +28,7 @@
stroke-width: 6px;
}
-.lifecycle-ui .inspector .status .status-color {
+.lifecycle-ui .inspector .status span.status-color {
font-weight: bold;
}
diff --git a/static/js/lifecycleui-editor.js b/static/js/lifecycleui-editor.js
index c591628..3303a61 100644
--- a/static/js/lifecycleui-editor.js
+++ b/static/js/lifecycleui-editor.js
@@ -179,12 +179,31 @@ jQuery(function () {
e.preventDefault();
var picker = jQuery('<div class="color-picker"></div>');
jQuery(this).replaceWith(picker);
+
+ var skipSetInput = 0;
var farb = jQuery.farbtastic(picker, function (newColor) {
- inspector.find('.status-color').text(newColor).css('color', newColor);
+ if (!skipSetInput) {
+ inspector.find('.status-color').val(newColor);
+ }
node.color = newColor;
addStatusNodes();
});
farb.setColor(node.color);
+
+ var input = jQuery('<input class="status-color">');
+ inspector.find('.status-color').replaceWith(input);
+ input.on('input', function () {
+ var newColor = input.val();
+ if (newColor.match(/^#[a-fA-F0-9]{6}$/)) {
+ skipSetInput = 1;
+ farb.setColor(newColor);
+ skipSetInput = 0;
+
+ node.color = newColor;
+ addStatusNodes();
+ }
+ });
+ input.val(node.color);
});
};
commit f2a4db5edf3f89172a329693c531285b61749fe4
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Tue Aug 29 14:05:15 2017 +0000
Localize status types
diff --git a/html/Elements/LifecycleInspector b/html/Elements/LifecycleInspector
index cb95b3f..b95fd4d 100644
--- a/html/Elements/LifecycleInspector
+++ b/html/Elements/LifecycleInspector
@@ -27,9 +27,9 @@
Name: <input type="text" name="name" value="{{status.name}}"><br>
Type: <select name="type">
{{#select status.type}}
- <option value="initial">initial</option>
- <option value="active">active</option>
- <option value="inactive">inactive</option>
+ <option value="initial"><&|/l&>initial</&></option>
+ <option value="active"><&|/l&>active</&></option>
+ <option value="inactive"><&|/l&>inactive</&></option>
{{/select}}
</select><br>
Color: <span class="status-color" style="color: {{status.color}}">{{status.color}}</span> <button class="change-color"><&|/l&>Change</&></button><br>
commit b9397f38d88d75c5dc50d5c60158e3d392cdb92c
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Tue Aug 29 14:05:26 2017 +0000
Update defaults after status name change
diff --git a/static/js/lifecycleui-editor.js b/static/js/lifecycleui-editor.js
index 3303a61..9772637 100644
--- a/static/js/lifecycleui-editor.js
+++ b/static/js/lifecycleui-editor.js
@@ -29,6 +29,19 @@ jQuery(function () {
// statuses array value
var index = state.statuses.indexOf(oldValue);
state.statuses[index] = newValue;
+
+ // defaults
+ jQuery.each(state.defaults, function (key, statusName) {
+ if (statusName == oldValue) {
+ state.defaults[key] = newValue;
+ }
+ });
+
+ // actions
+
+ // transitions
+
+ // rights
};
var createArrowHead = function (svg) {
commit 5a9ff97234b3c272958c23c5307ce8ba6a6b1558
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Tue Aug 29 14:13:51 2017 +0000
Display color as a block rather than text
This way if you use a white color it won't disappear into the
background. The hex code is still available either by hovering or
clicking Change
diff --git a/html/Elements/LifecycleInspector b/html/Elements/LifecycleInspector
index b95fd4d..d244e93 100644
--- a/html/Elements/LifecycleInspector
+++ b/html/Elements/LifecycleInspector
@@ -32,7 +32,7 @@
<option value="inactive"><&|/l&>inactive</&></option>
{{/select}}
</select><br>
- Color: <span class="status-color" style="color: {{status.color}}">{{status.color}}</span> <button class="change-color"><&|/l&>Change</&></button><br>
+ Color: <span class="status-color" title="{{status.color}}" style="background-color: {{status.color}}"> </span> <button class="change-color"><&|/l&>Change</&></button><br>
Add Transiition:<br>
Select Transition:<br>
diff --git a/static/css/lifecycleui-editor.css b/static/css/lifecycleui-editor.css
index 6e60be4..fdd7f68 100644
--- a/static/css/lifecycleui-editor.css
+++ b/static/css/lifecycleui-editor.css
@@ -29,7 +29,8 @@
}
.lifecycle-ui .inspector .status span.status-color {
- font-weight: bold;
+ display: inline;
+ padding-left: 1em;
+ border: 1px solid black;
}
-
commit 90cbf89ebe225e47ed10bfeb6912d4900e51e15e
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Tue Aug 29 14:18:27 2017 +0000
Factor each inspector type out into its own template
diff --git a/html/Elements/LifecycleInspector b/html/Elements/LifecycleInspector
index d244e93..67e5e16 100644
--- a/html/Elements/LifecycleInspector
+++ b/html/Elements/LifecycleInspector
@@ -1,65 +1,8 @@
<div class="inspector">
</div>
-<script type="text/x-template" class="lifecycle-inspector-template" data-type="canvas">
- <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>
- <br>
- <ul class="toplevel sf-menu sf-vertical sf-js-enabled sf-shadow">
- <li class="has-children">Select Status
- <ul>
- {{#each state.statuses}}
- <li><a href="#" class="select-status menu-item" data-name="{{this}}">{{this}}</a></li>
- {{/each}}
- </ul>
- </li>
- <li class="has-children">Select Transition</li>
- <li class="has-children">Select Text</li>
- <li class="has-children">Select Shape</li>
- </ul>
- </div>
-</script>
-
-<script type="text/x-template" class="lifecycle-inspector-template" data-type="status">
- <div class="status">
- Name: <input type="text" name="name" value="{{status.name}}"><br>
- Type: <select name="type">
- {{#select status.type}}
- <option value="initial"><&|/l&>initial</&></option>
- <option value="active"><&|/l&>active</&></option>
- <option value="inactive"><&|/l&>inactive</&></option>
- {{/select}}
- </select><br>
- Color: <span class="status-color" title="{{status.color}}" style="background-color: {{status.color}}"> </span> <button class="change-color"><&|/l&>Change</&></button><br>
-
- Add Transiition:<br>
- Select Transition:<br>
- Delete Status<br>
- </div>
-</script>
-
-<script type="text/x-template" class="lifecycle-inspector-template" data-type="transition">
- <div class="transition">
- From: x<br>
- To: y<br>
- Style: solid/dashed/dotted<br>
- <br>
- Delete Transition<br>
- </div>
-</script>
-
-<script type="text/x-template" class="lifecycle-inspector-template" data-type="text">
- <div class="text">
- Body: text<br>
- Delete Text<br>
- </div>
-</script>
-
-<script type="text/x-template" class="lifecycle-inspector-template" data-type="shape">
- <div class="shape">
- Delete Shape<br>
- </div>
-</script>
-
+<& LifecycleInspectorCanvas, %ARGS &>
+<& LifecycleInspectorStatus, %ARGS &>
+<& LifecycleInspectorTransition, %ARGS &>
+<& LifecycleInspectorText, %ARGS &>
+<& LifecycleInspectorShape, %ARGS &>
diff --git a/html/Elements/LifecycleInspectorCanvas b/html/Elements/LifecycleInspectorCanvas
new file mode 100644
index 0000000..9746552
--- /dev/null
+++ b/html/Elements/LifecycleInspectorCanvas
@@ -0,0 +1,20 @@
+<script type="text/x-template" class="lifecycle-inspector-template" data-type="canvas">
+ <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>
+ <br>
+ <ul class="toplevel sf-menu sf-vertical sf-js-enabled sf-shadow">
+ <li class="has-children">Select Status
+ <ul>
+ {{#each state.statuses}}
+ <li><a href="#" class="select-status menu-item" data-name="{{this}}">{{this}}</a></li>
+ {{/each}}
+ </ul>
+ </li>
+ <li class="has-children">Select Transition</li>
+ <li class="has-children">Select Text</li>
+ <li class="has-children">Select Shape</li>
+ </ul>
+ </div>
+</script>
diff --git a/html/Elements/LifecycleInspectorShape b/html/Elements/LifecycleInspectorShape
new file mode 100644
index 0000000..92a308f
--- /dev/null
+++ b/html/Elements/LifecycleInspectorShape
@@ -0,0 +1,5 @@
+<script type="text/x-template" class="lifecycle-inspector-template" data-type="shape">
+ <div class="shape">
+ Delete Shape<br>
+ </div>
+</script>
diff --git a/html/Elements/LifecycleInspectorStatus b/html/Elements/LifecycleInspectorStatus
new file mode 100644
index 0000000..6d81845
--- /dev/null
+++ b/html/Elements/LifecycleInspectorStatus
@@ -0,0 +1,17 @@
+<script type="text/x-template" class="lifecycle-inspector-template" data-type="status">
+ <div class="status">
+ Name: <input type="text" name="name" value="{{status.name}}"><br>
+ Type: <select name="type">
+ {{#select status.type}}
+ <option value="initial"><&|/l&>initial</&></option>
+ <option value="active"><&|/l&>active</&></option>
+ <option value="inactive"><&|/l&>inactive</&></option>
+ {{/select}}
+ </select><br>
+ Color: <span class="status-color" title="{{status.color}}" style="background-color: {{status.color}}"> </span> <button class="change-color"><&|/l&>Change</&></button><br>
+
+ Add Transiition:<br>
+ Select Transition:<br>
+ Delete Status<br>
+ </div>
+</script>
diff --git a/html/Elements/LifecycleInspectorText b/html/Elements/LifecycleInspectorText
new file mode 100644
index 0000000..d0b66af
--- /dev/null
+++ b/html/Elements/LifecycleInspectorText
@@ -0,0 +1,6 @@
+<script type="text/x-template" class="lifecycle-inspector-template" data-type="text">
+ <div class="text">
+ Body: text<br>
+ Delete Text<br>
+ </div>
+</script>
diff --git a/html/Elements/LifecycleInspectorTransition b/html/Elements/LifecycleInspectorTransition
new file mode 100644
index 0000000..03afcc0
--- /dev/null
+++ b/html/Elements/LifecycleInspectorTransition
@@ -0,0 +1,9 @@
+<script type="text/x-template" class="lifecycle-inspector-template" data-type="transition">
+ <div class="transition">
+ From: x<br>
+ To: y<br>
+ Style: solid/dashed/dotted<br>
+ <br>
+ Delete Transition<br>
+ </div>
+</script>
commit 16a1664493149f655fb96469525a2215f5b5d70a
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Tue Aug 29 14:25:23 2017 +0000
refreshDisplay
diff --git a/static/js/lifecycleui-editor.js b/static/js/lifecycleui-editor.js
index 9772637..1831589 100644
--- a/static/js/lifecycleui-editor.js
+++ b/static/js/lifecycleui-editor.js
@@ -185,7 +185,7 @@ jQuery(function () {
updateStatusName(state, oldValue, value);
}
- addStatusNodes();
+ refreshDisplay();
});
inspector.find('button.change-color').click(function (e) {
@@ -199,7 +199,7 @@ jQuery(function () {
inspector.find('.status-color').val(newColor);
}
node.color = newColor;
- addStatusNodes();
+ refreshDisplay();
});
farb.setColor(node.color);
@@ -213,7 +213,7 @@ jQuery(function () {
skipSetInput = 0;
node.color = newColor;
- addStatusNodes();
+ refreshDisplay();
}
});
input.val(node.color);
@@ -232,7 +232,7 @@ jQuery(function () {
svg.select('circle[data-name="'+name+'"]').classed('selected', true);
};
- var addStatusNodes = function () {
+ var refreshStatusNodes = function () {
var statuses = svg.selectAll("circle")
.data(Object.values(state.statusMeta), function (d) { return d._key });
@@ -251,6 +251,10 @@ jQuery(function () {
.attr("data-name", function (d) { return d.name })
};
+ var refreshDisplay = function () {
+ refreshStatusNodes();
+ };
+
jQuery('.inspector').on('click', 'a.select-status', function (e) {
e.preventDefault();
var statusName = jQuery(this).data('name');
@@ -268,7 +272,7 @@ jQuery(function () {
return false;
});
- addStatusNodes();
+ refreshDisplay();
};
jQuery(".lifecycle-ui").each(function () { initializeEditor(this) });
commit 88b646f34bbd5b8a2b874265b61802103f5836cd
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Tue Aug 29 14:27:52 2017 +0000
More improvements to updating colors
diff --git a/static/js/lifecycleui-editor.js b/static/js/lifecycleui-editor.js
index 1831589..c987ab1 100644
--- a/static/js/lifecycleui-editor.js
+++ b/static/js/lifecycleui-editor.js
@@ -193,24 +193,25 @@ jQuery(function () {
var picker = jQuery('<div class="color-picker"></div>');
jQuery(this).replaceWith(picker);
- var skipSetInput = 0;
+ var skipUpdateCallback = 0;
var farb = jQuery.farbtastic(picker, function (newColor) {
- if (!skipSetInput) {
- inspector.find('.status-color').val(newColor);
+ if (skipUpdateCallback) {
+ return;
}
+ inspector.find('.status-color').val(newColor);
node.color = newColor;
refreshDisplay();
});
farb.setColor(node.color);
- var input = jQuery('<input class="status-color">');
+ var input = jQuery('<input class="status-color" size=8 maxlength=7>');
inspector.find('.status-color').replaceWith(input);
input.on('input', function () {
var newColor = input.val();
if (newColor.match(/^#[a-fA-F0-9]{6}$/)) {
- skipSetInput = 1;
+ skipUpdateCallback = 1;
farb.setColor(newColor);
- skipSetInput = 0;
+ skipUpdateCallback = 0;
node.color = newColor;
refreshDisplay();
commit 5c5a6b9621fbf417c88afb252a9f20e0a796f605
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Tue Aug 29 14:45:54 2017 +0000
Status names have a limit of 25 chars
diff --git a/html/Elements/LifecycleInspectorStatus b/html/Elements/LifecycleInspectorStatus
index 6d81845..4535c53 100644
--- a/html/Elements/LifecycleInspectorStatus
+++ b/html/Elements/LifecycleInspectorStatus
@@ -1,6 +1,6 @@
<script type="text/x-template" class="lifecycle-inspector-template" data-type="status">
<div class="status">
- Name: <input type="text" name="name" value="{{status.name}}"><br>
+ Name: <input type="text" name="name" maxlength=25 value="{{status.name}}"><br>
Type: <select name="type">
{{#select status.type}}
<option value="initial"><&|/l&>initial</&></option>
commit e420a228ff35f2b56dfdbe260b494f6dd5303a03
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Tue Aug 29 14:46:12 2017 +0000
Add labels to each status circle with its name
diff --git a/static/css/lifecycleui-display.css b/static/css/lifecycleui-display.css
index 9b60623..01b8b24 100644
--- a/static/css/lifecycleui-display.css
+++ b/static/css/lifecycleui-display.css
@@ -7,6 +7,17 @@
stroke-width: 2px;
}
+.lifecycle-ui text {
+ cursor: default;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+.lifecycle-ui text::selection {
+ background: none;
+}
+
.inspector li.has-children {
background: transparent;
}
diff --git a/static/js/lifecycleui-editor.js b/static/js/lifecycleui-editor.js
index c987ab1..a9920a0 100644
--- a/static/js/lifecycleui-editor.js
+++ b/static/js/lifecycleui-editor.js
@@ -252,8 +252,39 @@ jQuery(function () {
.attr("data-name", function (d) { return d.name })
};
+ function truncateLabel () {
+ var self = d3.select(this),
+ textLength = self.node().getComputedTextLength(),
+ text = self.text();
+ while (textLength > STATUS_CIRCLE_RADIUS*1.9 && text.length > 0) {
+ text = text.slice(0, -1);
+ self.text(text + '…');
+ textLength = self.node().getComputedTextLength();
+ }
+ };
+
+ var refreshStatusLabels = function () {
+ var labels = svg.selectAll("text")
+ .data(Object.values(state.statusMeta), function (d) { return d._key });
+
+ labels.exit().remove();
+
+ labels.enter().append("text")
+ .attr("text-anchor", "middle")
+ .attr("alignment-baseline", "middle")
+ .on("click", function (d) {
+ d3.event.stopPropagation();
+ selectStatus(d.name);
+ })
+ .merge(labels)
+ .attr("x", function (d) { return xScale(d.x) })
+ .attr("y", function (d) { return yScale(d.y) })
+ .text(function (d) { return d.name }).each(truncateLabel)
+ };
+
var refreshDisplay = function () {
refreshStatusNodes();
+ refreshStatusLabels();
};
jQuery('.inspector').on('click', 'a.select-status', function (e) {
commit 25b0fd7204317a102370f9244f8e0e9c23a02153
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Tue Aug 29 15:16:10 2017 +0000
Add a delete status button
diff --git a/html/Elements/LifecycleInspectorStatus b/html/Elements/LifecycleInspectorStatus
index 4535c53..50c8772 100644
--- a/html/Elements/LifecycleInspectorStatus
+++ b/html/Elements/LifecycleInspectorStatus
@@ -12,6 +12,6 @@
Add Transiition:<br>
Select Transition:<br>
- Delete Status<br>
+ <button class="delete"><&|/l&>Delete Status</&></button>
</div>
</script>
diff --git a/static/js/lifecycleui-editor.js b/static/js/lifecycleui-editor.js
index a9920a0..73110f5 100644
--- a/static/js/lifecycleui-editor.js
+++ b/static/js/lifecycleui-editor.js
@@ -44,6 +44,28 @@ jQuery(function () {
// rights
};
+ var deleteStatus = function (state, statusName) {
+ // statusMeta key
+ delete state.statusMeta[statusName];
+
+ // statuses array value
+ var index = state.statuses.indexOf(statusName);
+ state.statuses.splice(index, 1);
+
+ // defaults
+ jQuery.each(state.defaults, function (key, value) {
+ if (value == statusName) {
+ delete state.defaults[key];
+ }
+ });
+
+ // actions
+
+ // transitions
+
+ // rights
+ };
+
var createArrowHead = function (svg) {
var defs = svg.append('defs');
defs.append('marker')
@@ -219,6 +241,17 @@ jQuery(function () {
});
input.val(node.color);
});
+
+ inspector.find('button.delete').click(function (e) {
+ e.preventDefault();
+
+ if (type == 'status') {
+ deleteStatus(state, node.name);
+ }
+
+ deselectAll();
+ refreshDisplay();
+ });
};
var deselectAll = function () {
@@ -237,7 +270,11 @@ jQuery(function () {
var statuses = svg.selectAll("circle")
.data(Object.values(state.statusMeta), function (d) { return d._key });
- statuses.exit().remove();
+ statuses.exit()
+ .transition()
+ .style("opacity", 1e-6)
+ .attr("r", STATUS_CIRCLE_RADIUS * .8)
+ .remove();
statuses.enter().append("circle")
.attr("r", STATUS_CIRCLE_RADIUS)
@@ -267,7 +304,10 @@ jQuery(function () {
var labels = svg.selectAll("text")
.data(Object.values(state.statusMeta), function (d) { return d._key });
- labels.exit().remove();
+ labels.exit()
+ .transition()
+ .style("opacity", 1e-6)
+ .remove();
labels.enter().append("text")
.attr("text-anchor", "middle")
commit da2556f4920f6f29b4168d73e4ecaabd6645fe62
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Tue Aug 29 15:16:30 2017 +0000
Slightly more padding on internal labels
diff --git a/static/js/lifecycleui-editor.js b/static/js/lifecycleui-editor.js
index 73110f5..be51034 100644
--- a/static/js/lifecycleui-editor.js
+++ b/static/js/lifecycleui-editor.js
@@ -293,7 +293,7 @@ jQuery(function () {
var self = d3.select(this),
textLength = self.node().getComputedTextLength(),
text = self.text();
- while (textLength > STATUS_CIRCLE_RADIUS*1.9 && text.length > 0) {
+ while (textLength > STATUS_CIRCLE_RADIUS*1.8 && text.length > 0) {
text = text.slice(0, -1);
self.text(text + '…');
textLength = self.node().getComputedTextLength();
commit 9deb6bd86fa7462b1d70ed0d95496a46ae7503c6
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Tue Aug 29 15:23:31 2017 +0000
Display names using white text on very dark status colors
diff --git a/static/js/lifecycleui-editor.js b/static/js/lifecycleui-editor.js
index be51034..884e7b3 100644
--- a/static/js/lifecycleui-editor.js
+++ b/static/js/lifecycleui-editor.js
@@ -319,6 +319,7 @@ jQuery(function () {
.merge(labels)
.attr("x", function (d) { return xScale(d.x) })
.attr("y", function (d) { return yScale(d.y) })
+ .attr("fill", function (d) { return d3.hsl(d.color).l > 0.35 ? '#000' : '#fff' })
.text(function (d) { return d.name }).each(truncateLabel)
};
-----------------------------------------------------------------------
More information about the Bps-public-commit
mailing list