Update tabular inlines

jet/static/jet/css/_changeform.scss

@@ -393,25 +393,19 @@ body.popup .submit-row {
   border-radius: 4px;
   border: 0;
 
-  fieldset.module {
-    background-color: inherit;
-    padding: 0;
-  }
-}
-
-.inline-group thead th {
+  thead th {
     padding: 8px 10px;
-}
+  }
 
-.inline-group .aligned label {
+  .aligned label {
     width: 160px;
+  }
 }
 
 .inline-related {
-    position: relative;
-}
+  position: relative;
 
-.inline-related h3 {
+  h3 {
     margin: 0;
     color: #666;
     padding: 5px;
@@ -419,107 +413,113 @@ body.popup .submit-row {
     background: #f8f8f8;
     border-top: 1px solid #eee;
     border-bottom: 1px solid #eee;
-}
 
-.inline-related h3 span.delete {
-    float: right;
-}
+    span.delete {
+      float: right;
 
-.inline-related h3 span.delete label {
-    margin-left: 2px;
-    font-size: 11px;
-}
+      label {
+        margin-left: 2px;
+        font-size: 11px;
+      }
+    }
+  }
 
-.inline-related fieldset {
+  fieldset {
     margin: 0;
     background: #fff;
-    border: none;
     width: 100%;
-}
 
-.inline-related fieldset.module h3 {
-    margin: 0;
-    padding: 2px 5px 3px 5px;
-    font-size: 11px;
-    text-align: left;
-    font-weight: bold;
-    background: #bcd;
-    color: #fff;
-}
+    &.module {
+      background-color: inherit;
+      padding: 0;
 
-.inline-group .tabular fieldset.module {
-    border: none;
+      h3 {
+        margin: 0;
+        padding: 2px 5px 3px 5px;
+        font-size: 11px;
+        text-align: left;
+        font-weight: bold;
+        background: #bcd;
+        color: #fff;
+      }
+    }
+  }
 }
 
 .inline-related.tabular fieldset.module table {
-    width: 100%;
+  width: 100%;
 }
 
-.last-related fieldset {
-    border: none;
-}
+.inline-group {
+  .tabular {
+    table {
+      box-shadow: none;
+      margin: 0;
+    }
 
-.inline-group .tabular tr.has_original td {
-    padding-top: 2em;
-}
+    thead th, thead td {
+      background: linear-gradient(to top, $content-background-color 0%, $content-contrast-background-color 100%);
+      font-weight: bold;
+      color: $text-color;
 
-.inline-group .tabular tr td.original {
-    padding: 2px 0 0 0;
-    width: 0;
-    _position: relative;
-}
+      a:link, a:visited {
+        color: $text-color;
+      }
+    }
 
-.inline-group .tabular th.original {
-    width: 0px;
-    padding: 0;
-}
+    td.original {
+      white-space: nowrap;
+      width: 1px;
 
-.inline-group .tabular td.original p {
-    position: absolute;
-    left: 0;
-    height: 1.1em;
-    padding: 2px 9px;
-    overflow: hidden;
-    font-size: 9px;
-    font-weight: bold;
-    color: #666;
-    _width: 700px;
-}
+      p {
+        padding: 0;
+
+        .inlinechangelink, .inlineviewlink {
+          font-size: 18px;
+          margin: 0;
+          vertical-align: middle;
+        }
+      }
+    }
+
+    tr.add-row td {
+      padding: 8px 10px;
+      border-bottom: 1px solid #eee;
+    }
+  }
 
-.inline-group ul.tools {
+  ul.tools {
     padding: 0;
     margin: 0;
     list-style: none;
-}
-
-.inline-group ul.tools li {
-    display: inline;
-    padding: 0 5px;
-}
 
-.inline-group div.add-row,
-.inline-group .tabular tr.add-row td {
-    color: #666;
-    background: #f8f8f8;
-    padding: 8px 10px;
-    border-bottom: 1px solid #eee;
-}
+    li {
+      display: inline;
+      padding: 0 5px;
+    }
+  }
 
-.inline-group .tabular tr.add-row td {
-    padding: 8px 10px;
-    border-bottom: 1px solid #eee;
-}
+  div.add-row, .tabular tr.add-row td {
+    padding: 16px;
+    border: 0;
+  }
 
-.inline-group ul.tools a.add,
-.inline-group div.add-row a,
-.inline-group .tabular tr.add-row td a {
-    background: url(../img/icon-addlink.svg) 0 1px no-repeat;
-    padding-left: 16px;
+  ul.tools a.add, div.add-row a, .tabular tr.add-row td a {
     font-size: 12px;
+    font-weight: bold;
+    vertical-align: middle;
+
+    &:before {
+      @include font-icon;
+      content: $icon-add;
+      vertical-align: middle;
+      margin-right: 4px;
+    }
+  }
 }
 
 .empty-form {
-    display: none;
+  display: none;
 }
 
 /* RELATED FIELD ADD ONE / LOOKUP */

jet/static/jet/css/_content.scss

@@ -243,6 +243,15 @@ p img, h1 img, h2 img, h3 img, h4 img, td img {
   }
 }
 
+.inlineviewlink {
+  &:before {
+    @include font-icon;
+    content: $icon-open-external;
+    vertical-align: middle;
+    margin-right: 4px;
+  }
+}
+
 /* BOOLEAN ICONS */
 
 img[src$="admin/img/icon-yes.gif"], img[src$="admin/img/icon-yes.svg"],

jet/static/jet/css/_tables.scss

@@ -27,6 +27,24 @@ table {
       }
     }
   }
+
+  thead th {
+    background: $content-contrast2-background-color;
+    color: $content-contrast2-text-color;
+    text-transform: uppercase;
+    @include transition(background-color $fast-transitions-duration);
+
+    a:link, a:visited {
+      color: $content-contrast2-text-color;
+    }
+
+    .text {
+      a {
+        display: block;
+        cursor: pointer;
+      }
+    }
+  }
 }
 
 td, th {
@@ -76,11 +94,6 @@ tbody tr {
 
 table {
   thead th {
-    background: $content-contrast2-background-color;
-    color: $content-contrast2-text-color;
-    text-transform: uppercase;
-    @include transition(background-color $fast-transitions-duration);
-
     &.sortable {
       cursor: pointer;
 
@@ -89,17 +102,6 @@ table {
       }
     }
 
-    a:link, a:visited {
-      color: $content-contrast2-text-color;
-    }
-
-    .text {
-      a {
-        display: block;
-        cursor: pointer;
-      }
-    }
-
     &.sorted {
       position: relative;
       padding-right: 32px;

jet/static/jet/js/src/layout-updaters/tabular-inline.js

@@ -0,0 +1,44 @@
+var $ = require('jquery');
+
+var TabularInlineUpdater = function($inline) {
+    this.$inline = $inline;
+};
+
+TabularInlineUpdater.prototype = {
+    updateOriginalCell: function() {
+        this.$inline.find('tr').each(function() {
+            var $container = $(this).find('td.original p');
+
+            $container.contents().each(function() {
+                var $node = $(this);
+
+                if ($node.get(0).nodeType == 3) {
+                    $node.remove();
+                    return;
+                }
+
+                if (!$node.hasClass('inlinechangelink')) {
+                    $node.addClass('inlineviewlink');
+                    return false;
+                }
+            });
+
+            $container.find('a').text('');
+        });
+    },
+    run: function() {
+        try {
+            this.updateOriginalCell();
+        } catch (e) {
+            console.error(e);
+        }
+
+        this.$inline.addClass('initialized');
+    }
+};
+
+$(document).ready(function() {
+    $('.inline-related.tabular').each(function() {
+        new TabularInlineUpdater($(this)).run();
+    });
+});

jet/static/jet/js/src/main.js

@@ -4,6 +4,7 @@ require('./layout-updaters/paginator');
 require('./layout-updaters/toolbar');
 require('./layout-updaters/user-tools');
 require('./layout-updaters/changeform-tabs');
+require('./layout-updaters/tabular-inline');
 require('./features/side-menu');
 require('./features/filters');
 require('./features/changeform-tabs');