close #1

Author: tchiotludo

assets/css/main.scss

@@ -278,57 +278,97 @@ nav.navbar {
     Table
 \* ----------------------------------------------------------------------------------------------------------------- */
 table {
-    .main-row-action {
-        cursor: pointer;
-    }
-
-    th.row-action {
-        width: 16px;
-    }
+    tbody {
+        .main-row-action {
+            cursor: pointer;
+        }
 
-    td.row-action a {
-        color: $body-color;
-    }
+        th.row-action {
+            width: 16px;
+        }
 
-    pre {
-        white-space: pre-wrap;
-        overflow-wrap: break-word;
-        overflow: auto;
-        max-height: 150px;
+        td.row-action a {
+            color: $body-color;
+        }
 
-        code {
+        pre {
             white-space: pre-wrap;
             overflow-wrap: break-word;
-            word-break: break-all;
-        }
-    }
+            overflow: auto;
+            max-height: 100px;
+            cursor: pointer;
+            position: relative;
 
-    tr.deleted {
-        opacity: 0.5;
-    }
+            code {
+                white-space: pre-wrap;
+                overflow-wrap: break-word;
+                word-break: break-all;
+
+                &:after {
+                    content:'';
+                    width:100%;
+                    height:35px;
+                    position:absolute;
+                    left:0;
+                    bottom:0;
+                    background: linear-gradient(transparent, $gray-900);
+                }
+            }
+        }
 
-    .table.table-sm {
-        margin-top: calc(-#{$table-cell-padding});
-        width: calc(100% + (#{$table-cell-padding } * 2));
-        margin-left: -$table-cell-padding;
-        position: relative;
-        border-bottom: $table-border-width dashed $table-border-color;
-        font-size: $font-size-sm;
+        tr:hover {
+            pre code:after {
+                background: linear-gradient(transparent, $indigo);
+            }
+        }
 
-        td, th {
-            border: 0;
+        .hljs {
+            background: none;
         }
 
-        th {
-          border-right: $table-border-width dashed $table-border-color;
+        tr.hightlight {
+            &:hover {
+                background: none;
+            }
+
+            pre {
+                overflow: hidden;
+                max-height: none;
+                cursor: default;
+
+                code:after {
+                    display: none;
+                }
+            }
         }
 
-        tbody tr:nth-of-type(even) {
-            background-color: lighten($table-accent-bg, 0.1);
+        tr.deleted {
+            opacity: 0.5;
         }
 
-        tbody tr:nth-of-type(odd) {
-            background-color: lighten($table-bg, 0.1);
+        .table.table-sm {
+            margin-top: calc(-#{$table-cell-padding});
+            width: calc(100% + (#{$table-cell-padding } * 2));
+            margin-left: -$table-cell-padding;
+            position: relative;
+            border-bottom: $table-border-width dashed $table-border-color;
+            font-size: $font-size-sm;
+
+            td, th {
+                border: 0;
+            }
+
+            th {
+                border-right: $table-border-width dashed $table-border-color;
+            }
+
+            tbody tr:nth-of-type(even) {
+                background-color: lighten($table-accent-bg, 0.1);
+            }
+
+            tbody tr:nth-of-type(odd) {
+                background-color: lighten($table-bg, 0.1);
+            }
         }
     }
 }

assets/css/vendor.scss

@@ -5,4 +5,5 @@
 @import "../../node_modules/sweetalert2/src/sweetalert2";
 $bs-datetimepicker-btn-hover-bg: $gray-800;
 @import "../../node_modules/tempusdominus-bootstrap-4/src/sass/tempusdominus-bootstrap-4";
+@import "../../node_modules/highlight.js/styles/darkula.css";
 

assets/js/main.js

@@ -5,6 +5,7 @@ import swal from 'sweetalert2';
 import 'moment';
 import 'tempusdominus-bootstrap-4';
 import urijs from 'urijs';
+import hljs from 'highlight.js';
 
 turbolinks.start();
 turbolinks.setProgressBarDelay(0);
@@ -142,4 +143,28 @@ $(document).on('ready turbolinks:load', function () {
                 dateTimeSubmit($(this))
             }
     });
+
+    // Highlight
+    $('pre.highlight code').on('dblclick', function() {
+        let code = $(this);
+
+        if (code.closest('tr').hasClass("hightlight")) {
+            code.
+                removeClass()
+                .html(code.data('raw'))
+                .closest('tr')
+                .removeClass("hightlight")
+        } else {
+            code.data('raw', code.html());
+
+            try {
+                let json = JSON.parse(code.html());
+                code.html(JSON.stringify(json, null, 2));
+            } catch (e) {}
+
+            hljs.highlightBlock(code[0]);
+
+            code.closest('tr').addClass("hightlight");
+        }
+    });
 });

package-lock.json

@@ -6,6 +6,7 @@
   "dependencies": {
     "bootstrap": "^4.1.3",
     "font-awesome": "^4.7.0",
+    "highlight.js": "^9.13.1",
     "jquery": "^3.3.1",
     "moment": "^2.22.2",
     "popper.js": "^1.14.4",

package.json

@@ -144,7 +144,7 @@
                                 </#list>
                             </table>
                         </#if>
-                        <pre class="mb-0"><code>${data.getValue()!"null"}</code></pre>
+                        <pre class="mb-0 highlight"><code>${data.getValue()!"null"}</code></pre>
                     </td>
                 </tr>
             </#list>

public/blocks/topic/data.ftl

@@ -26,6 +26,7 @@ module.exports = (env, argv) => {
                 'moment',
                 'imports-loader?jQuery=>jQuery!tempusdominus-bootstrap-4',
                 'urijs',
+                'highlight.js',
                 path.join(srcDirectory, 'css/vendor.scss')
             ],
             main: [