[Rt-commit] rt branch, 4.6/lifecycle-ui-dev, updated. rt-4.4.4-626-g86683c5880

Craig Kaiser craig at bestpractical.com
Wed Jan 15 09:17:07 EST 2020


The branch, 4.6/lifecycle-ui-dev has been updated
       via  86683c5880d8be0c75428668422a093136aefe37 (commit)
      from  0d92d4fbb320a8b3743b1eda2639e89a40211168 (commit)

Summary of changes:
 share/html/Admin/Lifecycles/Create.html   | 60 ++++++++++++++++++++++---------
 share/html/Admin/Lifecycles/Mappings.html | 44 ++++++++++++++---------
 share/html/Admin/Lifecycles/index.html    | 27 +++++++-------
 share/html/Elements/Lifecycle/Graph       | 47 ++++++++++++++----------
 4 files changed, 114 insertions(+), 64 deletions(-)

- Log -----------------------------------------------------------------
commit 86683c5880d8be0c75428668422a093136aefe37
Author: Craig Kaiser <craig at bestpractical.com>
Date:   Wed Jan 15 09:16:39 2020 -0500

    Migrate lifecycle UI pages to elevator theme

diff --git a/share/html/Admin/Lifecycles/Create.html b/share/html/Admin/Lifecycles/Create.html
index c66e9430f9..ce896d51c8 100644
--- a/share/html/Admin/Lifecycles/Create.html
+++ b/share/html/Admin/Lifecycles/Create.html
@@ -50,34 +50,62 @@
 <& /Elements/ListActions, actions => \@results &>
 
 <form action="<%RT->Config->Get('WebPath')%>/Admin/Lifecycles/Create.html" name="CreateLifecycle" method="post" enctype="multipart/form-data">
+  <div class="row">
+    <div class="col-xl-6">
 
-<table>
-<tr><td align="right"><&|/l&>Lifecycle Name</&>:</td>
-<td><input name="Name" value="<% $Name %>" /></td>
-</tr>
+      <div class="form-row">
+        <div class="col-md-3 label text-left"><&|/l&>Lifecycle Name</&>:</div>
+        <div class="col-md-3"><input name="Name" value="<% $Name %>" class="form-control" /></div>
+      </div>
 
-<tr><td align="right"><&|/l&>Type</&>:</td>
-<td><select name="Type">
+      <div class="form-row">
+        <div class="col-md-3 label text-left"><&|/l&>Type</&>:</div>
+        <div class="col-md-3">
+          <select name="Type" class="form-control selectpicker">
 % for my $type (@types) {
-<option value="<% $type %>" <% $type eq $Type ? "selected=selected" : "" %>><% loc($type) %></option>
+            <option value="<% $type %>" <% $type eq $Type ? "selected=selected" : "" %>><% loc($type) %></option>
 % }
-</select></td></tr>
+          </select>
+        </div>
+      </div>
 
-<tr><td align="right"><&|/l&>Clone Lifecycle</&>:</td><td>
-<label><input type="radio" name="Clone" value="" <% ($Clone//'') eq '' ? "checked=checked" : "" %> /> (none)</label>
+      <div class="form-row">
+        <div class="col-md-3 label text-left"><&|/l&>Clone Lifecycle</&>:</div>
+        <div class="col-md-3">
+          <span class="current-value form-control">
+            <div class="custom-control custom-radio">
+              <input class="custom-control-input" type="radio" id="Clone-None" name="Clone" value="" <% ($Clone//'') eq '' ? "checked=checked" : "" %> />
+              <label class="custom-control-label" for="Clone-None">(<&|/l&>none</&>)</label>
+            </div>
+          </span>
+        </div>
+      </div>
 
 % for my $type (@types) {
-<div class="type" data-type="<% $type %>">
 % for my $lifecycle (@{ $lifecycles{$type} }) {
-<label><input type="radio" name="Clone" value="<% $lifecycle %>" <% ($Clone//'') eq $lifecycle ? "checked=checked" : "" %> /> <% $lifecycle %></label><br>
+      <div class="form-row type" data-type="<% $type %>">
+        <div class="col-md-3 label text-left"></div>
+        <div class="col-md-3">
+          <span class="current-value form-control">
+            <div class="custom-control custom-radio">
+              <input class="custom-control-input" type="radio" id="Clone-<%$lifecycle%>" name="Clone" value="<% $lifecycle %>" <% ($Clone//'') eq $lifecycle ? "checked=checked" : "" %> />
+              <label class="custom-control-label" for="Clone-<%$lifecycle%>"><% $lifecycle %></label>
+            </div>
+          </span>
+        </div>
+      </div>
 % }
-</div>
 % }
-</td></tr>
-</table>
 
-<& /Elements/Submit, Name => 'Create', Label => loc('Create') &>
+      <div class="form-row">
+        <div class="col-md-12">
+          <& /Elements/Submit, Name => 'Create', Label => loc('Create') &>
+        </div>
+      </div>
 
+    </div>
+  </div>
+</form>
 <script type="text/javascript">
 jQuery(function () {
     var showType = function (resetClone) {
diff --git a/share/html/Admin/Lifecycles/Mappings.html b/share/html/Admin/Lifecycles/Mappings.html
index c587293cd5..36018cae3b 100644
--- a/share/html/Admin/Lifecycles/Mappings.html
+++ b/share/html/Admin/Lifecycles/Mappings.html
@@ -61,34 +61,46 @@
     <&| /Widgets/TitleBox, title => $Other->Name &>
 
 <h3><&|/l, $Other->Name, $LifecycleObj->Name &>Changing from [_1] to [_2]:</&></h3>
-<table>
+<div class="row">
+  <div class="col-xl-6">
 % for my $OtherStatus (@OtherStatuses) {
-  <tr>
-    <td><% $OtherStatus %>:</td>
-    <td><& /Elements/SelectStatus, Statuses => \@MyStatuses, Default => $FromMapping->{$OtherStatus}, Name => 'map-' . $Other->Name . '-' . $OtherStatus . '--' . $LifecycleObj->Name&></td>
-  </tr>
+    <div class="form-row">
+      <div class="col-md-3 label text-left"><% $OtherStatus %>:</div>
+      <div class="col-md-3">
+        <& /Elements/SelectStatus, Statuses => \@MyStatuses, Default => $FromMapping->{$OtherStatus}, Name => 'map-' . $Other->Name . '-' . $OtherStatus . '--' . $LifecycleObj->Name &>
+      </div>
+    </div>
 % }
-</table>
+  </div>
+</div>
+
+<br>
 
 <h3><&|/l, $LifecycleObj->Name, $Other->Name &>Changing from [_1] to [_2]:</&></h3>
-<table>
+<div class="row">
+  <div class="col-xl-6">
 % for my $MyStatus (@MyStatuses) {
-  <tr>
-    <td><% $MyStatus %>:</td>
-    <td><& /Elements/SelectStatus, Statuses => \@OtherStatuses, Default => $ToMapping->{$MyStatus}, Name => 'map-' . $LifecycleObj->Name . '-' . $MyStatus . '--' . $Other->Name &></td>
-  </tr>
+    <div class="form-row">
+      <div class="col-md-3 label text-left"><% $MyStatus %>:</div>
+      <div class="col-md-3">
+        <& /Elements/SelectStatus, Statuses => \@OtherStatuses, Default => $ToMapping->{$MyStatus}, Name => 'map-' . $LifecycleObj->Name . '-' . $MyStatus . '--' . $Other->Name &>
+      </div>
+    </div>
 % }
-</table>
-
-    </&>
+  </div>
+</div>
+</&>
 % }
 
 % unless ( scalar @lifecycles ) {
     <p><&|/l&>Mapping only available when more than one lifecycle exists</&></p>
 % }
 
-<& /Elements/Submit, Name => 'Update', Label => loc('Save Changes') &>
-
+<div class="form-row">
+  <div class="col-md-12">
+    <& /Elements/Submit, Name => 'Update', Label => loc('Save Changes') &>
+  </div>
+</div>
 </form>
 <%INIT>
 my ($title, @results);
diff --git a/share/html/Admin/Lifecycles/index.html b/share/html/Admin/Lifecycles/index.html
index 12ffd14602..33a19fea8d 100644
--- a/share/html/Admin/Lifecycles/index.html
+++ b/share/html/Admin/Lifecycles/index.html
@@ -50,23 +50,24 @@
 
 <h1><&|/l&>Lifecycles</&></h1>
 
-<div cellspacing="0" class="collection collection-as-table">
-  <div class="form-row">
-    <div class="col-md-2 collection-as-table"><&|/l&>Name</&></div>
-    <div class="col-md-auto collection-as-table"><&|/l&>Type</&></div>
-    <div class="col-md-auto collection-as-table"><&|/l&>Display</&></div>
-  </div>
+<table class="table collection collection-as-table" cellspacing="0">
+  <tbody>
+    <tr class="collection-as-table">
+      <th class="collection-as-table">Name</th>
+      <th class="collection-as-table">Type</th>
+    </tr>
+  </tbody>
+  <tbody class="list-item">
 % my $i = 0;
 % for my $lifecycle (@lifecycles) {
 % ++$i;
-  <div class="<% $i % 2 ? 'oddline' : 'evenline' %> form-row">
-    <div class="collection-as-table col-md-2"><a href="<% RT->Config->Get('WebURL') %>Admin/Lifecycles/Modify.html?Type=<% $lifecycle->Type |u %>&Name=<% $lifecycle->Name |u %>"><% $lifecycle->Name %></a></div>
-    <div class="collection-as-table col-md-auto"><% loc($lifecycle->Type) %></div>
-% my $display = $lifecycle->Type eq 'ticket' ? ($lifecycle->{data}{ticket_display} || 'hidden') : 'hidden';
-    <div class="collection-as-table col-md-auto"><% loc($display) %></div>
-  </div>
+    <tr class="<% $i % 2 ? 'oddline' : 'evenline' %>">
+      <td class="collection-as-table"><a href="<% RT->Config->Get('WebURL') %>Admin/Lifecycles/Modify.html?Type=<% $lifecycle->Type |u %>&Name=<% $lifecycle->Name |u %>"><% $lifecycle->Name %></a></td>
+      <td class="collection-as-table"><% loc($lifecycle->Type) %></td>
+    </tr>
 % }
-</div>
+  </tbody>
+</table>
 <%INIT>
 my @types = List::MoreUtils::uniq(
     'ticket',
diff --git a/share/html/Elements/Lifecycle/Graph b/share/html/Elements/Lifecycle/Graph
index 99e01f78e9..25f5e8d863 100644
--- a/share/html/Elements/Lifecycle/Graph
+++ b/share/html/Elements/Lifecycle/Graph
@@ -90,25 +90,34 @@
         var editor = new RT.NewEditor( container, config, configuration );
     });
   </script>
-  <div>
-    <label class="switch">Auto Layout
-      <input type="checkbox" name="enableSimulation" id="enableSimulation">
-    </label>
-    <p>
-      Click in the open space to <strong>add a node</strong>.
-      <br>
-      To <strong>delete</strong> a node click on the node to select it and press the 'd' key.
-      <br>
-      Drag from one node to another while holding <strong>control</strong> to <strong>add an edge</strong>.
-      <br>
-      Drag a node to <strong>move the graph layout</strong>.
-      <br>
-      Click a nodes text to <strong>edit attributes</strong> of the node.
-      <br>
-      <strong>Click an edge</strong> to interact with it.
-      <br>
-      To disable the simulation and drag nodes to a location without force acting on them click the "Auto Layout" checkbox.
-    </p>
+  <div class="row">
+    <div class="col-md-auto">
+      <span class="current-value form-control">
+        <div class="custom-control custom-checkbox">
+          <input class="custom-control-input" type="checkbox" id="enableSimulation" name="enableSimulation" />
+          <label class="custom-control-label" for="enableSimulation"><&|/l&>Auto Layout</&></label>
+        </div>
+      </span>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-md-auto">
+      <p>
+        Click in the open space to <strong>add a node</strong>.
+        <br>
+        To <strong>delete</strong> a node click on the node to select it and press the 'd' key.
+        <br>
+        Drag from one node to another while holding <strong>control</strong> to <strong>add an edge</strong>.
+        <br>
+        Drag a node to <strong>move the graph layout</strong>.
+        <br>
+        Click a nodes text to <strong>edit attributes</strong> of the node.
+        <br>
+        <strong>Click an edge</strong> to interact with it.
+        <br>
+        To disable the simulation and drag nodes to a location without force acting on them click the "Auto Layout" checkbox.
+      </p>
+    </div>
   </div>
 </div>
 

-----------------------------------------------------------------------


More information about the rt-commit mailing list