@jseeio/jsee 0.2.4 → 0.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jseeio/jsee",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "",
   "main": "dist/jsee.js",
   "private": false,

package/src/app.js

@@ -75,6 +75,11 @@ function createVueApp (env, mountedCallback, logMain) {
     dataInit.outputs = []
   }
 
+  // Flag that shows if data was changed from initial conditions
+  dataInit.dataChanged = false
+  // Flag for autorun feedback
+  dataInit.clickRun = false
+
   function len(s) {
     return s.length;
   }
@@ -144,8 +149,9 @@ function createVueApp (env, mountedCallback, logMain) {
         deep: true,
         immediate: false,
         handler (v) {
+          this.dataChanged = true // Used in the reset button
           if (this.model.autorun) {
-            env.run()
+            this.run()
           }
         }
       }
@@ -160,9 +166,16 @@ function createVueApp (env, mountedCallback, logMain) {
       },
       reset () {
         resetInputs(this.inputs)
+        this.$nextTick(() => {
+          this.dataChanged = false
+        })
       },
       run () {
+        this.clickRun = true
         env.run()
+        setTimeout(() => {
+          this.clickRun = false
+        }, 150)
       },
       notify (msg) {
         env.notify(msg)

package/templates/bulma-app.vue

@@ -26,6 +26,7 @@
       justify-content: center;
     }
 
+
     .card-header {
       box-shadow: none;
       border-bottom: 1px solid #ececec;
@@ -50,6 +51,55 @@
         background-color: whitesmoke;
       }
     }
+
+    .card-footer {
+      /* background: linear-gradient(62deg, rgba(0,171,209,1) 0%, rgba(0,209,178,1) 100%); */
+      background: linear-gradient(90deg, #4395d0 0%, #00d1b2 100%);
+    }
+
+    .card-footer.reset {
+      background: linear-gradient(90deg, #ff577f 0%, #4395d0 50%, #00d1b2 100%);
+    }
+
+    .card-footer .button {
+      background: none;
+      padding: .75rem 1.5rem;
+      border: none !important;
+      font-size: 14px;
+      font-weight: 400;
+      border-radius: 0;
+    }
+
+    .reset-button {
+      justify-content: left;
+    }
+
+    .reset-button:hover {
+      background-color: transparent !important;
+      background: linear-gradient(90deg, #ff3a56 0%, #fff0 80%)
+    }
+
+    .card-footer .run-button {
+      border-left: 1px dashed white;
+      justify-content: right;
+    }
+
+    .card-footer .run-button:hover,{
+      background-color: transparent !important;
+      background: linear-gradient(270deg, #02dbb2 0%, #fff0 80%);
+    }
+
+    .card-footer .run-button.running .run-icon {
+      color: #016c5c !important;
+    }
+
+    .field {
+      margin-bottom: 5px;
+    }
+
+    .input, .textarea, .select select {
+      border-color: #e8e8e8;
+    }
   }
 </style>
 <template>
@@ -73,21 +123,22 @@
               <pre v-if="$parent.model.debug">{{ $parent.inputs }}</pre>
               <!-- <button class="button is-primary" id="run"><span>▸</span>&nbsp;&nbsp;Run</button> -->
             </div>
-            <footer class="card-footer">
+            <footer class="card-footer" v-bind:class="{ reset: $parent.dataChanged }">
               <button 
                 v-on:click="$parent.reset()"
-                v-if="$parent.inputs && $parent.inputs.length > 0"
-                class="button icon card-footer-item is-danger is-small"
+                v-if="$parent.inputs && $parent.inputs.length > 0 && $parent.dataChanged"
+                class="button reset-button icon card-footer-item is-danger is-small"
               >
-                <span class="has-text-danger-dark">✕</span>
+                <span class="rest-icon has-text-danger-dark">✕</span>
                 <span>&nbsp; Reset</span>
               </button>
               <button 
                 v-on:click="$parent.run()" 
-                class="button icon card-footer-item is-primary is-small"
+                class="button run-button icon card-footer-item is-primary is-small"
+                v-bind:class="{ running: $parent.clickRun }"
               >
-                <span class="has-text-primary-dark">▸</span>
-                <span>&nbsp; Run</span>
+                <span>&nbsp; Run &nbsp;</span>
+                <span class="run-icon has-text-primary-dark">▸</span>
               </button>
             </footer>
           </div>