feat: outline running cells.

ottomatica · Sep 7, 2020 · fb48269 · fb48269
1 parent eafdbde
commit fb48269
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 0 deletions.
diff --git a/public/js/notebook.js b/public/js/notebook.js
@@ -45,6 +45,10 @@ let running = false;
 function submitButtonSpinToggle() {
     running = !running;
     $('#submit-button').toggleClass('spinner-border spinner-border-sm');
+    if( running == false )
+    {
+        $('[data-docable="true"]').removeClass('docable-cell-running');
+    }
 }
 
 $('#submit').click(function () {
@@ -154,6 +158,8 @@ $('main').on('click', '.play-btn', function () {
     let stepIndex = $('pre[data-docable="true"]').index($(this).siblings('pre[data-docable="true"]'));
     let cell = $('[data-docable="true"]').eq(stepIndex);
 
+    cell.addClass( "docable-cell-running" );
+
     run(runEndpoint == '/run' ? '/runCell' : '/runhosted', JSON.stringify({ text: $(cell)[0].outerHTML, stepIndex: stepIndex, name: exampleName, pageVariables }), stepIndex);
 
 });

diff --git a/views/notebook.ejs b/views/notebook.ejs
@@ -27,6 +27,27 @@
         integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
         crossorigin="anonymous"></script>
 
+    <style>
+
+        @keyframes border-pulsate {
+            0% { outline-color: #ccfacc; }
+            /* 50% { outline-color: #0d7f0d; } */
+            100% { 
+                outline-color: #61EF61; 
+                box-shadow:
+                0 0 3px 1px #fff,  /* inner white */
+                0 0 10px 6px #ccfacc; /* outline bright */
+            } 
+        }
+
+        .docable-cell-running {
+            animation: border-pulsate 2s infinite;
+            outline-style: solid;
+            outline-width: 1px;
+        }
+
+    </style>
+
 </head>
 
 <body class="d-flex flex-column h-100">