[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